From 592517fd0c05ac5badc06bd23a0550a771ca9609 Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@geedgenetworks.com>
Date: Tue, 9 Aug 2022 15:35:36 +0800
Subject: [PATCH] =?UTF-8?q?network=20overview=E8=A1=A8=E6=A0=BC=EF=BC=9A?=
 =?UTF-8?q?=E5=AF=B9=E6=80=BB=E9=87=8F=E5=88=97=E4=B8=AD=E7=9A=84=E8=B6=8B?=
 =?UTF-8?q?=E5=8A=BF=E5=9B=BE=E8=A1=A8=E6=A0=B7=E5=BC=8F=E8=BF=9B=E8=A1=8C?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/charts2/networkOverviewTabs.scss       |  7 ++++---
 src/views/charts2/charts/NetworkOverviewTabs.vue |  8 ++++----
 src/views/charts2/charts/NpmAppEventTable.vue    | 16 ++++++++--------
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/assets/css/components/views/charts2/networkOverviewTabs.scss b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
index aa5eb220..85b62704 100644
--- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
@@ -30,22 +30,23 @@
         margin-top: 2px;
         border-radius: 10px;
         font-weight:500;
+        padding:0px 9px;
+        span {
+          width: max-content;
+        }
       }
       .data-total-trend-black {
         background-color: rgba(113,113,113,0.12);
         color: #717171;
-        width: 36px;
         height: 20px;
       }
       .data-total-trend-green {
         background-color: rgba(126,159,84,0.12);
-        width: 52px;
         height: 20px;
         color:#7E9F54;
       }
       .data-total-trend-red {
         background-color: rgba(226,97,84,0.12);
-        width: 52px;
         height: 20px;
         color:#E26154;
         .cn-icon-rise1{
diff --git a/src/views/charts2/charts/NetworkOverviewTabs.vue b/src/views/charts2/charts/NetworkOverviewTabs.vue
index d6127d39..4fa01326 100644
--- a/src/views/charts2/charts/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/NetworkOverviewTabs.vue
@@ -39,13 +39,13 @@
                     <div class="data-total" >
                       {{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '-'}}
                       <div v-if="scope.row['trend'] === 'up'" class="data-total-trend data-total-trend-red">
-                        <i class="cn-icon-rise1 cn-icon"></i>{{scope.row['trendValue']}}
+                        <i class="cn-icon-rise1 cn-icon"></i><span>{{scope.row['trendValue']}}</span>
                       </div>
                       <div v-else-if="scope.row['trend'] === 'down'" class="data-total-trend data-total-trend-green">
-                        <i class="cn-icon-decline cn-icon"></i>{{scope.row['trendValue']}}
+                        <i class="cn-icon-decline cn-icon"></i><span>{{scope.row['trendValue']}}</span>
                       </div>
                       <div v-else-if="scope.row['trend'] === 'noChange'" class="data-total-trend data-total-trend-black">
-                        <i class="cn-icon-constant cn-icon"></i>{{scope.row['trendValue']}}
+                        <i class="cn-icon-constant cn-icon"></i><span>{{scope.row['trendValue']}}</span>
                       </div>
 
                     </div>
@@ -487,7 +487,7 @@ export default {
                   trend = 'noChange'
                 }
                 trendPercent = trendPercent + '%'
-                if(trendPercent==='0%'){
+                if (trendPercent === '0%') {
                   trend = 'noChange'
                   trendPercent = ''
                 }
diff --git a/src/views/charts2/charts/NpmAppEventTable.vue b/src/views/charts2/charts/NpmAppEventTable.vue
index 1e3793a1..007656c0 100644
--- a/src/views/charts2/charts/NpmAppEventTable.vue
+++ b/src/views/charts2/charts/NpmAppEventTable.vue
@@ -140,14 +140,14 @@ export default {
       ]
     }
   },
-  methods:{
-    columnWidth(index){
-      if(index===0 || index===1){
-        return "20%"
-      }else if(index===2){
-        return "35%"
-      }else if(index===3){
-        return "15%"
+  methods: {
+    columnWidth (index) {
+      if (index === 0 || index === 1) {
+        return '20%'
+      } else if (index === 2) {
+        return '35%'
+      } else if (index === 3) {
+        return '15%'
       }
     }
   },