zhongde-website/pages/product/list.vue

<template>
  <div class="cate">
    <!-- 头部banner -->
    <!-- <common-banner :img="bannerImg"></common-banner> -->
    <div class="cate-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 }">
                <p>{{item.desc}}</p>
              </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">
                <p>{{item.desc}}</p>
              </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: '3-7岁幼儿系列/幼小衔接系列',
          desc: '幼儿启蒙时期，以唤醒儿童好奇心为主要目标，真正的把数学、观察力、语言、智力、逻辑思维能力以游戏的方式融合在一起，让孩子有效提升。',
          imgUrl:  require('~/assets/images/products/cate_img_01@2x.png'),
          url: '1'
        },
        {
          type: 2,
          title: '7-12岁小学基础班/提升版',
          desc: '以设计的科学性、系统性、内容丰富性、完整性和玩法的负特性、趣味性，吸引着孩子们。',
          imgUrl:  require('~/assets/images/products/cate_img_02@2x.png'),
          url: '2'
        },
        {
          type: 3,
          title: '3-12岁思考技巧升级系列',
          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'
        // },
        {
          type: 9,
          title: '聪明书-儿童注意力品质发展系列',
          desc: '以“行动、视觉、知觉”行动为媒介，有效改善儿童不专心走神、马虎、坐不住、记忆力等不良习惯，科学的发展孩子的注意力、观察、分类、想象、空间、推理、数理逻辑、语言表达、手眼协调、知识迁移能力。',
          imgUrl: require('~/assets/images/products/cate_img_09@2x.png'),
          url: '9'
        }
      ]
    }
  },
  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;
.cate-banner {
  width: 100%;
  background: #0D5CFA;
  font-size: 0;
  text-align: center;
  img {
    width: 1325px;
    height: 521px;
  }
}
// .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;
      line-height: 24px;
      p {
        color: #666666;
      }
    }
    .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;
      text-align: right;
      .title {
        text-align: right;
      }
      .dec {
        text-align: right;
        p {
          text-align: justify;
          display: inline-block;
        }
      }
      .btn {
        align-self: flex-end;
      }
    }
    .item-left {
      font-size: 0;
      .btn {

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