'商品分类'

components/common/banner.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="common-banner"><img :src="img" alt="" srcset=""></div>
+</template>
+
+<script>
+export default {
+  props: {
+    img: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      // bannerImg: require('~/assets/images/products/product_banner.png')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.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;
+  }
+}
+</style>

pages/product/data.js

@@ -0,0 +1,256 @@
+const cateData = [
+  {
+    id: 1,
+    title: '逻辑狗系列',
+    desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式',
+    cateImg: require('~/assets/images/products/cate_banner_01.png'),
+    productList: [
+      {
+        title: '逻辑狗-思维游戏系列',
+        productImg: require('~/assets/images/goods/product_jc_01.jpg'),
+      },
+      {
+        title: '逻辑狗-思维游戏系列',
+        productImg: require('~/assets/images/goods/product_jc_01.jpg'),
+      },
+      {
+        title: '逻辑狗-思维游戏系列',
+        productImg: require('~/assets/images/goods/product_jc_01.jpg'),
+      },
+      {
+        title: '逻辑狗-思维游戏系列',
+        productImg: require('~/assets/images/goods/product_jc_01.jpg'),
+      },
+      {
+        title: '逻辑狗-思维游戏系列',
+        productImg: require('~/assets/images/goods/product_jc_01.jpg'),
+      },
+      {
+        title: '逻辑狗-思维游戏系列',
+        productImg: require('~/assets/images/goods/product_jc_01.jpg'),
+      },
+    ]
+  },
+  {
+    id: 2,
+    title: '春夏秋冬系列',
+    desc: '包含 春夏秋冬·画册；春夏秋冬·画卷；春夏秋冬·主题故事；春夏秋冬·游戏与手工；春夏秋冬·夏夜；春夏秋冬·格林童话故事',
+    cateImg: require('~/assets/images/products/cate_banner_02.png'),
+    productList: [
+      {
+        title: '春夏秋冬系列',
+        productImg: require('~/assets/images/goods/product_net_06.jpg'),
+      },
+      {
+        title: '春夏秋冬系列',
+        productImg: require('~/assets/images/goods/product_net_06.jpg'),
+      },
+      {
+        title: '春夏秋冬系列',
+        productImg: require('~/assets/images/goods/product_net_06.jpg'),
+      },
+      {
+        title: '春夏秋冬系列',
+        productImg: require('~/assets/images/goods/product_net_06.jpg'),
+      },
+      {
+        title: '春夏秋冬系列',
+        productImg: require('~/assets/images/goods/product_net_06.jpg'),
+      },
+    ]
+  },
+  {
+    id: 3,
+    title: '聪明书系列',
+    desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
+    cateImg: require('~/assets/images/products/cate_banner_03.png'),
+    productList: [
+      {
+        title: '聪明书系列',
+        productImg: require('~/assets/images/goods/product_net_06.jpg'),
+      },
+      {
+        title: '聪明书系列',
+        productImg: require('~/assets/images/goods/product_net_06.jpg'),
+      },
+      {
+        title: '聪明书系列',
+        productImg: require('~/assets/images/goods/product_net_06.jpg'),
+      },
+      {
+        title: '聪明书系列',
+        productImg: require('~/assets/images/goods/product_net_06.jpg'),
+      },
+      {
+        title: '聪明书系列',
+        productImg: require('~/assets/images/goods/product_net_06.jpg'),
+      },
+      {
+        title: '聪明书系列',
+        productImg: require('~/assets/images/goods/product_net_06.jpg'),
+      },
+    ]
+  },
+  {
+    id: 4,
+    title: '逻辑狗-入学准备系列',
+    desc: '思维语言；思维数学；学习起跑线系列',
+    cateImg: require('~/assets/images/products/cate_banner_04.png'),
+    productList: [
+      {
+        title: '入学准备系列',
+        productImg: require('~/assets/images/goods/product_jc_03.jpg'),
+      },
+      {
+        title: '入学准备系列',
+        productImg: require('~/assets/images/goods/product_jc_03.jpg'),
+      },
+      {
+        title: '入学准备系列',
+        productImg: require('~/assets/images/goods/product_jc_03.jpg'),
+      },
+      {
+        title: '入学准备系列',
+        productImg: require('~/assets/images/goods/product_jc_03.jpg'),
+      },
+      {
+        title: '入学准备系列',
+        productImg: require('~/assets/images/goods/product_jc_03.jpg'),
+      },
+      {
+        title: '入学准备系列',
+        productImg: require('~/assets/images/goods/product_jc_03.jpg'),
+      },
+    ]
+  },
+  {
+    id: 5,
+    title: '思维魔法我的pad-lvk系列',
+    desc: 'Lvk源自德国具有170年发展历史的Westermann Group 教育集团',
+    cateImg: require('~/assets/images/products/cate_banner_05.png'),
+    productList: [
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_jc_05.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_jc_05.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_jc_05.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_jc_05.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_jc_05.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_jc_05.jpg'),
+      },
+    ]
+  },
+  {
+    id: 6,
+    title: '与克鲁德一起听说读系列',
+    desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
+    cateImg: require('~/assets/images/products/cate_banner_06.png'),
+    productList: [
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_ts_01.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_ts_01.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_ts_01.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_ts_01.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_ts_01.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_ts_01.jpg'),
+      },
+    ]
+  },
+  {
+    id: 7,
+    title: '蚂蚁沙丘系列',
+    desc: '《幼儿园情景科学教育课程-与弗雷德一起探索》是德国著名儿童科学教育专家季泽拉·吕克经过几十年潜心研究和实践编写的一套以培养儿童科学素养为目标的教育课程。针对目前国内幼儿科学教育的现状，经过本土化研发在我国出版，其系统完善，绘画精美，简单易操作',
+    cateImg: require('~/assets/images/products/cate_banner_07.png'),
+    productList: [
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_jc_01.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_jc_01.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_jc_01.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_jc_01.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_jc_01.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_jc_01.jpg'),
+      },
+    ]
+  },
+  {
+    id: 8,
+    title: '中华小熊猫系列',
+    desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
+    cateImg: require('~/assets/images/products/cate_banner_08.png'),
+    productList: [
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_net_03.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_net_03.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_net_03.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_net_03.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_net_03.jpg'),
+      },
+      {
+        title: '思维魔法我的pad-lvk系列',
+        productImg: require('~/assets/images/goods/product_net_03.jpg'),
+      },
+    ]
+  },
+]
+
+export default cateData;

pages/product/detail.vue

@@ -1,24 +1,213 @@
 <template>
   <div class="detail">
-    
+    <common-banner :img="bannerImg"></common-banner>
+    <!-- 分类 -->
+    <div class="tabList w1200">
+      <div :class="['tab-item', currentTab == item.id ? 'active' : '' ]" v-for="(item, index) in tabList" :key="index" @click="handleClick(item)">
+        {{item.title}}
+        <span></span>
+      </div>
+    </div>
+
+    <!-- 分类图 -->
+    <div class="cate-img w1200">
+      <img v-if="currenCate" :src="currenCate.cateImg" alt="" srcset="">
+    </div>
+
+    <!-- 分类信息 -->
+    <div class="cate-main">
+      <div class="cate-content w1200">
+        <div class="cate-title">{{ currenCate.title }}</div>
+        <div class="cate-des">{{ currenCate.desc }}</div>
+        <div class="cate-product-list">
+          <div class="product-item" v-for="(item, index) in currenCate.productList" :key="index">
+            <div class="img-wrap"><img :src="item.productImg" alt="" srcset=""></div>
+            <div class="title">{{ item.title }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import CommonBanner from '@/components/common/banner';
+import cateData from './data.js';
 export default {
   data() {
     return {
-
+      currentTab: 1,
+      currenCate: {},
+      bannerImg: require('~/assets/images/products/product_banner.png'),
+      cateImg: require('~/assets/images/products/cate_banner_01.png'),
+      productImg: require('~/assets/images/goods/product_jc_01.jpg'),
+      tabList: [
+        {
+          id: 1,
+          title: '逻辑狗系列',
+        },
+        {
+          id: 2,
+          title: '春夏秋冬系列',
+        },
+        {
+          id: 3,
+          title: '聪明书系列',
+        },
+        {
+          id: 4,
+          title: '逻辑狗-入学准备系列',
+        },
+        {
+          id: 5,
+          title: '思维魔法我的pad-lvk系列',
+        },
+        {
+          id: 6,
+          title: '与克鲁德一起听说读系列',
+        },
+        {
+          id: 7,
+          title: '蚂蚁沙丘系列',
+        },
+        {
+          id: 8,
+          title: '中华小熊猫系列'
+        }
+      ]
     }
   },
 
   asyncData({isDev, route, store, env, params, query, req, res, redirect, error}) {
-    console.log(query);    
+    const id = query.id;
+    const data = cateData.find(item => item.id == id) || cateData[0];
+    return {
+      currentTab: id,
+      currenCate: data,
+    }
   },
+
+  components: {
+    CommonBanner
+  },
+
+  methods: {
+    handleClick(item) {
+      this.currentTab = item.id;
+    }
+  }
   
 }
 </script>
 
 <style lang="scss" scoped>
+.tabList {
+  display: flex;
+  justify-content: space-between;
+  .tab-item {
+    position: relative;
+    margin: 21px 0 28px;
+    font-size: 15px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #333333;
+    &.active {
+      font-size: 15px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      line-height: 21px;
+      span {
+        position: absolute;
+        bottom: -6px;
+        display: block;
+        width: 39px;
+        box-shadow: 0px 2px 4px 0px rgba(85, 141, 253, 0.4);
+      }
+    }
+    &:hover {
+      span {
+        position: absolute;
+        bottom: -6px;
+        display: block;
+        width: 39px;
+        box-shadow: 0px 2px 4px 0px rgba(85, 141, 253, 0.4);
+      }
+    }
+    span {
+      width: 0px;
+      height: 2px;
+      background: #236AFA;
+      border-radius: 20px;
+      left: 0px;
+      right: 0px;
+      margin: 0 auto;
+      transition: all .3s ease-in-out;
+    }
+  }
+}
+.cate-img {
+  font-size: 0;
+  img {
+    width: 100%;
+  }
+}
+.cate-main {
+  margin-top: 80px;
+  .cate-title {
+    font-size: 34px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+    line-height: 48px;
+    text-align: center;
+  }
+  .cate-des {
+    margin-top: 14px;
+    text-align: center;
+    font-size: 16px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #646A7E;
+    line-height: 24px;
+  }
+  .cate-product-list {
+    margin-top: 40px;
+    display: flex;
+    flex-wrap: wrap;
+    .product-item {
+      margin: 0 22px 20px 0;
+      width: 283px;
+      height: 380px;
+      background: #FFFFFF;
+      box-shadow: 0px 2px 17px 0px rgba(208, 231, 253, 0.74);
+      border-radius: 20px;
+      text-align: center;
+      transition: transform .3s ease-in-out;
+      &:nth-child(4n) {
+        margin-right: 0;
+      }
+      &:hover {
+        transform: translate3d(0,-8px,0);
+      }
+      .title {
+        margin-top: 36px;
+        font-size: 16px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 22px;
+      }
+    }
+  }
+  .img-wrap {
+    padding-top: 20px;
+    font-size: 0;
+    img {
+      width: 240px;
+      height: 263px;
+      object-fit: cover;
+    }
+  }
+}
 
 </style>

pages/product/list.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="cate">
     <!-- 头部banner -->
-    <div class="common-banner"><img :src="bannerImg" alt="" srcset=""></div>
+    <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']" >
@@ -32,11 +33,7 @@
 </template>
 
 <script>
-var slideUp = {
-  distance: '150%',
-  origin: 'bottom',
-  opacity: null
-};
+import CommonBanner from '@/components/common/banner';
 
 export default {
   name: 'ListPage',
@@ -71,49 +68,49 @@ export default {
         },
         {
           type: 2,
-          title: '逻辑狗-思维游戏系列',
-          desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
+          title: '春夏秋冬-全景思维艺术系列',
+          desc: '包含 春夏秋冬·画册；春夏秋冬·画卷；春夏秋冬·主题故事；春夏秋冬·游戏与手工；春夏秋冬·夏夜；春夏秋冬·格林童话故事',
           imgUrl:  require('~/assets/images/products/cate_img_02@2x.png'),
           url: '2'
         },
         {
           type: 3,
-          title: '逻辑狗-思维游戏系列',
+          title: '聪明书-儿童注意力品质发展系列',
           desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
           imgUrl:  require('~/assets/images/products/cate_img_03@2x.png'),
           url: '3'
         },
         {
           type: 4,
-          title: '逻辑狗-思维游戏系列',
-          desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
+          title: '逻辑狗-入学准备丛书',
+          desc: '思维语言；思维数学；学习起跑线系列',
           imgUrl:  require('~/assets/images/products/cate_img_04@2x.png'),
           url: '4'
         },
         {
           type: 5,
-          title: '逻辑狗-思维游戏系列',
-          desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
+          title: '思维魔法我的pad-lvk系列',
+          desc: 'Lvk源自德国具有170年发展历史的Westermann Group 教育集团',
           imgUrl:  require('~/assets/images/products/cate_img_05@2x.png'),
           url: '5'
         },
         {
           type: 6,
-          title: '逻辑狗-思维游戏系列',
+          title: '聪明狗-与克鲁德一起听说读系列',
           desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
           imgUrl: require('~/assets/images/products/cate_img_06@2x.png'),
           url: '6'
         },
         {
           type: 7,
-          title: '逻辑狗-思维游戏系列',
-          desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
+          title: '蚂蚁沙丘-幼儿科学培养探索系列',
+          desc: '《幼儿园情景科学教育课程-与弗雷德一起探索》是德国著名儿童科学教育专家季泽拉·吕克经过几十年潜心研究和实践编写的一套以培养儿童科学素养为目标的教育课程。针对目前国内幼儿科学教育的现状，经过本土化研发在我国出版，其系统完善，绘画精美，简单易操作',
           imgUrl: require('~/assets/images/products/cate_img_07@2x.png'),
           url: '7'
         },
         {
           type: 8,
-          title: '逻辑狗-思维游戏系列',
+          title: '中华小熊猫-中华文化思维游戏系列',
           desc: '以完善的理念，独特的教学方法，运用思维启蒙，思考策略及思考技巧的阶梯式教育方式与产品及培训服务体系，构建儿童优质思维模式。',
           imgUrl: require('~/assets/images/products/cate_img_08@2x.png'),
           url: '8'
@@ -121,9 +118,11 @@ export default {
       ]
     }
   },
-  components: {},
+  components: {
+    CommonBanner
+  }
+  ,
   mounted () {
-    // this.scrollReveal.reveal('item-content .title', slideUp);
   },
   methods: {
     navPage(item) {