zhongde-website/components/products/xcx.vue

<template>
    <section class="XcxPage-container">
        <div class="banner-img  ">
            <img src="http://res.training.luojigou.vip/Fqx9b6jma5oLcmANKrFUAlhyiV9e?imageView2/0/q/50|imageslim" alt="">
            <section class="label ">
                小程序课堂
            </section>
        </div>
        <slot></slot>
        <slot name="label"></slot>

        <div class="content">
            <div class="content-first wow animate__animated animate__lightSpeedInLeft">
                <div class="left">
                    <img src="http://res.training.luojigou.vip/Fr1pakSIAxm3LLHgAgMkHECAerAB?imageView2/0/q/50|imageslim" alt="">
                </div>
                <div class="right">
                    <h4>轻松找到课堂入口 创造优质 </h4>
                    <h4>学习体验</h4>
                    <div class="desc">微信首页任务栏等60+小程序入口，让10亿用户 轻松发现你</div>
                </div>
            </div>
            <div class="content-seconed wow animate__animated animate__lightSpeedInRight">
                <div class="left">
                    <h4>轻松找到课堂入口 创造优质 </h4>
                    <h4>学习体验</h4>
                    <div class="desc">微信首页任务栏等60+小程序入口，让10亿用户 轻松发现你</div>
                    
                </div>
                <div class="right">
                    <img src="http://res.training.luojigou.vip/FiiA82i4ori08A7Z8BbUdK8GMaxs?imageView2/0/q/50|imageslim" alt="">
                </div>
            </div>
        </div>
    </section>
</template>

<script>
if (process.browser) { 
    var {WOW} = require('wowjs')
  }
export default {
  name: 'XcxPage',
  mounted () {
    if (process.browser) { 
         new WOW({
              offset: 0,   
              live: true
        }).init()
    } 
  }
}
</script>
<style scoped lang="scss">
.XcxPage-container {
    .banner-img {
        position: relative;
        img {
             width: 100%;
            height: 881px;
        }
        .label {
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
            color: #ffffff;
            font-size: 80px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
    .content {
        width: 100%;
        height: 1792px;
      
        .content-first {
            display: flex;
            justify-content: space-between;
            padding: 173px 408px 138px 359px;
            color: #262626;
            background-color: #F7FBFF;
            .left {
                img {
                    width: 576px;
                    height: 585px;
                }
            }
            .right {
                display: flex;
                flex-direction: column;
                justify-content: center;
                h4 {
                    font-size: 30px;
                }
                .desc {
                    width: 385px;
                    color: #3A3A3A;
                    font-size: 18px;
                    margin-top: 44px;
                    line-height: 30px;

                }
            }
        }
        .content-seconed {
            display: flex;
            justify-content: space-between;
            padding: 153px 335px 138px 359px;
            color: #262626;
            .left {
                display: flex;
                flex-direction: column;
                justify-content: center;
                h4 {
                    font-size: 30px;
                }
                .desc {
                    width: 385px;
                    color: #3A3A3A;
                    font-size: 18px;
                    margin-top: 44px;
                    line-height: 30px;

                }
            }
            .right {
                img {
                    width: 664px;
                    height: 581px;
                }
            }
        }
    }
}
</style>