跑马灯效果

src/views/cockpit/stxf.vue

@@ -24,7 +24,7 @@
     <div v-show="tab == options[1].value">
       <div class="content">
 
-        <div class="infoLIst content" v-if="store.state.cockpit_stxf.ssgc.list.length" ref="contentRef">
+        <div class="infoLIst content" ref="contentRef">
           <div class="infoItem" v-for="(item, index) in store.state.cockpit_stxf.ssgc.list" :key="index">
             <div class="itemIcon">
               <span>
@@ -119,6 +119,8 @@ export default {
         tzje: store.state.cockpit_stxf.ssgc.title.tzje,
 
       }
+
+
     },
     changeCharts(e) {
 
@@ -202,10 +204,10 @@ export default {
       self.timer && clearInterval(self.timer)
       self.timer = setInterval(setInter, 100)
 
-      this.$refs.contentRef.addEventListener('mouseover', function () {
+      self.$refs.contentRef.addEventListener('mouseover', function () {
         self.timer && clearInterval(self.timer)
       })
-      this.$refs.contentRef.addEventListener('mouseout', function () {
+      self.$refs.contentRef.addEventListener('mouseout', function () {
         self.timer = setInterval(setInter, 100)
       })
     }
@@ -303,8 +305,9 @@ export default {
       text-align: center;
 
       span {
-        width: 5px;
-        height: 10px;
+        display: inline-block;
+        width: 20px;
+        height: 20px; 
         font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
         font-weight: 600;
         font-size: 14px;