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

        <div class="content">
            <div class="content-seconed wow animate__animated animate__lightSpeedInLeft">
                <div class="left">
                    <img src="http://res.training.luojigou.vip/Fs3zdJkuqy3nCEw9LIeUtQXqAv8H?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-first wow animate__animated animate__lightSpeedInRight">
                <div class="left">
                    <h4>一键转发，让课堂在微信中</h4>
                    <h4>自由传播</h4>
                    <div class="desc">课堂可分享至微信朋友圈、微信社群等等位置， 便于用户分享好物，闲余赚取佣金</div>
                    
                </div>
                <div class="right">
                    <img src="http://res.training.luojigou.vip/FuW2h91DrcKLqAi_23_KDxxf0sv5?imageView2/0/q/50|imageslim" alt="">
                </div>
            </div>
        </div>
    </section>
</template>

<script>
if (process.browser) { 
    var {WOW} = require('wowjs')
  }
export default {
    name: 'H5Page',
    mounted () {
        if (process.browser) { 
            new WOW({
                offset: 0,   
                live: true
            }).init()
        } 
    }
}
</script>
<style scoped lang="scss">
.H5-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;
            .right {
                img {
                    width: 576px;
                    height: 585px;
                }
            }
            .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;

                }
            }
        }
        .content-seconed {
            display: flex;
            justify-content: space-between;
            padding: 153px 335px 138px 359px;
            color: #262626;
            .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;

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