fix: 样式优化

src/views/Dashboard.vue

@@ -15,7 +15,7 @@
           </el-tooltip>
         </div>
         <div class="card-item-content-box">
-          <div class="card-item-content text-blue">
+          <div v-auto-fit-text class="card-item-content text-blue">
             {{
               (statisticData?.todayNewProductNum ?? '-') +
               '/' +
@@ -37,7 +37,7 @@
           </el-tooltip>
         </div>
         <div class="card-item-content-box">
-          <div class="card-item-content text-blue">
+          <div v-auto-fit-text class="card-item-content text-blue">
             {{
               (statisticData?.todayConfirmProductNum ?? '-') +
               '/' +
@@ -59,7 +59,7 @@
           </el-tooltip>
         </div>
         <div class="card-item-content-box">
-          <div class="card-item-content text-blue">
+          <div v-auto-fit-text class="card-item-content text-blue">
             {{ statisticData?.notShipmentOrderNum ?? '-' }}
           </div>
         </div>
@@ -77,7 +77,7 @@
           </el-tooltip>
         </div>
         <div class="card-item-content-box">
-          <div class="card-item-content text-red">
+          <div v-auto-fit-text class="card-item-content text-red">
             {{ statisticData?.overTimeNotShipmentOrderNum ?? '-' }}
           </div>
         </div>
@@ -97,29 +97,31 @@
           </el-tooltip>
         </div>
         <div class="card-item-content-box">
-          <div class="card-item-content text-blue">
+          <div v-auto-fit-text class="card-item-content text-blue">
             {{ statisticData?.yesterdayShipmentOrderNum ?? '-' }}
           </div>
-          <div class="card-item-content-text">较前天</div>
-          <div
-            v-if="
-              statisticData &&
-              statisticData.compareYesterdayShipmentOrderNum >= 0
-            "
-            style="display: flex; align-items: flex-end; gap: 5px"
-          >
-            <div class="text-red" style="margin-bottom: -2px">
-              {{ statisticData?.compareYesterdayShipmentOrderNum }}
+          <div class="card-item-content-text">
+            较前天
+            <div
+              v-if="
+                statisticData &&
+                statisticData.compareYesterdayShipmentOrderNum >= 0
+              "
+              style="display: flex; margin-left: 10px"
+            >
+              <div class="text-red">
+                {{ statisticData?.compareYesterdayShipmentOrderNum }}
+              </div>
+              <div class="up-icon"></div>
             </div>
-            <div class="up-icon"></div>
-          </div>
-          <div v-else style="display: flex; align-items: flex-end; gap: 5px">
-            <div class="text-green" style="margin-bottom: -2px">
-              {{
-                Math.abs(statisticData?.compareYesterdayShipmentOrderNum || 0)
-              }}
+            <div v-else style="display: flex; margin-left: 10px">
+              <div class="text-green">
+                {{
+                  Math.abs(statisticData?.compareYesterdayShipmentOrderNum || 0)
+                }}
+              </div>
+              <div class="down-icon"></div>
             </div>
-            <div class="down-icon"></div>
           </div>
         </div>
       </div>
@@ -136,33 +138,36 @@
           </el-tooltip>
         </div>
         <div class="card-item-content-box">
-          <div class="card-item-content text-blue">
+          <div v-auto-fit-text class="card-item-content text-blue">
             {{ (statisticData?.shipmentRateOf24Hour ?? '-') + '%' }}
           </div>
-          <div class="card-item-content-text">较前天</div>
-          <div
-            v-if="
-              statisticData &&
-              statisticData.compareLastDayShipmentRateOf24Hour >= 0
-            "
-            style="display: flex; align-items: flex-end; gap: 5px"
-          >
-            <div class="text-red" style="margin-bottom: -2px">
-              {{
-                (statisticData?.compareLastDayShipmentRateOf24Hour ?? '-') + '%'
-              }}
+          <div class="card-item-content-text">
+            较前天
+            <div
+              v-if="
+                statisticData &&
+                statisticData.compareLastDayShipmentRateOf24Hour >= 0
+              "
+              style="display: flex; margin-left: 10px"
+            >
+              <div class="text-red">
+                {{
+                  (statisticData?.compareLastDayShipmentRateOf24Hour ?? '-') +
+                  '%'
+                }}
+              </div>
+              <div class="up-icon"></div>
             </div>
-            <div class="up-icon"></div>
-          </div>
-          <div v-else style="display: flex; align-items: flex-end; gap: 5px">
-            <div class="text-green" style="margin-bottom: -2px">
-              {{
-                Math.abs(
-                  statisticData?.compareLastDayShipmentRateOf24Hour || 0,
-                ) + '%'
-              }}
+            <div v-else style="display: flex; margin-left: 10px">
+              <div class="text-green">
+                {{
+                  Math.abs(
+                    statisticData?.compareLastDayShipmentRateOf24Hour || 0,
+                  ) + '%'
+                }}
+              </div>
+              <div class="down-icon"></div>
             </div>
-            <div class="down-icon"></div>
           </div>
         </div>
       </div>
@@ -179,33 +184,36 @@
           </el-tooltip>
         </div>
         <div class="card-item-content-box">
-          <div class="card-item-content text-blue">
+          <div v-auto-fit-text class="card-item-content text-blue">
             {{ (statisticData?.shipmentRateOf48Hour ?? '-') + '%' }}
           </div>
-          <div class="card-item-content-text">较前天</div>
-          <div
-            v-if="
-              statisticData &&
-              statisticData.compareLastDayShipmentRateOf48Hour >= 0
-            "
-            style="display: flex; align-items: flex-end; gap: 5px"
-          >
-            <div class="text-red" style="margin-bottom: -2px">
-              {{
-                (statisticData?.compareLastDayShipmentRateOf48Hour ?? '-') + '%'
-              }}
+          <div class="card-item-content-text">
+            较前天
+            <div
+              v-if="
+                statisticData &&
+                statisticData.compareLastDayShipmentRateOf48Hour >= 0
+              "
+              style="display: flex; margin-left: 10px"
+            >
+              <div class="text-red">
+                {{
+                  (statisticData?.compareLastDayShipmentRateOf48Hour ?? '-') +
+                  '%'
+                }}
+              </div>
+              <div class="up-icon"></div>
             </div>
-            <div class="up-icon"></div>
-          </div>
-          <div v-else style="display: flex; align-items: flex-end; gap: 5px">
-            <div class="text-green" style="margin-bottom: -2px">
-              {{
-                Math.abs(
-                  statisticData?.compareLastDayShipmentRateOf48Hour || 0,
-                ) + '%'
-              }}
+            <div v-else style="display: flex; margin-left: 10px">
+              <div class="text-green">
+                {{
+                  Math.abs(
+                    statisticData?.compareLastDayShipmentRateOf48Hour || 0,
+                  ) + '%'
+                }}
+              </div>
+              <div class="down-icon"></div>
             </div>
-            <div class="down-icon"></div>
           </div>
         </div>
       </div>
@@ -230,30 +238,33 @@
               '）'
             }}
           </div>
-          <div class="card-item-content-text">较前天</div>
-          <div
-            v-if="
-              statisticData &&
-              statisticData.compareLastDayOverTimeShipmentRate >= 0
-            "
-            style="display: flex; align-items: flex-end; gap: 5px"
-          >
-            <div class="text-red" style="margin-bottom: -2px">
-              {{
-                (statisticData?.compareLastDayOverTimeShipmentRate ?? '-') + '%'
-              }}
+          <div class="card-item-content-text">
+            较前天
+            <div
+              v-if="
+                statisticData &&
+                statisticData.compareLastDayOverTimeShipmentRate >= 0
+              "
+              style="display: flex; margin-left: 10px"
+            >
+              <div class="text-red">
+                {{
+                  (statisticData?.compareLastDayOverTimeShipmentRate ?? '-') +
+                  '%'
+                }}
+              </div>
+              <div class="up-icon"></div>
             </div>
-            <div class="up-icon"></div>
-          </div>
-          <div v-else style="display: flex; align-items: flex-end; gap: 5px">
-            <div class="text-green" style="margin-bottom: -2px">
-              {{
-                Math.abs(
-                  statisticData?.compareLastDayOverTimeShipmentRate || 0,
-                ) + '%'
-              }}
+            <div v-else style="display: flex; margin-left: 10px">
+              <div class="text-green">
+                {{
+                  Math.abs(
+                    statisticData?.compareLastDayOverTimeShipmentRate || 0,
+                  ) + '%'
+                }}
+              </div>
+              <div class="down-icon"></div>
             </div>
-            <div class="down-icon"></div>
           </div>
         </div>
       </div>
@@ -272,7 +283,7 @@
           </el-tooltip>
         </div>
         <div class="card-item-content-box">
-          <div class="card-item-content text-blue">
+          <div v-auto-fit-text class="card-item-content text-blue">
             {{ statisticData?.waitCreateLogisticOrderNum ?? '-' }}
           </div>
         </div>
@@ -290,7 +301,7 @@
           </el-tooltip>
         </div>
         <div class="card-item-content-box">
-          <div class="card-item-content text-blue">
+          <div v-auto-fit-text class="card-item-content text-blue">
             {{ statisticData?.waitArrangeOrderNum ?? '-' }}
           </div>
         </div>
@@ -308,7 +319,7 @@
           </el-tooltip>
         </div>
         <div class="card-item-content-box">
-          <div class="card-item-content text-blue">
+          <div v-auto-fit-text class="card-item-content text-blue">
             {{ statisticData?.producingOrderNum ?? '-' }}
           </div>
         </div>
@@ -326,7 +337,7 @@
           </el-tooltip>
         </div>
         <div class="card-item-content-box">
-          <div class="card-item-content text-blue">
+          <div v-auto-fit-text class="card-item-content text-blue">
             {{ statisticData?.waitShipmentNum ?? '-' }}
           </div>
         </div>
@@ -344,7 +355,7 @@
           </el-tooltip>
         </div>
         <div class="card-item-content-box">
-          <div class="card-item-content text-yellow">
+          <div v-auto-fit-text class="card-item-content text-yellow">
             {{ statisticData?.blockApplyOrderNum ?? '-' }}
           </div>
         </div>
@@ -382,7 +393,7 @@
           </el-tooltip>
         </div>
         <div class="card-item-content-box">
-          <div class="card-item-content text-yellow">
+          <div v-auto-fit-text class="card-item-content text-yellow">
             {{ statisticData?.outOfStockOrderNum ?? '-' }}
           </div>
         </div>
@@ -400,7 +411,7 @@
           </el-tooltip>
         </div>
         <div class="card-item-content-box">
-          <div class="card-item-content text-yellow">
+          <div v-auto-fit-text class="card-item-content text-yellow">
             {{ statisticData?.outOfStock24HourOrderNum ?? '-' }}
           </div>
         </div>
@@ -436,7 +447,7 @@
           </el-tooltip>
         </div>
         <div class="card-item-content-box">
-          <div class="card-item-content text-red">
+          <div v-auto-fit-text class="card-item-content text-red">
             {{ statisticData?.outOfStockOver48HourOrderNum ?? '-' }}
           </div>
         </div>
@@ -454,7 +465,7 @@
           </el-tooltip>
         </div>
         <div class="card-item-content-box">
-          <div class="card-item-content text-red">
+          <div v-auto-fit-text class="card-item-content text-red">
             {{ statisticData?.outOfStockSkuNum ?? '-' }}
           </div>
         </div>
@@ -472,7 +483,7 @@
           </el-tooltip>
         </div>
         <div class="card-item-content-box">
-          <div class="card-item-content text-yellow">
+          <div v-auto-fit-text class="card-item-content text-yellow">
             {{ statisticData?.outOfStockProductNum ?? '-' }}
           </div>
         </div>
@@ -791,6 +802,77 @@ const createChartOption = (
   }
 }
 
+// 自动缩放文字：保证卡片内数字不超出边框宽度，超出则减小字号
+const adjustTextSize = (el: HTMLElement) => {
+  const maxFontSize = 38
+  const minFontSize = 16
+
+  const card = el.closest('.card-item') as HTMLElement | null
+  const containerWidth = card?.clientWidth ?? el.parentElement?.clientWidth ?? 0
+
+  // 获取 card-item-content-text 的实际宽度
+  const contentBox = el.parentElement
+  const contentText = contentBox?.querySelector(
+    '.card-item-content-text',
+  ) as HTMLElement | null
+
+  let contentTextWidth = 0
+  let gap = 0
+  let marginRight = 0
+
+  if (contentText && contentBox) {
+    contentTextWidth = contentText.offsetWidth
+    // 获取 gap 值
+    const contentBoxStyle = window.getComputedStyle(contentBox)
+    gap = parseFloat(contentBoxStyle.gap) || 0
+    // 获取 margin-right 值
+    const contentTextStyle = window.getComputedStyle(contentText)
+    marginRight = parseFloat(contentTextStyle.marginRight) || 0
+  }
+
+  const limitWidth = containerWidth - contentTextWidth - gap - marginRight - 20
+
+  el.style.fontSize = `${maxFontSize}px`
+
+  let current = maxFontSize
+  while (current > minFontSize && el.scrollWidth > limitWidth) {
+    current -= 1
+    el.style.fontSize = `${current}px`
+  }
+}
+
+const vAutoFitText = {
+  mounted(el: HTMLElement) {
+    nextTick(() => {
+      adjustTextSize(el)
+    })
+
+    const card = el.closest('.card-item') as HTMLElement | null
+    if (card && 'ResizeObserver' in window) {
+      const observer = new ResizeObserver(() => {
+        adjustTextSize(el)
+      })
+      observer.observe(card)
+      ;(el as { __autoFitObserver__?: ResizeObserver }).__autoFitObserver__ =
+        observer
+    }
+  },
+  updated(el: HTMLElement) {
+    nextTick(() => {
+      adjustTextSize(el)
+    })
+  },
+  unmounted(el: HTMLElement) {
+    const observer = (el as { __autoFitObserver__?: ResizeObserver })
+      .__autoFitObserver__
+    if (observer) {
+      observer.disconnect()
+      delete (el as { __autoFitObserver__?: ResizeObserver })
+        .__autoFitObserver__
+    }
+  },
+}
+
 const getStatisticDataApi = async () => {
   // 统计数据
   getStatisticData()
@@ -988,13 +1070,15 @@ onBeforeUnmount(() => {
   box-sizing: border-box;
 
   .card-item {
-    min-width: 300px;
+    min-width: 270px;
     width: 20%;
-    min-width: 250px;
     height: 90px;
     background-color: #f7f7f7;
     border-radius: 5px;
     padding: 8px 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 
     .card-item-header {
       display: flex;
@@ -1023,12 +1107,17 @@ onBeforeUnmount(() => {
       .card-item-content {
         font-size: 38px;
         font-weight: 500;
-        margin-bottom: -5px;
       }
 
       .card-item-content-text {
         font-size: 14px;
         color: #666;
+        display: flex;
+        align-items: center;
+        margin-right: 10px;
+        width: 100%;
+        white-space: nowrap;
+        margin-bottom: 3px;
       }
 
       .up-icon {