zhongde-website/components/products/pc.vue

<template>
    <div class="pc-container">
        <div class="banner-img">
            <img src="http://res.training.luojigou.vip/Fs-85Klc65pz1Q8Ew3l4hCRL0Bl_?imageView2/0/q/50|imageslim" alt="">
        </div>
        <slot></slot>
        <slot name="label"></slot>
        <div class="content">
            <div class="first">
                <img class="wow animate__animated animate__fadeIn" src="http://res.training.luojigou.vip/FjaqSRvcd-eDx0ilHzjzHnH1dGEu?imageView2/0/q/50|imageslim" alt="">
            </div>
            <div class="seconed">
                <div class="label wow animate__animated animate__zoomIn ">
                    更适合中国宝宝的儿童智能发展测评
                </div>
                <div class="seconed-box">
                    <div :class="['seconed-item', 'wow', 'animate__animated', item.id === 0 ? 'animate__lightSpeedInLeft' :  item.id === 2? 'animate__lightSpeedInRight' : '']" v-for="item in showList" :key="item.id">
                        <img :src="item.imgUrl" alt="">
                    </div>
                </div>
                
            </div>
            <div class="thirdly ">
                <img class="wow animate__animated animate__fadeIn" src="http://res.training.luojigou.vip/Fq48NMcIKjcZ3q9QsRP5gCsJE-iI?imageView2/0/q/50|imageslim" alt="">
            </div>
        </div>
    </div>
</template>

<script>
const showList = Object.freeze([
    {
        id: 0,
        imgUrl: 'http://res.training.luojigou.vip/FulDF_nG72IeWTpKp7E5bPLOxCtD?imageView2/0/q/50|imageslim'
    },
    {
        id: 1,
        imgUrl: 'http://res.training.luojigou.vip/FgXDTYm7v_lHKcRcBUrWqHeWYO5g?imageView2/0/q/50|imageslim'
    },
    {
        id: 2,
        imgUrl: 'http://res.training.luojigou.vip/FhUiaX9NKvT1burST2gG7KNzmCQx?imageView2/0/q/50|imageslim'
    },
])
if (process.browser) { 
    var {WOW} = require('wowjs')
  }
export default {
    name: 'PcPage',
    mounted () {
        if (process.browser) { 
            new WOW({
                offset: 0,   
                live: true
            }).init()
        } 
    },
    data () {
        return {
            showList
        }
    }
}
</script>
<style scoped lang="scss">
.pc-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 {
        .first {
            display: flex;
            justify-content: center;
            img {
                width: 1334px;
                height: 887px;
            }
        }
        .seconed {
            width: 100%;
            height: 607px;
            background-color: #F7FBFF;
            padding-top: 52px;
            box-sizing: border-box;
            .label {
                font-size:48px;
                font-family:PingFangSC-Semibold,PingFang SC;
                font-weight:600;
                color:rgba(38,38,38,1);
                letter-spacing:1px;
                text-align: center;
                margin-bottom: 118px;
            }
            .seconed-box {
               
                display: flex;
                justify-content: center;
                
                .seconed-item {
                    img {
                        width: 414px;
                        height: 302px;
                    }
                }
            }
        }
        .thirdly {
            height: 900px;
            display: flex;
            justify-content: center;
            padding-top: 100px;
            box-sizing: border-box;
            img {
                width: 1328px;
                height: 569px;
            }
        }
    }
}
</style>