fix

src/layouts/home/index.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="main">
     <v-head></v-head>
+    <Navbar />
     <div class="layout">
-      <navbar></navbar>
+      <Sidebar :class="{ show: showSidebar }" :path.sync="path" />
       <div class="content">
         <transition name="move" mode="out-in">
           <router-view class="view"></router-view>
         </transition>
         <el-backtop target=".content"></el-backtop>
       </div>
+    </div>
     <v-footer ref="footer"></v-footer>
+
     <div class="log-mask" v-if="logVisible"></div>
     <div class="log-dia" v-if="logVisible">
       <img class="bg1" src="@/assets/img/log-bg.png" alt="">
@@ -37,7 +40,6 @@
         </div>
       </div>
     </div>
-    </div>
 
     <el-dialog title="" :visible.sync="realNameVisible" :close-on-click-modal="false" :close-on-press-escape="false"
       :show-close="false" width="300px" custom-class="name-dia">
@@ -58,15 +60,24 @@
 
 <script>
 import vHead from "../header";
-import navbar from "../navbar";
+import Navbar from "../navbar";
 import vFooter from "../footer";
+import Sidebar from '../sidebar'
 import { mapState, mapMutations, mapActions } from "vuex";
 import util from "@/libs/util";
 import Setting from "@/setting";
 
 export default {
+  components: {
+    vHead,
+    Navbar,
+    Sidebar,
+    vFooter
+  },
   data () {
     return {
+      showSidebar: false,
+      path: '',
       logVisible: false,
       list: [],
       logAll: false,
@@ -100,16 +111,21 @@ export default {
       },
     };
   },
-  components: {
-    vHead,
-    navbar,
-    vFooter
-  },
   computed: {
     ...mapState("user", [
       'logView'
     ])
   },
+  watch: {
+    '$route.path': {
+      handler (val) {
+        this.path = val
+        // 是否显示左侧导航
+        this.showSidebar = ['/assessment', '/achievement', '/information', '/shop', '/market', '/parnerOperation', '/parner', '/match', '/data', '/review', '/theoreticalCourse', '/resourse'].includes(val)
+      },
+      immediate: true
+    }
+  },
   mounted () {
     this.autoLogout()
     this.logView || this.getLogStatus() // logView为false才需要查询接口
@@ -185,11 +201,21 @@ export default {
 </script>
 <style lang="scss" scoped>
 .main {
-  min-height: 100%;
+  .layout {
+    display: flex;
+  }
+
+  .sidebar:not(.show) {
+    margin-left: -160px;
+  }
 
   .content {
-    min-height: calc(100vh - 176px);
+    width: calc(100vw - 160px);
+    height: calc(100vh - 213px);
     padding: 24px;
+    margin-bottom: 20px;
+    transition: all 0.3s ease-in-out;
+    overflow: auto;
   }
 }
 

src/layouts/sidebar/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="sidebar">
+    <el-menu :default-active="active" background-color="#fff" text-color="#333" active-text-color="#062c87" router>
+      <template v-for="item in menus">
+        <template v-if="item.children">
+          <el-submenu :index="item.index" :key="item.index">
+            <template slot="title">
+              <span slot="title">{{ item.title }}</span>
+            </template>
+            <template v-for="subItem in item.children">
+              <el-submenu v-if="subItem.children" :index="subItem.index" :key="subItem.index">
+                <template slot="title">{{ subItem.title }}</template>
+                <el-menu-item v-for="(threeItem, i) in subItem.children" :key="i" :index="threeItem.index">{{
+                  threeItem.title
+                }}</el-menu-item>
+              </el-submenu>
+              <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
+            </template>
+          </el-submenu>
+        </template>
+        <template v-else>
+          <el-menu-item :index="item.index" :key="item.index">
+            <span slot="title">{{ item.title }}</span>
+          </el-menu-item>
+        </template>
+      </template>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['path'],
+  data () {
+    return {
+      active: '',
+      menus: [
+        {
+          index: '/assessment',
+          title: '考核管理'
+        },
+        {
+          index: '/achievement',
+          title: '成绩管理'
+        },
+        {
+          index: '/evaluation',
+          title: '测评管理'
+        },
+        {
+          index: '/course',
+          title: '精品课程管理'
+        },
+        {
+          index: '/review',
+          title: '评阅中心'
+        },
+        {
+          index: '/information',
+          title: '资讯管理'
+        },
+        {
+          index: '/project',
+          title: '项目管理'
+        },
+        {
+          index: '/resourse',
+          title: '资源库'
+        },
+        {
+          index: '/exam',
+          title: '理论考试系统'
+        },
+        {
+          index: '/exam1',
+          title: '备课管理'
+        },
+      ],
+    };
+  },
+  watch: {
+    path: {
+      handler (val) {
+        this.active = val
+      },
+      immediate: true
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+    handleSelect (index) {
+
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.sidebar {
+  width: 160px;
+  height: calc(100vh - 193px);
+  overflow: auto;
+  transition: .5s;
+  transform: translateX(-200px);
+
+  &.show {
+    transform: translateX(0);
+  }
+
+  /deep/.el-menu {
+    border-right: 0 !important;
+
+    .el-menu-item,
+    .el-submenu__title {
+      height: 40px;
+      padding-left: 30px !important;
+      line-height: 40px;
+
+      &.is-active {
+        font-weight: 600;
+      }
+    }
+
+    .el-menu .el-menu-item {
+      padding: 0 20px 0 40px !important;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+.sidebar::-webkit-scrollbar {
+  width: 0;
+}
+
+.sidebar-el-menu:not(.el-menu--collapse) {
+  width: 100%;
+}
+
+.sidebar>ul {
+  height: 100%;
+}
+</style>

src/pages/workbench/list/index.vue

@@ -41,7 +41,7 @@
     <div class="block block1">
       <div class="title">全部应用</div>
       <div class="apps">
-        <div class="app" @click="to('/match')">
+        <div class="app" @click="to('/exam')">
           <img src="@/assets/img/workbench/9.png" alt="">
           <p class="name">理论考试系统</p>
         </div>

src/router/modules/assesment.js

@@ -5,17 +5,11 @@ const meta = {};
 const pre = "assessment-";
 
 export default {
-    path: "/assessment",
+  path: `/assessment`,
-    name: "assessment",
-    redirect: {
-        name: `${pre}list`
-    },
-    meta,
   component: BasicLayout,
   children: [
     {
-            name: `${pre}list`,
+      path: `/assessment`,
-            path: `list`,
       component: () => import("@/pages/assessment/list"),
       meta: { title: "考核管理" }
     },

src/styles/common.scss

@@ -383,3 +383,10 @@
 .el-image-viewer__close {
     color: #fff;
 }
+
+.ip {
+  z-index: 1;
+  position: fixed;
+  top: 0;
+  left: 0;
+}

src/styles/layout/index.scss

@@ -13,5 +13,5 @@ body {
   min-width: 1280px;
   font-family: PingFangSC-Regular, PingFang SC, "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
   font-size: 14px;
-  background: rgba(0, 0, 0, 0.05);
+  background: #f5f7fa;
 }