feat: total 动画优化

src/main.js

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-24 17:50:53
  * @LastEditors: wangjiacheng
- * @LastEditTime: 2021-10-14 16:29:44
+ * @LastEditTime: 2021-10-15 16:37:37
  * @Description:
  */
 import Vue from 'vue'
@@ -17,7 +17,12 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import '@/assets/css/element-variables.scss'
 import DigitRoll from 'digit-roll'
-Vue.use(DigitRoll)
+Vue.use(DigitRoll, {
+  duration: {
+    type: Number,
+    default: 500
+  }
+})
 // Vue.use(DigitRoll,
 //   {
 //   value: {

src/views/total-sum/index.vue

@@ -2,7 +2,7 @@
  * @Author: wangjiacheng
  * @Date: 2021-10-14 11:57:19
  * @LastEditors: wangjiacheng
- * @LastEditTime: 2021-10-15 16:15:46
+ * @LastEditTime: 2021-10-15 17:09:52
  * @Description:
 -->
 <template>
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-// import { totalSum } from '@/api'
+import { totalSum } from '@/api'
 import mixin from './mixin.js'
 import wcLogo from '@/assets/images/wc.png'
 import huiguanjiaLogo from '@/assets/images/huiguanjia.png'
@@ -43,8 +43,7 @@ export default {
   },
   data () {
     return {
-      moneny: 99834580.96,
-      monenyLength: 0,
+      moneny: 0,
       timer: null,
       showFire: false,
       isBillion: false
@@ -63,30 +62,36 @@ export default {
       if (nVal >= 1e8 && !this.showFire) {
         setTimeout(() => {
           this.showFire = true
-        }, 1000)
+        }, 500)
       }
       if (nVal >= 1e8) {
         setTimeout(() => {
           this.isBillion = true
-        }, 1000)
+        }, 500)
       }
     }
   },
   methods: {
     getTotalSum () {
       this.timer = setInterval(() => {
-        const n = this.moneny + Math.floor(Math.random() * 100000)
-        this.moneny = n
-        // totalSum.getTotalSum().then(res => {
-        //   if (res && res.data) {
-        //     const data = Number(res.data.data)
-        //     this.moneny = data
-        //   }
-        // })
-      }, 3000)
+        // const n = this.moneny + Math.floor(Math.random() * 1000000)
+        // this.moneny = n
+        totalSum.getTotalSum().then(res => {
+          if (res && res.data) {
+            const data = Number(res.data.data)
+            this.moneny = data
+          }
+        })
+      }, 10000)
     }
   },
   created () {
+    totalSum.getTotalSum().then(res => {
+      if (res && res.data) {
+        const data = Number(res.data.data)
+        this.moneny = data
+      }
+    })
     this.getTotalSum()
   },
   mounted () {
@@ -136,7 +141,7 @@ export default {
     .title {
       font-size: 58px;
       color: rgb(255, 210, 132);
-      margin-bottom: 50px;
+      margin-bottom: 80px;
       font-family: 'Source Han Sans CN';
     }
     .sum {
@@ -167,16 +172,19 @@ export default {
       }
     }
     .sum-billion {
-      animation: billion 2.2s;
+      animation: billion 4s;
     }
     @keyframes billion {
       0% {
         transform: scale(1);
       }
-      50% {
+      30% {
+        transform: scale(1.23);
+      }
+      60% {
         transform: scale(1.23);
       }
-      95% {
+      90% {
         transform: scale(1);
       }
     }

src/views/total-sum/mixin.js

@@ -2,7 +2,7 @@
  * @Author: wangjiacheng
  * @Date: 2021-10-15 10:58:28
  * @LastEditors: wangjiacheng
- * @LastEditTime: 2021-10-15 15:40:26
+ * @LastEditTime: 2021-10-15 16:53:53
  * @Description:
  */