shiran/ApiServer-Web-admin_dashboard_pc
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:修改侧边栏样式
Build and Deploy Vue3 / build (push) Successful in 9m50s
Details
Build and Deploy Vue3 / deploy (push) Successful in 1m31s
Details

Browse Source
This commit is contained in:
2256907009
2026-01-20 18:25:38 +08:00
parent a6d4d70221
commit 1e79005440
4 changed files with 223 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/AdminLayout.vue
+187 -32
View File
@@ -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) {
src/components/layout/SidebarMenuItem.vue
+32 -29
View File
@@ -1,22 +1,25 @@
<template>
<el-sub-menu v-if="hasChildren" :index="menu.path">
<template #title>
<el-icon v-if="menu.icon || menu.meta?.icon">
<el-icon v-if="menu.icon || menu.meta?.icon" class="menu-icon">
<component :is="menu.icon || menu.meta?.icon" />
</el-icon>
<span>{{ menu.title || menu.meta?.title }}</span>
<span class="menu-title">{{ menu.title || menu.meta?.title }}</span>
</template>
<sidebar-menu-item
v-for="child in menu.children"
:key="child.path"
:menu="child"
:menu="child"
:level="level + 1"
/>
</el-sub-menu>
<el-menu-item v-else :index="menu.path">
<el-icon v-if="menu.icon || menu.meta?.icon">
<el-icon v-if="menu.icon || menu.meta?.icon" class="menu-icon">
<component :is="menu.icon || menu.meta?.icon" />
</el-icon>
<template #title>{{ menu.title || menu.meta?.title }}</template>
<template #title>
<span class="menu-title">{{ menu.title || menu.meta?.title }}</span>
</template>
</el-menu-item>
</template>
@@ -29,6 +32,10 @@ const props = defineProps({
menu: {
type: Object,
required: true
},
level: {
type: Number,
default: 1
}
})
@@ -39,49 +46,45 @@ const hasChildren = computed(() => {
</script>
<style scoped>
.el-icon {
margin-right: 12px;
/* 菜单图标样式 */
.menu-icon {
margin-right: 10px;
width: 20px;
height: 20px;
text-align: center;
color: #7f8c8d;
transition: color 0.2s ease;
font-size: 18px;
flex-shrink: 0;
}
.el-menu-item .el-icon, :deep(.el-sub-menu__title .el-icon) {
/* 菜单标题 */
.menu-title {
font-size: inherit;
letter-spacing: 0.2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 图标交互状态 */
.el-menu-item .menu-icon,
:deep(.el-sub-menu__title .menu-icon) {
color: #7f8c8d !important;
transition: color 0.2s ease;
}
.el-menu-item:hover .el-icon,
:deep(.el-sub-menu__title:hover .el-icon) {
.el-menu-item:hover .menu-icon,
:deep(.el-sub-menu__title:hover .menu-icon) {
color: #34495e !important;
}
/* 激活菜单项图标 */
.el-menu-item.is-active .el-icon {
.el-menu-item.is-active .menu-icon {
color: #2c3e50 !important;
}
:deep(.el-sub-menu.is-active > .el-sub-menu__title .el-icon) {
:deep(.el-sub-menu.is-opened > .el-sub-menu__title .menu-icon) {
color: #2c3e50 !important;
}
/* 菜单文字样式 */
.el-menu-item span, :deep(.el-sub-menu__title span) {
font-size: 14px;
letter-spacing: 0.2px;
}
/* 子菜单项样式优化 */
:deep(.el-sub-menu .el-menu-item) {
font-size: 13px;
padding-left: 48px !important;
}
:deep(.el-sub-menu .el-menu-item .el-icon) {
font-size: 16px;
margin-right: 10px;
}
</style>