zhongde-website/components/products/label.vue

<template>
    <section class="Label-container">
            <div class="label-item  wow animate__animated animate__fadeInDown">
                <img :src="labelProps.imgUrl" alt="">
                <section class="label">
                    {{labelProps.label}}
                </section>
                <section class="first-desc">
                    {{labelProps.firstText}}
                </section>
                <section class="secoend-desc">
                    {{labelProps.secoendText}}
                </section>
            </div>
    </section>
</template>

<script>
if (process.browser) { 
    var {WOW} = require('wowjs')
  }
export default {
    name: 'LabelPage',
    props: {
        labelProps: {
            type: Object,
            required: true 
        }
    },

    mounted () {
    if (process.browser) { 
         new WOW({
              offset: 0,   
              live: true
        }).init()
    } 
  }
}
</script>
<style scoped lang="scss">
.Label-container {
    margin-top: 106px;
    display: flex;
    justify-content: center;
    .label-item {
        position: relative;
        color: #262626;
        font-size: 24px;
        font-family:PingFangSC-Semibold,PingFang SC;
        font-weight:400;
 
    
      
        img {
            width: 298px;
            height: 56px;
            position: absolute;
            transform: translateX(-36%);
         
        }
        .label {
            font-size: 58px;
            letter-spacing: 1.5px;
            margin-top: 10px;
            font-weight:600;
        }
        .first-desc {
            margin-top: 40px;
            margin-bottom: 18px;
            text-align: center;
        }
        .secoend-desc {
             text-align: center;
        }
    }
}
</style>