wsy182/RuoYi-Cloud
1
1
Fork 0
mirror of https://gitee.com/y_project/RuoYi-Cloud.git synced 2026-05-01 11:47:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化菜单主题风格

Browse Source
This commit is contained in:
RuoYi
2026-03-24 10:55:47 +08:00
parent 997dc3968e
commit 9df5446d5f
4 changed files with 99 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
ruoyi-ui/src/assets/styles/sidebar.scss
View File

@@ -74,6 +74,8 @@
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
height: 44px !important;
line-height: 44px !important;
}
// menu hover
@@ -105,6 +107,96 @@
background-color: $base-sub-menu-hover !important;
}
}
// theme-dark 深色主题
&.theme-dark {
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
border-right: none;
.el-menu-item.is-active {
position: relative;
&::before {
content: '';
position: absolute;
inset: 0;
background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
border-right: 3px solid var(--current-color, #409eff);
pointer-events: none;
z-index: 1;
}
}
.el-submenu.is-active > .el-submenu__title {
color: var(--current-color, #409eff) !important;
}
.el-menu-item:not(.is-active),
.submenu-title-noDropdown,
.el-submenu__title {
position: relative;
&::before {
content: '';
position: absolute;
inset: 0;
background-color: transparent;
pointer-events: none;
z-index: 1;
transition: background-color 0.2s;
}
&:hover::before {
background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
}
}
}
// theme-light 浅色主题
&.theme-light {
border-right: 1px solid #e8eaf0;
box-shadow: none;
.el-menu-item,
.el-submenu__title {
color: rgba(0, 0, 0, 0.65);
}
.el-menu-item.is-active {
color: var(--current-color, #409eff) !important;
position: relative;
&::before {
content: '';
position: absolute;
inset: 0;
background-color: var(--current-color-light, #ecf5ff);
border-right: 3px solid var(--current-color, #409eff);
pointer-events: none;
z-index: 1;
}
}
.el-submenu.is-active > .el-submenu__title {
color: var(--current-color, #409eff) !important;
}
.el-menu-item:not(.is-active):hover,
.submenu-title-noDropdown:hover,
.el-submenu__title:hover {
background-color: #f5f7fa !important;
color: rgba(0, 0, 0, 0.85) !important;
}
.nest-menu .el-submenu > .el-submenu__title,
.el-submenu .el-menu-item {
background-color: #fafafa !important;
&:hover {
background-color: #f0f5ff !important;
}
}
}
}
.hideSidebar {