From 49a25d0f847ece9f6653d80f5af673985c031853 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Thu, 21 Jul 2022 19:24:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20app=20=E6=96=B0=E5=A2=9E=E5=A4=9A?=
 =?UTF-8?q?=E9=80=89=E9=AB=98=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/charts2/networkOverviewApps.scss    | 23 ++++++++++++-------
 .../charts2/charts/NetworkOverviewApps.vue    | 16 ++++++-------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/assets/css/components/views/charts2/networkOverviewApps.scss b/src/assets/css/components/views/charts2/networkOverviewApps.scss
index c18a090b..3c5bc324 100644
--- a/src/assets/css/components/views/charts2/networkOverviewApps.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewApps.scss
@@ -264,15 +264,22 @@
             cursor: pointer;
             display: flex;
             flex-direction: column;
-            .body__app-title {
-              font-family: Helvetica-Bold;
-              font-size: 16px;
-              color: #353636;
-              font-weight: 700;
-              margin-bottom: 6px;
+            .body__app-content {
               display: flex;
               justify-content: space-between;
-              .body__app-title-left {
+              .body__app-left {
+                display: flex;
+                .body__app-left-title {
+                  font-family: Helvetica-Bold;
+                  font-size: 16px;
+                  color: #353636;
+                  font-weight: 700;
+                  margin-bottom: 6px;
+                }
+                .body__app-left-title.app-show,
+                .body__app-left-title.provide-show {
+                  color: #046ECA;
+                }
                 span {
                   i {
                     color: green;
@@ -281,7 +288,7 @@
                   }
                 }
               }
-              .body__app-title-right {
+              .body__app-content-right {
                 span {
                   i {
                     color: #046ECA;
diff --git a/src/views/charts2/charts/NetworkOverviewApps.vue b/src/views/charts2/charts/NetworkOverviewApps.vue
index d104072e..b9d086ce 100644
--- a/src/views/charts2/charts/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/NetworkOverviewApps.vue
@@ -84,12 +84,12 @@
             <el-tab-pane :label="$t('networkOverview.appType.provider')" :name="0">
               <div class="body__apps">
                 <div class="body__app" v-for="app in providerOptions" :key="app.name"  @click="appCheckedChange(app, 0)">
-                  <div class="body__app-title">
-                    <div class="body__app-title-left">
+                  <div class="body__app-content">
+                    <div class="body__app-left">
                       <span><i class="cn-icon cn-icon-mining-pool"></i></span>
-                      {{app.name}},{{app.desc}}
+                      <span class="body__app-left-title" :class="{'provide-show': app.provideShow}">{{app.name}},{{app.desc}}</span>
                     </div>
-                    <div class="body__app-title-right" v-if="app.provideShow"><span><i class="cn-icon cn-icon-a-allclear"></i></span></div>
+                    <div class="body__app-content-right" v-if="app.provideShow"><span><i class="cn-icon cn-icon-a-allclear"></i></span></div>
                   </div>
                   <div class="body__app-value">This is a description this is a description this is a description this is a description</div>
                 </div>
@@ -98,12 +98,12 @@
             <el-tab-pane :label="$t('networkOverview.appType.app')" :name="1">
               <div class="body__apps">
                 <div class="body__app" v-for="app in appOptions" :key="app.name" @click="appCheckedChange(app, 1)">
-                  <div class="body__app-title">
-                    <div class="body__app-title-left">
+                  <div class="body__app-content">
+                    <div class="body__app-left">
                       <span><i class="cn-icon cn-icon-mining-pool"></i></span>
-                      {{app.name}},{{app.desc}}
+                      <span class="body__app-left-title" :class="{'app-show': app.appShow}">{{app.name}},{{app.desc}}</span>
                     </div>
-                    <div class="body__app-title-right" v-if="app.appShow"><span><i class="cn-icon cn-icon-a-allclear"></i></span></div>
+                    <div class="body__app-content-right" v-if="app.appShow"><span><i class="cn-icon cn-icon-a-allclear"></i></span></div>
                   </div>
                   <div class="body__app-value">This is a description this is a description this is a description this is a description</div>
                 </div>