toplist组件

src/components/e-charts/toplist.vue

@@ -6,14 +6,17 @@
           <span v-text="'TOP' + (index + 1)"></span>
         </div>
         <div class="item_logo">
-          <el-avatar shape="square" :size="32" fit="cover" :src="option.logo" />
+          <el-avatar shape="square" :size="28" fit="cover" :src="option.logo" />
         </div>
         <div class="item_detail">
           <p class="item_info">
-            <span v-text="option.name"></span>
+            <span class="text_clip">
+              {{ option.name }}
+              <i class="el-icon-arrow-right"></i>
+            </span>
             <span v-text="option.value + (option.unit || '次')"></span>
           </p>
-          <div class="item progress">
+          <div class="item_progress">
             <div
               class="item_progress_bar"
               :style="{ width: getBarWidth(option.value) }"
@@ -82,15 +85,70 @@ export default {
 </script>
 
 <style scoped>
+.top_list {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
 .item_list {
   display: flex;
   justify-content: flex-start;
   align-items: center;
 }
+.item_list:not(:first-child) {
+  margin-top: 18px;
+}
 .item_index {
   width: 35px;
   flex-shrink: 0;
   margin-right: 10px;
   font-size: 12px;
+  color: #58617a;
+}
+.item_logo {
+  margin-right: 10px;
+  flex-shrink: 0;
+  font-size: 0;
+  border: 2px solid #e3e5ef;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.item_info {
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 14px;
+  line-height: 20px;
+  color: #58617a;
+}
+.item_detail {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+.item_info > span:first-child {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+.item_info > span:first-child > i {
+  font-weight: bold;
+  font-size: 12px;
+  color: #8e96ab;
+}
+.item_info > span:nth-child(2) {
+  color: #0d1847;
+}
+.item_progress {
+  height: 5px;
+  border-radius: 2px;
+  overflow: hidden;
+  background-color: #c9cedd;
+  margin-top: 7px;
+}
+.item_progress > .item_progress_bar {
+  height: inherit;
+  border-radius: inherit;
+  overflow: inherit;
+  background-color: #e56600;
 }
 </style>