'新版产品'

nuxt.config.js

@@ -60,6 +60,7 @@ export default {
   plugins: [
     { src: '@/plugins/element-ui', ssr: false },
     { src: "@/plugins/vue-swiper", ssr: false },
+    { src: "@/plugins/vue-scroll-reveal", ssr: false },
     {
       src: '@/plugins/filter.js'
     },

package.json

@@ -30,6 +30,7 @@
     "vue-awesome-swiper": "^4.1.1",
     "vue-baidu-map": "^0.21.22",
     "vue-count-to": "^1.0.13",
+    "vue-scroll-reveal": "^1.0.11",
     "vuex": "^3.5.1"
   },
   "devDependencies": {

pages/product/detail.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="detail">
+    
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+
+  asyncData({isDev, route, store, env, params, query, req, res, redirect, error}) {
+    console.log(query);    
+  },
+  
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

pages/product/list.vue

@@ -1,402 +1,46 @@
 <template>
-  <section class="List-container">
-   <img class="banner-img" :src="bannerImg" alt="" srcset="">
-   <div class="content w1200">
-     <div class="tabs">
-       <!-- <div class="tab-box">
-         <div :class="['tabs-item', 'cp',  currentTabId === tab.id ? 'selectTabs': '']" @click="handleTag(tab)" v-for="tab in ListData" :key="tab.id">
-          {{tab.label}}
-        </div>
-       </div> -->
-        <ul class="cate-nav tab-box thinking-cate-nav">
-          <li :class="['tabs-item', 'cp',  currentTabId === tab.id ? 'selectTabs': '']" @click="handleTag(tab)" v-for="tab in ListData" :key="tab.id">
-            <!-- <nuxt-link to="/">{{ tab.label }}</nuxt-link> -->
-            <a href="javascript:void(0)">{{ tab.label }}</a>
-          </li>
-        </ul>
-        <div class="bottom-line">
-          <div class="bottom-line-img">
-            <div :style="lineStyle" class="line-img-box"></div>
-            <!-- <img :style="lineStyle" src="http://res.training.luojigou.vip/Fl4dXmckxC8m0Lm2-GPbl5-Cp9Rv?imageView2/0/q/50|imageslim" alt=""> -->
+  <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 class="screen">
-       <div class="left">
-        <div class="screen-label">排序:</div>
-        <div class="cp screen-item">默认</div>
-        <div class="cp screen-item">价格</div>
-        <div class="cp screen-item">销量</div>
-        <div class="cp screen-item">最新上架</div>
-       </div>
-       
-       <div class="right">
-         <img src="http://res.training.luojigou.vip/Fmzni1iBgNG7OKMenDAm1JPkntZY?imageView2/0/q/50|imageslim" alt="">
-         <a href="https://zhongdezhihui.tmall.com" target="_blank" class="enter-label cp">进入商城</a>
-       </div>
-     </div> -->
-     <div class="goods">
-      <prod-list v-if="currentTabId == 0" :productList="productList"></prod-list>
-      <prod-list v-if="currentTabId == 1" :productList="netList"></prod-list>
-      <prod-list v-if="currentTabId == 2" :productList="jcList"></prod-list>
-      <prod-list v-if="currentTabId == 3" :productList="tsList"></prod-list>
-      <prod-list v-if="currentTabId == 4" :productList="yxList"></prod-list>
-      <prod-list v-if="currentTabId == 5" :productList="kldList"></prod-list>
-       <!--  (index + 1) % 3 === 0 ? 'animate__fadeIn' : '',
-          index  % 3 === 0 ? 'animate__fadeIn' : '' -->
-       <!-- <div :class="['goods-item', 'wow',  'animate__animated',  
-          'animate__lightSpeedInLeft'
-          ]" 
-          v-for="(item, index) in goodsData" :key="index">
-         <div class="top"> 
-           <img class="flag-img" :src="item.flagImg" alt="">
-           <img class="goods-img" :src="item.goodsImg" alt="" />
-         </div>
-         <div class="bottom">
-           <div class="left">
-             <div class="label th">
-               {{item.label}}
-             </div>
-             <div class="text th">
-               {{item.text}}
-             </div>
-             <div class="price">
-               <div class="price-now">
-                 <span style="fontSize: 20px">¥</span>  {{ item.pirceNew}}
-               </div>
-               <div class="price-old">
-                 <span> <span style="fontSize: 18px"> ¥</span>{{item.priceOld}}</span>
-                 <span class="lineation"></span>
-               </div>
-               
-             </div>
-           </div>
-           <div class="right ">
-             销量{{item.sales}}笔
-           </div>
-         </div>
-       </div> -->
-     </div>
-   </div>
-  </section>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-if (process.browser) { 
-  var {WOW} = require('wowjs')
-}
-import ProdList from "~/components/products/prodList";
-
-const ListData = Object.freeze([
-  {
-    id: 0,
-    label: '全部'
-  },
-  {
-    id: 1,
-    label: '幼儿网络版'
-  },
-  {
-    id: 2,
-    label: '小学基础班'
-  },
-  {
-    id: 3,
-    label: '小学提升版'
-  },
-  {
-    id: 4,
-    label: '幼小衔接'
-  },
-  {
-    id: 5,
-    label: '克鲁德系列'
-  }
-])
-const goodsData = Object.freeze([
-  {
-    flagImg:  require('~/assets/images/index/product_tag.png'),
-    goodsImg: require('~/assets/images/index/product.png'),
-    label: '逻辑狗得儿童绘画成本很低得故事',
-    text: '逻辑狗得儿童绘画成本很低得故事得介绍解释觉得我空气jade哦亲',
-    pirceNew: 89,
-    priceOld: 109.00,
-    sales: 88
-  }
-])
-
-let arr  = []
-for(let i = 0; i < 20; i ++) {
-  arr.push(...goodsData)
-}
-
-const productList =  [
-  {
-    title: '逻辑狗 小学提升版一阶段7岁以上儿童思维训练早教玩具益智启蒙',
-    price: '198.00',
-    imgUrl: require('~/assets/images/goods/product_ts_01.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557258829143',
-    tag: '提升版',
-  },
-  {
-    title: '逻辑狗 小学提升版二阶段8岁以上儿童早教玩具益智启蒙卡',
-    price: '238.00',
-    imgUrl: require('~/assets/images/goods/product_ts_02.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557170896436',
-    tag: '提升版',
-  },
-  {
-    title: '逻辑狗小学提升版三阶段9岁以上幼儿童思维学习早教玩具套装益智',
-    price: '198.00',
-    imgUrl: require('~/assets/images/goods/product_ts_03.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557361647798',
-    tag: '提升版',
-  },
-  {
-    title: '逻辑狗 小学提升版四阶段10岁以上数学幼儿启蒙早教玩具 中德直营',
-    price: '198.00',
-    imgUrl: require('~/assets/images/goods/product_ts_04.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557303754261',
-    tag: '提升版',
-  },
-  {
-    title: '逻辑狗 中德智慧小学提升版 五阶段11岁儿童启蒙 学习玩具套装',
-    price: '198.00',
-    imgUrl: require('~/assets/images/goods/product_ts_05.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557171748143',
-    tag: '提升版',
-  },
-  {
-    title: '中德智慧逻辑狗 小学基础版五阶段11岁儿童启蒙学习玩具早教玩具',
-    price: '198.00',
-    imgUrl: require('~/assets/images/goods/product_jc_01.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557253273047',
-    tag: '基础版',
-  },
-  {
-    title: '中德智慧 逻辑狗 幼小小学基础版四阶段10岁以上儿童玩具启蒙',
-    price: '102.60',
-    imgUrl: require('~/assets/images/goods/product_jc_02.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557164956835',
-    tag: '基础版',
-  },
-  {
-    title: '中德智慧逻辑狗 智力开发小学基础版三阶段幼儿童学习早教玩具',
-    price: '140.60',
-    imgUrl: require('~/assets/images/goods/product_jc_03.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557356687077',
-    tag: '基础版',
-  },
-  {
-    title: '中德智慧 逻辑狗 幼小小学基础版四阶段10岁以上儿童玩具启蒙',
-    price: '102.60',
-    imgUrl: require('~/assets/images/goods/product_jc_04.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557165744732',
-    tag: '基础版',
-  },
-  {
-    title: '中德智慧逻辑狗 小学基础版五阶段11岁儿童启蒙学习玩具早教玩具',
-    price: '102.60',
-    imgUrl: require('~/assets/images/goods/product_jc_05.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557298602723',
-    tag: '基础版',
-  }
-]
-
-const netList = [
-  {
-    title: '逻辑狗2岁3-4岁幼儿园教材版家庭思维训练第一阶段益智玩具板全套',
-    price: '150.10',
-    imgUrl: require('~/assets/images/goods/product_net_01.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557288434799',
-    tag: '网络版',
-  },
-  {
-    title: '逻辑狗4-5岁二阶段幼儿教材家庭网络版思维训练早教益智玩具正版',
-    price: '150.10',
-    imgUrl: require('~/assets/images/goods/product_net_02.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557250281576',
-    tag: '网络版',
-  },
-  {
-    title: '逻辑狗5-6岁三阶段幼儿园教材家庭网络版思维训练早教益智玩具板',
-    price: '150.10',
-    imgUrl: require('~/assets/images/goods/product_net_03.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557162976102',
-    tag: '网络版',
-  },
-  {
-    title: '德国逻辑狗6-7岁四阶段幼儿园教材网络版思维训练早教益智玩具童',
-    price: '150.10',
-    imgUrl: require('~/assets/images/goods/product_net_04.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557163156598',
-    tag: '网络版',
-  },
-  {
-    title: '逻辑狗6岁以上五阶段 幼儿园教材家庭思维训练网络版早教益智玩具',
-    price: '188.10',
-    imgUrl: require('~/assets/images/goods/product_net_05.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557251913436',
-    tag: '网络版',
-  },
-  {
-    title: '逻辑狗3-7岁幼儿网络版大礼包思维益智启蒙早教玩具',
-    price: '836.00',
-    imgUrl: require('~/assets/images/goods/product_net_06.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557163904721',
-    tag: '网络版',
-  },
-]
-
-const tsList = [
-  {
-    title: '逻辑狗 小学提升版一阶段7岁以上儿童思维训练早教玩具益智启蒙',
-    price: '198.00',
-    imgUrl: require('~/assets/images/goods/product_ts_01.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557258829143',
-    tag: '提升版',
-  },
-  {
-    title: '逻辑狗 小学提升版二阶段8岁以上儿童早教玩具益智启蒙卡',
-    price: '238.00',
-    imgUrl: require('~/assets/images/goods/product_ts_02.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557170896436',
-    tag: '提升版',
-  },
-  {
-    title: '逻辑狗小学提升版三阶段9岁以上幼儿童思维学习早教玩具套装益智',
-    price: '198.00',
-    imgUrl: require('~/assets/images/goods/product_ts_03.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557361647798',
-    tag: '提升版',
-  },
-  {
-    title: '逻辑狗 小学提升版四阶段10岁以上数学幼儿启蒙早教玩具 中德直营',
-    price: '198.00',
-    imgUrl: require('~/assets/images/goods/product_ts_04.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557303754261',
-    tag: '提升版',
-  },
-  {
-    title: '逻辑狗 中德智慧小学提升版 五阶段11岁儿童启蒙 学习玩具套装',
-    price: '198.00',
-    imgUrl: require('~/assets/images/goods/product_ts_05.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557171748143',
-    tag: '提升版',
-  }
-]
-
-const jcList = [
-  {
-    title: '中德智慧逻辑狗 小学基础版五阶段11岁儿童启蒙学习玩具早教玩具',
-    price: '198.00',
-    imgUrl: require('~/assets/images/goods/product_jc_01.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557253273047',
-    tag: '基础版',
-  },
-  {
-    title: '中德智慧 逻辑狗 幼小小学基础版四阶段10岁以上儿童玩具启蒙',
-    price: '102.60',
-    imgUrl: require('~/assets/images/goods/product_jc_02.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557164956835',
-    tag: '基础版',
-  },
-  {
-    title: '中德智慧逻辑狗 智力开发小学基础版三阶段幼儿童学习早教玩具',
-    price: '140.60',
-    imgUrl: require('~/assets/images/goods/product_jc_03.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557356687077',
-    tag: '基础版',
-  },
-  {
-    title: '中德智慧 逻辑狗 幼小小学基础版四阶段10岁以上儿童玩具启蒙',
-    price: '102.60',
-    imgUrl: require('~/assets/images/goods/product_jc_04.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557165744732',
-    tag: '基础版',
-  },
-  {
-    title: '中德智慧逻辑狗 小学基础版五阶段11岁儿童启蒙学习玩具早教玩具',
-    price: '102.60',
-    imgUrl: require('~/assets/images/goods/product_jc_05.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557298602723',
-    tag: '基础版',
-  }
-]
-
-const yxList = [
-  {
-    title: '逻辑狗数学起跑线5-7岁幼儿园教材 家庭逻辑思维训练益智早教玩具',
-    price: '150.10',
-    imgUrl: require('~/assets/images/goods/product_yx_01.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=557305378054',
-    tag: '幼小衔接',
-  },
-  {
-    title: '逻辑狗5-7岁思维语言/数学幼儿园早教益智玩具板训练全套幼小衔接',
-    price: '159.60',
-    imgUrl: require('~/assets/images/goods/product_yx_02.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=603397367168',
-    tag: '幼小衔接',
-  },
-]
-
-const kldList = [
-  {
-    title: '逻辑狗 克鲁德幼儿二阶段5-6岁启蒙读物儿童益智 早教故事点读',
-    price: '264.10',
-    imgUrl: require('~/assets/images/goods/product_kld_01.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=569135310952',
-    tag: '克鲁德',
-  },
-  {
-    title: '逻辑狗 克鲁德幼儿三阶段6岁以上启蒙读物儿童早教故事 点读语言',
-    price: '292.60',
-    imgUrl: require('~/assets/images/goods/product_kld_02.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=569135982554',
-    tag: '克鲁德',
-  },
-  {
-    title: '逻辑狗新品克鲁德一起听 幼儿一阶段4-5岁启蒙读物儿童早教益智',
-    price: '245.00',
-    imgUrl: require('~/assets/images/goods/product_kld_03.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=610967139958',
-    tag: '克鲁德',
-  },
-  {
-    title: '逻辑狗克鲁德聪明笔幼儿早教机学习点读机0-3-6益智故事机双英语',
-    price: '568.10',
-    imgUrl: require('~/assets/images/goods/product_kld_04.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=575248706980',
-    tag: '克鲁德',
-  },
-  {
-    title: '逻辑狗新品 克鲁德聪明点读笔 幼儿早教益智机学习机0-3-6双英语',
-    price: '598.00',
-    imgUrl: require('~/assets/images/goods/product_kld_04.jpg'),
-    linkUrl: 'https://detail.tmall.com/item.htm?id=624651060206',
-    tag: '克鲁德',
-  }
-]
+var slideUp = {
+  distance: '150%',
+  origin: 'bottom',
+  opacity: null
+};
 
 export default {
   name: 'ListPage',
-  computed: {
-    lineStyle () {
-      let site = 190 * this.currentTabId + 42* ( (this.currentTabId === 0 ? 1 : this.currentTabId)  - 1 )
-      if( site === 0 ) {
-        site = -0
-      }
-      return `transform: translateX(${site + 'px'})`
-    },
-    // lineStyle () {
-    //   let site = 190 * this.currentTabId + 40* ( (this.currentTabId === 0 ? 1 : this.currentTabId)  - 1 )
-    //   if( site === 0 ) {
-    //     site = -5
-    //   }
-    //   return `transform: translateX(${site + 'px'})`
-    // }
-  },
+  computed: {},
   head() {
     return {
       title: "逻辑狗官网-中德智慧教育",
@@ -416,32 +60,76 @@ export default {
   },
   data () {
     return {
-      ListData,
-      currentTabId: 0,
-      goodsData: arr,
-      productList,
-      netList,
-      tsList,
-      jcList,
-      yxList,
-      kldList,
-      bannerImg: require('~/assets/images/products/banner-list.png')
+      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: {
-    ProdList
-  },
+  components: {},
   mounted () {
-     if (process.browser) { 
-      new WOW({
-        offset: 0,   
-        live: true
-      }).init()
-     } 
+    // this.scrollReveal.reveal('item-content .title', slideUp);
   },
   methods: {
-    handleTag(tab) {
-      this.currentTabId = tab.id
+    navPage(item) {
+      this.$router.push({ path: '/product/detail', query: {
+        id: item.url
+      } });
     }
   }
 
@@ -450,252 +138,104 @@ export default {
 
 <style scoped lang="scss">
 @import "~static/common/style.sass";
-
-.List-container {
-  background-color: #F0F2F5;
-}
-.banner-img {
+$bg-silver: #F7FBFF;
+$bg-white: #FFFFFF;
+.common-banner {
   width: 100%;
-  // height: 806px;
-  height: 595px;
-  margin-bottom: 120px;
+  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;
+  }
 }
-.content {
-  padding-bottom: 300px;
-  margin: 0 auto;
-  // width: 1214px;
-  // .tabs {
-  //   .tab-box {
-  //     width: 1214px;
-  //     display: flex;
-  //     justify-content: space-between;
-  //     margin: 0 auto;
-  //     .tabs-item {
-  //       color: #747885;
-  //       font-size: 32px;
-  //       font-family:PingFangSC-Regular, sans-serif;
-  //       font-weight:400;
-  //     }
-  //   }
-  //   .bottom-line {
-  //     display: flex;
-  //     justify-content: center;
-  //     .bottom-line-img {
-  //       width: 1214px;
-  //         img {
-  //         width: 75px;
-  //         height: 30px;
-  //         transition: transform 1s;
-  //       }
-  //     }
-      
-  //   }
-  // }
-  .screen {
-    margin-top: 121px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: #7F7F7F;
-    font-size: 18px;
-    .left {
-       display: flex;
-        align-items: center;
-      .screen-label {
-        margin-right: 30px;
-      }
-      .screen-item {
-        color: #ccc;
-        padding: 6px 18px;
-        border: 1px solid #cccccc;
-        font-size: 16px;
-        margin-right: 36px;
-      }
-    }
-    .right {
-      width: 141px;
+
+.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: 42px;
-        height: 42px;
-      }
-      .enter-labe {
-        color: #2F2F2F;
-        font-size: 25px;
-        font-family:PingFangSC-Medium, sans-serif;
-        font-weight:500;
-   
-      }
-      .enter-labe :hover {
-        color: red;
+        width: 639px;
+        height: 400px;
+        display: block;
       }
+      
     }
-  }
-  .goods {
-    margin-top: 81px;
-    display: grid;
-    grid-template-columns: auto auto auto;
-    grid-template-rows: auto auto auto;
-    .goods-item {
-      width: 372px;
-      height: 372px;
-      border-radius: 18px;
-      position: relative;
-      margin-top: 39px;
-      .top {
-        overflow: hidden;
-        .flag-img {
-          width: 52px;
-          height: 24px;
-          position: absolute;
-          top: 0;
-          left: 0;
-          z-index: 1;
-        }
-        .goods-img {
-          width: 372px;
-          height: 250px;
-
-        }
-        .goods-img:hover {
-          transform: scale(1.2);
-          transition: transform 1s;
-        }
-      }
-      .bottom {
-        display: flex;
-        justify-content: space-between;
-        padding: 10px 15px;
-        background: #FFFFFF;
-        border-bottom-left-radius: 18px;
-        border-bottom-right-radius: 18px;
-        .left {
-          width: 250px;
-          font-family:PingFangSC-Regular, sans-serif;
-          .label {
-            color: #343E30;
-            font-size: 20px;
-            width: 108px;
-          }
-          .text {
-            color: #898A8C;
-            font-size: 12px;
-            width: 100%;
-          }
-          .price {
-            width: 140px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-top: 9px;
-            .price-now {
-              color: #EA0B4A;
-              font-size: 34px;
-              font-family:PingFangSC-Semibold, sans-serif;
-              font-weight:600;
-            }
-            .price-old {
-              color: #D4D7D9;
-              font-size: 22px;
-              position: relative;
-              .lineation {
-                height: 1px;
-                width: 55px !important;
-                position: absolute;
-                top: 50%;
-                border-top: solid #D4D7D9 1px;
-                display: block;
-              }
-            }
-          }
-        }
-        .right {
-          display: flex;
-          align-items: flex-end;
-          margin-bottom: 10px;
-          color: #0D5CFA;
-          font-size: 13px;
-          font-family:PingFangSC-Semibold, sans-serif;
-          font-weight:600;
-        }
-      }
+    .title {
+      width: 558px;
+      font-size: 34px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 48px;
+      margin-bottom: 29px;
     }
-  }
- 
-}
-
-.cp {
-  cursor: pointer;
-}
-
-.th {
-  overflow: hidden;
-  text-overflow:ellipsis;
-  white-space: nowrap;
-}
-
-.fade {
-  animation: fadeOutDown;
-}
-
-.tabs {
-  .tab-box {
-    display: flex;
-    justify-content: space-between;
-    margin: 0 auto;
-    .tabs-item {
-      &.selectTabs {
-        a {
-          color: #0D5CFA;
-          // font-size: 42px !important;
-          font-family: PingFangSC-Semibold, sans-serif;
-          font-weight: 600;
-        }
+    .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;
       }
-      a {
-        font-size: 24px;
-        font-family: PingFangSC-Regular, sans-serif;
-        font-weight: 400;
-        color: #747885;
-        line-height: 33px;
+      .btn {
+        align-self: flex-end;
       }
     }
-  }
-  .bottom-line {
-    display: flex;
-    justify-content: center;
-    margin-top: 16px;
-    .bottom-line-img {
-      width: 100%;
-      .line-img-box {
-        width: 46px;
-        height: 4px;
-        background-color: $theme_color_fu;
-        box-shadow: 0px 2px 8px 0px rgba(111, 159, 254, 0.8);
-        border-radius: 100px;
-        transition: transform 1s;
+    .item-left {
+      font-size: 0;
+      .btn {
+
       }
-      // img {
-      //   width: 75px;
-      //   height: 30px;
-      //   transition: transform 1s;
-      // }
     }
   }
-}
-
-@keyframes fadeOutDown {
-  from {
-    opacity: 1;
+  .bg-silver {
+    background: $bg-silver; 
   }
-
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
+  .bg-white {
+    background: $bg-white;
   }
 }
-
 </style>

plugins/vue-scroll-reveal.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+
+// In main.js
+import VueScrollReveal from 'vue-scroll-reveal';
+
+// Using ScrollReveal's default configuration
+Vue.use(VueScrollReveal);
+
+// OR specifying custom default options for all uses of the directive
+Vue.use(VueScrollReveal, {
+  class: 'v-scroll-reveal'
+});

yarn.lock

@@ -5639,6 +5639,18 @@ is-docker@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.1.1.tgz#4125a88e44e450d384e09047ede71adc2d144156"
   integrity sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw==
 
+is-dom-node-list@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npm.taobao.org/is-dom-node-list/download/is-dom-node-list-1.2.1.tgz#141ded0c66de759d0976800d21370bb908f2950f"
+  integrity sha1-FB3tDGbedZ0JdoANITcLuQjylQ8=
+  dependencies:
+    is-dom-node "^1.0.4"
+
+is-dom-node@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npm.taobao.org/is-dom-node/download/is-dom-node-1.0.4.tgz#abb18af7133f1e687610cfeb274da1ced342f1c5"
+  integrity sha1-q7GK9xM/Hmh2EM/rJ02hztNC8cU=
+
 is-dotfile@^1.0.0:
   version "1.0.3"
   resolved "https://registry.npm.taobao.org/is-dotfile/download/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
@@ -6542,6 +6554,11 @@ minipass@^3.0.0, minipass@^3.1.1:
   dependencies:
     yallist "^4.0.0"
 
+miniraf@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/miniraf/download/miniraf-1.0.0.tgz#5d88e108bbdcb55b4a2ff3da337f24a13a3377e1"
+  integrity sha1-XYjhCLvctVtKL/PaM38koTozd+E=
+
 mississippi@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
@@ -8443,6 +8460,11 @@ relateurl@^0.2.7:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+rematrix@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.npm.taobao.org/rematrix/download/rematrix-0.3.0.tgz#4f3f9156aa80ded8a8ca23785f48c6012b6dea4a"
+  integrity sha1-Tz+RVqqA3tioyiN4X0jGAStt6ko=
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -8706,6 +8728,15 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+scrollreveal@^4.0.2:
+  version "4.0.7"
+  resolved "https://registry.npm.taobao.org/scrollreveal/download/scrollreveal-4.0.7.tgz#a1e1a969431ec3b1dc6c19d8d36ed8fd8cfe4412"
+  integrity sha1-oeGpaUMew7HcbBnY027Y/Yz+RBI=
+  dependencies:
+    miniraf "1.0.0"
+    rematrix "0.3.0"
+    tealight "0.3.6"
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -9385,6 +9416,14 @@ tcp-port-used@^1.0.1:
     debug "4.1.0"
     is2 "2.0.1"
 
+tealight@0.3.6:
+  version "0.3.6"
+  resolved "https://registry.npm.taobao.org/tealight/download/tealight-0.3.6.tgz#14c8071ce3c188972a5cb7d8a5668ca2820b4292"
+  integrity sha1-FMgHHOPBiJcqXLfYpWaMooILQpI=
+  dependencies:
+    is-dom-node "^1.0.4"
+    is-dom-node-list "^1.2.1"
+
 term-size@^2.1.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.1.tgz#2a6a54840432c2fb6320fea0f415531e90189f54"
@@ -9962,6 +10001,13 @@ vue-router@^3.4.6:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.9.tgz#c016f42030ae2932f14e4748b39a1d9a0e250e66"
   integrity sha512-CGAKWN44RqXW06oC+u4mPgHLQQi2t6vLD/JbGRDAXm0YpMv0bgpKuU5bBd7AvMgfTz9kXVRIWKHqRwGEb8xFkA==
 
+vue-scroll-reveal@^1.0.11:
+  version "1.0.11"
+  resolved "https://registry.npm.taobao.org/vue-scroll-reveal/download/vue-scroll-reveal-1.0.11.tgz#c2b0b78eff0d65381ba0bbce0d8801023aac649b"
+  integrity sha1-wrC3jv8NZTgboLvODYgBAjqsZJs=
+  dependencies:
+    scrollreveal "^4.0.2"
+
 vue-server-renderer@^2.6.12:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.6.12.tgz#a8cb9c49439ef205293cb41c35d0d2b0541653a5"