修改侧边栏菜单渐变样式
This commit is contained in:
微微一笑
@ -16,7 +16,7 @@
|
||||
-webkit-transition: width 0.28s;
|
||||
transition: width 0.28s;
|
||||
width: $base-sidebar-width !important;
|
||||
background-color: $base-menu-background;
|
||||
background: #2c3e50; // 精确匹配设计UI的背景色
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
font-size: 0;
|
||||
@ -25,8 +25,15 @@
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
-webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
|
||||
// 使用CSS变量定义边框样式，支持动态修改
|
||||
border-right: var(--sidebarBorderWidth) var(--sidebarBorderStyle) var(--sidebarBorderColor);
|
||||
box-shadow: var(--sidebarBoxShadow);
|
||||
|
||||
// 备用方案：如果CSS变量不支持，使用默认样式
|
||||
@supports not (border-right: var(--sidebarBorderWidth) var(--sidebarBorderStyle) var(--sidebarBorderColor)) {
|
||||
border-right: none;
|
||||
box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
// reset element-ui css
|
||||
.horizontal-collapse-transition {
|
||||
@ -90,17 +97,23 @@
|
||||
.theme-dark .el-sub-menu__title {
|
||||
&:hover {
|
||||
background-color: $base-sub-menu-title-hover !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.sub-menu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
& .theme-dark .is-active > .el-sub-menu__title {
|
||||
color: $base-menu-color-active !important;
|
||||
color: #ffffff !important;
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
border-radius: 4px;
|
||||
margin: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
& .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
@ -108,6 +121,7 @@
|
||||
min-width: $base-sidebar-width !important;
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
@ -117,6 +131,7 @@
|
||||
|
||||
&:hover {
|
||||
background-color: $base-sub-menu-hover !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
@ -125,6 +140,7 @@
|
||||
&:hover {
|
||||
// you can use $sub-menuHover
|
||||
background-color: $base-menu-hover !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
& .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
@ -132,6 +148,7 @@
|
||||
&:hover {
|
||||
// you can use $sub-menuHover
|
||||
background-color: rgba(0, 0, 0, 0.04) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -232,3 +249,199 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义侧边栏样式类
|
||||
.sidebar-modern {
|
||||
.sidebar-container {
|
||||
background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
|
||||
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-minimal {
|
||||
.sidebar-container {
|
||||
background: #304156;
|
||||
box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1);
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-elegant {
|
||||
.sidebar-container {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
box-shadow: 3px 0 15px rgba(0, 0, 0, 0.25);
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 激活菜单项的渐变效果
|
||||
.el-menu-item.is-active {
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
color: #ffffff !important;
|
||||
border-radius: 4px;
|
||||
margin: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
// 子菜单激活状态
|
||||
.el-sub-menu.is-active > .el-sub-menu__title {
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
color: #ffffff !important;
|
||||
border-radius: 4px;
|
||||
margin: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
// 更精确的菜单项样式匹配图片效果
|
||||
.sidebar-container {
|
||||
// 确保背景色与图片一致
|
||||
background: #2c3e50 !important;
|
||||
|
||||
.el-menu-item {
|
||||
&.is-active {
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
color: #ffffff !important;
|
||||
border-radius: 4px;
|
||||
margin: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.el-sub-menu {
|
||||
&.is-active > .el-sub-menu__title {
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
color: #ffffff !important;
|
||||
border-radius: 4px;
|
||||
margin: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// 子菜单项激活状态（只有文字颜色变化，无背景）
|
||||
.el-sub-menu .el-menu-item {
|
||||
&.is-active {
|
||||
background: transparent !important;
|
||||
color: #409eff !important;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 精确匹配设计UI的样式类
|
||||
.sidebar-design-ui {
|
||||
.sidebar-container {
|
||||
background: #2c3e50 !important;
|
||||
box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1) !important;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.sidebar-logo-container {
|
||||
background: #2c3e50 !important;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
background: #2c3e50 !important;
|
||||
}
|
||||
|
||||
// 非激活菜单项样式
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: #bfcbd9 !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 激活的主菜单项（正确的渐变背景）
|
||||
.el-menu-item.is-active,
|
||||
.el-sub-menu.is-active > .el-sub-menu__title {
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
color: #ffffff !important;
|
||||
border-radius: 4px;
|
||||
margin: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
// 激活的子菜单项（只有蓝色文字，无背景）
|
||||
.el-sub-menu .el-menu-item.is-active {
|
||||
background: transparent !important;
|
||||
color: #409eff !important;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// 子菜单背景色
|
||||
.el-sub-menu .el-menu {
|
||||
background: #1f2d3d !important;
|
||||
}
|
||||
|
||||
// 子菜单项悬停效果
|
||||
.el-sub-menu .el-menu-item:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
// 主菜单项悬停效果
|
||||
.el-menu-item:hover,
|
||||
.el-sub-menu__title:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 全局菜单样式匹配设计UI
|
||||
#app .sidebar-container {
|
||||
// 确保背景色一致
|
||||
background: #2c3e50 !important;
|
||||
|
||||
// 菜单项基础样式
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: #bfcbd9 !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 激活的主菜单项
|
||||
.el-menu-item.is-active,
|
||||
.el-sub-menu.is-active > .el-sub-menu__title {
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
color: #ffffff !important;
|
||||
border-radius: 4px;
|
||||
margin: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
// 激活的子菜单项
|
||||
.el-sub-menu .el-menu-item.is-active {
|
||||
background: transparent !important;
|
||||
color: #409eff !important;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// 子菜单背景
|
||||
.el-sub-menu .el-menu {
|
||||
background: #1f2d3d !important;
|
||||
}
|
||||
|
||||
// 图标颜色
|
||||
.svg-icon {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
// 箭头图标颜色
|
||||
.el-sub-menu__icon-arrow {
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user