the-list组件样式修复

src/components/e-charts/the-list.vue

 <template>
-  <div class="top_list apaas_scroll" @mouseenter="mouseenter" @mouseleave="mouseleave">
+  <div
+    class="the_list apaas_scroll"
+    @mouseenter="mouseenter"
+    @mouseleave="mouseleave"
+  >
     <ul>
-      <li class="item" v-for="(item ,idx) in data" :key="idx">
-        <span :class="idx==0?'one':idx==1?'two':idx==2?'three':'lis'" class="pm">{{idx+1}}.</span>
-        <img :src="item.img" alt />
-        <p class="name">{{item.name}}</p>
-        <p class="init">{{item.init}}</p>
-        <span class="count">{{getCount(item.count)}}次</span>
+      <li class="item" v-for="(item, idx) in data" :key="idx">
+        <span
+          :class="
+            idx == 0 ? 'one' : idx == 1 ? 'two' : idx == 2 ? 'three' : 'lis'
+          "
+          class="pm"
+        >
+          {{ idx + 1 }}.
+        </span>
+        <img :src="item.img" />
+        <p class="text_clip">
+          <span class="name">{{ item.name }}</span><br>
+          <span class="init">{{ item.init }}</span>
+        </p>
+        <span class="count">{{ getCount(item.count) }}次</span>
       </li>
     </ul>
   </div>
@@ -18,15 +31,9 @@ export default {
     data: {
       type: Array,
       default() {
-        return [
-          {
-            name: "123",
-            init: "122222",
-            count: 1080
-          }
-        ];
-      }
-    }
+        return [];
+      },
+    },
   },
   data() {
     return {};
@@ -34,7 +41,7 @@ export default {
   methods: {
     getCount(val) {
       let a = val + "";
-      //   console.log((val + "").length);
+
       if (a.length > 3) {
         return a.substr(0, 1) + "," + a.substr(1);
       } else {
@@ -42,6 +49,7 @@ export default {
       }
     },
     autoScroll() {
+      return;
       if (this.timer) {
         clearInterval(this.timer);
       }
@@ -70,37 +78,36 @@ export default {
     },
     mouseleave() {
       this.autoScroll();
-    }
+    },
   },
   mounted() {
     this.autoScroll();
     window.addEventListener("resize", () => {
       this.autoScroll();
     });
+  },
+  destroyed() {
+    if (this.timer) {
+      clearInterval(this.timer);
     }
+  },
 };
 </script>
 
 <style scoped>
-.top_list {
+.the_list {
   overflow-x: hidden;
   overflow-y: auto;
 }
-li {
-  list-style: none;
-}
 .item {
   height: 50px;
-  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
 }
-.item img {
-  height: 35px;
-  width: 35px;
-  border-radius: 50%;
-  margin-left: 15px;
-  margin-top: 7px;
-}
-.item .pm {
+.item > .pm {
+  flex-shrink: 0;
   width: 14px;
   height: 12px;
   font-family: Arial-Black;
@@ -109,38 +116,37 @@ li {
   letter-spacing: 0px;
   font-weight: bold;
   font-size: 20px;
-  float: left;
-  margin-top: 12px;
 }
-.one {
+.item > .pm.one {
   color: #d9ac64;
 }
-.two {
+.item > .pm.two {
   color: #c4c4c0;
 }
-.three {
+.item > .pm.three {
   color: #ba6e40;
 }
-.lis {
+.item > .pm.lis {
   color: #333;
 }
-.item p {
-  display: inline-block;
+.item > img {
+  flex-shrink: 0;
+  height: 35px;
+  width: 35px;
+  border-radius: 50%;
+  margin-left: 15px;
 }
-.item .name {
-  position: absolute;
-  left: 85px;
+.item > p {
+  flex-grow: 1;
+  flex-shrink: 1;
+  margin-left: 10px;
 }
-.item .init {
-  position: absolute;
-  top: 25px;
-  left: 85px;
+.item > p > .init {
   color: #8890a7;
+  margin-top: 3px;
 }
-.item .count {
-  float: right;
-  margin-right: 25px;
-  margin-top: 15px;
+.item > .count {
+  flex-shrink: 0;
   height: 19px;
   font-family: ArialMT;
   font-size: 22px;
@@ -149,5 +155,7 @@ li {
   line-height: 17px;
   letter-spacing: 0px;
   color: #515fe7;
+  white-space: nowrap;
+  margin-left: 10px;
 }
 </style>