zhongde-website/pages/product/list.vue

<template>
  <div class="cate">
    <!-- 头部banner -->
    <common-banner :img="bannerImg"></common-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>
import CommonBanner from '@/components/common/banner';

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: '思维魔法我的pad-lvk系列',
          desc: 'Lvk源自德国具有170年发展历史的Westermann Group 教育集团',
          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: {
    CommonBanner
  }
  ,
  mounted () {
  },
  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>