aa

src/views/pms/qhse/certificate.vue

@@ -75,14 +75,26 @@
               <div class="stats-card__label">已过期</div>
             </div>
 
-            <div class="stats-card__value">{{ expired }}</div>
+            <div class="stats-card__value">
+              <CountTo
+                :duration="2600"
+                :end-val="expired"
+                :start-val="0"
+                class="stats-card__value text-[40px]! pt-10 text-center! text-[#e35656]!" />
+            </div>
           </div>
           <div class="stats-card stats-card--warn">
             <div class="flex items-center gap-2">
               <Icon icon="ep:bell-filled" color="#d97706" />
               <div class="stats-card__label">60天预警</div>
             </div>
-            <div class="stats-card__value">{{ warn }}</div>
+            <div class="stats-card__value">
+              <CountTo
+                :duration="2600"
+                :end-val="warn"
+                :start-val="0"
+                class="stats-card__value text-[40px]! pt-10 text-center! text-[#d97706]!" />
+            </div>
           </div>
           <div class="stats-card stats-card--total">
             <div class="flex items-center gap-2">
@@ -90,7 +102,13 @@
               <div class="stats-card__label">证书总数</div>
             </div>
 
-            <div class="stats-card__value">{{ totalCert }}</div>
+            <div class="stats-card__value">
+              <CountTo
+                :duration="2600"
+                :end-val="totalCert"
+                :start-val="0"
+                class="stats-card__value text-[40px]! pt-10 text-center! text-[#2563eb]!" />
+            </div>
           </div>
           <div class="stats-card stats-card--personal">
             <div class="flex items-center gap-2">
@@ -101,14 +119,26 @@
               <div class="stats-card__label">个人证书</div>
             </div>
 
-            <div class="stats-card__value">{{ personal }}</div>
+            <div class="stats-card__value">
+              <CountTo
+                :duration="2600"
+                :end-val="personal"
+                :start-val="0"
+                class="stats-card__value text-[40px]! pt-10 text-center! text-[#2563eb]!" />
+            </div>
           </div>
           <div class="stats-card stats-card--organization">
             <div class="flex items-center gap-2">
               <Icon icon="bxs:building" class="w-20 h-20" color="#2563eb" />
               <div class="stats-card__label">组织证书</div>
             </div>
-            <div class="stats-card__value">{{ organization }}</div>
+            <div class="stats-card__value">
+              <CountTo
+                :duration="2600"
+                :end-val="organization"
+                :start-val="0"
+                class="stats-card__value text-[40px]! pt-10 text-center! text-[#2563eb]!" />
+            </div>
           </div>
         </div>
         <zm-table

src/views/pms/qhse/index.vue

@@ -57,7 +57,13 @@
               </el-icon>
               <div class="stats-card__label">已过期</div>
             </div>
-            <div class="stats-card__value text-[40px]! pt-10 text-center!">{{ expired }}</div>
+            <div class="stats-card__value text-[40px]! pt-10 text-center!">
+              <CountTo
+                :duration="2600"
+                :end-val="expired"
+                :start-val="0"
+                class="stats-card__value text-[40px]! pt-10 text-center! text-[#e35656]!"
+            /></div>
           </div>
           <div class="stats-card stats-card--warn">
             <div class="stats-card__header">
@@ -66,7 +72,13 @@
               </el-icon>
               <div class="stats-card__label">90天预警</div>
             </div>
-            <div class="stats-card__value text-[40px]! pt-10 text-center!">{{ warn }}</div>
+            <div class="stats-card__value text-[40px]! pt-10 text-center!">
+              <CountTo
+                :duration="2600"
+                :end-val="warn"
+                :start-val="0"
+                class="stats-card__value text-[40px]! pt-10 text-center! text-[#df8a28]!" />
+            </div>
           </div>
           <div class="stats-chart-card">
             <div class="stats-card__label">分类统计</div>