From 64d172717748c383a5c88348037354bffd60f966 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 27 五月 2025 17:52:03 +0800
Subject: [PATCH] 页面样式修改
---
src/assets/styles/variables.module.scss | 221 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 221 insertions(+), 0 deletions(-)
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
new file mode 100644
index 0000000..13ffa62
--- /dev/null
+++ b/src/assets/styles/variables.module.scss
@@ -0,0 +1,221 @@
+// base color
+$blue: #324157;
+$light-blue: #333c46;
+$red: #C03639;
+$pink: #E65D6E;
+$green: #30B08F;
+$tiffany: #4AB7BD;
+$yellow: #FEC171;
+$panGreen: #30B08F;
+
+// 榛樿涓婚鍙橀噺
+$menuText: #ffffff;
+$menuActiveText: #165DFF;
+$menuBg: #165DFF;
+$menuHover: #ffffff;
+
+// 娴呰壊涓婚theme-light
+$menuLightBg: #165DFF;
+$menuLightHover: #ffffff;
+$menuLightText: #ffffff;
+$menuLightActiveText: #165DFF;
+
+// 鍩虹鍙橀噺
+$base-sidebar-width: 200px;
+$sideBarWidth: 200px;
+
+// 鑿滃崟鏆楄壊鍙橀噺
+$base-menu-color: #bfcbd9;
+$base-menu-color-active: #f4f4f5;
+$base-menu-background: #165DFF;
+$base-sub-menu-background: #1f2d3d;
+$base-sub-menu-hover: #001528;
+
+// 缁勪欢鍙橀噺
+$--color-primary: #165DFF;
+$--color-success: #67C23A;
+$--color-warning: #E6A23C;
+$--color-danger: #F56C6C;
+$--color-info: #909399;
+
+: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;
+}
+
+// CSS鍙橀噺瀹氫箟
+:root {
+ /* 浜壊妯″紡鍙橀噺 */
+ --sidebar-bg: #{$menuBg};
+ --sidebar-text: #{$menuText};
+ --menu-hover: #{$menuHover};
+
+ --navbar-bg: #ffffff;
+ --navbar-text: #303133;
+
+ /* splitpanes default-theme 鍙橀噺 */
+ --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 缁勪欢鏆楅粦妯″紡鍙橀噺 */
+ --splitpanes-bg: #141414;
+ --splitpanes-border: #303030;
+ --splitpanes-splitter-bg: #1d1e1f;
+ --splitpanes-splitter-hover-bg: #2d2d2d;
+
+ /* blockquote 鏆楅粦妯″紡鍙橀噺 */
+ --blockquote-bg: #1d1e1f;
+ --blockquote-border: #303030;
+ --blockquote-text: #d0d0d0;
+
+ /* Cron 鏃堕棿琛ㄨ揪寮� 妯″紡鍙橀噺 */
+ --cron-border: #303030;
+
+ /* splitpanes default-theme 鏆楅粦妯″紡鍙橀噺 */
+ --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, #f8f8f9) !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鏍峰紡瑕嗙洊 */
+ 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