liubiao/dyf-vue-ui
1
0
Fork 0
forked from dyf/dyf-vue-ui
Code Pull Requests Activity

修改侧边栏菜单渐变样式

Browse Source
This commit is contained in:
微微一笑
2025-08-11 14:39:23 +08:00
parent acc8ce1ebb
commit 950337db72
7 changed files with 257 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -1,5 +1,5 @@
# 页面标题
VITE_APP_TITLE = 物联网管理系统
VITE_APP_TITLE = 星汉研创科技
# 开发环境配置
VITE_APP_ENV = 'development'

2
.env.production
View File

@ -1,5 +1,5 @@
# 页面标题
VITE_APP_TITLE = 物联网管理系统
VITE_APP_TITLE = 星汉研创科技
# 生产环境配置 晶全1
VITE_APP_ENV = 'https://fuyuanshen.com/backend'

2
index.html
View File

@ -6,7 +6,7 @@
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="icon" href="/favicon.ico" />
<title>物联网管理系统</title>
<title>星汉研创科技</title>
<!--[if lt IE 11
]><script>
window.location.href = '/html/ie.html';

2
package.json
View File

@ -2,7 +2,7 @@
"$schema": "https://json.schemastore.org/package",
"name": "fys",
"version": "5.4.0-2.4.0",
"description": "物联网管理系统",
"description": "星汉研创科技",
"author": "LionLi",
"license": "MIT",
"type": "module",

221
src/assets/styles/sidebar.scss
View File

@ -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;
}
}

48
src/assets/styles/variables.module.scss
View File

@ -1,19 +1,28 @@
// 全局SCSS变量
:root {
--menuBg: #304156;
--menuColor: #bfcbd9;
--menuActiveText: #f4f4f5;
--menuHover: #263445;
--menuBg: #2c3e50; // 精确匹配图片中的深色背景
--menuColor: #bfcbd9; // 非激活菜单项的文字颜色
--menuActiveText: #ffffff; // 激活菜单项的文字颜色
--menuHover: #34495e; // 悬停时的背景色
--subMenuBg: #1f2d3d;
--subMenuActiveText: #f4f4f5;
--subMenuHover: #001528;
--subMenuTitleHover: #293444;
--subMenuBg: #1f2d3d; // 子菜单背景色
--subMenuActiveText: #409eff; // 激活子菜单项的文字颜色（蓝色）
--subMenuHover: #001528; // 子菜单悬停背景色
--subMenuTitleHover: #293444; // 子菜单标题悬停背景色
// 激活菜单项的渐变颜色 - 根据设计UI调整
--menuActiveGradient: linear-gradient(90deg, #0080EA 0%, #000F27 100%);
--fixedHeaderBg: #ffffff;
--tableHeaderBg: #f8f8f9;
--tableHeaderTextColor: #515a6e;
// 侧边框样式变量 - 实现无边框但有阴影的效果
--sidebarBorderColor: transparent;
--sidebarBorderWidth: 0px;
--sidebarBorderStyle: solid;
--sidebarBoxShadow: 1px 0 4px rgba(0, 0, 0, 0.1);
// ele
--brder-color: #e8e8e8;
@ -23,20 +32,29 @@
}
html.dark {
--menuBg: #1d1e1f;
--menuBg: #2c3e50; // 保持与浅色模式一致
--menuColor: #bfcbd9;
--menuActiveText: #f4f4f5;
--menuHover: #171819;
--menuActiveText: #ffffff;
--menuHover: #34495e;
--subMenuBg: #1d1e1f;
--subMenuActiveText: #1d1e1f;
--subMenuHover: #171819;
--subMenuTitleHover: #171819;
--subMenuBg: #1f2d3d;
--subMenuActiveText: #409eff; // 激活子菜单项保持蓝色
--subMenuHover: #001528;
--subMenuTitleHover: #293444;
// 激活菜单项的渐变颜色 - 根据设计UI调整
--menuActiveGradient: linear-gradient(90deg, #0080EA 0%, #000F27 100%);
--fixedHeaderBg: #171819;
--tableHeaderBg: var(--el-bg-color);
--tableHeaderTextColor: var(--el-text-color);
// 深色模式侧边框样式变量 - 实现无边框但有阴影的效果
--sidebarBorderColor: transparent;
--sidebarBorderWidth: 0px;
--sidebarBorderStyle: solid;
--sidebarBoxShadow: 1px 0 4px rgba(0, 0, 0, 0.15);
// 覆盖ele 高亮当前行的标准暗色
.el-tree-node__content {
--el-color-primary-light-9: #262727;

6
src/layout/components/Sidebar/Logo.vue
View File

@ -34,7 +34,7 @@ defineProps({
}
});
const title = ref('物联网管理系统');
const title = ref('星汉研创科技');
const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
</script>
@ -54,7 +54,7 @@ const sideTheme = computed(() => settingsStore.sideTheme);
width: 100%;
height: 50px;
line-height: 50px;
background: #2b2f3a;
background: #2c3e50; // 精确匹配设计UI的背景色
text-align: center;
overflow: hidden;
@ -75,7 +75,7 @@ const sideTheme = computed(() => settingsStore.sideTheme);
color: #fff;
font-weight: 600;
line-height: 50px;
font-size: 14px;
font-size: 16px; // 匹配设计UI的字体大小
font-family:
Avenir,
Helvetica Neue,