zhongde-website/components/products/parent.vue

<template>
  <section class="Parent-container">
    <div class="banner-img">
      <img
        src="http://res.training.luojigou.vip/FlpLqC_a2wOuyJqG7LiOb2tbmUZP?imageView2/0/q/50|imageslim"
        alt=""
      >
      <section class="label">家长端APP</section>
    </div>
    <slot></slot>
    <slot name="label"></slot>
    <div class="content">
      <img
        src="http://res.training.luojigou.vip/lrW91RgYOMu18CYaH3qDbSUVE2bi?imageView2/0/q/50|imageslim"
        alt=""
      >
      <div class="content-list">
        <div class="content-list-one w1200 wow animate__animated animate__lightSpeedInRight">
          <div class="left">
            <img
              src="http://res.training.luojigou.vip/FjidkWaOJvx87vZHje3VpIYyNaeV?imageView2/0/q/50|imageslim"
              alt=""
            >
          </div>
          <div class="right">
            <div class="label">逻辑狗家长端记录为家长提</div>
            <div class="label">供宝宝成长记录</div>
            <div class="desc">点击下方下载苹果端和安卓端app，立即体验</div>
            <div class="download">
              <img
                src="http://res.training.luojigou.vip/Fl_0R6Bwy75ByXLhmm2b1cpknZEv?imageView2/0/q/50|imageslim"
                alt=""
              >
              <img
                src="http://res.training.luojigou.vip/FvhOJGHagsZ2wuo3Fc3YAuL_z_g0?imageView2/0/q/50|imageslim"
                alt=""
              >
            </div>
          </div>
        </div>
        <div class="content-list-two w1200 wow animate__animated animate__lightSpeedInLeft">
          <div class="left">
            <div class="label">购买课程，更加便捷流畅的 抢课体验</div>
            <div class="desc">页面展示课程列表，实时展示课程的最新上线， 提供最优质的抢课体验</div>
          </div>
          <div class="right">
            <img
              src="http://res.training.luojigou.vip/Fm096zbH-x0IxAcT8IinoIHeMCoi?imageView2/0/q/50|imageslim"
              alt=""
            >
          </div>
        </div>
        <div class="content-list-three w1200 wow animate__animated animate__lightSpeedInRight">
          <div class="left">
            <img
              src="http://res.training.luojigou.vip/Fv4R4SZiqrVipdyYDlwhKJ4vTjIE?imageView2/0/q/50|imageslim"
              alt=""
            >
          </div>
          <div class="right">
            <div class="label">购物商城，展现逻辑狗的系 列产品</div>
            <div class="desc">精细的产品分类，你最短时间找到自己需要的 产品</div>
          </div>
        </div>
        <div class="content-list-four w1200 wow animate__animated animate__lightSpeedInLeft">
          <div class="left">
            <div class="label">购物商城，展现逻辑狗的系 列产品</div>
            <div class="desc">精细的产品分类，你最短时间找到自己需要的 产品</div>
          </div>
          <div class="right">
            <img
              src="http://res.training.luojigou.vip/FkdjYnOvv_62O27MOTJJ5Kmco6U8?imageView2/0/q/50|imageslim"
              alt=""
            >
          </div>
        </div>
        <div class="content-list-five w1200 wow animate__animated animate__lightSpeedInRight">
          <div class="left">
            <img
              src="http://res.training.luojigou.vip/Fs6eujHZZwUgrrGDANQ3vdhR-mpG?imageView2/0/q/50|imageslim"
              alt=""
            >
          </div>
          <div class="right">
            <div class="label">购物商城，展现逻辑狗的系 列产品</div>
            <div class="desc">精细的产品分类，你最短时间找到自己需要的 产品</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
if (process.browser) {
  var { WOW } = require("wowjs");
}
export default {
  name: "ParentPage",
  data() {
    return {
      // showList,
      bannerImg: require('~/assets/images/products/banner-app.png')
    };
  },
  mounted() {
    if (process.browser) {
      new WOW({
        offset: 0,
        live: true,
      }).init();
    }
  },
};
</script>
<style scoped lang="scss">
.Parent-container {
  .content-list {
    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .label {
        height: 74px;
        font-size: 26px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 37px;
      }
      .desc {
        width: 325px;
        height: 30px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 30px;
        margin-top: 42px;
        font-size: 18px;
      }
      img {
        width: 601px;
        height: 586px;
      }
    }
  
    .right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .label {
        height: 74px;
        font-size: 26px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 37px;
      }
      .desc {
        width: 388px;
        margin-top: 42px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(58, 58, 58, 1);
      }
      // img {
      //   width: 601px;
      //   height: 586px;
      // }
    }
  }

  .banner-img {
    position: relative;
    img {
      width: 100%;
      height: 595px;
    }
    .label {
      width: 237px;
      height: 65px;
      font-size: 46px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #262626;
      line-height: 65px;
      letter-spacing: 1px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .content {
    position: relative;
    z-index: -1;
    top: -653px;
    img {
      width: 100%;
      height: 5210px;
      // position: absolute;
      // z-index: 0;
    }
    .content-list {
      width: 100%;
      position: absolute;
      top: 883px;
      left: 0;
      // padding: 0 344px;
      box-sizing: border-box;
      .content-list-one {
        display: flex;
        justify-content: space-between;
        .left {
          // img {
          //   width: 601px;
          //   height: 586px;
          // }
        }
        .right {
          display: flex;
          flex-direction: column;
          justify-content: center;
          // .label {
          //   width: 369px;
          //   height: 84px;
          //   color: #262626;
          //   font-size: 30px;
          //   font-family: PingFangSC-Semibold, PingFang SC;
          //   font-weight: 600;
          // }
          // .desc {
          //   margin-top: 42px;
          //   font-size: 18px;
          //   font-family: PingFangSC-Regular, PingFang SC;
          //   font-weight: 400;
          //   color: rgba(58, 58, 58, 1);
          // }
          .download {
            margin-top: 81px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            img {
              width: 161px;
              height: 41px;
            }
          }
          .download img:first-child {
            margin-bottom: 25px;
          }
        }
      }
      .content-list-two {
        display: flex;
        justify-content: space-between;
        margin-top: 291px;
        .right {
          img {
            width: 601px;
            height: 586px;
          }
        }
        // .left {
        //   display: flex;
        //   flex-direction: column;
        //   justify-content: center;
        //   .label {
        //     width: 369px;
        //     height: 84px;
        //     color: #262626;
        //     font-size: 30px;
        //     font-family: PingFangSC-Semibold, PingFang SC;
        //     font-weight: 600;
        //   }
        //   .desc {
        //     width: 388px;
        //     margin-top: 42px;
        //     font-size: 18px;
        //     font-family: PingFangSC-Regular, PingFang SC;
        //     font-weight: 400;
        //     color: rgba(58, 58, 58, 1);
        //   }
        // }
      }
      .content-list-three {
        display: flex;
        justify-content: space-between;
        margin-top: 291px;
        .left {
          img {
            width: 601px;
            height: 586px;
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .label {
            width: 369px;
            height: 84px;
            color: #262626;
            font-size: 30px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
          }
          .desc {
            width: 388px;
            margin-top: 42px;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(58, 58, 58, 1);
          }
        }
      }
      .content-list-four {
        display: flex;
        justify-content: space-between;
        margin-top: 291px;
        .right {
          img {
            width: 601px;
            height: 586px;
          }
        }
        .left {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .label {
            width: 369px;
            height: 84px;
            color: #262626;
            font-size: 30px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
          }
          .desc {
            width: 388px;
            margin-top: 42px;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(58, 58, 58, 1);
          }
        }
      }
      .content-list-five {
        display: flex;
        justify-content: space-between;
        margin-top: 291px;
        .left {
          img {
            width: 601px;
            height: 586px;
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .label {
            width: 369px;
            height: 84px;
            color: #262626;
            font-size: 30px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
          }
          .desc {
            width: 388px;
            margin-top: 42px;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(58, 58, 58, 1);
          }
        }
      }
    }
  }
}
</style>