驾驶舱

src/views/jsc/index.vue

@@ -14,7 +14,13 @@
             <div v-for='item in jscL1typeList'>
               <img :src="item.icon" alt="">
               <div>
-                <p class="num">{{item.num}}</p>
+                <p class="num">
+                <CountTo
+                  :startVal='0'
+                  :endVal='item.num'
+                  :duration='3000'
+                />人</p>
+
                 <p>{{item.text}}</p>
               </div>
             </div>
@@ -47,7 +53,12 @@
           <div v-for="item in jscMtList">
             <img :src="item.icon" alt="">
             <div>
-              <p>{{item.num}}</p>
+              <p>
+              <CountTo
+                :startVal='0'
+                :endVal='item.num'
+                :duration='1500'
+              /></p>
               <p>{{item.text}}</p>
             </div>
           </div>
@@ -94,12 +105,14 @@
 <script>
   import echartsMap from "./components/echartsMap.vue";
   import echartsLine from "./components/echartsLine.vue";
-  import echartsPie from "./components/echartsPie.vue";
+  import echartsPie from "./components/echartsPie.vue";
+  import CountTo from 'vue-count-to'
   export default {
     components: {
       echartsMap,
       echartsLine,
-      echartsPie
+      echartsPie,
+      CountTo
     },
     data() {
       return {
@@ -152,48 +165,48 @@
         jscMtList: [{
           icon: require('../../assets/jsc/iconimg1.jpg'),
           text: '今年总数',
-          num: '100'
+          num: 100
         }, {
           icon: require('../../assets/jsc/iconimg2.jpg'),
           text: '今年新增',
-          num: '100'
+          num: 123
         }, {
           icon: require('../../assets/jsc/iconimg3.jpg'),
           text: '今年减少',
-          num: '100'
+          num: 45
         }, {
           icon: require('../../assets/jsc/iconimg4.jpg'),
           text: '今年访视',
-          num: '100'
+          num: 99
         }],
         jscL1typeList: [{
           icon: require('../../assets/jsc/icon_img1.png'),
           text: '视力残疾',
-          num: '72人'
+          num: 72
         }, {
           icon: require('../../assets/jsc/icon_img2.png'),
           text: '听力残疾',
-          num: '72人'
+          num: 36
         }, {
           icon: require('../../assets/jsc/icon_img3.png'),
           text: '言语残疾',
-          num: '72人'
+          num: 56
         }, {
           icon: require('../../assets/jsc/icon_img4.png'),
           text: '肢体残疾',
-          num: '72人'
+          num: 87
         }, {
           icon: require('../../assets/jsc/icon_img5.png'),
           text: '智力残疾',
-          num: '72人'
+          num: 24
         }, {
           icon: require('../../assets/jsc/icon_img1.png'),
           text: '精神残疾',
-          num: '72人'
+          num: 101
         }, {
           icon: require('../../assets/jsc/icon_img2.png'),
           text: '多重残疾',
-          num: '72人'
+          num: 18
         }]
       }
     },