mirror of
https://github.com/jumpserver/lina.git
synced 2025-09-18 08:12:33 +00:00
perf: 优化 theme
This commit is contained in:
@@ -3,9 +3,9 @@
|
||||
<el-tabs
|
||||
v-if="tabIndices.length > 0"
|
||||
v-model="iActiveMenu"
|
||||
:class="{ 'only-submenu': tabIndices.length === 1}"
|
||||
class="page-submenu"
|
||||
stretch
|
||||
:class="{ 'only-submenu': tabIndices.length === 1}"
|
||||
@tab-click="handleTabClick"
|
||||
>
|
||||
<template v-for="item in tabIndices">
|
||||
@@ -183,7 +183,7 @@ export default {
|
||||
position: static;
|
||||
|
||||
.el-tabs__item.is-active {
|
||||
color: var(--color-primary);
|
||||
color: var(--menu-text-active);
|
||||
}
|
||||
}
|
||||
.only-submenu {
|
||||
|
@@ -203,8 +203,8 @@ export default {
|
||||
|
||||
.el-menu-item.is-active {
|
||||
font-weight: bold;
|
||||
color: var(--color-primary);
|
||||
border-left: 4px solid var(--color-primary);
|
||||
color: var(--menu-text-active);
|
||||
border-left: 4px solid var(--menu-text-active);
|
||||
}
|
||||
|
||||
.menu-main.mobile-view-switch > > > .el-submenu__icon-arrow {
|
||||
|
@@ -101,7 +101,7 @@ export default {
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
overflow: hidden;
|
||||
background: var(--nav-bg);
|
||||
background: var(--banner-bg);
|
||||
|
||||
.navbar-left {
|
||||
float: left;
|
||||
|
@@ -4,22 +4,24 @@
|
||||
--color-info: #1c84c6;
|
||||
--color-warning: #f8ac59;
|
||||
--color-danger: #ed5565;
|
||||
--banner-bg: #148f76;
|
||||
--submenu-bg: #ffffff;
|
||||
--menu-bg: #ffffff;
|
||||
--menu-text: #646A73;
|
||||
--menu-hover: #f4faf9;
|
||||
--submenu-bg: #ffffff;
|
||||
--nav-bg: #148f76;
|
||||
--menu-text-active: #1ab394;
|
||||
--menu-hover: #ffffff;
|
||||
}
|
||||
|
||||
:export {
|
||||
--color-primary: #1ab394;
|
||||
--color-success: #2793d7;
|
||||
--color-info: #1c84c6;
|
||||
--color-success: #2793d7;
|
||||
--color-warning: #f8ac59;
|
||||
--color-danger: #ed5565;
|
||||
--banner-bg: #148f76;
|
||||
--submenu-bg: #ffffff;
|
||||
--menu-bg: #ffffff;
|
||||
--menu-text: #646A73;
|
||||
--menu-hover: #f4faf9;
|
||||
--submenu-bg: #ffffff;
|
||||
--nav-bg: #148f76;
|
||||
--menu-text-active: #1ab394;
|
||||
--menu-hover: #ffffff;
|
||||
}
|
||||
|
@@ -22,7 +22,7 @@
|
||||
|
||||
.el-submenu, .el-menu-item.submenu-title-noDropdown {
|
||||
background-color: $menuBg;
|
||||
border-top: solid 1px white;
|
||||
border-top: solid 1px $menuBg;
|
||||
|
||||
.el-submenu__title {
|
||||
color: $menuText;
|
||||
@@ -50,7 +50,6 @@
|
||||
&.is-active {
|
||||
color: $subMenuActiveText;
|
||||
font-weight: 400;
|
||||
//background-color: $subMenuHover !important;
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
@@ -116,7 +115,7 @@
|
||||
// background-color: var(--menu-hover) !important;
|
||||
//}
|
||||
|
||||
border-left: 4px solid var(--color-primary);
|
||||
border-left: 4px solid var(--menu-text-active);
|
||||
}
|
||||
|
||||
.el-submenu-sidebar .el-menu-item {
|
||||
|
@@ -16,13 +16,13 @@ $--color-link-highlight: #23527c;
|
||||
|
||||
// Menu
|
||||
$menuText: var(--menu-text);
|
||||
$menuActiveText: var(--color-primary);
|
||||
$menuActiveText: var(--menu-text-active);
|
||||
$menuBg: var(--menu-bg);
|
||||
$menuTextWeight: 600;
|
||||
$menuHover: var(--menu-hover);
|
||||
$subMenuBg: var(--submenu-bg);
|
||||
$subMenuHover: var(--menu-hover);
|
||||
$subMenuActiveText: var(--color-primary);
|
||||
$subMenuActiveText: var(--menu-text-active);
|
||||
$sideBarWidth: 200px;
|
||||
|
||||
:export {
|
||||
|
@@ -74,19 +74,14 @@ export function changeMenuColor(themeColors) {
|
||||
const elementStyle = document.documentElement.style
|
||||
const colors = Object.keys(themeColors).length > 0 ? themeColors : defaultThemeConfig
|
||||
|
||||
const colorValue = colors['--color-primary'].replace(/#/g, '')
|
||||
const white = 'ffffff'
|
||||
const black = '000000'
|
||||
const menuHoverColor = mix(white, colorValue, 90)
|
||||
const navBackgroundColor = mix(black, colorValue, 20)
|
||||
elementStyle.setProperty('--menu-hover', menuHoverColor)
|
||||
elementStyle.setProperty('--nav-bg', navBackgroundColor)
|
||||
|
||||
for (const key in colors) {
|
||||
const currentColor = colors[key]
|
||||
elementStyle.setProperty(key, currentColor)
|
||||
|
||||
if (key.includes('--color')) {
|
||||
elementStyle.setProperty(key, currentColor)
|
||||
const lightColor = mix(white, currentColor.replace(/#/g, ''), 70)
|
||||
const darkColor = mix(black, currentColor.replace(/#/g, ''), 20)
|
||||
elementStyle.setProperty(key + '-light', lightColor)
|
||||
|
Reference in New Issue
Block a user