emm...

src/views/screen/logistics/car/carStock.vue

@@ -10,7 +10,7 @@
               <div style="width: 80%;margin-bottom: 10px">公务车终端安装率</div>
               <div style="width: 20%;text-align: right">87%</div>
               <div style="width: 100%;height: 5px;background-color: #14424C;border-radius: 5px">
-                <div style="width: 87%;height: 5px;background-image: linear-gradient(.25turn, #0B1620 0%, #00FFFF 100%);border-radius: 5px"></div>
+                <div class="animated-width-fir" style="height: 5px; border-radius: 5px;"></div>
               </div>
             </div>
             <div style="width: 8%;height:30px;border-right: 3px #14424C solid"></div>
@@ -23,7 +23,7 @@
               <div style="width: 80%;margin-bottom: 10px">公务车终端在线率</div>
               <div style="width: 20%;text-align: right">50%</div>
               <div style="width: 100%;height: 5px;background-color: #14424C;border-radius: 5px">
-                <div style="width: 50%;height: 5px;background-image: linear-gradient(.25turn, #0B1620 0%, #00FFFF 100%);border-radius: 5px"></div>
+                <div class="animated-width-sec" style="height: 5px; border-radius: 5px;"></div>
               </div>
             </div>
             <div style="width: 8%;height:30px;border-right: 3px #14424C solid"></div>
@@ -731,5 +731,36 @@ export default {
   left: 20px;
   top: -5px;
 }
+.animated-width-fir {
+  will-change: width;
+  background: linear-gradient(.25turn, #0B1620 0%, #00FFFF 100%);
+  width: 0;
+  animation: progressBarFir 2s ease-in-out forwards;
+}
+
+@keyframes progressBarFir {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 87%;
+  }
+}
+
+.animated-width-sec {
+  will-change: width;
+  background: linear-gradient(.25turn, #0B1620 0%, #00FFFF 100%);
+  width: 0;
+  animation: progressBarSec 2s ease-in-out forwards;
+}
+
+@keyframes progressBarSec {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 50%;
+  }
+}
 </style>
 

src/views/screen/logistics/car/carStockDialog.vue

@@ -16,7 +16,7 @@
                   <div style="width: 80%;margin-bottom: 10px">公务车终端安装率</div>
                   <div style="width: 20%;text-align: right">87%</div>
                   <div style="width: 100%;height: 5px;background-color: #14424C;border-radius: 5px">
-                    <div style="width: 87%;height: 5px;background-image: linear-gradient(.25turn, #0B1620 0%, #00FFFF 100%);border-radius: 5px"></div>
+                    <div class="animated-width-fir" style="height: 5px; border-radius: 5px;"></div>
                   </div>
                 </div>
                 <div style="width: 8%;height:30px;border-right: 3px #14424C solid"></div>
@@ -29,7 +29,7 @@
                   <div style="width: 80%;margin-bottom: 10px">公务车终端在线率</div>
                   <div style="width: 20%;text-align: right">50%</div>
                   <div style="width: 100%;height: 5px;background-color: #14424C;border-radius: 5px">
-                    <div style="width: 50%;height: 5px;background-image: linear-gradient(.25turn, #0B1620 0%, #00FFFF 100%);border-radius: 5px"></div>
+                    <div class="animated-width-sec" style="height: 5px; border-radius: 5px;"></div>
                   </div>
                 </div>
                 <div style="width: 8%;height:30px;border-right: 3px #14424C solid"></div>
@@ -405,5 +405,36 @@ export default {
   margin: 20px 0 0 15px;
   position: relative;
 }
+.animated-width-fir {
+  will-change: width;
+  background: linear-gradient(.25turn, #0B1620 0%, #00FFFF 100%);
+  width: 0;
+  animation: progressBarFir 2s ease-in-out forwards;
+}
+
+@keyframes progressBarFir {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 87%;
+  }
+}
+
+.animated-width-sec {
+  will-change: width;
+  background: linear-gradient(.25turn, #0B1620 0%, #00FFFF 100%);
+  width: 0;
+  animation: progressBarSec 2s ease-in-out forwards;
+}
+
+@keyframes progressBarSec {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 50%;
+  }
+}
 </style>