feat: 排名表组件添加相关样式配置

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

@@ -8,6 +8,16 @@
       class="ranking-box"
       :class="{'light-theme':customTheme === 'light','auto-theme':customTheme =='dark'}"
       :config="option"
+      :style="{
+        '--rank-font-size':customize.rankFontSize + 'px',
+        '--rank-color':customize.rankColor,
+        '--info-name-font-size':customize.infoNameFontSize + 'px',
+        '--info-name-color':customize.infoNameColor,
+        '--ranking-value-font-size':customize.rankingValueFontSize + 'px',
+        '--ranking-value-color':customize.rankingValueColor,
+        '--inside-column-color':customize.insideColumnColor,
+        '--ranking-column-border-bottom-color':customize.rankingColumnBorderBottomColor
+      }"
       @click="rowClick"
     />
   </div>
@@ -43,6 +53,9 @@ export default {
         return { ...this.config.customize, data: this.config.option.data }
       },
       set (value) {}
+    },
+    customize(){
+      return this.config.customize
     }
   },
   watch: {
@@ -133,5 +146,26 @@ export default {
     background: #dddddd !important;
     border-radius: 10px;
   }
-
+::v-deep .dv-scroll-ranking-board{
+  .ranking-info{
+    .rank{
+      font-size: var(--rank-font-size);
+      color: var(--rank-color);
+    }
+    .info-name{
+      font-size: var(--info-name-font-size);
+      color: var(--info-name-color);
+    }
+    .ranking-value{
+      font-size: var(--ranking-value-font-size);
+      color: var(--ranking-value-color);
+    }
+  }
+  .ranking-column{
+    border-bottom: 2px solid var(--ranking-column-border-bottom-color);
+    .inside-column{
+      background-color: var(--inside-column-color);
+    }
+  }
+}
 </style>

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

@@ -11,7 +11,7 @@
         :model="config.customize"
         label-position="left"
         class="setting-body bs-el-form"
-        label-width="100px"
+        label-width="120px"
       >
         <SettingTitle>标题</SettingTitle>
         <div class="lc-field-body">
@@ -78,12 +78,67 @@
               :inactive-value="false"
             />
           </el-form-item>
+          <el-form-item label="序号字体颜色">
+            <ColorPicker
+              v-model="config.customize.rankColor"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="序号字体大小">
+            <el-input-number
+              v-model="config.customize.rankFontSize"
+              :min="12"
+              class="bs-el-input-number"
+              label="请输入字体大小"
+            />
+          </el-form-item>
+          <el-form-item label="左侧数据字体颜色">
+            <ColorPicker
+              v-model="config.customize.infoNameColor"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="左侧数据字体大小">
+            <el-input-number
+              v-model="config.customize.infoNameFontSize"
+              :min="12"
+              class="bs-el-input-number"
+              label="请输入字体大小"
+            />
+          </el-form-item>
+          <el-form-item label="右侧数据字体颜色">
+            <ColorPicker
+              v-model="config.customize.rankingValueColor"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="右侧数据字体大小">
+            <el-input-number
+              v-model="config.customize.rankingValueFontSize"
+              :min="12"
+              class="bs-el-input-number"
+              label="请输入字体大小"
+            />
+          </el-form-item>
+          <el-form-item label="内部列颜色">
+            <ColorPicker
+              v-model="config.customize.insideColumnColor"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="底部边框颜色">
+            <ColorPicker
+              v-model="config.customize.rankingColumnBorderBottomColor"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
         </div>
       </el-form>
     </el-form>
   </div>
 </template>
 <script>
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
@@ -93,6 +148,7 @@ export default {
   name: 'BarSetting',
   components: {
     PosWhSetting,
+    ColorPicker,
     SettingTitle,
     BorderSetting,
     RotateSetting

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

@@ -44,7 +44,15 @@ const customConfig = {
     carousel: 'single',
     unit: '',
     sort: true,
-    valueFormatter: undefined
+    valueFormatter: undefined,
+    rankFontSize: 13,
+    rankColor: '#1370fb',
+    infoNameFontSize: 13,
+    infoNameColor: '#ffffff',
+    rankingValueFontSize: 13,
+    rankingValueColor: '#fff',
+    insideColumnColor: '#1370fb',
+    rankingColumnBorderBottomColor: '#1370fb',
   }
 }
 export const dataConfig = {