From 8f7a1c36d152a59d35abc80515299513c18780de Mon Sep 17 00:00:00 2001
From: "wu.jian2" <distantmtn@gmail.com>
Date: Thu, 16 Nov 2023 11:34:38 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=9F=BA=E7=A1=80=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E4=BF=AE=E6=94=B9=E6=84=8F=E8=A7=81=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E9=BB=98=E8=AE=A4=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BasicComponents/DigitalFlop/index.vue     | 16 ++++++-
 .../BasicComponents/DigitalFlop/setting.vue   | 16 +++++++
 .../DigitalFlop/settingConfig.js              | 10 +++--
 .../packages/BasicComponents/Input/index.vue  | 24 +++++++----
 .../BasicComponents/Input/setting.vue         | 31 +++++++------
 .../BasicComponents/Input/settingConfig.js    |  4 +-
 .../ScreenScrollBoard/index.vue               |  2 +-
 .../ScreenScrollRanking/index.vue             |  2 +-
 .../packages/BasicComponents/Select/index.vue | 43 ++++++++++++-------
 .../BasicComponents/Select/setting.vue        | 29 +++++++++++--
 .../BasicComponents/Select/settingConfig.js   | 12 ++++--
 data-room-ui/packages/EchartsRender/index.vue |  2 +-
 data-room-ui/packages/PlotRender/index.vue    |  2 +-
 13 files changed, 138 insertions(+), 55 deletions(-)

diff --git a/data-room-ui/packages/BasicComponents/DigitalFlop/index.vue b/data-room-ui/packages/BasicComponents/DigitalFlop/index.vue
index 49ead3d2..ff9e8a85 100644
--- a/data-room-ui/packages/BasicComponents/DigitalFlop/index.vue
+++ b/data-room-ui/packages/BasicComponents/DigitalFlop/index.vue
@@ -19,8 +19,9 @@
           color: option.color,
           'border-radius': option.borderRadius + 'px',
           'font-weight': option.fontWeight,
-          'margin-right':
-            index !== option.data.length - 1 ? option.marginRight + 'px' : ''
+          'margin-right': index !== option.data.length - 1 ? option.marginRight + 'px' : '',
+          '--line-height': option.lineStyle.height + 'px',
+          '--line-color': option.lineStyle.color
         }"
       >
         {{ item }}
@@ -120,6 +121,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.content_item{
+  position: relative;
+  &::after{
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: var(--line-height);
+    transform: translateY( -cale(--line-height / 2) + 'px');
+    background-color: var(--line-color);
+  }
+}
 .light-theme {
   background-color: #ffffff;
   color: #000000;
diff --git a/data-room-ui/packages/BasicComponents/DigitalFlop/setting.vue b/data-room-ui/packages/BasicComponents/DigitalFlop/setting.vue
index f06d8b1a..8a9ed8a4 100644
--- a/data-room-ui/packages/BasicComponents/DigitalFlop/setting.vue
+++ b/data-room-ui/packages/BasicComponents/DigitalFlop/setting.vue
@@ -172,6 +172,22 @@
                 clearable
               />
             </el-form-item>
+            <!-- 中线宽度 -->
+            <el-form-item label="中线宽度">
+              <el-input-number
+                v-model="config.customize.lineStyle.height"
+                class="bs-el-input-number"
+                :min="0"
+                :step="1"
+              />
+            </el-form-item>
+            <!-- 中线颜色 -->
+            <el-form-item label="中线颜色">
+              <ColorPicker
+                v-model="config.customize.lineStyle.color"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
           </div>
         </el-form>
       </div>
diff --git a/data-room-ui/packages/BasicComponents/DigitalFlop/settingConfig.js b/data-room-ui/packages/BasicComponents/DigitalFlop/settingConfig.js
index d045b9e9..bb72e6b1 100644
--- a/data-room-ui/packages/BasicComponents/DigitalFlop/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/DigitalFlop/settingConfig.js
@@ -48,8 +48,8 @@ const customConfig = {
     bgColor: '#007aff',
     fontSize: 100,
     width: 100,
-    borderRadius: 10,
-    borderColor: '#fff',
+    borderRadius: 0,
+    borderColor: '',
     borderWidth: 1,
     formatter: 3,
     fontWeight: 500,
@@ -59,7 +59,11 @@ const customConfig = {
     numberDigits: 5,
     placeHolder: '0',
     height: 125,
-    fontFamily: ''
+    fontFamily: 'ds-digitalbold',
+    lineStyle: {
+      height: 4,
+      color: '#000000'
+    }
   }
 }
 export const dataConfig = {
diff --git a/data-room-ui/packages/BasicComponents/Input/index.vue b/data-room-ui/packages/BasicComponents/Input/index.vue
index dab95bee..e057b848 100644
--- a/data-room-ui/packages/BasicComponents/Input/index.vue
+++ b/data-room-ui/packages/BasicComponents/Input/index.vue
@@ -12,9 +12,9 @@
       v-model="value"
       type="text"
       resize="both"
-      class="input"
+      class="input-component"
       :placeholder="config.customize.placeholderStyle.placeholder"
-      :style="{ backgroundColor: config.customize.backgroundStyle.backgroundColor }"
+      :style="{ backgroundColor: config.customize.backgroundStyle.backgroundColor,'--input-placeholder-color': config.customize.placeholderStyle.placeholderColor, '--input-placeholder-font-size': config.customize.placeholderStyle.placeholderFontSize + 'px' }"
       @input="handleInput"
       @keyup.enter.native="keyupEnter"
     >
@@ -116,6 +116,14 @@ export default {
 }
 </script>
 
+<style>
+/* 修改输入框的 placeholder 文字颜色 */
+input::placeholder {
+  color: red; /* 设置占位文字颜色为灰色 */
+}
+
+</style>
+
 <style lang="scss" scoped>
 .basic-component-input {
   width: 100%;
@@ -125,12 +133,6 @@ export default {
     white-space: nowrap;
     align-self: center;
   }
-  // .title-top{
-  //   display: block;
-  //   text-align: center;
-  //   white-space: nowrap;
-  // }
-
   .el-input {
     height: 100%;
     width: 100%;
@@ -142,6 +144,10 @@ export default {
       border: 1px solid #DCDFE6;
     }
   }
-
+  ::v-deep .el-input__inner::placeholder {
+   color: var(--input-placeholder-color);
+   font-size: var(--input-placeholder-font-size);
+ }
 }
+
 </style>
diff --git a/data-room-ui/packages/BasicComponents/Input/setting.vue b/data-room-ui/packages/BasicComponents/Input/setting.vue
index 61f660d8..31988146 100644
--- a/data-room-ui/packages/BasicComponents/Input/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Input/setting.vue
@@ -41,7 +41,6 @@
               <el-input-number
                 v-model="config.customize.titleStyle.fontSize"
                 class="bs-el-input-number"
-                controls-position="right"
                 :min="12"
                 :max="100"
               />
@@ -62,7 +61,6 @@
               <el-input-number
                 v-model="config.customize.titleStyle.marginRight"
                 class="bs-el-input-number"
-                controls-position="right"
                 :min="0"
                 :max="100"
               />
@@ -72,7 +70,7 @@
           <div class="lc-field-body">
             <PosWhSetting :config="config" />
           </div>
-         <SettingTitle>旋转</SettingTitle>
+          <SettingTitle>旋转</SettingTitle>
           <div class="lc-field-body">
             <RotateSetting
               :config="config"
@@ -84,7 +82,6 @@
               <el-input-number
                 v-model="config.customize.inputStyle.fontSize"
                 class="bs-el-input-number"
-                controls-position="right"
                 :min="12"
                 :max="100"
               />
@@ -117,6 +114,20 @@
                 clearable
               />
             </el-form-item>
+            <el-form-item label="占位符字体颜色">
+              <ColorPicker
+                v-model="config.customize.placeholderStyle.placeholderColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <el-form-item label="占位符字体大小">
+              <el-input-number
+                v-model="config.customize.placeholderStyle.placeholderFontSize"
+                class="bs-el-input-number"
+                :min="12"
+                :max="100"
+              />
+            </el-form-item>
             <el-form-item label="图标选择">
               <IconPicker v-model="config.customize.icon.name" />
             </el-form-item>
@@ -134,12 +145,6 @@
                 />
               </el-select>
             </el-form-item>
-            <!-- <el-form-item label="占位符字体颜色">
-              <ColorPicker
-                v-model="config.customize.placeholderStyle.placeholderColor"
-                :predefine="predefineThemeColors"
-              />
-            </el-form-item> -->
             <el-form-item label="边框颜色">
               <ColorPicker
                 v-model="config.customize.borderStyle.borderColor"
@@ -150,7 +155,6 @@
               <el-input-number
                 v-model="config.customize.borderStyle.borderWidth"
                 class="bs-el-input-number"
-                controls-position="right"
                 :min="0"
                 :max="10"
               />
@@ -174,7 +178,6 @@
               <el-input-number
                 v-model="config.customize.borderStyle.borderRadius"
                 class="bs-el-input-number"
-                controls-position="right"
                 :min="0"
                 :max="100"
               />
@@ -192,7 +195,7 @@ import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
 import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
-import {predefineColors} from "data-room-ui/js/utils/colorList";
+import { predefineColors } from 'data-room-ui/js/utils/colorList'
 export default {
   name: 'InputSetting',
   components: {
@@ -208,7 +211,7 @@ export default {
       type: Object,
       required: true
     },
-     predefineThemeColors: {
+    predefineThemeColors: {
       type: Array,
       default: () => predefineColors
     }
diff --git a/data-room-ui/packages/BasicComponents/Input/settingConfig.js b/data-room-ui/packages/BasicComponents/Input/settingConfig.js
index 69a97835..adf5fe38 100644
--- a/data-room-ui/packages/BasicComponents/Input/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/Input/settingConfig.js
@@ -60,7 +60,9 @@ const customConfig = {
     // 占位符
       placeholder: '请输入',
       // 占位符字体颜色
-      placeholderColor: 'red'
+      placeholderColor: '#999999',
+      // 占位符字体大小
+      placeholderFontSize: 14
     },
     // 边框样式
     borderStyle: {
diff --git a/data-room-ui/packages/BasicComponents/ScreenScrollBoard/index.vue b/data-room-ui/packages/BasicComponents/ScreenScrollBoard/index.vue
index 52fe05ca..93ae218f 100644
--- a/data-room-ui/packages/BasicComponents/ScreenScrollBoard/index.vue
+++ b/data-room-ui/packages/BasicComponents/ScreenScrollBoard/index.vue
@@ -120,7 +120,7 @@ export default {
 
 <style lang="scss" scoped>
 .light-theme{
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   color: #000000;
 }
 .auto-theme{
diff --git a/data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue b/data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue
index c235856b..538de0de 100644
--- a/data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue
+++ b/data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue
@@ -72,7 +72,7 @@ export default {
 
 <style lang="scss" scoped>
 .light-theme{
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   color: #000000;
 }
 .auto-theme{
diff --git a/data-room-ui/packages/BasicComponents/Select/index.vue b/data-room-ui/packages/BasicComponents/Select/index.vue
index 30fe8e05..ffeb6444 100644
--- a/data-room-ui/packages/BasicComponents/Select/index.vue
+++ b/data-room-ui/packages/BasicComponents/Select/index.vue
@@ -7,6 +7,7 @@
     :placeholder="config.customize.placeholder"
     clearable
     :filterable="filterable"
+    :style="{'--input-placeholder-color':config.customize.placeholderColor,'--input-placeholder-font-size':config.customize.placeholderFontSize + 'px'}"
     @visible-change="visibleChange"
     @change="selectChange"
     @mouseenter.native="mouseenter"
@@ -50,7 +51,7 @@ export default {
       return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
     }
   },
-  watch: { },
+  watch: {},
   created () {
   },
   mounted () {
@@ -100,6 +101,8 @@ export default {
       selectInputEl.style.fontSize = config.customize.fontSize + 'px'
       // 字体颜色
       selectInputEl.style.color = config.customize.fontColor
+      // 边框颜色
+      selectInputEl.style.borderColor = config.customize.borderColor
       // 下拉图标
       const selectDropdownIcon = document.querySelector(`.select-${config.code} .el-icon-arrow-up`)
       selectDropdownIcon.style.fontSize = config.customize.fontSize + 'px'
@@ -131,8 +134,8 @@ export default {
         }
         // 下拉项hover颜色
         const selectDropdownWrap = document.querySelector(`.select-popper-${this.innerConfig.code} .el-select-dropdown__wrap`)
-        selectDropdownWrap.style.setProperty('--dropDownHoverFontColor', this.innerConfig.customize.dropDownHoverFontColor)
-        selectDropdownWrap.style.setProperty('--dropDownHoverBackgroundColor', this.innerConfig.customize.dropDownHoverBackgroundColor)
+        selectDropdownWrap.style.setProperty('--drop-down-hover-font-color', this.innerConfig.customize.dropDownHoverFontColor)
+        selectDropdownWrap.style.setProperty('--drop-down-hover-background-color', this.innerConfig.customize.dropDownHoverBackgroundColor)
       }
       // 不是激活项的还是使用背景颜色
       const selectDropdownItemEl = document.querySelectorAll(`.select-popper-${this.innerConfig.code} .el-select-dropdown__item`)
@@ -148,7 +151,7 @@ export default {
     mouseenter () {
       if (this.value) {
         setTimeout(() => {
-        // 清空图标
+          // 清空图标
           const selectDropdownCloseIcon = document.querySelector(`.select-${this.innerConfig.code} .el-icon-circle-close`)
           if (selectDropdownCloseIcon) {
             selectDropdownCloseIcon.style.fontSize = this.innerConfig.customize.fontSize + 'px'
@@ -162,22 +165,24 @@ export default {
 </script>
 
 <style lang="scss">
-.basic-component-select{
-  color: '';
+.basic-component-select {
   .el-select-dropdown__wrap {
     margin-bottom: 0px !important;
   }
+
   .el-select-group__wrap:not(:last-of-type)::after {
     background-color: transparent !important;
   }
-  .popper__arrow{
+
+  .popper__arrow {
     bottom: -6px !important;
-    border-top-color:var(--color) !important;
-    border-bottom-color:var(--color) !important;
-    &::after{
+    border-top-color: var(--color) !important;
+    border-bottom-color: var(--color) !important;
+
+    &::after {
       bottom: 0px !important;
-      border-top-color:var(--color) !important;
-      border-bottom-color:var(--color) !important;
+      border-top-color: var(--color) !important;
+      border-bottom-color: var(--color) !important;
     }
   }
 }
@@ -190,23 +195,29 @@ export default {
 
   ::v-deep .el-input {
     height: 100% !important;
-    .el-select__caret{
+
+    .el-select__caret {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
     }
+
     //  选择器输入框样式
     .el-input__inner {
       height: 100% !important;
-      border-color: none !important;
     }
   }
+  ::v-deep .el-input__inner::placeholder {
+      color: var(--input-placeholder-color);
+      font-size: var(--input-placeholder-font-size);
+    }
   .el-select-dropdown__item.hover,
   .el-select-dropdown__item:hover {
-    color: var(--dropDownHoverFontColor) !important;
-    background-color: var(--dropDownHoverBackgroundColor) !important;
+    color: var(--drop-down-hover-font-color) !important;
+    background-color: var(--drop-down-hover-background-color) !important;
   }
+
   .el-tag.el-tag--info {
     color: var(--bs-el-text) !important;
   }
diff --git a/data-room-ui/packages/BasicComponents/Select/setting.vue b/data-room-ui/packages/BasicComponents/Select/setting.vue
index 1373068c..504cfb87 100644
--- a/data-room-ui/packages/BasicComponents/Select/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Select/setting.vue
@@ -19,7 +19,7 @@
           <div class="lc-field-body">
             <PosWhSetting :config="config" />
           </div>
-         <SettingTitle>旋转</SettingTitle>
+          <SettingTitle>旋转</SettingTitle>
           <div class="lc-field-body">
             <RotateSetting
               :config="config"
@@ -50,6 +50,29 @@
                 :predefine="predefineThemeColors"
               />
             </el-form-item>
+            <!-- 边框颜色 -->
+            <el-form-item label="边框颜色">
+              <ColorPicker
+                v-model="config.customize.borderColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <!-- 占位符字体颜色 -->
+            <el-form-item label="占位符字体颜色">
+              <ColorPicker
+                v-model="config.customize.placeholderColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <!-- 占位符字体大小 -->
+            <el-form-item label="占位符字体大小">
+              <el-input-number
+                v-model="config.customize.placeholderFontSize"
+                class="bs-el-input-number"
+                :min="12"
+                :max="100"
+              />
+            </el-form-item>
           </div>
           <SettingTitle>下拉项</SettingTitle>
           <!-- 选择器下拉框背景颜色 -->
@@ -93,7 +116,7 @@ import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetti
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
-import {predefineColors} from "data-room-ui/js/utils/colorList";
+import { predefineColors } from 'data-room-ui/js/utils/colorList'
 export default {
   name: 'Border14Setting',
   components: {
@@ -109,7 +132,7 @@ export default {
       type: Object,
       required: true
     },
-     predefineThemeColors: {
+    predefineThemeColors: {
       type: Array,
       default: () => predefineColors
     }
diff --git a/data-room-ui/packages/BasicComponents/Select/settingConfig.js b/data-room-ui/packages/BasicComponents/Select/settingConfig.js
index c2352db0..07fabced 100644
--- a/data-room-ui/packages/BasicComponents/Select/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/Select/settingConfig.js
@@ -45,15 +45,21 @@ const customConfig = {
     // 输入框字体大小
     fontSize: 14,
     // 输入框字体颜色
-    fontColor: '#FFFFFF',
+    fontColor: '#ffffff',
+    // 边框颜色
+    borderColor: '#ffffff',
+    // 占位符字体颜色
+    placeholderColor: '#ffffff',
+    // 占位符字体大小
+    placeholderFontSize: 14,
     // 下拉框背景颜色
     dropDownBackgroundColor: '#35393F',
     // 下拉框字体颜色
-    dropDownFontColor: '#FFFFFF',
+    dropDownFontColor: '#ffffff',
     // 下拉项hover背景颜色
     dropDownHoverBackgroundColor: '#6A7E9D',
     // 下拉项hover字体颜色
-    dropDownHoverFontColor: '#FFFFFF'
+    dropDownHoverFontColor: '#ffffff'
   }
 }
 export const dataConfig = {
diff --git a/data-room-ui/packages/EchartsRender/index.vue b/data-room-ui/packages/EchartsRender/index.vue
index e700751d..b8451fdd 100644
--- a/data-room-ui/packages/EchartsRender/index.vue
+++ b/data-room-ui/packages/EchartsRender/index.vue
@@ -498,7 +498,7 @@ export default {
 <style lang="scss" scoped>
 @import '../assets/style/echartStyle';
 .light-theme{
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   color: #000000;
 }
 .auto-theme{
diff --git a/data-room-ui/packages/PlotRender/index.vue b/data-room-ui/packages/PlotRender/index.vue
index e740022d..7a95550e 100644
--- a/data-room-ui/packages/PlotRender/index.vue
+++ b/data-room-ui/packages/PlotRender/index.vue
@@ -260,7 +260,7 @@ export default {
 <style lang="scss" scoped>
 @import '../assets/style/echartStyle';
 .light-theme{
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   color: #000000;
 }
 .auto-theme{