From 6c657308483f71e5534f918b01f013a525b349be Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Thu, 7 Apr 2022 13:47:12 +0800
Subject: [PATCH] =?UTF-8?q?style:=20dns=E5=8A=A0=E5=AF=86=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/charts/chartSingleValue.scss        | 25 +++++++++------
 src/views/charts/charts/ChartSingleValue.vue  | 32 +++++++++++--------
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/assets/css/components/views/charts/chartSingleValue.scss b/src/assets/css/components/views/charts/chartSingleValue.scss
index 118ea687..a51d0988 100644
--- a/src/assets/css/components/views/charts/chartSingleValue.scss
+++ b/src/assets/css/components/views/charts/chartSingleValue.scss
@@ -369,7 +369,7 @@
         }
       }
       .content__data {
-        width: 90%;
+        width: 100%;
         height: 100%;
         display: flex;
         margin: auto;
@@ -378,15 +378,15 @@
       }
       .content__data-protocol:nth-of-type(1) {
         margin-bottom: 50px;
-        span {
-          font-size: 14px;
+        span:nth-of-type(2) {
+          font-size: 12px;
           color: #FC8157;
           font-weight: 500;
         }
       }
       .content__data-protocol:nth-of-type(2) {
-        span {
-          font-size: 14px;
+        span:nth-of-type(2) {
+          font-size: 12px;
           color: #FBA342;
           font-weight: 500;
         }
@@ -396,7 +396,12 @@
         height: 68px;
         width: 100%;
         text-align: left;
-        justify-content: center;
+        justify-content: space-evenly;
+        .content__data-protocol-all {
+          display: flex;
+          width: 180px;
+          justify-content: space-between;
+        }
         .content__data-protocol-icon {
           flex-shrink: 0;
           display: flex;
@@ -411,14 +416,12 @@
         }
         .content__data-protocol-value {
           display: flex;
-          flex: 1;
           flex-direction: column;
+          width: 110px;
           justify-content: space-around;
           .content__data-protocol-value-title {
             flex-shrink: 0;
             display: flex;
-            width: 125px;
-            padding-left: 10%;
             margin-bottom: 7px;
             font-size: 14px;
             color: #666666;
@@ -432,7 +435,6 @@
           .content__data-protocol-value-num {
             flex-shrink: 0;
             display: flex;
-            padding-left: 10%;
             font-size: 26px;
             color: #333333;
             font-weight: 500;
@@ -442,6 +444,9 @@
           flex-shrink: 0;
           display: flex;
           height: 68px;
+          width: 130px;
+          justify-content: center;
+          text-align: left;
           font-size: 14px;
           color: #666666;
           font-weight: 400;
diff --git a/src/views/charts/charts/ChartSingleValue.vue b/src/views/charts/charts/ChartSingleValue.vue
index 7e31c6f3..5f7997bd 100644
--- a/src/views/charts/charts/ChartSingleValue.vue
+++ b/src/views/charts/charts/ChartSingleValue.vue
@@ -196,24 +196,28 @@
       </div>
       <div class="content__data">
         <div class="content__data-protocol">
-          <div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[0]}">
-            <i :class="chartInfo.params.icon[0]" :style="{color: chartInfo.params.iconColor[0]}"></i>
+          <div class="content__data-protocol-all">
+            <div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[0]}">
+              <i :class="chartInfo.params.icon[0]" :style="{color: chartInfo.params.iconColor[0]}"></i>
+            </div>
+            <div class="content__data-protocol-value">
+              <div class="content__data-protocol-value-title">{{$t('protocol.requestVolume')}}</div>
+              <div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'bytes'), chartInfo.params.unitType).join('')}}</div>
+            </div>
           </div>
-          <div class="content__data-protocol-value">
-            <div class="content__data-protocol-value-title">{{$t('protocol.requestVolume')}}</div>
-            <div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'bytes'), chartInfo.params.unitType).join(' ')}}</div>
-          </div>
-          <div class="content__data-protocol-percent">{{$t('protocol.proportion')}}&nbsp;&nbsp;<span>{{unitConvert($_.get(chartData, 'bytesPercent') * 100, unitTypes.percent).join('')}}</span></div>
+          <div class="content__data-protocol-percent"><span>{{$t('protocol.proportion')}}</span>&nbsp;<span>{{unitConvert($_.get(chartData, 'bytesPercent'), unitTypes.percent).join('')}}</span></div>
         </div>
         <div class="content__data-protocol">
-          <div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[1]}">
-            <i :class="chartInfo.params.icon[1]" :style="{color: chartInfo.params.iconColor[1]}"></i>
+          <div class="content__data-protocol-all">
+            <div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[1]}">
+              <i :class="chartInfo.params.icon[1]" :style="{color: chartInfo.params.iconColor[1]}"></i>
+            </div>
+            <div class="content__data-protocol-value">
+              <div class="content__data-protocol-value-title">{{$t('protocol.totalFlow')}}</div>
+              <div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'count'), chartInfo.params.unitType).join('')}}</div>
+            </div>
           </div>
-          <div class="content__data-protocol-value">
-            <div class="content__data-protocol-value-title">{{$t('protocol.totalFlow')}}</div>
-            <div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'count'), chartInfo.params.unitType).join(' ')}}</div>
-          </div>
-          <div class="content__data-protocol-percent">{{$t('protocol.proportion')}}&nbsp;&nbsp;<span>{{ unitConvert($_.get(chartData, 'countPercent') * 100, unitTypes.percent).join('')}}</span></div>
+          <div class="content__data-protocol-percent"><span>{{$t('protocol.proportion')}}</span>&nbsp;<span>{{unitConvert($_.get(chartData, 'countPercent'), unitTypes.percent).join('')}}</span></div>
         </div>
       </div>
     </div>