lhq/FT501-WMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改添加三个主题风格

Browse Source
This commit is contained in:
猫猫guowen
2025-07-04 10:53:34 +08:00
parent be34a04045
commit 6be43c4267
13 changed files with 264 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
ruoyi-ui/src/assets/styles/ruoyi.scss
View File

@@ -3,6 +3,15 @@
* Copyright (c) 2019 ruoyi
*/
/** 主题变量 **/
:root[data-theme='theme-new'] {
--navbar-background: #1897fe;
--navbar-color: #ffffff;
--tags-view-background: #ffffff;
--tags-view-text-color: #495060;
--tags-view-item-background: #ffffff;
}
/** 基础通用 **/
.pt5 {
padding-top: 5px;

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

@@ -65,9 +65,95 @@
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
border: none;
height: 100%;
width: 100% !important;
[data-theme='theme-light'] & {
.el-menu-item,
.el-submenu__title {
color: rgba(0,0,0,.70);
background-color: #ebebeb;
&:hover,
&:focus {
color: #2a7ffe !important;
background-color: #ebebeb !important;
}
}
.el-menu-item.is-active,
.el-submenu.is-active > .el-submenu__title {
color: #2a7ffe !important;
background-color: #ebebeb !important;
}
.el-submenu .el-menu-item {
background-color: #f5f5f5 !important;
padding-left: 34px !important;
padding-right: 20px !important;
width: calc(100% - 3px) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
&:hover,
&:focus {
color: #ffffff !important;
background-color: #2a7ffe !important;
}
&.is-active {
color: #ffffff !important;
background-color: #2a7ffe !important;
border-left: 3px solid #2a7ffe;
padding-left: 31px !important;
}
}
}
[data-theme='theme-new'] & {
.el-menu-item,
.el-submenu__title {
color: #495060;
background-color: #ffffff;
&:hover,
&:focus {
color: #1879da !important;
background-color: #ffffff !important;
}
}
.el-menu-item.is-active,
.el-submenu.is-active > .el-submenu__title {
color: #1879da !important;
background-color: #ffffff !important;
}
.el-submenu .el-menu-item {
background-color: #f5f5f5 !important;
padding-left: 34px !important;
padding-right: 20px !important;
width: calc(100% - 3px) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
&:hover,
&:focus {
color: #117ae0 !important;
background-color: #e4f5ff !important;
}
&.is-active {
color: #117ae0 !important;
background-color: #e4f5ff !important;
border-left: 3px solid #117ae0;
padding-left: 31px !important;
}
}
}
}
.el-menu-item, .el-submenu__title {
@@ -86,6 +172,7 @@
& .theme-dark .is-active > .el-submenu__title {
color: $base-menu-color-active !important;
background-color: $base-menu-background !important;
}
& .nest-menu .el-submenu>.el-submenu__title,
@@ -100,9 +187,16 @@
& .theme-dark .nest-menu .el-submenu>.el-submenu__title,
& .theme-dark .el-submenu .el-menu-item {
background-color: $base-sub-menu-background !important;
color: $base-menu-color !important;
&:hover {
background-color: $base-sub-menu-hover !important;
color: $base-sub-menu-hover-color !important;
}
&.is-active {
background-color: $base-sub-menu-hover !important;
color: $base-sub-menu-hover-color !important;
}
}
}

78
ruoyi-ui/src/assets/styles/variables.scss
View File

@@ -10,32 +10,48 @@ $panGreen: #30B08F;
// 默认菜单主题风格
$base-menu-color:#bfcbd9;
$base-menu-color-active:#f4f4f5;
$base-menu-background:#304156;
$base-menu-color-active:#007dfe;
$base-menu-background:#2c2e3d;
$base-logo-title-color: #ffffff;
$base-logo-title-background: #2c2e3d;
$base-tags-view-background: #2c2e3d;
$base-tags-view-color: #ffffff;
$base-sub-menu-background:#383b46d0;
$base-sub-menu-hover:#007dfe;
$base-sub-menu-hover-color:#ffffff;
// 浅色主题
$base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff;
$base-logo-light-title-color: #001529;
$base-menu-light-color-active: #2a7ffe;
$base-menu-light-background:#ebebeb;
$base-logo-light-title-color: #000000;
$base-logo-light-title-background: #ebebeb;
$base-tags-view-light-background: #f6f6f6;
$base-tags-view-light-color: #000000;
$base-sub-menu-light-background: #f5f5f5;
$base-sub-menu-light-hover: #2a7ffe;
$base-sub-menu-light-hover-color: #ffffff;
$base-sub-menu-background:#1f2d3d;
$base-sub-menu-hover:#001528;
// 新主题
$base-menu-new-color:rgba(0,0,0,.70);
$base-menu-new-background:#ebebeb;
$base-logo-new-title-color: #000000;
$base-logo-new-title-background: #1897fe;
$base-tags-view-new-background: #1897fe;
$base-tags-view-new-color: #ffffff;
// 自定义暗色菜单风格
/**
$base-menu-color:hsla(0,0%,100%,.65);
$base-menu-color-active:#fff;
$base-menu-background:#001529;
$base-logo-title-color: #ffffff;
$base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff;
$base-logo-light-title-color: #001529;
$base-sub-menu-background:#000c17;
$base-sub-menu-hover:#001528;
*/
// 新主题风格
$base-menu-new-color: $base-menu-light-color;
$base-menu-new-color-active: #1879da;
$base-menu-new-background: #ffffff;
$base-logo-new-title-color: #ffffff;
$base-sub-menu-new-background: #f5f5f5;
$base-nav-new-background: #1897fe;
$base-nav-new-color: #ffffff;
// 侧边栏基础宽度，可以通过公式 200+8n 进行调整
$base-sidebar-width: 200px;
// the :export directive is the magic sauce for webpack
@@ -43,12 +59,34 @@ $base-sidebar-width: 200px;
:export {
menuColor: $base-menu-color;
menuLightColor: $base-menu-light-color;
menuLightColorActive: $base-menu-light-color-active;
menuColorActive: $base-menu-color-active;
subMenuLightBackground: $base-sub-menu-light-background;
subMenuLightHover: $base-sub-menu-light-hover;
subMenuLightHoverColor: $base-sub-menu-light-hover-color;
menuBackground: $base-menu-background;
menuLightBackground: $base-menu-light-background;
subMenuBackground: $base-sub-menu-background;
subMenuHover: $base-sub-menu-hover;
subMenuHoverColor: $base-sub-menu-hover-color;
sideBarWidth: $base-sidebar-width;
logoTitleColor: $base-logo-title-color;
logoLightTitleColor: $base-logo-light-title-color
logoLightTitleColor: $base-logo-light-title-color;
// 新主题变量导出
menuNewColor: $base-menu-new-color;
menuNewColorActive: $base-menu-new-color-active;
menuNewBackground: $base-menu-new-background;
logoNewTitleColor: $base-logo-new-title-color;
logoTitleBackground: $base-logo-title-background;
logoLightTitleBackground: $base-logo-light-title-background;
logoNewTitleBackground: $base-logo-new-title-background;
subMenuNewBackground: $base-sub-menu-new-background;
navNewBackground: $base-nav-new-background;
navNewColor: $base-nav-new-color;
tagsViewBackground: $base-tags-view-background;
tagsViewColor: $base-tags-view-color;
tagsViewLightBackground: $base-tags-view-light-background;
tagsViewLightColor: $base-tags-view-light-color;
tagsViewNewBackground: $base-tags-view-new-background;
tagsViewNewColor: $base-tags-view-new-color
}