'tab'

components/home/header.vue

@@ -6,7 +6,11 @@
           <nuxt-link to="/">
             <img src="~/assets/images/index/logo_icon.png" alt="" srcset="">
           </nuxt-link>
-          <div class="name">中德智慧教育</div>
+          <div class="name">
+            <nuxt-link to="/">
+              中德智慧教育
+            </nuxt-link>
+          </div>
         </div>
 				<div class="i-h-nav">
 					<ul class="h-nav-list">
@@ -173,7 +177,9 @@ export default {
   font-size: 18px;
   font-family: PingFangSC-Semibold,PingFang SC;
   font-weight: 600;
-  color: $theme_color;
+  a {
+    color: $theme_color;
+  }
 }
 
 ul.h-nav-list {

components/products/xcx.vue

@@ -8,29 +8,33 @@
     <slot name="label"></slot>
     <div class="content">
       <div class="content-first wow animate__animated animate__lightSpeedInLeft">
-        <div class="left">
-          <img
-            src="http://res.training.luojigou.vip/Fr1pakSIAxm3LLHgAgMkHECAerAB?imageView2/0/q/50|imageslim"
-            alt=""
-          >
-        </div>
-        <div class="right">
-          <h4>轻松找到课堂入口 创造优质</h4>
-          <h4>学习体验</h4>
-          <div class="desc">微信首页任务栏等60+小程序入口，让10亿用户 轻松发现你</div>
+        <div class="content-first-info w1200">
+          <div class="left">
+            <img
+              src="http://res.training.luojigou.vip/Fr1pakSIAxm3LLHgAgMkHECAerAB?imageView2/0/q/50|imageslim"
+              alt=""
+            >
+          </div>
+          <div class="right">
+            <h4>轻松找到课堂入口 创造优质</h4>
+            <h4>学习体验</h4>
+            <div class="desc">微信首页任务栏等60+小程序入口，让10亿用户 轻松发现你</div>
+          </div>
         </div>
       </div>
       <div class="content-seconed wow animate__animated animate__lightSpeedInRight">
-        <div class="left">
-          <h4>轻松找到课堂入口 创造优质</h4>
-          <h4>学习体验</h4>
-          <div class="desc">微信首页任务栏等60+小程序入口，让10亿用户 轻松发现你</div>
-        </div>
-        <div class="right">
-          <img
-            src="http://res.training.luojigou.vip/FiiA82i4ori08A7Z8BbUdK8GMaxs?imageView2/0/q/50|imageslim"
-            alt=""
-          >
+        <div class="content-seconed-info w1200">
+          <div class="left">
+            <h4>轻松找到课堂入口 创造优质</h4>
+            <h4>学习体验</h4>
+            <div class="desc">微信首页任务栏等60+小程序入口，让10亿用户 轻松发现你</div>
+          </div>
+          <div class="right">
+            <img
+              src="http://res.training.luojigou.vip/FiiA82i4ori08A7Z8BbUdK8GMaxs?imageView2/0/q/50|imageslim"
+              alt=""
+            >
+          </div>
         </div>
       </div>
     </div>
@@ -82,11 +86,13 @@ export default {
     height: 1792px;
 
     .content-first {
-      display: flex;
-      justify-content: space-between;
-      padding: 173px 408px 138px 359px;
+      padding: 173px 0 138px 0;
       color: #262626;
       background-color: #f7fbff;
+      .content-first-info {
+        display: flex;
+        justify-content: space-between;
+      }
       .left {
         img {
           width: 576px;
@@ -110,29 +116,31 @@ export default {
       }
     }
     .content-seconed {
-      display: flex;
-      justify-content: space-between;
-      padding: 153px 335px 138px 359px;
+      padding: 153px 0 138px 0;
       color: #262626;
-      .left {
+      .content-seconed-info {
         display: flex;
-        flex-direction: column;
-        justify-content: center;
-        h4 {
-          font-size: 30px;
+        justify-content: space-between;
+        .left {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          h4 {
+            font-size: 30px;
+          }
+          .desc {
+            width: 385px;
+            color: #3a3a3a;
+            font-size: 18px;
+            margin-top: 44px;
+            line-height: 30px;
+          }
         }
-        .desc {
-          width: 385px;
-          color: #3a3a3a;
-          font-size: 18px;
-          margin-top: 44px;
-          line-height: 30px;
-        }
-      }
-      .right {
-        img {
-          width: 664px;
-          height: 581px;
+        .right {
+          img {
+            width: 664px;
+            height: 581px;
+          }
         }
       }
     }

pages/cooperate/index.vue

@@ -480,7 +480,7 @@ export default {
             }
             .el-form-item__error {
               color: #cd2026;
-              left: 124px;
+              // left: 124px;
             }
             .el-form-item {
               &.is-error {

pages/product/course.vue

@@ -6,9 +6,9 @@
     <component :is="comName" >
       <div class="course-change">
         <div class="tabs">
-          <img src="http://res.training.luojigou.vip/FhHOYFM_rwtBGKZ9OCDgGs0PvGNw?imageView2/0/q/50|imageslim" alt="">
+          <!-- <img src="http://res.training.luojigou.vip/FhHOYFM_rwtBGKZ9OCDgGs0PvGNw?imageView2/0/q/50|imageslim" alt=""> -->
           <div class="tags-box">
-            <div class="tabs-item"
+            <div :class="['tabs-item', currentTabId === tab.id ? 'active' : '']"
               @click="changeTabgs(tab)"
               v-for="tab in tabsData" :key="tab.id">
               <img class="cp" :src="currentTabId !== tab.id ? tab.imgUrl : tab.activeImgUrl" alt="">
@@ -18,9 +18,9 @@
             </div>
           </div>
         </div>
-        <div class="line" >
-            <img  :style="lineStyle" src="http://res.training.luojigou.vip/FrCpRmLbuGygO2NdcTJrbFGMSqYS?imageView2/0/q/50|imageslim" alt="">
-        </div>
+        <!-- <div class="line" >
+          <img :style="lineStyle" src="http://res.training.luojigou.vip/FrCpRmLbuGygO2NdcTJrbFGMSqYS?imageView2/0/q/50|imageslim" alt="">
+        </div> -->
       </div>
       <!-- <Label class="label" :labelProps="labelProps" v-solt:label /> -->
       <Label class="label" :labelProps="labelProps" />
@@ -44,32 +44,42 @@ if (process.browser) {
 const tabsData = Object.freeze([
   {
     id: 0,
-    imgUrl: 'http://res.training.luojigou.vip/FkSnoRtRQ4WY_f3M3TQEJcn_du_Z?imageView2/0/q/50|imageslim',
-    activeImgUrl: 'http://res.training.luojigou.vip/FnzQdBDxbMr-Ek5HlcWCQ_Dk12zn?imageView2/0/q/50|imageslim',
+    // imgUrl: 'http://res.training.luojigou.vip/FkSnoRtRQ4WY_f3M3TQEJcn_du_Z?imageView2/0/q/50|imageslim',
+    // activeImgUrl: 'http://res.training.luojigou.vip/FnzQdBDxbMr-Ek5HlcWCQ_Dk12zn?imageView2/0/q/50|imageslim',
+    imgUrl: require('~/assets/images/products/tab_xcx_nor.png'),
+    activeImgUrl: require('~/assets/images/products/tab_xcx_active.png'),
     label: '小程序课堂'
   },
   {
     id: 1,
-    imgUrl: 'http://res.training.luojigou.vip/FuV6EjLrPYoiFII0iLYQlW51Bemq?imageView2/0/q/50|imageslim',
-    activeImgUrl: 'http://res.training.luojigou.vip/FoRYr27YPRQ5dcZy6hjWkqCB3bUc?imageView2/0/q/50|imageslim',
+    // imgUrl: 'http://res.training.luojigou.vip/FuV6EjLrPYoiFII0iLYQlW51Bemq?imageView2/0/q/50|imageslim',
+    // activeImgUrl: 'http://res.training.luojigou.vip/FoRYr27YPRQ5dcZy6hjWkqCB3bUc?imageView2/0/q/50|imageslim',
+    imgUrl: require('~/assets/images/products/tab_h5_nor.png'),
+    activeImgUrl: require('~/assets/images/products/tab_h5_active.png'),
     label: '微信H5课堂'
   },
   {
     id: 2,
-    imgUrl: 'http://res.training.luojigou.vip/FsVRp9Lk4Cyp5O_JNBe49kfz7vZh?imageView2/0/q/50|imageslim',
-    activeImgUrl: 'http://res.training.luojigou.vip/FhFDmhtts6iIWXD_Z16JOmMeqbh6?imageView2/0/q/50|imageslim',
+    // imgUrl: 'http://res.training.luojigou.vip/FsVRp9Lk4Cyp5O_JNBe49kfz7vZh?imageView2/0/q/50|imageslim',
+    // activeImgUrl: 'http://res.training.luojigou.vip/FhFDmhtts6iIWXD_Z16JOmMeqbh6?imageView2/0/q/50|imageslim',
+    imgUrl: require('~/assets/images/products/tab_pc_nor.png'),
+    activeImgUrl: require('~/assets/images/products/tab_pc_active.png'),
     label: 'PC端独立课堂'
   },
   {
     id: 3,
-    imgUrl: 'http://res.training.luojigou.vip/FsGTOeaPqx7Ipow75LJYM8ETlKew?imageView2/0/q/50|imageslim',
-    activeImgUrl: 'http://res.training.luojigou.vip/FqmqyLMeRxdvj__Z618fkgVHJV7J?imageView2/0/q/50|imageslim',
+    // imgUrl: 'http://res.training.luojigou.vip/FsGTOeaPqx7Ipow75LJYM8ETlKew?imageView2/0/q/50|imageslim',
+    // activeImgUrl: 'http://res.training.luojigou.vip/FqmqyLMeRxdvj__Z618fkgVHJV7J?imageView2/0/q/50|imageslim',
+    imgUrl: require('~/assets/images/products/tab_parent_nor.png'),
+    activeImgUrl: require('~/assets/images/products/tab_parent_active.png'),
     label: '家长端APP'
   },
   {
     id: 4,
-    imgUrl: 'http://res.training.luojigou.vip/FgoA_S33kLvcoMktbN4ORQO9Kfc8?imageView2/0/q/50|imageslim',
-    activeImgUrl: 'http://res.training.luojigou.vip/Fgm-DUhf4ySZc6uEX2IZXzP-NdzS?imageView2/0/q/50|imageslim',
+    // imgUrl: 'http://res.training.luojigou.vip/FgoA_S33kLvcoMktbN4ORQO9Kfc8?imageView2/0/q/50|imageslim',
+    // activeImgUrl: 'http://res.training.luojigou.vip/Fgm-DUhf4ySZc6uEX2IZXzP-NdzS?imageView2/0/q/50|imageslim',
+    imgUrl: require('~/assets/images/products/tab_teacher_nor.png'),
+    activeImgUrl: require('~/assets/images/products/tab_teacher_active.png'),
     label: '教师端APP'
   },
 ])
@@ -189,6 +199,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import "~static/common/style.sass";
+
 .Course-container {
   .course-change {
     position: relative;
@@ -203,11 +215,12 @@ export default {
           height: 179px;
         }
         .tags-box {
-          width: 1070px;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
+          padding: 48px 65px 36px;
+          width: 1200px;
+          background: #FFFFFF;
+          box-shadow: 0px 1px 15px 0px rgba(218, 230, 255, 0.74);
+          border-radius: 17px;
+
           display: flex;
           justify-content: space-between;
           align-items: center;
@@ -216,9 +229,22 @@ export default {
             flex-direction: column;
             justify-content: space-between;
             align-items: center;
+            &.active {
+              position: relative;
+              &:after {
+                content: '';                 /*CSS伪类用法*/
+                position: absolute;         /*定位背景横线的位置*/
+                bottom: -28px;
+                background: $theme_color_fu;       /*宽和高做出来的背景横线*/
+                width: 62px;
+                height: 1px;
+                box-shadow: 0px 2px 4px 0px rgba(85, 141, 253, 0.77);
+              }
+              // border-bottom: 1px solid $theme_color_fu;
+            }
             img {
-              width:  50px;
-              height: 50px;
+              width:  57px;
+              height: 42px;
               object-fit: fill;
               margin-bottom: 30px;
             }
@@ -228,7 +254,7 @@ export default {
     
   
     .line {
-      width: 1070px;
+      // width: 1070px;
       position: absolute;
       left: 416px;
       top: 153px;