From 95e2cdc6898873cdca0323244e3c6dc0c8ccc418 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Thu, 13 Jan 2022 18:01:33 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E7=9A=84=E6=B7=B1=E6=B5=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/index.ts                            |  0
 src/styles/common/_dark.scss                     |  2 ++
 src/styles/common/_light.scss                    |  2 ++
 src/styles/common/mixins/mixins.scss             |  6 ++++++
 src/styles/common/var.scss                       | 16 ++++++++++++++++
 .../components/ChartCommon/index.vue             |  2 +-
 .../chart/components/ContentCharts/index.vue     |  2 +-
 7 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 src/packages/index.ts

diff --git a/src/packages/index.ts b/src/packages/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/styles/common/_dark.scss b/src/styles/common/_dark.scss
index 0846da6c..fa74992e 100644
--- a/src/styles/common/_dark.scss
+++ b/src/styles/common/_dark.scss
@@ -6,7 +6,9 @@ $dark: (
   //背景
     background-color: $--color-dark-bg-1,
     background-color1: $--color-dark-bg-1,
+    background-color1-shallow: $--color-dark-bg-1-shallow,
     background-color2: $--color-dark-bg-2,
+    background-color2-shallow: $--color-dark-bg-2-shallow,
     background-color3: $--color-dark-bg-3,
     background-color4: $--color-dark-bg-4,
     background-color5: $--color-dark-bg-5,
diff --git a/src/styles/common/_light.scss b/src/styles/common/_light.scss
index d4189374..a90c01e1 100644
--- a/src/styles/common/_light.scss
+++ b/src/styles/common/_light.scss
@@ -8,7 +8,9 @@ $light: (
   //背景
     background-color: $--color-light-bg-3,
     background-color1: $--color-light-bg-1,
+    background-color1-shallow: $--color-light-bg-1-shallow,
     background-color2: $--color-light-bg-2,
+    background-color2-shallow: $--color-light-bg-2-shallow,
     background-color3: $--color-light-bg-3,
     background-color4: $--color-light-bg-4,
     background-color5: $--color-light-bg-5,
diff --git a/src/styles/common/mixins/mixins.scss b/src/styles/common/mixins/mixins.scss
index abc145e5..36b65107 100644
--- a/src/styles/common/mixins/mixins.scss
+++ b/src/styles/common/mixins/mixins.scss
@@ -38,6 +38,12 @@
   }
 }
 
+@mixin fetch-theme-custom ($key, $value) {
+  @include themeify {
+    #{$key}: themed($value);
+  }
+}
+
 //获取背景颜色
 @mixin filter-bg-color($target) {
   @include themeify {
diff --git a/src/styles/common/var.scss b/src/styles/common/var.scss
index 95dfe8a0..13787d32 100644
--- a/src/styles/common/var.scss
+++ b/src/styles/common/var.scss
@@ -10,22 +10,38 @@ $--color-text-2: #86909c;
 $--color-text-3: #c9cdd4;
 $--color-text-4: #f2f3f5;
 
+// 变亮值
+$--light-shalow: 2%;
+
 // 白色
 $--color-light-bg: #fff;
 $--color-light-bg-1: #fafafc;
+$--color-light-bg-1-shallow: lighten($--color-light-bg-1, $--light-shalow);
 $--color-light-bg-2: #f2f3f5;
+$--color-light-bg-2-shallow: lighten($--color-light-bg-2, $--light-shalow);
 $--color-light-bg-3: #e5e6eb;
+$--color-light-bg-3-shallow: lighten($--color-light-bg-3, $--light-shalow);
 $--color-light-bg-4: #c9cdd4;
+$--color-light-bg-4-shallow: lighten($--color-light-bg-4, $--light-shalow);
 $--color-light-bg-5: #bebebe;
+$--color-light-bg-5-shallow: lighten($--color-light-bg-5, $--light-shalow);
 $--color-light-border: #efeff5;
 
+// 变暗值
+$--dark-shalow: 2%;
+
 // 黑色
 $--color-dark-black: #000;
 $--color-dark-bg-1: #18181c;
+$--color-dark-bg-1-shallow: darken($--color-dark-bg-1, $--dark-shalow);
 $--color-dark-bg-2: #232324;
+$--color-dark-bg-2-shallow: darken($--color-dark-bg-2, $--dark-shalow);
 $--color-dark-bg-3: #2a2a2b;
+$--color-dark-bg-3-shallow: darken($--color-dark-bg-3, $--dark-shalow);
 $--color-dark-bg-4: #313132;
+$--color-dark-bg-4-shallow: darken($--color-dark-bg-4, $--dark-shalow);
 $--color-dark-bg-5: #373739;
+$--color-dark-bg-5-shallow: darken($--color-dark-bg-5, $--dark-shalow);
 $--color-dark-border: #333335;
 
 // 最大宽度
diff --git a/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue b/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue
index 4919edeb..b4afcc42 100644
--- a/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue
+++ b/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue
@@ -48,7 +48,7 @@ $topHeight: 36px;
   display: flex;
   height: calc(100vh - #{$--header-height} - #{$topHeight});
   .common-menu-width {
-    @include filter-bg-color('background-color2');
+    @include filter-bg-color('background-color2-shallow');
   }
 }
 </style>
diff --git a/src/views/chart/components/ContentCharts/index.vue b/src/views/chart/components/ContentCharts/index.vue
index b41f18c5..5b0180de 100644
--- a/src/views/chart/components/ContentCharts/index.vue
+++ b/src/views/chart/components/ContentCharts/index.vue
@@ -133,7 +133,7 @@ $topHeight: 36px;
     height: calc(100vh - #{$--header-height} - #{$topHeight});
     .menu-width {
       flex-shrink: 0;
-      @include filter-bg-color('background-color3');
+      @include filter-bg-color('background-color2');
     }
     .menu-component-box {
       flex-shrink: 0;