适配部分移动端

src/App.vue

@@ -33,7 +33,8 @@ export default {
       return flagPc;
     }
     var flagZt = IsPC();
-    console.log(flagZt) //true为PC端，false为手机端
+    console.log(flagZt)
+    this.$store.commit('updateModelType', flagZt)
   }
 };
 </script>

src/components/menuTree/tree.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="menu-child">
+      <template v-for="item in this.menuList">
+        <el-submenu :popper-class="$route.path === '/home' || $route.path === '/sfel' ? 'home-menu-popup' : ''" :class="{active: $route.query.id == item.id}" :key="item.id" :index="String(item.id)" :id="item.id" v-if="item.children && item.children.length">
+          <template slot="title">
+            <span slot="title" :id="item.id">{{item.columnName}}</span>
+          </template>
+          <!-- <menuTree :menuList="item.children"></menuTree> -->
+        </el-submenu>
+        <el-menu-item :key="item.id" :id="item.id" :index="String(item.id)" :class="{active: $route.query.id == item.id}" v-else>
+          <span slot="title" :id="item.id">{{item.columnName}}</span>
+        </el-menu-item>
+      </template>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'menuTree',
+    props: {
+      menuList: {
+        type: Array,
+        default: []
+      }
+    },
+    data () {
+      return {}
+    },
+    mounted () {},
+    methods: {}
+  }
+  </script>
+  <style lang="scss" scoped>
+    
+  </style>
+  

src/layouts/header/index.vue

@@ -3,6 +3,7 @@
     <a class="logo" @click="toIndex">
       <img :src="require('@/assets/images/' + (isSfel ? 'logo2' : isHome ? 'logo' : 'logo-black') + '.png')" alt="">
     </a>
+    <!-- <template v-if="$store.getters.getModelType"> -->
       <navbar ref="nav" :isHome.sync="isHome"></navbar>
       <div class="tools">
         <img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleSearch">
@@ -13,6 +14,39 @@
           <i class="el-icon-close close-icon" @click="showSearch = false"></i>
         </div>
       </div>
+    <!-- </template> -->
+
+    <!-- <template v-else>
+      <i class="el-icon-s-fold rightNavBox"></i>
+    </template>
+    <div class="btnsBox">
+      <el-menu
+      default-active="2"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose">
+      <el-submenu index="1">
+        <template slot="title">
+          <span>导航一</span>
+        </template>
+        <el-menu-item index="1-1">选项1</el-menu-item>
+        <el-menu-item index="1-2">选项2</el-menu-item>
+        <el-submenu index="1-4">
+          <template slot="title">选项4</template>
+          <el-menu-item index="1-4-1">选项1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-menu-item index="2">
+        <span slot="title">导航二</span>
+      </el-menu-item>
+      <el-menu-item index="3">
+        <span slot="title">导航三</span>
+      </el-menu-item>
+      <el-menu-item index="4">
+        <span slot="title">导航四</span>
+      </el-menu-item>
+    </el-menu>
+    </div> -->
   </div>
 </template>
 <script>
@@ -100,7 +134,6 @@ $height: 90px;
   top: 0;
   left: 0;
   width: 100%;
-  min-width: $min-width;
   height: $height;
   box-sizing: content-box;
   &:not(.channel) {
@@ -131,6 +164,13 @@ $height: 90px;
     margin-right: 43px;
   }
 }
+
+.rightNavBox{
+  font-size: 50px;
+  position: absolute;
+  right: 20px;
+  top: 20px;
+}
 .search-wrap {
   position: absolute;
   top: 67px;
@@ -175,4 +215,17 @@ $height: 90px;
     }
   }
 }
+
+
+.btnsBox{
+  width: 100%;
+  height: 300px;
+  overflow: hidden;
+  overflow-y: scroll;
+  position: absolute;
+  top: 90px;
+  left: 0;
+  background-color: white;
+  z-index: 99;;
+}
 </style>

src/store/getters.js

@@ -1,2 +1,4 @@
-const getters = {};
+const getters = {
+    getModelType:(state) => state.modelType
+};
 export default getters;

src/store/index.js

@@ -1,23 +1,32 @@
-import Vue from "vue";
+import Vue from 'vue';
-import Vuex from "vuex";
+import Vuex from 'vuex';
-import getters from "./getters";
+import getters from './getters';
 
 Vue.use(Vuex);
 
 // https://webpack.js.org/guides/dependency-management/#requirecontext
-const modulesFiles = require.context("./modules", true, /\.js$/);
+const modulesFiles = require.context('./modules', true, /\.js$/);
 
 // you do not need `import app from './modules/app'`
 // it will auto require all vuex module from modules file
 const modules = modulesFiles.keys().reduce((modules, modulePath) => {
     // set './app.js' => 'app'
-    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
+    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
     const value = modulesFiles(modulePath);
     modules[moduleName] = value.default;
     return modules;
 }, {});
 
 const store = new Vuex.Store({
+    state: {
+        modelType: false //true为PC端，false为手机端
+    },
+    mutations: {
+        updateModelType(state, type) {
+            console.log(state)
+            state.modelType = type;
+        }
+    },
     modules,
     getters
 });