1.修改排名屏滚动部分

src/views/dataBoard/dataBoard.vue

@@ -56,10 +56,11 @@
             </span>
             </div>
             <div class="scroll-container">
-                <div class="scroll-content" :class="[listData.length > 6 ? 'animal-css' : '']">
-                    <div v-for="(item,index) in listData" :key="`top-list-data-${index}`">
+                <div class="scroll-content" :style="animationCss" :class="[listData.length > 6 ? 'animal-css' : '']">
+<!--                <div class="scroll-content" :style="animationCss">-->
+                    <div v-for="(item,index) in listData.concat(listData.length > 0 ? listData : [])" :key="`top-list-data-${index}`">
                         <img style="border-radius: 8px" :src="item.faceUrl || require('@/assets/images/bigScreen/user.png')" alt="" />
-                        {{preName(item.name)}} {{item.userScore}}分 第{{index+1}}名；
+                        {{preName(item.name)}} {{item.userScore}}分 第{{(index % listData.length)+1}}名；
                     </div>
                 </div>
             </div>
@@ -236,6 +237,16 @@
         created() {
             this.initMttqF()
         },
+        computed: {
+            animationCss() {
+                return this.listData && this.listData.length > 6 ? {
+                    // animationName: 'scroll',
+                    animationDuration: this.listData.length * 3 + 's',
+                    animationTimingFunction: 'linear',
+                    animationIterationCount: 'infinite'
+                } : {}
+            }
+        },
         mounted() {
             callBackMqttMessage((data) => {
                 console.log('loadData===', data)
@@ -915,7 +926,7 @@
     }
 
     .animal-css {
-        animation: scroll 20s linear infinite;
+        animation: scroll 40s linear infinite;
     }
 
     @keyframes scroll {