From e83aac69426229bc66a97664d19a9268f8e37e67 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Mon, 16 Dec 2024 11:02:40 +0800
Subject: [PATCH] fix

---
 src/layouts/home/index.vue         |  94 ++++++++++++-------
 src/layouts/sidebar/index.vue      | 146 +++++++++++++++++++++++++++++
 src/pages/workbench/list/index.vue |   2 +-
 src/router/modules/assesment.js    |  34 +++----
 src/styles/common.scss             |   7 ++
 src/styles/layout/index.scss       |   2 +-
 6 files changed, 229 insertions(+), 56 deletions(-)
 create mode 100644 src/layouts/sidebar/index.vue

diff --git a/src/layouts/home/index.vue b/src/layouts/home/index.vue
index 1be4039..7d06182 100644
--- a/src/layouts/home/index.vue
+++ b/src/layouts/home/index.vue
@@ -1,41 +1,43 @@
 <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>
-      <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="">
-        <img class="bg2" src="@/assets/img/log-bg1.png" alt="">
-        <p class="log-title">更新日志</p>
-        <div class="log-wrap">
-          <div class="logs">
-            <div class="item" v-for="(item, i) in list" :key="i" v-show="!i || (i && logAll)">
-              <h6>{{ item.versionName }}</h6>
-              <img v-if="item.coverUrl" :src="item.coverUrl" alt="" class="cover">
-              <ul class="detail">
-                <li v-for="(item, i) in item.logContents" :key="i">
-                  <p class="name"><img
-                      :src="require('@/assets/img/' + funcList.find(e => e.id === item.type).icon + '.png')" alt=""> {{
-                        funcList.find(e => e.id === item.type).name }}</p>
-                  <div class="val">
-                    <p v-for="(item, i) in item.content" :key="i">{{ i + 1 }}、{{ item }}</p>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="more-wrap">
-            <el-button class="know" type="primary" size="small" @click="logVisible = false">知道了</el-button>
+    </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="">
+      <img class="bg2" src="@/assets/img/log-bg1.png" alt="">
+      <p class="log-title">更新日志</p>
+      <div class="log-wrap">
+        <div class="logs">
+          <div class="item" v-for="(item, i) in list" :key="i" v-show="!i || (i && logAll)">
+            <h6>{{ item.versionName }}</h6>
+            <img v-if="item.coverUrl" :src="item.coverUrl" alt="" class="cover">
+            <ul class="detail">
+              <li v-for="(item, i) in item.logContents" :key="i">
+                <p class="name"><img
+                    :src="require('@/assets/img/' + funcList.find(e => e.id === item.type).icon + '.png')" alt=""> {{
+                      funcList.find(e => e.id === item.type).name }}</p>
+                <div class="val">
+                  <p v-for="(item, i) in item.content" :key="i">{{ i + 1 }}、{{ item }}</p>
+                </div>
+              </li>
+            </ul>
           </div>
         </div>
+        <div class="more-wrap">
+          <el-button class="know" type="primary" size="small" @click="logVisible = false">知道了</el-button>
+        </div>
       </div>
     </div>
 
@@ -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;
   }
 }
 
diff --git a/src/layouts/sidebar/index.vue b/src/layouts/sidebar/index.vue
new file mode 100644
index 0000000..2589833
--- /dev/null
+++ b/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>
diff --git a/src/pages/workbench/list/index.vue b/src/pages/workbench/list/index.vue
index b70ba02..3298a80 100644
--- a/src/pages/workbench/list/index.vue
+++ b/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>
diff --git a/src/router/modules/assesment.js b/src/router/modules/assesment.js
index 0c62983..478a3fb 100644
--- a/src/router/modules/assesment.js
+++ b/src/router/modules/assesment.js
@@ -5,25 +5,19 @@ const meta = {};
 const pre = "assessment-";
 
 export default {
-    path: "/assessment",
-    name: "assessment",
-    redirect: {
-        name: `${pre}list`
+  path: `/assessment`,
+  component: BasicLayout,
+  children: [
+    {
+      path: `/assessment`,
+      component: () => import("@/pages/assessment/list"),
+      meta: { title: "考核管理" }
     },
-    meta,
-    component: BasicLayout,
-    children: [
-        {
-            name: `${pre}list`,
-            path: `list`,
-            component: () => import("@/pages/assessment/list"),
-            meta: { title: "考核管理" }
-        },
-        {
-            name: `${pre}add`,
-            path: `add`,
-            component: () => import("@/pages/assessment/add/index.vue"),
-            meta: { title: "添加考核" }
-        }
-    ]
+    {
+      name: `${pre}add`,
+      path: `add`,
+      component: () => import("@/pages/assessment/add/index.vue"),
+      meta: { title: "添加考核" }
+    }
+  ]
 };
diff --git a/src/styles/common.scss b/src/styles/common.scss
index d49737b..579875d 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -383,3 +383,10 @@
 .el-image-viewer__close {
     color: #fff;
 }
+
+.ip {
+  z-index: 1;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
\ No newline at end of file
diff --git a/src/styles/layout/index.scss b/src/styles/layout/index.scss
index f946fc7..8ba464b 100644
--- a/src/styles/layout/index.scss
+++ b/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;
 }
\ No newline at end of file