zhongde-website/pages/product/list.vue

<template>
  <div class="cate">
    <!-- 头部banner -->
    <div class="common-banner"><img :src="bannerImg" alt="" srcset=""></div>
    <div class="cate-list">
      <div :class="[`cate-bg cate${index + 1}`, index % 2 == 0 ? 'bg-white' : 'bg-silver']" v-for="(item, index) in cateList" :key="index">
        <div :class="['w1200 cate-item']" >
          <div class="item-content" v-if="index % 2 == 0">
            <div class="item-left">
              <img :src="item.imgUrl" v-scroll-reveal.reset="{ origin: 'left', distance: '100px', duration: 1500 }" data-scroll-reveal="enter left and move 100px over 1.5s" alt="" srcset="">
            </div>
            <div class="item-right">
              <div class="title" v-scroll-reveal.reset="{ delay: 250, origin: 'top', distance: '40px', easing: 'ease-in-out', duration: 1000 }">{{item.title}}</div>
              <div class="dec" v-scroll-reveal.reset="{ delay: 350, origin: 'bottom', distance: '30px', duration: 1000 }">{{item.desc}}</div>
              <div class="btn"  v-scroll-reveal.reset="{ delay: 450, easing: 'ease-in-out', scale: 0.85 }" @click="navPage(item)">了解详情</div>
            </div>
          </div>
          <div class="item-content" v-else>
            <div class="item-left">
              <div class="title" v-scroll-reveal.reset="{ origin: 'right', distance: '80px', duration: 1000, easing: 'ease-in-out' }" data-scroll-reveal="enter right and move 80px over 1s" >{{item.title}}</div>
              <div class="dec" v-scroll-reveal.reset="{ delay: 350, origin: 'left', distance: '40px', duration: 1000 }" data-scroll-reveal="wait 0.35s, then enter left and move 40px over 1s">{{item.desc}}</div>
              <div class="btn"  v-scroll-reveal.reset="{ delay: 450, easing: 'ease-in-out', scale: 0.85 }" @click="navPage(item)">了解详情</div>
            </div>
            <div class="item-right">
              <img v-scroll-reveal.reset="{ delay: 550, origin: 'right', distance: '80px', duration: 1000 }" data-scroll-reveal="wait 0.55s, then enter right and move 80px over 1s" :src="item.imgUrl" alt="" srcset="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var slideUp = {
  distance: '150%',
  origin: 'bottom',
  opacity: null
};

export default {
  name: 'ListPage',
  computed: {},
  head() {
    return {
      title: "逻辑狗官网-中德智慧教育",
      meta: [
        {
          name: "keywords",
          hid: "keywords",
          content: `逻辑狗官网、逻辑狗教材、 幼儿园教材、逻辑狗课程、逻辑狗思维训练课程、儿童思维教育、0-12岁儿童`,
        },
        {
          name: "description",
          hid: "description",
          content: `逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台`,
        },
      ],
    };
  },
  data () {
    return {
      bannerImg: require('~/assets/images/products/product_banner.png'),
      cateList: [
        {
          type: 1,
          title: '逻辑狗-思维游戏系列',
          desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式',
          imgUrl:  require('~/assets/images/products/cate_img_01@2x.png'),
          url: '1'
        },
        {
          type: 2,
          title: '逻辑狗-思维游戏系列',
          desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
          imgUrl:  require('~/assets/images/products/cate_img_02@2x.png'),
          url: '2'
        },
        {
          type: 3,
          title: '逻辑狗-思维游戏系列',
          desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
          imgUrl:  require('~/assets/images/products/cate_img_03@2x.png'),
          url: '3'
        },
        {
          type: 4,
          title: '逻辑狗-思维游戏系列',
          desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
          imgUrl:  require('~/assets/images/products/cate_img_04@2x.png'),
          url: '4'
        },
        {
          type: 5,
          title: '逻辑狗-思维游戏系列',
          desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
          imgUrl:  require('~/assets/images/products/cate_img_05@2x.png'),
          url: '5'
        },
        {
          type: 6,
          title: '逻辑狗-思维游戏系列',
          desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
          imgUrl: require('~/assets/images/products/cate_img_06@2x.png'),
          url: '6'
        },
        {
          type: 7,
          title: '逻辑狗-思维游戏系列',
          desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
          imgUrl: require('~/assets/images/products/cate_img_07@2x.png'),
          url: '7'
        },
        {
          type: 8,
          title: '逻辑狗-思维游戏系列',
          desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
          imgUrl: require('~/assets/images/products/cate_img_08@2x.png'),
          url: '8'
        }
      ]
    }
  },
  components: {},
  mounted () {
    // this.scrollReveal.reveal('item-content .title', slideUp);
  },
  methods: {
    navPage(item) {
      this.$router.push({ path: '/product/detail', query: {
        id: item.url
      } });
    }
  }

}
</script>

<style scoped lang="scss">
@import "~static/common/style.sass";
$bg-silver: #F7FBFF;
$bg-white: #FFFFFF;
.common-banner {
  width: 100%;
  height: 521px;
  position: relative;
  font-size: 0;
  img {
    position: absolute;
    top: 0px;
    left: 50%;
    bottom: 0px;
    right: 0px;
    z-index: 1;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    max-width: 2560px;
    max-height: 521px;
    height: 521px;
    display: block;
  }
}

.cate-list {
  .cate-bg {
    width: 100%;
    height: 530px;
  }
  .cate-item {
    height: 100%;
    .item-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      img {
        width: 639px;
        height: 400px;
        display: block;
      }
      
    }
    .title {
      width: 558px;
      font-size: 34px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 48px;
      margin-bottom: 29px;
    }
    .dec {
      width: 558px;
      height: 47px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 24px;
    }
    .btn {
      width: 100px;
      height: 30px;
      background: #0D5CFA;
      box-shadow: 0px 4px 11px 0px rgba(115, 161, 253, 0.6);
      border-radius: 23px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFFFFF;
      margin-top: 40px;
      cursor: pointer;
    }
    .item-right {
      font-size: 0;
      display: flex;
      flex-direction: column;
      .title {
        text-align: right;
      }
      .btn {
        align-self: flex-end;
      }
    }
    .item-left {
      font-size: 0;
      .btn {

      }
    }
  }
  .bg-silver {
    background: $bg-silver; 
  }
  .bg-white {
    background: $bg-white;
  }
}
</style>