From fd1bee2ad91d54e2e150c3a75b18b6e603ed2988 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Thu, 22 Jul 2021 18:43:12 +0800
Subject: [PATCH] =?UTF-8?q?CN-65=20fix:=20statistics-legend=E9=A6=96?=
 =?UTF-8?q?=E5=88=97=E5=A2=9E=E5=8A=A0=E6=A0=87=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/StatisticsLegend.vue | 83 +++++++++++-----------
 1 file changed, 41 insertions(+), 42 deletions(-)

diff --git a/src/components/charts/StatisticsLegend.vue b/src/components/charts/StatisticsLegend.vue
index 4e59b037..b4e342e1 100644
--- a/src/components/charts/StatisticsLegend.vue
+++ b/src/components/charts/StatisticsLegend.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="chart__legend">
-    <div class="chart__table-top">
-      <div>Avg</div>
-      <div>Max</div>
+    <div class="chart__table-top table-below-box">
+      <div class="table__below-color"></div>
+      <div class="table__below-title">Name</div>
+      <div class="table__below-statistics">Avg</div>
+      <div class="table__below-statistics">Max</div>
     </div>
     <div class="chart__table-below">
       <div v-for="(item,index) in data" :key="index" class="table-below-box">
@@ -47,10 +49,8 @@ export default {
   height: 30px;
   border-bottom: #E7EAED 1px solid;
   display: flex;
-  justify-content: flex-end;
 
   div {
-    width: 80px;
     font-size: 13px;
     line-height: 28px;
     color: $--color-primary;
@@ -59,45 +59,44 @@ export default {
 .chart__table-below {
   width: 100%;
   font-size: 13px;
+}
+.table-below-box {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  line-height: 24px;
+}
+.table-below-box:hover {
+  background-color: #f9f9f9;
+  border: 0;
+  color: #383838;
+}
+.table__below-color {
+  width: 27px;
+  height: 7px;
+  flex-shrink: 0;
+  padding-left: 10px;
 
-  .table-below-box {
+  div {
+    height: 100%;
     width: 100%;
-    display: flex;
-    align-items: center;
-    line-height: 24px;
-  }
-  .table-below-box:hover {
-    background-color: #f9f9f9;
-    border: 0;
-    color: #383838;
-  }
-  .table__below-color {
-    width: 27px;
-    height: 7px;
-    flex-shrink: 0;
-    padding-left: 10px;
-
-    div {
-      height: 100%;
-      width: 100%;
-      border-radius: 24%;
-    }
-  }
-  .table__below-title {
-    padding: 0 6px;
-    flex-shrink: 1;
-    flex-grow: 1;
-    overflow: hidden;
-    min-width: 200px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .table__below-statistics {
-    width: 80px;
-    flex-shrink: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    border-radius: 24%;
   }
 }
+.table__below-title {
+  padding: 0 6px;
+  flex-shrink: 1;
+  flex-grow: 1;
+  overflow: hidden;
+  min-width: 200px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.table__below-statistics {
+  width: 80px;
+  flex-shrink: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>