'切换效果'

components/home/banner.vue

@@ -129,8 +129,8 @@ export default {
   position: relative;
   overflow: hidden;
   width: 100%;
-  height: 540px;
-  // height: 700px;
+  // height: 540px;
+  height: 700px;
   .swiperBox {
     height: 100%;
     &:hover {
@@ -151,7 +151,8 @@ export default {
   .banner-swiper-pagination {
     position: absolute;
     left: 50%;
-    bottom: 70px;
+    transform: translateX(-50%);
+    bottom: 65px;
     z-index: 66;
     .swiper-pagination-bullet {
       width: 12px;

pages/index.vue

@@ -114,19 +114,18 @@
           </div>
         </div>
         <div class="content-box thinking-content-box">
-          <div class="cate-box thinking-cate-box">
-            <ul class="cate-nav thinking-cate-nav">
-              <li
-                class="thinking-products-kind"
-                v-for="(item, index) in productCate"
-                :class="{active:index == clickProdIndex}"
-                :key="index"
-                @click="getProdList(index)"
-              >
-                <nuxt-link to="/">{{ item.title }}</nuxt-link>
-                <div class="line"></div>
+          <div class="cate-box tabs thinking-cate-box">
+            <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 productCate" :key="tab.id">
+                <nuxt-link to="/">{{ tab.label }}</nuxt-link>
               </li>
             </ul>
+            <div class="bottom-line">
+              <div class="bottom-line-img">
+                <img :style="lineStyle" src="http://res.training.luojigou.vip/Fl4dXmckxC8m0Lm2-GPbl5-Cp9Rv?imageView2/0/q/50|imageslim" alt="">
+              </div>
+            </div>
+
             <div class="cate-list thinking-cate-list">
               <div
                 class="thinking-product-item wow animate__animated animate__lightSpeedInLeft"
@@ -629,14 +628,15 @@ import VBanner from "~/components/home/banner";
 // import indexNewsListShow from '~/components/common/indexNewsListShow'
 
 export default {
+
   data() {
     return {
       bannerData: [
         {
           bannerId: "1",
           href: "http://zaojiao.net",
-          bannerSrc:
-            "http://img.visney.cn/img/banner_img/201810091635055072893adb062fc430a8a08728a954f6952.jpg",
+          // bannerSrc: "http://img.visney.cn/img/banner_img/201810091635055072893adb062fc430a8a08728a954f6952.jpg",
+          bannerSrc: require('~/assets/images/index/img1.jpg'),
           bannerAlt: "中德智慧",
         },
         {
@@ -651,27 +651,32 @@ export default {
       num: 0,
       clickProdIndex: 0,
       clickNewsIndex: 0,
+      currentTabId: 0,
       productCate: [
         {
-          title: "全部",
-          type: 0,
+          id: 0,
+          label: '全部'
         },
         {
-          title: "0-3岁思维启蒙",
-          type: 1,
+          id: 1,
+          label: '幼儿网络版'
         },
         {
-          title: "3-7岁能力训练",
-          type: 2,
+          id: 2,
+          label: '数学起跑线'
         },
         {
-          title: "5-7岁入学思考",
-          type: 3,
+          id: 3,
+          label: '小学基础班'
         },
         {
-          title: "7-12岁技巧学习",
-          type: 4,
+          id: 4,
+          label: '小学提升版'
         },
+        {
+          id: 5,
+          label: '幼小衔接'
+        }
       ],
       courseCate: [
         {
@@ -936,6 +941,15 @@ export default {
       },
     };
   },
+  computed: {
+    lineStyle () {
+      let site = 190 * this.currentTabId + 40* ( (this.currentTabId === 0 ? 1 : this.currentTabId)  - 1 )
+      if( site === 0 ) {
+        site = -5
+      }
+      return `transform: translateX(${site + 'px'})`
+    }
+  },
   components: {
     VBanner,
     countTo
@@ -1027,6 +1041,9 @@ export default {
     next() {
       this.swiper.slideNext();
     },
+    handleTag(tab) {
+      this.currentTabId = tab.id
+    }
   },
 };
 </script>
@@ -1035,7 +1052,8 @@ export default {
 
 .container {
   width: 100%;
-  background: #f0f2f5;
+  // background: #f0f2f5;
+  background: #fff;
   height: auto;
 }
 .title-content {
@@ -1112,9 +1130,9 @@ ul.cate-nav {
   li.products-kind:hover,
   li.products-kind.active {
     .line {
-      display: block;
-      visibility: visible;
-      transition: all 0.5s ease;
+      // display: block;
+      // visibility: visible;
+      // transition: all 0.5s ease;
     }
   }
 }
@@ -1351,33 +1369,37 @@ ul.cate-nav {
       left: -112px;
     }
   }
+  .thinking-cate-box {
+    margin-top: 155px;
+  }
   ul.thinking-cate-nav {
+    position: relative;
     margin: 124px 0 116px;
+    display: flex;
+    justify-content: space-between;
+    .tabs-item.selectTabs {
+      a {
+        color: $theme_color_fu;
+        // font-size: 42px !important;
+        font-family:PingFangSC-Semibold,PingFang SC;
+        font: weight 600;
+      }
+    }
   }
   li.thinking-products-kind {
     display: inline-block;
-    margin: 0 30px;
+    // margin: 0 30px;
     cursor: pointer;
     -webkit-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     transition: all 0.5s ease;
-    .line {
-      visibility: hidden;
-      margin: 22px auto 0;
-      width: 60px;
-      border-radius: 50px;
-      height: 15px;
-      width: 59px;
-      height: 15px;
-      background: $theme_color_fu;
-      box-shadow: 0px 2px 8px 0px rgba(94, 161, 241, 0.87);
-    }
     a {
       font-size: 32px;
       color: #747885;
+      font-family: PingFangSC-Regular, PingFang SC;
     }
   }
-  li.thinking-products-kind:hover,
+  // li.thinking-products-kind:hover,
   li.thinking-products-kind.active {
     .line {
       display: block;
@@ -1385,9 +1407,42 @@ ul.cate-nav {
     }
   }
 
+  .tabs {
+    .tab-box {
+      display: flex;
+      justify-content: space-between;
+      margin: 0 auto;
+      .tabs-item {
+        a {
+          color: #747885;
+          font-size: 32px;
+          font-family:PingFangSC-Regular,PingFang SC;
+          font-weight:400;
+        }
+      }
+    }
+    .bottom-line {
+      display: flex;
+      justify-content: center;
+      margin-top: 16px;
+      .bottom-line-img {
+        width: 100%;
+        img {
+          width: 75px;
+          height: 30px;
+          transition: transform 1s;
+        }
+      }
+      
+    }
+  }
+
   li.thinking-products-kind:first-child {
     margin-left: 0;
   }
+  li.thinking-products-kind:last-child {
+    margin-right: 0;
+  }
   li.thinking-products-kind.active a,
   .thinking-products-kind:hover a {
     // font-size: 42px;
@@ -1399,6 +1454,7 @@ ul.cate-nav {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
+    margin-top: 100px;
     .thinking-product-item {
       position: relative;
       box-sizing: border-box;
@@ -1417,6 +1473,10 @@ ul.cate-nav {
             transform: scale(1.2);
             transition: transform 1s;
           }
+          .product-tag {
+            border-radius: 0px 0px 0px 0px;
+            transition: border-radius .3s;
+          }
         }
         img {
           border-radius: 18px 18px 0px 0px;
@@ -1431,13 +1491,13 @@ ul.cate-nav {
     height: 90px;
     box-shadow: 0px 5px 21px 0px rgba(232, 243, 243, 1);
     border-radius: 0px 0px 18px 18px;
-    padding: 26px 22px;
+    padding: 10px 22px;
     .thinking-product-title {
       width: 160px;
       height: 28px;
       font-size: 20px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
+      // font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 400;
       line-height: 28px;
       a {
         color: #343e30;
@@ -1447,12 +1507,15 @@ ul.cate-nav {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      margin-top: 6px;
     }
     .thinking-product-price {
       color: #ea0b4a;
+      font-size: 22px;
       .price-num {
-        font-size: 22px;
+        font-size: 30px;
         font-weight: bold;
+        line-height: 26px;
       }
     }
     .thinking-product-btn {