feat:修改基础组件的暗黑主题背景色透明

data-room-ui/packages/BasicComponents/CurrentTime/index.vue

@@ -117,7 +117,7 @@ export default {
   color: #000000;
 }
 .dark-theme {
-  background-color: #000000;
+  background-color:transparent;
   color: #ffffff;
 }
 .auto-theme {

data-room-ui/packages/BasicComponents/CurrentTime/settingConfig.js

@@ -21,7 +21,7 @@ const customConfig = {
   customize: {
     fontSize: 28,
     fontWeight: 700,
-    color: '#ffffff'
+    color: 'rgb(155 159 172)'
   }
 
 }

data-room-ui/packages/BasicComponents/ScreenScrollBoard/index.vue

@@ -5,7 +5,7 @@
   >
     <dv-scroll-board
       :key="updateKey"
-      :class="{'light-theme':customTheme === 'light','auto-theme':customTheme =='auto','dark-theme':customTheme =='dark'}"
+      :class="{'light-theme':customTheme === 'light','auto-theme':customTheme =='dark'}"
       :config="option"
       @click="rowClick"
     />

data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue

@@ -6,7 +6,7 @@
     <dv-scroll-ranking-board
       :key="updateKey"
       class="ranking-box"
-      :class="{'light-theme':customTheme === 'light','auto-theme':customTheme =='auto','dark-theme':customTheme =='dark'}"
+      :class="{'light-theme':customTheme === 'light','auto-theme':customTheme =='dark'}"
       :config="option"
       @click="rowClick"
     />

data-room-ui/packages/BasicComponents/Tables/index.vue

@@ -68,9 +68,8 @@ export default {
   computed: {
     headerCellStyle () {
       const headerBackgroundColor = {
-        dark: '#141414',
         light: '#ffffff',
-        auto: 'transparent'
+        dark: 'transparent'
       }
       if (document.getElementById(this.config.code)?.querySelector('tr')) {
         document
@@ -124,9 +123,8 @@ export default {
 
     cellStyle ({ row, column, rowIndex, columnIndex }) {
       const bodyBackgroundColor = {
-        dark: '#141414',
         light: '#ffffff',
-        auto: 'transparent'
+        dark: 'transparent'
       }
       const initColor = this.customTheme === 'light' ? '#000000' : '#ffffff'
       const style = {

data-room-ui/packages/BasicComponents/Tables/settingConfig.js

@@ -41,13 +41,13 @@ const customConfig = {
     // 表格头部背景颜色
     headerBackgroundColor: '#232832',
     // 表格头部字体颜色
-    headerFontColor: '#ffffff',
+    headerFontColor: '#fff',
     // 表格头部字体大小
     headerFontSize: 14,
     // 表格主体背景颜色
     bodyBackgroundColor: '',
     // 表格主体字体颜色
-    bodyFontColor: '#ffffff',
+    bodyFontColor: 'rgb(155 159 172)',
     // 表格主体字体大小
     bodyFontSize: 14,
     // 表格是否需要斑马纹

data-room-ui/packages/BasicComponents/TimeCountDown/index.vue

@@ -176,7 +176,7 @@ export default {
   color: #000000;
 }
 .dark-theme {
-  background-color: #000000;
+  background-color: transparent;
   color: #ffffff;
 }
 .auto-theme {

data-room-ui/packages/BasicComponents/TimeCountDown/settingConfig.js

@@ -20,7 +20,7 @@ const customConfig = {
   customize: {
     fontSize: 28,
     fontWeight: 700,
-    color: '#ffffff'
+    color: 'rgb(155 159 172)'
   }
 
 }

data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue

@@ -361,7 +361,8 @@ export default {
       'changePageConfig',
       'changeLayout',
       'changeChartKey',
-      'changeRefreshConfig'
+      'changeRefreshConfig',
+      'changePageInfo'
     ]),
     // 切换主题时更新主题配置
     changeTheme (theme) {

data-room-ui/packages/BigScreenDesign/PageDesignTop.vue

@@ -10,33 +10,31 @@
       <span class="logo-text name-span">{{ pageInfo.name }}</span>
     </div>
     <div class="head-btn-group">
-      <el-switch
+      <el-dropdown
-        v-model="pageInfo.pageConfig.customTheme"
+        trigger="click"
-        active-text="暗黑"
+        class="align-list-dropdown"
-        inactive-text="明亮"
-        class="bs-el-switch theme-switch"
-        active-color="#007aff"
-        active-value="dark"
-        inactive-value="light"
-        @change="changeTheme"
-      />
-      <el-tooltip
-        v-for="(mode,index) in alignList"
-        :key="mode.value"
-        popper-class="bs-el-tooltip-dark"
-        effect="dark"
-        :content="mode.label"
-        placement="top"
       >
         <CusBtn
-          class="align-btn"
+          type="primary"
-          @click="setAlign(mode.value)"
         >
-          <icon-svg
+          对齐<i class="el-icon-arrow-down el-icon--right" />
-            :name="iconList[index]"
-          />
         </CusBtn>
-      </el-tooltip>
+        <el-dropdown-menu
+          slot="dropdown"
+          class="align-dropdown-menu"
+        >
+          <el-dropdown-item
+            v-for="(mode,index) in alignList"
+            :key="mode.value"
+            @click.native="setAlign(mode.value)"
+          >
+            <icon-svg
+              style="padding:3px 20px"
+              :name="iconList[index]"
+            />
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
 
       <CusBtn
         :loading="saveAndPreviewLoading"
@@ -600,5 +598,22 @@ export default {
       color: var(--bs-el-color-primary)!important;
     }
   }
+  .align-list-dropdown{
+    color: #ffffff!important;
+  }
+
+}
+// 自定义dropdown的样式
+.align-dropdown-menu{
+  background-color: var(--bs-background-2)!important;
+  border: 1px solid var(--bs-border-1);
+  /deep/ .el-dropdown-menu__item{
+    background-color: var(--bs-background-2)!important;
+    &:hover {
+      color: var(--bs-el-color-primary) !important;
+      background-color: var(--bs-el-background-3) !important;
+    }
+  }
+
 }
 </style>