zhongde-website/components/products/pc.vue

<template>
  <div class="pc-container">
    <!-- <div class="banner-img">
      <img
        :src="bannerImg"
        alt=""
      >
      <section class="label">PC端独立课堂</section>
    </div> -->
    <slot></slot>
    <slot name="label"></slot>
    <div class="content">
      <div class="first">
        <img
          src="~/assets/images/products/pc_img_first.png"
          alt="">
      </div>
      <div class="seconed">
        <div class="label">更适合中国宝宝的儿童智能发展测评</div>
        <div class="seconed-box">
          <div
            :class="['seconed-item']"
            v-for="item in showList"
            :key="item.id"
          >
            <img :src="item.imgUrl" alt="">
          </div>
        </div>
      </div>
      <div class="thirdly">
        <img
          src="~/assets/images/products/pc_img_second.png"
          alt=""
        >
      </div>
    </div>
  </div>
</template>

<script>
const showList = Object.freeze([
  {
    id: 0,
    imgUrl: require('~/assets/images/products/pc_dev_01.png'),
  },
  {
    id: 1,
    imgUrl: require('~/assets/images/products/pc_dev_02.png'),
  },
  {
    id: 2,
    imgUrl: require('~/assets/images/products/pc_dev_03.png'),
  },
]);
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,
      bannerImg: require('~/assets/images/products/banner-pc.png')
    };
  },
};
</script>
<style scoped lang="scss">
.pc-container {
  .banner-img {
    position: relative;
    img {
      width: 100%;
      height: 595px;
    }
    .label {
      font-family: PingFangSC-Semibold, sans-serif;
      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, sans-serif;
        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>