'多渠道教学图片'

pages/index.vue

@@ -196,19 +196,23 @@
           </div>
         </div>
         <div class="content-box course-content-box">
-          <div class="cate-box course-cate-box">
-            <ul class="cate-nav course-cate-nav">
+          <div class="cate-box tabs course-cate-box">
+            <ul class="cate-nav tab-box course-cate-nav">
               <li
                 class="products-kind thinking-products-kind"
                 v-for="(item, index) in courseCate"
                 :class="{active:index == clickProdIndex}"
                 :key="index"
-                @click="getProdList(index)"
+                @click="handleCourse(item)"
               >
                 <nuxt-link to="/">{{ item.title }}</nuxt-link>
-                <div class="line"></div>
               </li>
             </ul>
+            <div class="bottom-line">
+              <div class="bottom-line-img">
+                <img :style="lineCourseStyle" src="http://res.training.luojigou.vip/Fl4dXmckxC8m0Lm2-GPbl5-Cp9Rv?imageView2/0/q/50|imageslim" alt="">
+              </div>
+            </div>
             <div class="cate-list course-cate-list">
               <div
                 class="product-item course-product-item wow animate__animated animate__lightSpeedInRight"
@@ -652,6 +656,7 @@ export default {
       clickProdIndex: 0,
       clickNewsIndex: 0,
       currentTabId: 0,
+      currentCourseType: 0,
       productCate: [
         {
           id: 0,
@@ -948,6 +953,17 @@ export default {
         site = -5
       }
       return `transform: translateX(${site + 'px'})`
+    },
+    lineCourseStyle() {
+      let site;
+      if( this.currentCourseType === 0 ) {
+        site = -5
+      } else if (this.currentCourseType === 3) {
+        site = 400 * this.currentCourseType - 86;
+      } else {
+        site = 400 * this.currentCourseType - 38 * this.currentCourseType;
+      }
+      return `transform: translateX(${site + 'px'})`
     }
   },
   components: {
@@ -1023,7 +1039,7 @@ export default {
           .find(".big-mobile-education")
           .fadeIn("fast"));
     },
-    onSwiperRedied(swiper) {
+    onSwiperRedied(swiper) { 
       console.log('Swiper redied!', swiper)
     },
     stopSwiper() {
@@ -1043,6 +1059,9 @@ export default {
     },
     handleTag(tab) {
       this.currentTabId = tab.id
+    },
+    handleCourse(item) {
+      this.currentCourseType = item.type;
     }
   },
 };
@@ -1096,10 +1115,10 @@ export default {
 }
 
 ul.cate-nav {
-  margin: 124px 0 116px;
+  // margin: 124px 0 116px;
   li.products-kind {
     display: inline-block;
-    margin: 0 30px;
+    // margin: 0 30px;
     cursor: pointer;
     &:first-child {
       margin-left: 0;
@@ -1433,7 +1452,6 @@ ul.cate-nav {
           transition: transform 1s;
         }
       }
-      
     }
   }
 
@@ -1591,13 +1609,27 @@ ul.cate-nav {
     left: -134px;
     top: -45px;
   }
+  .bottom-line {
+    margin-top: 16px;
+    .bottom-line-img {
+      width: 100%;
+      font-size: 0;
+      img {
+        width: 75px;
+        height: 30px;
+        transition: transform 1s;
+      }
+    }
+  }
   .course-content-box {
+    margin-top: 125px;
     .course-cate-nav {
       display: flex;
       justify-content: space-between;
     }
   }
   .course-cate-list {
+    margin-top: 82px;
     .course-product-item {
       width: 365px;
       .course-product-item-img {