修改 header 布局

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

@@ -147,7 +147,8 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 /* 网站头部导航栏 */
 .client-head{
   width: 100%;
-  height: 80px;
+  //height: 80px;
+  height: 120px;
   z-index: 999;
   background: #fff;
   position: fixed;
@@ -162,8 +163,8 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
       >.el-menu-item {
         color: rgba(0,0,0,0.85);
         @include setFontStyle(-2);
-        height: 80px;
-        line-height: 80px;
+        height: 60px;
+        line-height: 60px;
         margin: 0 10px;
         padding: 0!important;
         a{height: inherit;display: inline-block;padding: 0 6px;}
@@ -178,17 +179,20 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   //头部左侧区域
   .head-left{
     display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
     //头部图标
     .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;}
   }
 
   //头部右侧区域
   .head-right{
-      line-height: 80px;position: relative;
+      line-height: 60px;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:hover{cursor: pointer;}
-      .system-box{width: 130px;height: 60px;position: absolute;top: 20px;}
+      .system-box{width: 130px;height: 60px;position: absolute;top: 20px; z-index: 999}
       .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;
@@ -231,6 +235,27 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
     }
   }
 
+  .header-left-container {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    .phone-tel-box {
+      margin-right: 20px;
+      display: flex;
+      color: rgb(0, 84, 145);
+      align-items: center;
+
+      .phone-tel-box-icon {
+        width: 25px;
+        height: 25px;
+        display: inline-block;
+        margin-right: 5px;
+        background-image: url("~static/images/client/component/head-phone-icon.png");
+      }
+    }
+  }
+
   // head移动端响应式
   @media (max-width: 768px){
     // head

components/header.vue

@@ -1,9 +1,9 @@
 <template>
   <nav class="client-head">
     <div class="client-container head-layout">
-      <div class="head-left">
+      <div class="head-left mta-hidden-sm">
         <a :href="`${baseUrl}`" class="client-head-img"></a>
-        <div @click="navChange">
+        <div  @click="navChange">
           <el-menu
             :default-active="activeNav"
             :class="navClass"
@@ -26,22 +26,55 @@
             </template>
           </el-menu>
         </div>
-
         <a class="phone-tel-box mta-hidden-sm" href="tel:400-052-2130">咨询电话：400-052-2130</a>
         <!-- 手机按钮 -->
         <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 class="head-left mta-hidden-xs">
+        <a :href="`${baseUrl}`" class="client-head-img"></a>
+        <div>
+          <div class="header-left-container">
+            <a class="phone-tel-box" href="tel:400-052-2130"> <i class="phone-tel-box-icon"></i> <span>咨询电话：400-052-2130</span></a>
+            <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>
+            </div></div>
           <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 @click="navChange">
+              <el-menu
+                :default-active="activeNav"
+                :class="navClass"
+                mode="horizontal"
+                :router="false"
+              >
+                <template v-for="(item,index) in headerArr">
+                  <el-submenu :index="`${item.keyPath}`" v-if="item.children && item.children.length > 0"
+                              popper-class="mta-menu-two">
+                    <template slot="title">{{item.content}}</template>
+                    <el-menu-item :index="`${child.keyPath}`" v-for="child of item.children"
+                                  :key="child.keyPath">
+                      <mtaLink :path="child.keyPath" :instation="true" :content="child.content"></mtaLink>
+                    </el-menu-item>
+                  </el-submenu>
+
+                  <el-menu-item :index="`${item.keyPath}`" v-else>
+                    <mtaLink :path="item.keyPath" :instation="true" :content="item.content"></mtaLink>
+                  </el-menu-item>
+                </template>
+              </el-menu>
+            </div>
           </div>
         </div>
-        <a rel="nofollow" href="https://cdnks.mtavip.com/a/registerLogin" target="_blank">登录</a>
       </div>
+
+
     </div>
   </nav>
 </template>