首页增加动画

src/pages/views/home/components/HomePage.vue

@@ -24,6 +24,10 @@
                       {{ it.until }}
                     </p>
                     <p>{{ it.name }}</p>
+
+                    <span class="steps">
+                      {{ it.step }}
+                    </span>
                   </div>
                 </div>
               </template>
@@ -339,21 +343,21 @@ const leftContent = ref({
   topCount: [
     [
       {
-        num: 6.8, icon: '11', name: '总刷卡量', until: '亿人次'
+        num: 6.8, icon: '11', name: '总刷卡量', until: '亿人次', step: '+5'
       },
       {
-        num: 6.8, icon: '12', name: '总客流量', until: '亿人次'
+        num: 6.8, icon: '12', name: '总客流量', until: '亿人次', step: '-9'
       },
       {
-        num: 6.8, icon: '13', name: '安全行驶', until: '万公里'
+        num: 6.8, icon: '13', name: '安全行驶', until: '万公里', step: '+15'
       }
     ],
     [
       {
-        num: 6.8, icon: '14', name: '累计减少碳排放', until: '吨'
+        num: 6.8, icon: '14', name: '累计减少碳排放', until: '吨', step: '+5'
       },
       {
-        num: 6.8, icon: '15', name: '累计责任事故率', until: '起/百万公里'
+        num: 6.8, icon: '15', name: '累计责任事故率', until: '起/百万公里', step: '+5'
       },
       {
         num: 6.8, icon: '16', name: '乘客满意度', until: '%'
@@ -969,9 +973,9 @@ function changeFn(id: number, item: any) {
         height: 160px;
         align-items: center;
         justify-content: center;
-
+        font-family: "Impact Normal", Impact, sans-serif;
         &>div {
-
+          position: relative;
           &>p:first-child {
             font-size: 18px;
 
@@ -983,6 +987,13 @@ function changeFn(id: number, item: any) {
           &>p:last-child {
             font-size: 24px;
           }
+          .steps{
+            position: absolute;
+            top: -60px;
+            left: 15px;
+            font-size: 50px;
+            animation: step 0.5s infinite alternate;
+          }
         }
       }
     }
@@ -1299,4 +1310,14 @@ function changeFn(id: number, item: any) {
     }
   }
 }
+
+@keyframes step {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
 </style>