head组件重新开发

assets/scss/cus-client/cus-client-common.scss

@@ -125,7 +125,7 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 /************************ 网站公共class样式 author: TX  date:2020-07-30 **********************/
 /* 网站框架 */
 .website-frame{
-  font-family: "Helvetica Neue", Helvetica, Arial, "微软雅黑", sans-serif;
+  font-family: Arial, "微软雅黑", sans-serif;
   color: #2C3E50;
   min-width: 1240px;
   // head移动端响应式
@@ -160,17 +160,13 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   .el-menu--horizontal{
     border: 0;
       >.el-menu-item {
-        color: rgba(0,0,0,0.85);
-        @include setFontStyle(-2);
-        height: 80px;
-        line-height: 80px;
-        margin: 0 10px;
-        padding: 0!important;
+        color: rgba(0,0,0,0.85);font-size: 16px;font-weight: bold;
+        height: 80px;line-height: 80px;margin: 0 10px;padding: 0!important;
         a{height: inherit;display: inline-block;padding: 0 6px;}
       }
       >.el-menu-item.is-active{
-        @include setThemeColorBase("color", 0);
-        @include setThemeColorBase("border-color", 0);
+        color: rgba(0, 174, 186, 1);
+        border-color:rgba(0, 174, 186, 1);
         border-width:4px;
       }
   }
@@ -179,56 +175,14 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   .head-left{
     display: flex;
     //头部图标
-    .client-head-img{width: 200px;height:79px;display: inline-block;background-image: url("~static/images/client/component/nav-logo.jpg");background-repeat: no-repeat;background-position: center;background-size: cover;margin-right: 40px;}
+    .client-head-img{width: 200px;height:43px;margin-top: 18px;display: inline-block;background-image: url("~static/images/client/component/nav-logo.png");background-repeat: no-repeat;background-position: center;background-size: cover;margin-right: 40px;}
   }
 
   //头部右侧区域
   .head-right{
       line-height: 80px;position: relative;
-      >a{height: 40px;line-height: 40px;@include setFontStyle(-4);padding: 0 30px;border-radius: 4px;display: inline-block;border: 1px solid #0366cd;color:#0064cc;box-sizing: border-box;text-align: center;}
-      >a.right-tel-btn{width: 130px;color: #fff;background: #3e7ce7;border: 1px solid #3e7ce7;padding: 0 8px;margin-right:10px;position: relative;}
+      >a{width: 120px;height: 36px;line-height: 36px;font-size:16px;padding: 0 ;border-radius: 4px;display: inline-block;border: 1px solid rgba(0, 174, 186, 1);color:#FFF;background: rgba(0, 174, 186, 1);box-sizing: border-box;text-align: center;}
       >a:hover{cursor: pointer;}
-      .system-box{width: 130px;height: 60px;position: absolute;top: 20px;}
-      .system-box{
-         div{
-          display: none;min-width:260px;height:120px;position: absolute;background: #fff;border: 1px solid #b5b5b5;border-radius: 4px;padding: 10px 8px;left: 0;top:57px;transition: 5s;
-          a{
-            display: inline-block;
-            i{width: 110px;height: 84px;display: block;background-size: cover;}
-          }
-          a:nth-child(1){i{background-image:url("~static/images/client/exam/product-function-icon3.png");} }
-          a:nth-child(3){i{background-image:url("~static/images/client/train/product-function-icon6.png");} }
-          span{width: 1px;min-height: 88px;display:inline-block;background:#e8e8e8;@include setFontStyle(-4);margin: 10px;}
-          p{@include setFontStyle(-4);color: rgba(0,0,0,0.85);line-height: 24px;text-align: center;}
-        }
-        // 伪类气泡箭头
-        div:after,div:before {
-          width: 0;
-          height: 0;
-          font-size: 0;
-          overflow: hidden;
-          position: absolute;
-          content: ' ';
-          left: 60px;
-        }
-        div:after{
-          border-width: 10px;
-          border-style: dashed dashed solid ;
-          border-color: transparent transparent #ffffff;
-          top: -19px;
-        }
-        div:before{
-          border-width: 10px;
-          border-style: dashed dashed solid ;
-          border-color: transparent transparent #666 ;
-          top:-20px;
-        }
-      }
-    .system-box:hover{
-      >div{
-        display: block;
-      }
-    }
   }
 
   // head移动端响应式

components/header.vue

@@ -32,15 +32,7 @@
         <div class="phone-nav-btn mta-hidden-sm" @click="changeHeadNav"></div>
       </div>
       <div class="head-right mta-hidden-xs">
-        <a class="right-tel-btn">免费注册</a>
-        <div class="system-box">
-          <div>
-            <a  rel="nofollow" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank"><i></i><p>考试系统</p></a>
-            <span></span>
-            <a   rel="nofollow" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank"><i></i><p>培训系统</p></a>
-          </div>
-        </div>
-        <a rel="nofollow" href="https://cdnks.mtavip.com/a/registerLogin" target="_blank">登录</a>
+        <a @click="xtTyBtn">系统体验中心</a>
       </div>
     </div>
   </nav>
@@ -89,17 +81,17 @@
             children: [],
           },*/
           {
-            content:  '体验中心',
-            keyPath:  '/tiyanCenter',
+            content:  '课程开发',
+            keyPath:  '/courseware',
             children: [],
           },
           {
-            content:  '课程开发',
-            keyPath:  '/courseware',
+            content:  '课程资源',
+            keyPath:  '/tiyanCenter',
             children: [],
           },
           {
-            content:  '客户案例',
+            content:  '新闻资讯',
             keyPath:  '/news',
             children: [],
           },
@@ -129,6 +121,10 @@
       navChange(){
         this.navClass = 'head-nav-up'
       },
+      // 系统体验中心
+      xtTyBtn(){
+        this.$router.push({ name: 'tiyanCenter' });
+      },
     },
   };
 </script>