From 4019af2cbd099d9d90b7f69e24869e4f2f3dc2d1 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 08 四月 2026 14:01:18 +0800
Subject: [PATCH] 1.样式修改
---
src/assets/styles/variables.module.scss | 290 +++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 225 insertions(+), 65 deletions(-)
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index e065775..55b3822 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -1,65 +1,225 @@
-// base color
-$blue: #324157;
-$light-blue: #3A71A8;
-$red: #C03639;
-$pink: #E65D6E;
-$green: #30B08F;
-$tiffany: #4AB7BD;
-$yellow: #FEC171;
-$panGreen: #30B08F;
-
-// 榛樿鑿滃崟涓婚椋庢牸
-$base-menu-color: #bfcbd9;
-$base-menu-color-active: #f4f4f5;
-$base-menu-background: #304156;
-$base-logo-title-color: #ffffff;
-
-$base-menu-light-color: rgba(0, 0, 0, 0.7);
-$base-menu-light-background: #ffffff;
-$base-logo-light-title-color: #001529;
-
-$base-sub-menu-background: #1f2d3d;
-$base-sub-menu-hover: #001528;
-
-// 鑷畾涔夋殫鑹茶彍鍗曢鏍�
-/**
-$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;
-*/
-
-$--color-primary: #409EFF;
-$--color-success: #67C23A;
-$--color-warning: #E6A23C;
-$--color-danger: #F56C6C;
-$--color-info: #909399;
-
-$base-sidebar-width: 200px;
-
-// the :export directive is the magic sauce for webpack
-// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
-:export {
- menuColor: $base-menu-color;
- menuLightColor: $base-menu-light-color;
- menuColorActive: $base-menu-color-active;
- menuBackground: $base-menu-background;
- menuLightBackground: $base-menu-light-background;
- subMenuBackground: $base-sub-menu-background;
- subMenuHover: $base-sub-menu-hover;
- sideBarWidth: $base-sidebar-width;
- logoTitleColor: $base-logo-title-color;
- logoLightTitleColor: $base-logo-light-title-color;
- primaryColor: $--color-primary;
- successColor: $--color-success;
- dangerColor: $--color-danger;
- infoColor: $--color-info;
- warningColor: $--color-warning;
-}
+// base color
+$blue: #324157;
+$light-blue: #333c46;
+$red: #c03639;
+$pink: #e65d6e;
+$green: #30b08f;
+$tiffany: #4ab7bd;
+$yellow: #fec171;
+$panGreen: #30b08f;
+
+// menu palette
+$menuText: #677287;
+$menuActiveText: #1f7a72;
+$menuBg: #f4f7f4;
+$menuHover: #e7eeea;
+
+// light theme
+$menuLightBg: #f4f7f4;
+$menuLightHover: #e7eeea;
+$menuLightText: #3b4658;
+$menuLightActiveText: #1f7a72;
+
+// layout
+$base-sidebar-width: 216px;
+$sideBarWidth: 216px;
+
+// sidebar
+$base-menu-color: #677287;
+$base-menu-color-active: #1f7a72;
+$base-menu-background: #f4f7f4;
+$base-sub-menu-background: #eef3ef;
+$base-sub-menu-hover: #ffffff;
+
+// component
+$--color-primary: #1f7a72;
+$--color-success: #67c23a;
+$--color-warning: #d89b41;
+$--color-danger: #d25b52;
+$--color-info: #7d8797;
+
+:export {
+ menuText: $menuText;
+ menuActiveText: $menuActiveText;
+ menuBg: $menuBg;
+ menuHover: $menuHover;
+ menuLightBg: $menuLightBg;
+ menuLightHover: $menuLightHover;
+ menuLightText: $menuLightText;
+ menuLightActiveText: $menuLightActiveText;
+ sideBarWidth: $sideBarWidth;
+ blue: $blue;
+ lightBlue: $light-blue;
+ red: $red;
+ pink: $pink;
+ green: $green;
+ tiffany: $tiffany;
+ yellow: $yellow;
+ panGreen: $panGreen;
+ colorPrimary: $--color-primary;
+ colorSuccess: $--color-success;
+ colorWarning: $--color-warning;
+ colorDanger: $--color-danger;
+ colorInfo: $--color-info;
+}
+
+:root {
+ --sidebar-bg: #{$menuBg};
+ --sidebar-text: #{$menuText};
+ --sidebar-muted: #93a0b1;
+ --menu-hover: #{$menuHover};
+ --menu-active-bg: #dfe9e4;
+ --menu-surface: rgba(255, 255, 255, 0.72);
+
+ --app-bg: #eef2ee;
+ --app-bg-accent: #dfe8e2;
+ --surface-base: #ffffff;
+ --surface-soft: #f7faf8;
+ --surface-muted: #eff4f1;
+ --surface-border: #d8e1db;
+ --surface-border-strong: #c9d5ce;
+ --text-primary: #21313f;
+ --text-secondary: #5f6d7e;
+ --text-tertiary: #8a98a8;
+ --shadow-sm: 0 10px 30px rgba(31, 49, 38, 0.06);
+ --shadow-md: 0 18px 50px rgba(31, 49, 38, 0.1);
+ --radius-lg: 24px;
+ --radius-md: 18px;
+ --radius-sm: 12px;
+
+ --navbar-bg: rgba(255, 255, 255, 0.78);
+ --navbar-text: #21313f;
+ --navbar-hover: rgba(31, 122, 114, 0.08);
+
+ --tags-bg: transparent;
+ --tags-item-bg: rgba(255, 255, 255, 0.74);
+ --tags-item-border: rgba(201, 213, 206, 0.88);
+ --tags-item-text: #5f6d7e;
+ --tags-item-hover: rgba(31, 122, 114, 0.08);
+ --tags-close-hover: rgba(31, 122, 114, 0.18);
+
+ --splitpanes-default-bg: #ffffff;
+}
+
+html.dark {
+ --el-bg-color: #141414;
+ --el-bg-color-overlay: #1d1e1f;
+ --el-text-color-primary: #ffffff;
+ --el-text-color-regular: #d0d0d0;
+ --el-border-color: #434343;
+ --el-border-color-light: #434343;
+
+ --sidebar-bg: #141414;
+ --sidebar-text: #ffffff;
+ --menu-hover: #2d2d2d;
+ --menu-active-text: #{$menuActiveText};
+
+ --navbar-bg: #141414;
+ --navbar-text: #ffffff;
+ --navbar-hover: #141414;
+
+ --tags-bg: #141414;
+ --tags-item-bg: #1d1e1f;
+ --tags-item-border: #303030;
+ --tags-item-text: #d0d0d0;
+ --tags-item-hover: #2d2d2d;
+ --tags-close-hover: #64666a;
+
+ --splitpanes-bg: #141414;
+ --splitpanes-border: #303030;
+ --splitpanes-splitter-bg: #1d1e1f;
+ --splitpanes-splitter-hover-bg: #2d2d2d;
+
+ --blockquote-bg: #1d1e1f;
+ --blockquote-border: #303030;
+ --blockquote-text: #d0d0d0;
+ --cron-border: #303030;
+ --splitpanes-default-bg: #141414;
+
+ .sidebar-container {
+ .el-menu-item,
+ .menu-title {
+ color: var(--el-text-color-regular);
+ }
+
+ & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
+ & .theme-dark .el-sub-menu .el-menu-item {
+ background-color: var(--el-bg-color) !important;
+ }
+ }
+
+ .el-menu--horizontal {
+ .el-menu-item {
+ &:not(.is-disabled) {
+ &:hover,
+ &:focus {
+ background-color: var(--navbar-hover) !important;
+ }
+ }
+ }
+ }
+
+ .splitpanes {
+ background-color: var(--splitpanes-bg);
+
+ .splitpanes__pane {
+ background-color: var(--splitpanes-bg);
+ border-color: var(--splitpanes-border);
+ }
+
+ .splitpanes__splitter {
+ background-color: var(--splitpanes-splitter-bg);
+ border-color: var(--splitpanes-border);
+
+ &:hover {
+ background-color: var(--splitpanes-splitter-hover-bg);
+ }
+
+ &:before,
+ &:after {
+ background-color: var(--splitpanes-border);
+ }
+ }
+ }
+
+ .el-table {
+ --el-table-header-bg-color: var(--el-bg-color-overlay) !important;
+ --el-table-header-text-color: var(--el-text-color-regular) !important;
+ --el-table-border-color: var(--el-border-color-light) !important;
+ --el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important;
+
+ .el-table__header-wrapper,
+ .el-table__fixed-header-wrapper {
+ th {
+ background-color: var(--el-bg-color-overlay, #f0f1f5) !important;
+ color: var(--el-text-color-regular, #515a6e);
+ }
+ }
+ }
+
+ .el-tree {
+ .el-tree-node.is-current > .el-tree-node__content {
+ background-color: var(--el-bg-color-overlay) !important;
+ color: var(--el-color-primary);
+ }
+
+ .el-tree-node__content:hover {
+ background-color: var(--el-bg-color-overlay);
+ }
+ }
+
+ .el-dropdown-menu__item:not(.is-disabled):focus,
+ .el-dropdown-menu__item:not(.is-disabled):hover {
+ background-color: var(--navbar-hover) !important;
+ }
+
+ blockquote {
+ background-color: var(--blockquote-bg) !important;
+ border-left-color: var(--blockquote-border) !important;
+ color: var(--blockquote-text) !important;
+ }
+
+ .popup-result .title {
+ background: var(--cron-border);
+ }
+}
--
Gitblit v1.9.3