1111

src/layout/index.scss

@@ -111,10 +111,11 @@
         vertical-align: initial;
     }
     .el-sub-menu.is-active > .el-sub-menu__title {
-        background-color: var(--el-color-primary-light-3);
+        color: white;
+        text-shadow: 0 0 5px #20C98B;
     }
     .el-menu-item.is-active {
-        background-color: var(--el-color-primary-dark-2);
+        background-color: #282828;
         &::after {
             content: '';
             position: absolute;
@@ -122,96 +123,16 @@
             top: 0;
             width: 3px;
             height: 100%;
-            background-color: white;
+            background-color: #20C98B;
         }
     }
+    .el-sub-menu .el-menu {
+        --el-menu-bg-color: #5C5C5C;
+        --el-menu-hover-bg-color: #282828;
+        border: 1px solid rgb(84 84 84);
+    }
     .el-sub-menu .el-sub-menu__title:hover,
     .el-menu-item:not(.is-active):hover {
-        background-color: var(--el-color-primary-dark-2);
-    }
-    //折叠状态
-    &.el-menu--collapse {
-        margin-left: 0;
-        width: 90px;
-        .el-sub-menu__title {
-            height: inherit;
-            line-height: initial;
-            width: 90px;
-            justify-content: center;
-            transition: 0.2s;
-        }
-        .el-menu-item, .el-sub-menu {
-            padding: 0 !important;
-            height: 60px;
-            line-height: initial;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 90px;
-            transition: 0.2s;
-            .hc-aside-menu-item {
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-                width: 60px;
-                height: 60px;
-                text-align: center;
-                border-radius: 10px;
-                padding: 5px;
-                flex: initial;
-                transition: 0.2s;
-                .menu---item {
-                    position: relative;
-                    display: block;
-                }
-                .hc-menu-icon {
-                    margin-right: 0;
-                }
-                .name {
-                    flex: initial;
-                    width: 100%;
-                }
-                .el-badge, .el-badge .el-badge__content {
-                    vertical-align: initial;
-                }
-                .el-badge {
-                    position: absolute;
-                    top: -20px;
-                    right: -24px;
-                }
-            }
-        }
-        .el-sub-menu .el-icon.hc-icon-i {
-            display: none;
-        }
-        .el-menu-item + .el-menu-item,
-        .el-menu-item + .el-sub-menu,
-        .el-sub-menu + .el-menu-item,
-        .el-sub-menu + .el-sub-menu {
-            margin-top: 12px;
-        }
-        .el-sub-menu.is-active > .el-sub-menu__title {
-            background-color: initial;
-        }
-        .el-menu-item.is-active {
-            background-color: initial;
-        }
-        .el-sub-menu .el-sub-menu__title:hover,
-        .el-menu-item:not(.is-active):hover {
-            background-color: initial;
-        }
-        .el-sub-menu:not(.is-active):hover,
-        .el-menu-item:not(.is-active):hover {
-            .hc-aside-menu-item {
-                background-color: var(--el-color-primary-light-9);
-                color: var(--el-color-primary);
-            }
-        }
-        .el-menu-item.is-active, .el-sub-menu.is-active {
-            .hc-aside-menu-item {
-                color: #ffffff !important;
-                background: var(--el-color-primary-dark-2);
-            }
-        }
+        background-color: #282828;
     }
 }

src/layout/index.vue

@@ -42,7 +42,7 @@ import MenuBar from './modules/MenuBar.vue'
 import UserInfoBar from './modules/UserInfoBar.vue'
 
 //菜单数据
-const menuBarKey = ref(useRoutes.name)
+const menuBarKey = ref(useRoutes?.meta?.parent || useRoutes.name)
 //const menuBarData = ref(store.menus)
 const menuBarData = ref([])
 

src/router/modules/base.js

@@ -48,22 +48,28 @@ export default [
                 meta: { title: '项目资料收集' },
                 redirect: '/project/collect/middle',
                 children: [
+                    {
+                        path: '/project/collect/middle',
+                        name: 'project-collect-middle',
+                        meta: { title: '项目资料收集-中间', parent: 'project-collect' },
+                        component: () => import('~src/views/project/middle.vue'),
+                    },
                     {
                         path: '/project/collect/admin',
                         name: 'project-collect-admin',
-                        meta: { title: '项目管理' },
+                        meta: { title: '项目管理', parent: 'project-collect' },
                         redirect: '/project/collect/admin/create',
                         children: [
                             {
                                 path: '/project/collect/admin/create',
                                 name: 'project-collect-admin-create',
-                                meta: { title: '创建项目' },
+                                meta: { title: '创建项目', parent: 'project-collect' },
                                 component: () => import('~src/views/project/admin/create.vue'),
                             },
                             {
                                 path: '/project/collect/admin/list',
                                 name: 'project-collect-admin-list',
-                                meta: { title: '项目列表' },
+                                meta: { title: '项目列表', parent: 'project-collect' },
                                 component: () => import('~src/views/project/admin/list.vue'),
                             },
                         ],
@@ -71,31 +77,25 @@ export default [
                     {
                         path: '/project/collect/gist',
                         name: 'project-collect-gist',
-                        meta: { title: '工作要点管理' },
+                        meta: { title: '工作要点管理', parent: 'project-collect' },
                         redirect: '/project/collect/gist/create',
                         children: [
                             {
                                 path: '/project/collect/gist/create',
                                 name: 'project-collect-gist-create',
-                                meta: { title: '创建工作要点' },
+                                meta: { title: '创建工作要点', parent: 'project-collect' },
                                 component: () => import('~src/views/project/gist/create.vue'),
                             },
                             {
                                 path: '/project/collect/gist/list',
                                 name: 'project-collect-gist-list',
-                                meta: { title: '工作要点列表' },
+                                meta: { title: '工作要点列表', parent: 'project-collect' },
                                 component: () => import('~src/views/project/gist/list.vue'),
                             },
                         ],
                     },
                 ],
             },
-            {
-                path: '/project/collect/middle',
-                name: 'project-collect-middle',
-                meta: { title: '项目资料收集-中间' },
-                component: () => import('~src/views/project/middle.vue'),
-            },
             {
                 path: '/project/ledger',
                 name: 'project-ledger',