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%'
       }
     }
   },