导航栏修改

components/header.vue

@@ -1,37 +1,17 @@
 <template>
   <nav class="client-head">
     <div class="client-container head-layout">
+      <!-- 手机导航 -->
       <div class="head-left mta-hidden-sm">
         <a :href="`${baseUrl}`" class="client-head-img"></a>
-        <div  @click="navChange">
-          <el-menu
-            :default-active="activeNav"
-            :class="navClass"
-            mode="horizontal"
-            :router="false"
-          >
-            <template v-for="(item,index) in headerArrPhone">
-              <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="false" :content="child.content" v-if="child.hrefFlag"></mtaLink>
-                  <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="false" :content="item.content" v-if="item.hrefFlag"></mtaLink>
-                <mtaLink :path="item.keyPath" :instation="true" :content="item.content"></mtaLink>
-              </el-menu-item>
-            </template>
-          </el-menu>
-        </div>
+        <!-- H5菜单 -->
+        <sj-nav :class="navClass" @navChange="navChange"></sj-nav>
+        <!-- 咨询电话 -->
         <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>
+      <!-- PC导航 -->
       <div class="head-left mta-hidden-xs">
         <a :href="`${baseUrl}`" class="client-head-img"></a>
         <div>
@@ -39,43 +19,10 @@
             <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" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank" v-if="showBtnFlag">免费试用</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" v-if="showBtnFlag">管理员登录</a>
             </div></div>
-          <div>
-            <div @click="navChange">
-              <el-menu
-                :default-active="activeNav"
-                :class="navClass"
-                mode="horizontal"
-                :router="false"
-                @select="headMenuSelect"
-              >
-                <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="false" :content="child.content" v-if="child.hrefFlag" target="_blank"></mtaLink>
-                      <mtaLink :path="child.keyPath" :instation="true" :content="child.content" v-else></mtaLink>
-                    </el-menu-item>
-                  </el-submenu>
-
-                  <el-menu-item :index="`${item.keyPath}`" v-else>
-                    <mtaLink :path="item.keyPath" :instation="false" :content="item.content" v-if="item.hrefFlag" target="_blank"></mtaLink>
-                    <mtaLink :path="item.keyPath" :instation="true" :content="item.content" v-else></mtaLink>
-                  </el-menu-item>
-                </template>
-              </el-menu>
-            </div>
-          </div>
+          <!-- PC菜单 -->
+          <pc-nav @navChange="headMenuSelect"></pc-nav>
         </div>
       </div>
 
@@ -87,11 +34,15 @@
 <script>
   import mtaLink        from '~/components/mtaLink/index';
   import { mapGetters } from 'vuex';
+  import SjNav          from './mtaNav/sjNav';
+  import PcNav          from './mtaNav/pcNav';
 
   let _ = require('lodash');
   export default {
     name:       'mtaHeader',
     components: {
+      PcNav,
+      SjNav,
       mtaLink,
     },
     computed: {