cirry/simple-element-plus-template
1
0
Fork 0
mirror of https://github.com/fugary/simple-element-plus-template.git synced 2026-02-22 22:27:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

opt: 优化下菜单样式

Browse Source
This commit is contained in:
gary
2026-02-01 14:59:56 +08:00
parent f87cfaedf7
commit a1f0887032
1 changed files with 33 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/common-menu/index.vue
View File

@@ -51,5 +51,38 @@ const activeRoutePath = computed(() => {
</template>
<style scoped>
:deep(.el-menu) {
border-right: none;
}
/* Base Item Style */
:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
transition: all 0.3s;
}
/* Vertical Menu Active State (Default) */
:deep(.el-menu:not(.el-menu--horizontal) .el-menu-item.is-active) {
background-color: var(--el-color-primary-light-9);
border-right: 3px solid var(--el-color-primary);
color: var(--el-color-primary);
font-weight: 500;
}
/* Dark Mode Active Override */
.dark :deep(.el-menu:not(.el-menu--horizontal) .el-menu-item.is-active) {
background-color: rgba(64, 158, 255, 0.2);
}
/* Hover Effects */
:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
background-color: var(--el-fill-color-light);
color: var(--el-menu-text-color);
}
.dark :deep(.el-menu-item:hover),
.dark :deep(.el-sub-menu__title:hover) {
background-color: var(--el-bg-color-overlay);
}
</style>