优化深色主题

src/assets/styles/black.scss

@@ -1,6 +1,7 @@
 // 黑夜模式
 [data-theme='theme-black'] {
   --base-color: #304156;
+  --base-color-rgba: rgba(48, 65, 86, 0.3);
   // root
   --base-menu-color: var(--base-color);
   --base-menu-color-active: #f4f4f5;
@@ -9,12 +10,8 @@
   --base-logo-title-color: #ffffff;
   --base-topBar-background: var(--base-color) !important;
   --base-topBar-color: #fff;
-  // --base-tags-bg-border: #304156 !important;
-  //缩小状态下子菜单选中颜色
-  // --base-sub-menu-hover: #000;
 
-  --next-color-white: #ffffff;
+  --base-color-white: #ffffff;
-  --next-color-disabled: #304156;
   --next-color-bar: #dadada;
   --next-border-color: #424242;
   --next-border-black: #333333;
@@ -28,7 +25,7 @@
   --el-fill-color-blank: var(--base-bg-main) !important;
   // element plus
   --el-table-bg-color: var(--el-fill-color-blank);
-  --el-color-white: var(--next-color-disabled) !important;
+  --el-color-white: var(--base-color) !important;
   --el-text-color-primary: var(--next-color-bar) !important;
   --el-border-color-base: var(--next-border-black) !important;
   --el-border-color-light: var(--next-border-black) !important;
@@ -42,30 +39,24 @@
   --el-text-color-disabled-base: var(--el-color-primary) !important;
   --el-border-color-lighter: var(--next-border-black) !important;
   --el-text-color-placeholder: var(--next-text-color-placeholder) !important;
-  --el-disabled-bg-color: var(--next-color-disabled) !important;
+  --el-disabled-bg-color: var(--base-color) !important;
-  --el-fill-base: var(--next-color-white) !important;
+  --el-fill-base: var(--base-color-white) !important;
   // el-date-picker bg
   --el-bg-color-overlay: var(--base-bg-main) !important;
   // drawer
   .drawer-item,
   .drawer-title {
-    color: var(--next-color-white) !important;
+    color: var(--base-color-white) !important;
   }
 
-  // button
-  .el-button {
-    &:hover {
-      border-color: var(--next-border-color) !important;
-    }
-  }
   .el-button--primary,
   .el-button--info,
   .el-button--danger,
   .el-button--success,
   .el-button--warning {
-    --el-button-text-color: var(--next-color-white) !important;
+    --el-button-text-color: var(--base-color-white) !important;
-    --el-button-hover-text-color: var(--next-color-white) !important;
+    --el-button-hover-text-color: var(--base-color-white) !important;
-    --el-button-disabled-text-color: var(--next-color-white) !important;
+    --el-button-disabled-text-color: var(--base-color-white) !important;
     &:hover {
       border-color: var(--el-button-hover-border-color, var(--el-button-hover-bg-color)) !important;
     }
@@ -73,7 +64,7 @@
 
   // pagination
   .el-pagination.is-background .el-pager li:not(.disabled).active {
-    color: var(--next-color-white) !important;
+    color: var(--base-color-white) !important;
   }
   .el-pagination.is-background .btn-next,
   .el-pagination.is-background .btn-prev,
@@ -96,7 +87,7 @@
   .el-alert,
   .notice-bar {
     border: 1px solid var(--next-border-color) !important;
-    background-color: var(--next-color-disabled) !important;
+    background-color: var(--base-color) !important;
   }
 
   // colorPicker
@@ -141,5 +132,9 @@
   .el-upload--picture-card,
   .el-image__error {
     background: none !important;
+  }
+	//el table loading mask
+  .el-loading-mask {
+    background-color: var(--base-color-rgba) !important;
   }
 }

src/assets/styles/sidebar.scss

@@ -90,14 +90,6 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  .nest-menu .el-sub-menu > .el-sub-menu__title,
-  .el-menu-item {
-    &:hover {
-      // 缩小状态下选中背景
-      // background-color: var(--base-sub-menu-hover) !important;
-    }
-  }
-
   // the scroll bar appears when the subMenu is too long
   > .el-menu--popup {
     max-height: 100vh;

src/assets/styles/variables.module.scss

@@ -31,8 +31,6 @@ $panGreen: #30b08f;
   // 顶部导航栏背景色
   --base-topBar-background: #ffffff;
 
-  //缩小状态下子菜单选中颜色
-  --base-sub-menu-hover: #ccc;
 }
 /***深色主题颜色配置***/
 [data-theme='theme-dark'] {
@@ -42,9 +40,6 @@ $panGreen: #30b08f;
   --base-logo-title-color: #ffffff;
   --base-topBar-background: #ffffff;
 
-  //缩小状态下子菜单选中颜色
-  --base-sub-menu-hover: #000;
-
   // el-ement ui 设置
   --el-fill-color-blank: #304156;
   --el-text-color-primary: #bfcbd9;

src/components/Notice/Index.vue

@@ -115,4 +115,7 @@ function onGoToGiteeClick() {
 :deep(.el-empty__description p) {
   font-size: 13px;
 }
+.head-box-title{
+	color: var(--base-color-white);
+}
 </style>

src/views/dashboard/PanelGroup.vue

@@ -86,7 +86,7 @@ function handleSetLineChartData(type) {
     position: relative;
     overflow: hidden;
     color: #666;
-    background: #fff;
+    background: var(--base-bg-main);
     box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
     border-color: rgba(0, 0, 0, 0.05);
 
@@ -149,13 +149,14 @@ function handleSetLineChartData(type) {
 
       .card-panel-text {
         line-height: 18px;
-        color: rgba(0, 0, 0, 0.45);
+        color: var(--base-color-white);
         font-size: 16px;
         margin-bottom: 12px;
       }
 
       .card-panel-num {
         font-size: 20px;
+        color: var(--base-color-white);
       }
     }
   }

src/views/index_v1.vue

@@ -84,8 +84,12 @@
     </el-row>
     <panel-group @handleSetLineChartData="handleSetLineChartData" />
 
-    <el-row class="mb20" style="background: #fff">
+    <el-row :gutter="32">
+      <el-col :xs="24" :sm="24" :lg="24">
+        <div class="chart-wrapper">
           <line-chart :chart-data="lineChartData" :key="dataType" />
+        </div>
+      </el-col>
     </el-row>
 
     <el-row :gutter="32">
@@ -116,7 +120,6 @@ import PieChart from './dashboard/PieChart'
 import BarChart from './dashboard/BarChart'
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
 import { listNewArticle } from '@/api/system/article.js'
-import { computed, getCurrentInstance, reactive } from 'vue'
 
 const data = {
   newVisitis: {
@@ -160,7 +163,7 @@ function onOpenGitee() {}
 
 <style lang="scss" scoped>
 .home {
-  width: 100%;
+  width: 97%;
   overflow: hidden;
   .home-card-more {
     float: right;
@@ -338,11 +341,11 @@ function onOpenGitee() {}
 }
 .dashboard-editor-container {
   padding: 18px;
-  background-color: rgb(240, 242, 245);
+  background-color: var(--base-bg-main);
   position: relative;
 
   .chart-wrapper {
-    background: #fff;
+    background: var(--base-bg-main);
     padding: 16px 16px 0;
     margin-bottom: 32px;
   }