diff --git a/src/components/layout/AdminLayout.vue b/src/components/layout/AdminLayout.vue
index 7eeec0b..fbf3f94 100644
--- a/src/components/layout/AdminLayout.vue
+++ b/src/components/layout/AdminLayout.vue
@@ -542,77 +542,232 @@ onUnmounted(() => {
/* Element Plus 菜单项样式优化 */
:deep(.el-menu) {
border-right: none;
+ padding: 8px 0;
}
+/* 一级菜单标题(有子菜单) */
:deep(.el-sub-menu__title) {
- height: 50px;
- line-height: 50px;
- margin: 0;
- padding: 0 20px;
- transition: background-color 0.2s ease;
+ height: 48px;
+ line-height: 48px;
+ margin: 2px 8px;
+ padding: 0 16px !important;
+ border-radius: 6px;
+ transition: all 0.2s ease;
color: #34495e !important;
+ font-weight: 500;
+ font-size: 14px;
}
:deep(.el-sub-menu__title:hover) {
- background-color: #f8f9fa !important;
+ background-color: #f5f7fa !important;
color: #2c3e50 !important;
}
-:deep(.el-menu-item) {
- height: 50px;
- line-height: 50px;
- margin: 0;
- padding: 0 20px;
- transition: background-color 0.2s ease;
+/* 一级菜单项(无子菜单) */
+:deep(.sidebar-menu > .el-menu-item) {
+ height: 48px;
+ line-height: 48px;
+ margin: 2px 8px;
+ padding: 0 16px !important;
+ border-radius: 6px;
+ transition: all 0.2s ease;
color: #34495e !important;
+ font-weight: 500;
+ font-size: 14px;
}
-:deep(.el-menu-item:hover) {
- background-color: #f8f9fa !important;
+:deep(.sidebar-menu > .el-menu-item:hover) {
+ background-color: #f5f7fa !important;
color: #2c3e50 !important;
}
-:deep(.el-menu-item.is-active) {
- background-color: rgba(44, 62, 80, 0.1) !important;
+:deep(.sidebar-menu > .el-menu-item.is-active) {
+ background-color: rgba(44, 62, 80, 0.08) !important;
color: #2c3e50 !important;
font-weight: 600;
- position: relative;
}
-:deep(.el-menu-item.is-active::before) {
+:deep(.sidebar-menu > .el-menu-item.is-active::before) {
content: '';
position: absolute;
left: 0;
- top: 0;
+ top: 50%;
+ transform: translateY(-50%);
width: 3px;
- height: 100%;
+ height: 24px;
+ background-color: #2c3e50;
+ border-radius: 0 2px 2px 0;
+}
+
+/* 展开的一级菜单标题 */
+:deep(.el-sub-menu.is-opened > .el-sub-menu__title) {
+ color: #2c3e50 !important;
+ font-weight: 600;
+ background-color: #f5f7fa !important;
+}
+
+/* 二级菜单容器 */
+:deep(.sidebar-menu > .el-sub-menu > .el-menu) {
+ background-color: transparent !important;
+ padding: 4px 0 8px 0;
+}
+
+/* 二级菜单项 */
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-menu-item) {
+ height: 40px;
+ line-height: 40px;
+ margin: 2px 8px 2px 16px;
+ padding: 0 16px 0 28px !important;
+ border-radius: 6px;
+ font-size: 13px;
+ color: #606266 !important;
+ background-color: transparent !important;
+ position: relative;
+ font-weight: 400;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-menu-item::before) {
+ content: '';
+ position: absolute;
+ left: 12px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 4px;
+ height: 4px;
+ background-color: #c0c4cc;
+ border-radius: 50%;
+ transition: all 0.2s ease;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-menu-item:hover) {
+ background-color: #f5f7fa !important;
+ color: #2c3e50 !important;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-menu-item:hover::before) {
+ background-color: #7f8c8d;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-menu-item.is-active) {
+ background-color: rgba(44, 62, 80, 0.08) !important;
+ color: #2c3e50 !important;
+ font-weight: 500;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-menu-item.is-active::before) {
+ width: 6px;
+ height: 6px;
background-color: #2c3e50;
}
-:deep(.el-sub-menu.is-active > .el-sub-menu__title) {
+/* 二级菜单中的子菜单标题(三级菜单父级) */
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-sub-menu__title) {
+ height: 40px;
+ line-height: 40px;
+ margin: 2px 8px 2px 16px;
+ padding: 0 16px 0 28px !important;
+ border-radius: 6px;
+ font-size: 13px;
+ color: #606266 !important;
+ font-weight: 400;
+ position: relative;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-sub-menu__title::before) {
+ content: '';
+ position: absolute;
+ left: 12px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 4px;
+ height: 4px;
+ background-color: #c0c4cc;
+ border-radius: 50%;
+ transition: all 0.2s ease;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-sub-menu__title:hover) {
+ background-color: #f5f7fa !important;
color: #2c3e50 !important;
- background-color: #f8f9fa !important;
}
-:deep(.el-sub-menu .el-menu) {
- background-color: #fafbfc !important;
- margin: 0;
- padding: 0;
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-sub-menu__title:hover::before) {
+ background-color: #7f8c8d;
}
-:deep(.el-sub-menu .el-menu-item) {
- margin: 0;
- padding-left: 48px !important;
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu.is-opened > .el-sub-menu__title) {
+ color: #2c3e50 !important;
+ font-weight: 500;
+ background-color: #f5f7fa !important;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu.is-opened > .el-sub-menu__title::before) {
+ width: 6px;
+ height: 6px;
+ background-color: #2c3e50;
+}
+
+/* 三级菜单容器 */
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-menu) {
background-color: transparent !important;
+ padding: 4px 0;
}
-:deep(.el-sub-menu .el-menu-item.is-active) {
- background-color: rgba(44, 62, 80, 0.12) !important;
+/* 三级菜单项 */
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-menu > .el-menu-item) {
+ height: 36px;
+ line-height: 36px;
+ margin: 2px 8px 2px 28px;
+ padding: 0 16px 0 24px !important;
+ border-radius: 6px;
+ font-size: 13px;
+ color: #909399 !important;
+ background-color: transparent !important;
+ position: relative;
+ font-weight: 400;
}
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-menu > .el-menu-item::before) {
+ content: '-';
+ position: absolute;
+ left: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: #c0c4cc;
+ font-size: 12px;
+ transition: all 0.2s ease;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-menu > .el-menu-item:hover) {
+ background-color: #f5f7fa !important;
+ color: #606266 !important;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-menu > .el-menu-item:hover::before) {
+ color: #7f8c8d;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-menu > .el-menu-item.is-active) {
+ background-color: rgba(44, 62, 80, 0.08) !important;
+ color: #2c3e50 !important;
+ font-weight: 500;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-menu > .el-menu-item.is-active::before) {
+ content: '•';
+ color: #2c3e50;
+ font-size: 14px;
+}
+
+/* 子菜单箭头图标 */
:deep(.el-sub-menu__icon-arrow) {
+ color: #909399 !important;
+ transition: all 0.2s ease;
+ font-size: 12px;
+}
+
+:deep(.el-sub-menu:hover > .el-sub-menu__title .el-sub-menu__icon-arrow) {
color: #7f8c8d !important;
- transition: transform 0.2s ease;
}
:deep(.el-sub-menu.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow) {
diff --git a/src/components/layout/SidebarMenuItem.vue b/src/components/layout/SidebarMenuItem.vue
index b990087..d45652f 100644
--- a/src/components/layout/SidebarMenuItem.vue
+++ b/src/components/layout/SidebarMenuItem.vue
@@ -1,22 +1,25 @@