github/lina
1
0
Fork 0
mirror of https://github.com/jumpserver/lina.git synced 2026-01-13 11:24:17 +00:00
Code Issues Projects Releases Wiki Activity

perf: 修改菜单主题颜色配置

Browse Source
This commit is contained in:
“huailei000”
2022-11-28 18:53:29 +08:00
committed by huailei
parent d445019131
commit 4af602b706
7 changed files with 18 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/layout/components/NavHeader/ViewSwitcher.vue
View File

@@ -188,8 +188,8 @@ export default {
}
.el-menu-item.is-active {
font-weight: bold;
color: var(--submenu-active-text);
border-left: 4px solid var(--menu-active-left);
color: var(--color-primary);
border-left: 4px solid var(--color-primary);
}
.menu-main.mobile-view-switch >>> .el-submenu__icon-arrow {
right: 10px;

4
src/layout/components/NavLeft/index.vue
View File

@@ -150,11 +150,11 @@ export default {
transform: translateY(-50%);
z-index: 1;
&:hover {
color: var(--menu-active-text);
color: var(--color-primary);
}
.icon {
&:hover {
color: var(--submenu-active-text);
color: var(--color-primary);
}
}
}

8
src/styles/default-theme.scss
View File

@@ -8,10 +8,6 @@
--menu-text: #646A73;
--menu-hover: #f4faf9;
--submenu-bg: #ffffff;
--submenu-hover: #f4faf9;
--submenu-active-text: #2b937c;
--menu-active-text: #1F2329;
--menu-active-left: #2b937c;
}
:export {
@@ -24,8 +20,4 @@
--menu-text: #646A73;
--menu-hover: #f4faf9;
--submenu-bg: #ffffff;
--submenu-hover: #f4faf9;
--submenu-active-text: #2b937c;
--menu-active-text: #1F2329;
--menu-active-left: #2b937c;
}

2
src/styles/menu.scss
View File

@@ -94,7 +94,7 @@
}
li.is-active {
// border-left: 4px solid $menuActiveLeft;
// border-left: 4px solid var(--color-primary);
}
.el-submenu-sidebar .el-menu-item {

3
src/styles/sidebar.scss
View File

@@ -199,7 +199,8 @@
height: 36px;
line-height: 36px;
&.is-active {
border-left: 4px solid $menuActiveLeft;
color: var(--color-primary);
border-left: 4px solid var(--color-primary);
}
}
}

7
src/styles/variables.scss
View File

@@ -16,13 +16,12 @@ $--color-link-highlight: #23527c;
// Menu
$menuText: var(--menu-text);
$menuActiveLeft: var(--menu-active-left);
$menuActiveText: var(--color-primary);
$menuBg: white;
$menuBg: var(--menu-bg);
$menuTextWeight: 600;
$menuHover: var(--menu-hover);
$subMenuBg: white;
$subMenuHover: #f4faf9;
$subMenuBg: var(--submenu-bg);
$subMenuHover: var(--menu-hover);
$subMenuActiveText: var(--color-primary);
$sideBarWidth: 200px;

18
src/utils/theme/color.js
View File

@@ -67,18 +67,16 @@ export function changeMenuColor(themeColors) {
const elementStyle = document.documentElement.style
const colors = Object.keys(themeColors).length > 0 ? themeColors : defaultThemeConfig
const colorValue = themeColors['--color-primary'].replace(/#/g, '')
const black = 'ffffff'
const menuHoverColor = mix(black, colorValue, 96)
elementStyle.setProperty('--menu-hover', menuHoverColor)
for (const key in colors) {
const currentColor = colors[key]
const colorValue = currentColor.replace(/#/g, '')
elementStyle.setProperty(key, currentColor)
const black = '000000'
if (key === '--menu-bg') {
const menuHoverColor = mix(black, colorValue, 10)
const subMenuBgColor = mix(black, colorValue, 20)
const subMenuHoverColor = mix(black, colorValue, 35)
elementStyle.setProperty('--menu-hover', menuHoverColor)
elementStyle.setProperty('--submenu-bg', subMenuBgColor)
elementStyle.setProperty('--submenu-hover', subMenuHoverColor)
if (key.includes('--color')) {
elementStyle.setProperty(key, currentColor)
}
}
}