fix: 看板组件放大缩小优化

@@ -217,7 +217,12 @@
           >
           >
           <Slider
           <Slider
             ref="sliderEl"
             ref="sliderEl"
-            :style="{ '--slider-color': getDesign.controlBarColor }"
+            :style="{
+              '--slider-color': getDesign.controlBarColor,
+              '--slider-handle': (getRatio ? getRatio * 14 : 14) + 'px',
+              '--slider-height': (getRatio ? getRatio * 4 : 4) + 'px',
+              '--slider-top': -(getRatio ? getRatio * 5 : 5) + 'px',
+            }"
             class="no-drag"
             class="no-drag"
             :value="sliderValue"
             :value="sliderValue"
             :min="getDesign.minNumber"
             :min="getDesign.minNumber"
@@ -244,6 +249,21 @@
 <style lang="less" scoped>
 <style lang="less" scoped>
   :deep(.ant-slider-track) {
   :deep(.ant-slider-track) {
     background: var(--slider-color) !important;
     background: var(--slider-color) !important;
+    height: var(--slider-height) !important;
+  }
+
+  :deep(.ant-slider-handle) {
+    height: var(--slider-handle) !important;
+    width: var(--slider-handle) !important;
+    margin-top: var(--slider-top) !important;
+  }
+
+  :deep(.ant-slider-step) {
+    height: var(--slider-height) !important;
+  }
+
+  :deep(.ant-slider-rail) {
+    height: var(--slider-height) !important;
   }
   }
 
 
   :deep(.ant-spin-container) {
   :deep(.ant-spin-container) {

@@ -119,20 +119,25 @@
     <div v-for="item in percentList" :key="item.id" class="flex flex-col ml-3 mr-3 items-stretch">
     <div v-for="item in percentList" :key="item.id" class="flex flex-col ml-3 mr-3 items-stretch">
       <div class="flex justify-between">
       <div class="flex justify-between">
         <div
         <div
-          class="text-gray-500 text-sm"
+          class="text-gray-500 flex w-7/10"
           :style="{
           :style="{
             color: item.fontColor,
             color: item.fontColor,
             fontSize: (getRatios ? getRatios * item.fontSize : item.fontSize) + 'px',
             fontSize: (getRatios ? getRatios * item.fontSize : item.fontSize) + 'px',
           }"
           }"
         >
         >
-          {{
+          <!-- {{
             `${item.deviceName}
             `${item.deviceName}
             -
             -
             ${item.attributeName || item.attribute || '温度'}`
             ${item.attributeName || item.attribute || '温度'}`
-          }}
+          }} -->
+          <div class="max-w-4/6 overflow-ellipsis overflow-hidden whitespace-nowrap">{{
+            item.deviceName
+          }}</div>
+          <span>-</span>
+          <div>{{ item.attributeName || item.attribute || '温度' }}</div>
         </div>
         </div>
         <span
         <span
-          class="text-lg"
+          class="text-lg max-w-3/10"
           :style="{
           :style="{
             color: item.fontColor,
             color: item.fontColor,
             fontSize: (getRatios ? getRatios * item.valueSize : item.valueSize) + 'px',
             fontSize: (getRatios ? getRatios * item.valueSize : item.valueSize) + 'px',

@@ -89,7 +89,7 @@
   };
   };
 
 
   useMultipleDataFetch(props, updateFn);
   useMultipleDataFetch(props, updateFn);
-  const { getRatios } = useComponentScale(props);
+  const { getRatio } = useComponentScale(props);
 </script>
 </script>
 
 
 <template>
 <template>
@@ -105,22 +105,21 @@
         <SvgIcon
         <SvgIcon
           :name="item.icon!"
           :name="item.icon!"
           prefix="iconfont"
           prefix="iconfont"
-          :size="getRatios ? 30 * getRatios : 30"
+          :size="getRatio ? 30 * getRatio : 30"
           :style="{ color: item.iconColor }"
           :style="{ color: item.iconColor }"
         />
         />
 
 
         <div
         <div
-          class="text-gray-500 text-sm ml-6"
-          :style="{ fontSize: (getRatios ? getRatios * item.fontSize : item.fontSize) + 'px' }"
+          class="text-gray-500 ml-6"
+          :style="{ fontSize: (getRatio ? getRatio * item.fontSize : item.fontSize) + 'px' }"
           >{{ item.deviceName + '-' + item.attributeName || '温度' }}</div
           >{{ item.deviceName + '-' + item.attributeName || '温度' }}</div
         >
         >
       </div>
       </div>
 
 
       <span
       <span
-        class="text-lg"
         :style="{
         :style="{
           color: item.fontColor,
           color: item.fontColor,
-          fontSize: (getRatios ? getRatios * item.valueSize : item.valueSize) + 'px',
+          fontSize: (getRatio ? getRatio * item.valueSize : item.valueSize) + 'px',
         }"
         }"
       >
       >
         <span> {{ item.value || 0 }}</span>
         <span> {{ item.value || 0 }}</span>