菜单配置

src/assets/styles/index.scss

@@ -129,7 +129,7 @@ aside {
   width: 100%;
   background: #fff;
   box-shadow: 0px 0px 15px 0px rgba(229, 212, 212, 0.58);
-  border-radius: 8px;
+  border-radius: 8px 8px 0 0px;
   overflow-y: auto;
 }
 

src/assets/styles/sidebar.scss

@@ -81,7 +81,8 @@
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        color: #f8414d !important;
+        background-color: rgba(255, 72, 83, 0.2) !important;
       }
     }
 
@@ -100,14 +101,15 @@
       min-width: $base-sidebar-width !important;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        color: #f8414d !important;
+        background-color: rgba(255, 72, 83, 0.2) !important;
       }
     }
 
     & .theme-dark .nest-menu .el-submenu > .el-submenu__title,
     & .theme-dark .el-submenu .el-menu-item {
       // background-color: $base-sub-menu-background !important;
-      background-color: #faf7f7;
+      background-color: #faf7f7 !important;
 
       &:hover {
         // background-color: $base-sub-menu-hover !important;
@@ -210,7 +212,8 @@
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
-      background-color: rgba(0, 0, 0, 0.06) !important;
+      color: #f8414d !important;
+      background-color: rgba(255, 72, 83, 0.2) !important;
     }
   }
 

src/assets/styles/variables.scss

@@ -9,7 +9,7 @@ $yellow: #fec171;
 $panGreen: #30b08f;
 
 // 默认菜单主题风格
-$base-menu-color: #4c4949;
+$base-menu-color: #806e6e;
 $base-menu-color-active: #f4f4f5;
 $base-menu-background: #304156;
 $base-logo-title-color: #ffffff;
@@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
 
-$base-sidebar-width: 200px;
+$base-sidebar-width: 230px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,22 +1,47 @@
 <template>
   <div v-if="!item.hidden">
-    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+    <template
+      v-if="
+        hasOneShowingChild(item.children, item) &&
+        (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
+        !item.alwaysShow
+      "
+    >
+      <app-link
+        v-if="onlyOneChild.meta"
+        :to="resolvePath(onlyOneChild.path, onlyOneChild.query)"
+      >
+        <el-menu-item
+          :index="resolvePath(onlyOneChild.path)"
+          :class="{ 'submenu-title-noDropdown': !isNest }"
+        >
+          <item
+            :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
+            :title="onlyOneChild.meta.title"
+          />
         </el-menu-item>
       </app-link>
     </template>
 
-    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+    <el-submenu
+      v-else
+      ref="subMenu"
+      :index="resolvePath(item.path)"
+      popper-append-to-body
+    >
       <template slot="title">
-        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+        <item
+          v-if="item.meta"
+          :icon="item.meta && item.meta.icon"
+          :title="item.meta.title"
+        />
       </template>
       <sidebar-item
         v-for="child in item.children"
         :key="child.path"
         :is-nest="true"
         :item="child"
+        :title="child.meta.title"
         :base-path="resolvePath(child.path)"
         class="nest-menu"
       />
@@ -25,76 +50,76 @@
 </template>
 
 <script>
-import path from 'path'
-import { isExternal } from '@/utils/validate'
-import Item from './Item'
-import AppLink from './Link'
-import FixiOSBug from './FixiOSBug'
+import path from "path";
+import { isExternal } from "@/utils/validate";
+import Item from "./Item";
+import AppLink from "./Link";
+import FixiOSBug from "./FixiOSBug";
 
 export default {
-  name: 'SidebarItem',
+  name: "SidebarItem",
   components: { Item, AppLink },
   mixins: [FixiOSBug],
   props: {
     // route object
     item: {
       type: Object,
-      required: true
+      required: true,
     },
     isNest: {
       type: Boolean,
-      default: false
+      default: false,
     },
     basePath: {
       type: String,
-      default: ''
-    }
+      default: "",
+    },
   },
   data() {
-    this.onlyOneChild = null
-    return {}
+    this.onlyOneChild = null;
+    return {};
   },
   methods: {
     hasOneShowingChild(children = [], parent) {
       if (!children) {
         children = [];
       }
-      const showingChildren = children.filter(item => {
+      const showingChildren = children.filter((item) => {
         if (item.hidden) {
-          return false
+          return false;
         } else {
           // Temp set(will be used if only has one showing child)
-          this.onlyOneChild = item
-          return true
+          this.onlyOneChild = item;
+          return true;
         }
-      })
+      });
 
       // When there is only one child router, the child router is displayed by default
       if (showingChildren.length === 1) {
-        return true
+        return true;
       }
 
       // Show parent if there are no child router to display
       if (showingChildren.length === 0) {
-        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
-        return true
+        this.onlyOneChild = { ...parent, path: "", noShowingChildren: true };
+        return true;
       }
 
-      return false
+      return false;
     },
     resolvePath(routePath, routeQuery) {
       if (isExternal(routePath)) {
-        return routePath
+        return routePath;
       }
       if (isExternal(this.basePath)) {
-        return this.basePath
+        return this.basePath;
       }
       if (routeQuery) {
         let query = JSON.parse(routeQuery);
-        return { path: path.resolve(this.basePath, routePath), query: query }
-      }
-      return path.resolve(this.basePath, routePath)
-    }
-  }
+        return { path: path.resolve(this.basePath, routePath), query: query };
       }
+      return path.resolve(this.basePath, routePath);
+    },
+  },
+};
 </script>

src/layout/index.vue

@@ -111,7 +111,7 @@ export default {
     }
     .right-page {
       background: #f5f5f5;
-      padding: 13px;
+      padding: 13px 13px 0 13px;
       height: 100%;
       flex: 1;
       overflow: hidden;

src/views/volunteer/gxhzs/gxhzsff/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="app-container">个性化证书发放</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

src/views/volunteer/gxhzs/gxhzsgl/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="app-container">个性化证书管理</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

src/views/volunteer/gxhzs/hdzsff/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="app-container">一次性活动证书发放</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

src/views/volunteer/zyzsjgl/bqhgl/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="app-container">用户标签化管理</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

src/views/volunteer/zyzsjgl/hdgl/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="app-container">活动管理</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

src/views/volunteer/zyzsjgl/zdgl/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="app-container">标签字典管理</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>