88 lines
1.9 KiB
SCSS
88 lines
1.9 KiB
SCSS
// 自定义侧边栏样式 - 适配蓝色渐变背景
|
|
.sidebar-container {
|
|
// 覆盖Element UI菜单的默认样式
|
|
.el-menu {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
|
|
.el-menu-item, .el-submenu__title {
|
|
color: #ffffff !important;
|
|
background: transparent !important;
|
|
|
|
&:hover {
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
&.is-active {
|
|
background-color: rgba(255, 255, 255, 0.2) !important;
|
|
color: #ffffff !important;
|
|
border-right: 3px solid #ffffff !important;
|
|
}
|
|
}
|
|
|
|
.el-submenu {
|
|
.el-menu {
|
|
background-color: rgba(255, 255, 255, 0.05) !important;
|
|
|
|
.el-menu-item {
|
|
&:hover {
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
}
|
|
|
|
&.is-active {
|
|
background-color: rgba(255, 255, 255, 0.15) !important;
|
|
color: #ffffff !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 图标颜色
|
|
.svg-icon {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
// 文字颜色
|
|
span {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
// 激活状态的子菜单标题
|
|
.is-active > .el-submenu__title {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
// 子菜单展开时的样式
|
|
.el-submenu.is-opened > .el-submenu__title {
|
|
color: #ffffff !important;
|
|
}
|
|
}
|
|
|
|
// 弹出菜单样式
|
|
.el-menu--popup {
|
|
background: linear-gradient(135deg, #3aa4ef 0%, #0067e2 100%) !important;
|
|
border-radius: 8px !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
|
|
|
.el-menu-item {
|
|
color: #ffffff !important;
|
|
|
|
&:hover {
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
}
|
|
|
|
&.is-active {
|
|
background-color: rgba(255, 255, 255, 0.2) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 响应式设计
|
|
@media (max-width: 768px) {
|
|
.sidebar-container {
|
|
border-radius: 0 !important;
|
|
}
|
|
}
|