fix 无缝滚动

package.json

@@ -17,6 +17,7 @@
     "vue": "^2.6.10",
     "vue-count-to": "^1.0.13",
     "vue-router": "^3.0.3",
+    "vue-seamless-scroll": "^1.1.17",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/main.js

@@ -1,8 +1,8 @@
 /*
  * @Author: WangQiBiao
  * @Date: 2019-09-24 17:50:53
- * @LastEditors: WangQiBiao
- * @LastEditTime: 2019-09-26 18:02:26
+ * @LastEditors: mozhuangru
+ * @LastEditTime: 2019-10-13 16:51:21
  * @Description:
  */
 import Vue from 'vue'
@@ -17,7 +17,6 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import '@/assets/css/element-variables.scss'
 Vue.use(ElementUI)
-
 // 引入全局过滤器
 Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])

src/views/index/components/communication/index.scss

@@ -33,9 +33,9 @@
       display: flex;
       align-items: center;
       padding-bottom: halfH(12);
-      animation: bubble 20s linear infinite;
-      backface-visibility: hidden;
-      animation-fill-mode: forwards;
+      // animation: bubble 20s linear infinite;
+      // backface-visibility: hidden;
+      // animation-fill-mode: forwards;
       .list-item-txt{
         font-size: halfH(14);
       }

src/views/index/components/communication/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-25 14:10:08
  * @LastEditors: mozhuangru
- * @LastEditTime: 2019-10-12 19:04:14
+ * @LastEditTime: 2019-10-13 16:56:30
  * @Description: 在线沟通
  -->
 <template>
@@ -14,7 +14,8 @@
     </div>
     <div class="linst-line"></div>
     <div class="list">
-      <div class="list-item" v-for="(item, idx) in dialogData" :key="idx">
+      <vueSeamless :data="dialogData" :class-option="optionScroll" class="list">
+        <div class="list-item" v-for="(item, idx) in dialogData" :key="idx">
         <div class="list-item-lf">
           <TagCom type="time">{{item.createAt}}</TagCom>
           <span class="list-item-txt">{{item.content}}</span>
@@ -27,6 +28,7 @@
           <TagCom v-if="item.label === '待受理'" type="accept">待受理</TagCom>
         </div>
       </div>
+      </vueSeamless>
     </div>
   </div>
 </template>
@@ -35,7 +37,16 @@ import TitleCom from '@/components/title'
 import TagCom from '@/components/tag'
 import echarts from 'echarts'
 import { api } from '@/api'
+import vueSeamless from 'vue-seamless-scroll'
+
 export default {
+  computed: {
+    optionScroll () {
+      return {
+        step: 0.5
+      }
+    }
+  },
   data () {
     return {
       dialogData: []
@@ -43,7 +54,8 @@ export default {
   },
   components: {
     TitleCom,
-    TagCom
+    TagCom,
+    vueSeamless
   },
   mounted () {
     this.init()

src/views/index/components/entrance-guard/index.scss

@@ -33,12 +33,12 @@
       display: flex;
       align-items: center;
       padding-bottom: halfH(12);
-      animation: bubble 20s linear infinite;
-      backface-visibility: hidden;
-      animation-fill-mode: forwards;
-      -webkit-animation: bubble 20s linear infinite;
-      -webkit-backface-visibility: hidden;
-      -webkit-animation-fill-mode: forwards;
+      // animation: bubble 20s linear infinite;
+      // backface-visibility: hidden;
+      // animation-fill-mode: forwards;
+      // -webkit-animation: bubble 20s linear infinite;
+      // -webkit-backface-visibility: hidden;
+      // -webkit-animation-fill-mode: forwards;
       .list-item-txt{
         font-size: halfH(14);
       }

src/views/index/components/entrance-guard/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-25 10:20:36
  * @LastEditors: mozhuangru
- * @LastEditTime: 2019-10-11 17:44:07
+ * @LastEditTime: 2019-10-13 16:51:49
  * @Description: 智能门禁
  -->
 <template>
@@ -16,7 +16,8 @@
       </div>
     </div>
     <div class="list">
-      <div class="list-item" v-for="(item, idx) in faceData.list" :key="idx">
+      <vueSeamless :data="faceData.list" :class-option="optionScroll" class="list">
+        <div class="list-item" v-for="(item, idx) in faceData.list" :key="idx">
         <div class="list-item-lf">
           <TagCom type="time">{{item.createAt}}</TagCom>
           <span class="list-item-txt">{{item.content}}</span>
@@ -25,6 +26,7 @@
           <TagCom type="house">{{item.label}}</TagCom>
         </div>
       </div>
+      </vueSeamless>
     </div>
   </div>
 </template>
@@ -32,7 +34,16 @@
 import TitleCom from '@/components/title'
 import TagCom from '@/components/tag'
 import { api } from '@/api'
+import vueSeamless from 'vue-seamless-scroll'
+
 export default {
+  computed: {
+    optionScroll () {
+      return {
+        step: 0.5
+      }
+    }
+  },
   data () {
     return {
       faceData: {}
@@ -40,7 +51,8 @@ export default {
   },
   components: {
     TitleCom,
-    TagCom
+    TagCom,
+    vueSeamless
   },
   mounted () {
     this.init()

src/views/index/components/income/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-26 10:57:30
  * @LastEditors: mozhuangru
- * @LastEditTime: 2019-10-12 15:57:25
+ * @LastEditTime: 2019-10-13 16:02:12
  * @Description: 收入统计
  -->
 <template>
@@ -77,7 +77,7 @@ export default {
             label: {
               normal: {
                 // formatter: '{b|{b}}\n{c}',
-                formatter: '{per|{d}%}',
+                formatter: '{b|{b}}\n{per|{d}%}',
                 fontSize: 10,
                 lineHeight: 14,
                 rich: {

src/views/index/components/paid-in/index.vue

@@ -2,12 +2,12 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-26 08:46:04
  * @LastEditors: mozhuangru
- * @LastEditTime: 2019-10-12 09:04:28
+ * @LastEditTime: 2019-10-13 16:03:31
  * @Description: 近1年应实收统计
  -->
 <template>
   <div class="paid-in">
-    <TitleCom>近1年应实收统计</TitleCom>
+    <TitleCom>近12个月实收统计</TitleCom>
     <div class="map">
       <div class="map-item" id="paid"></div>
       <div class="map-item">

src/views/index/components/parking/index.scss

@@ -33,9 +33,9 @@
       display: flex;
       align-items: center;
       padding-bottom: halfH(12);
-      animation: bubble 20s linear infinite;
-      backface-visibility: hidden;
-      animation-fill-mode: forwards;
+      // animation: bubble 20s linear infinite;
+      // backface-visibility: hidden;
+      // animation-fill-mode: forwards;
       .list-item-txt{
         font-size: halfH(14);
       }

src/views/index/components/parking/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangQiBiao
  * @Date: 2019-09-25 10:20:36
  * @LastEditors: mozhuangru
- * @LastEditTime: 2019-10-09 11:43:05
+ * @LastEditTime: 2019-10-13 16:57:19
  * @Description: 智能停车
  -->
 <template>
@@ -16,7 +16,8 @@
       </div>
     </div>
     <div class="list">
-      <div class="list-item" v-for="(item, idx) in parkData.list" :key="idx">
+      <vueSeamless :data="parkData.list" :class-option="optionScroll" class="list">
+        <div class="list-item" v-for="(item, idx) in parkData.list" :key="idx">
         <div class="list-item-lf">
           <TagCom type="time">{{item.createAt}}</TagCom>
           <span class="list-item-txt">{{item.content}}</span>
@@ -25,6 +26,7 @@
           <TagCom type="house">{{item.label}}</TagCom>
         </div>
       </div>
+      </vueSeamless>
     </div>
   </div>
 </template>
@@ -32,7 +34,16 @@
 import TitleCom from '@/components/title'
 import TagCom from '@/components/tag'
 import { api } from '@/api'
+import vueSeamless from 'vue-seamless-scroll'
+
 export default {
+  computed: {
+    optionScroll () {
+      return {
+        step: 0.5
+      }
+    }
+  },
   data () {
     return {
       parkData: {}
@@ -40,7 +51,8 @@ export default {
   },
   components: {
     TitleCom,
-    TagCom
+    TagCom,
+    vueSeamless
   },
   mounted () {
     api.getTrafficRecord({