Browse Source

左侧导航颜色修改

vera_min 2 years ago
parent
commit
4a20c34bfc
3 changed files with 12 additions and 3 deletions
  1. 2 0
      src/theme/app.scss
  2. 2 0
      src/theme/dark.scss
  3. 8 3
      src/theme/element.scss

+ 2 - 0
src/theme/app.scss

@@ -14,6 +14,8 @@
 	--next-color-primary-lighter: #ecf5ff;
 	--next-color-dark-hover: #0000001a;
 	--next-color-menu-hover: rgba(0, 0, 0, 0.1);
+	--next-color-menu-hover-blue: #e8f0fd;
+	--next-color-menu-text-blue: #1967D2;
 	--next-color-user-hover: rgba(0, 0, 0, 0.04);
 	--next-color-seting-main: #e9eef3;
 	--next-color-seting-aside: #d3dce6;

+ 2 - 0
src/theme/dark.scss

@@ -30,6 +30,8 @@
 	--next-bg-color              : var(--next-color-primary) !important;
 	--next-color-dark-hover      : var(--next-color-hover) !important;
 	--next-color-menu-hover      : var(--next-color-hover-rgba) !important;
+	--next-color-menu-hover-blue : var(--next-color-hover-rgba) !important;
+	--next-color-menu-text-blue  : var(--next-color-hover-rgba) !important;
 	--next-color-user-hover      : var(--next-color-hover-rgba) !important;
 	--next-color-seting-main     : var(--next-color-seting) !important;
 	--next-color-seting-aside    : var(--next-color-hover) !important;

+ 8 - 3
src/theme/element.scss

@@ -52,7 +52,8 @@
 ------------------------------- */
 // 鼠标 hover 时颜色
 .el-menu-hover-bg-color {
-	background-color: var(--next-color-menu-hover) !important;
+	background-color: var(--next-color-menu-hover-blue) !important
+	// background-color: var(--next-color-menu-hover) !important;
 }
 // 默认样式修改
 .el-menu {
@@ -90,13 +91,13 @@
 .el-sub-menu .fa {
 	@include generalIcon;
 }
-// 高亮时
+
 .el-menu-item.is-active,
 .el-sub-menu.is-active .el-sub-menu__title {
 	@extend .el-menu-hover-bg-color;
 	i,
 	span {
-		color: var(--el-menu-active-color) !important;
+		color: var(--next-color-menu-text-blue) !important;
 	}
 }
 .el-sub-menu.is-active.is-opened {
@@ -108,6 +109,10 @@
 		color: unset !important;
 	}
 }
+// 高亮时
+.el-menu-item.is-active {
+	color: var(--next-color-menu-text-blue) !important;
+}
 // 鼠标 hover 时
 .el-menu-item:hover,
 .el-sub-menu__title:hover {