From dd082fdd6850ed4a1d861b5f43daeb8d231e852e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=99=B6=E6=99=B6=20=E5=BC=A0?=
 <zhangjingjing@geedgenetworks.com>
Date: Wed, 4 Aug 2021 11:04:31 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9Aentity=E5=AE=9E=E4=BD=93=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/entities/EntityList.vue | 40 ++++++-------
 src/components/entities/entities.scss  | 82 +++++++++++++++++++-------
 2 files changed, 81 insertions(+), 41 deletions(-)

diff --git a/src/components/entities/EntityList.vue b/src/components/entities/EntityList.vue
index 2f91e171..28dc0d50 100644
--- a/src/components/entities/EntityList.vue
+++ b/src/components/entities/EntityList.vue
@@ -10,60 +10,60 @@
               <template v-else-if="entityType === 'domain'">{{d.domainName || 'Unknown'}}</template>
               <template v-else-if="entityType === 'app'">{{d.appName || 'Unknown'}}</template>
             </div>
-            <div class="content__desc" v-if="entityType !== 'ip'">
-              <template v-if="entityType === 'domain'">
-                <span class="desc__label">{{$t('entities.reputationLevel')}}:</span>
-                <span>{{d.reputationLevel || '-'}}</span>
-              </template>
-              <template v-else-if="entityType === 'app'">
-                <span class="desc__label">{{$t('entities.risk')}}:</span>
-                <span>{{d.appRisk || '-'}}</span>
-              </template>
-            </div>
           </div>
         </div>
-        <div class="cn-entity__body">
+        <div class="cn-entity__body" style="position: relative;">
+          <div class="content__desc" v-if="entityType !== 'ip'" style="color: #999999; width: 200px; position: absolute; top: 24px;right: -3px ;font-size: 12px;">
+            <template v-if="entityType === 'domain'" style="color: #999999; width: 200px;">
+              <span class="desc__label">{{$t('entities.reputationLevel')}}:</span>
+              <span>{{d.reputationLevel || '-'}}</span>
+            </template>
+            <template v-else-if="entityType === 'app'" style="color: #999999; width: 200px; margin:0px 35px;">
+              <span class="desc__label">{{$t('entities.risk')}}:</span>
+              <span>{{d.appRisk || '-'}}</span>
+            </template>
+          </div>
           <template v-if="entityType === 'ip'">
             <div class="body__row">
-              <span class="body__row-label">{{$t('overall.country')}}:</span>
+              <span class="body__row-label cn-icon cn-icon-category tubiao">{{$t('overall.country')}}:</span>
               <div class="body__row-value" :title="d.country">{{d.country || '-'}}</div>
             </div>
             <div class="body__row">
-              <span class="body__row-label">{{$t('overall.region')}}:</span>
+              <span class="body__row-label cn-icon cn-icon-position tubiao">{{$t('overall.region')}}:</span>
               <div class="body__row-value" :title="d.region">{{d.region || '-'}}</div>
             </div>
             <div class="body__row Select">
-              <span class="body__row-label">{{$t('entities.asn')}}:</span>
+              <span class="body__row-label cn-icon cn-icon-cloud tubiao">{{$t('entities.asn')}}:</span>
               <div class="body__row-value" :title="d.asn">{{d.asn || '-'}}</div>
             </div>
             <div class="body__detail" @click="entityDetail">{{$t('overall.detail')}}></div>
           </template>
           <template v-else-if="entityType === 'domain'">
             <div class="body__row">
-              <span class="body__row-label">{{$t('entities.categoryGroup')}}:</span>
+              <span class="body__row-label  cn-icon cn-icon-category">{{$t('entities.Group')}}:</span>
               <div class="body__row-value" :title="d.categoryGroup">{{d.categoryGroup || '-'}}</div>
             </div>
             <div class="body__row">
-              <span class="body__row-label">{{$t('entities.categoryName')}}:</span>
+              <span class="body__row-label  cn-icon cn-icon-sub-category">{{$t('entities.categoryName')}}:</span>
               <div class="body__row-value" :title="d.categoryName">{{d.categoryName || '-'}}</div>
             </div>
             <div class="body__row Select">
-              <span class="body__row-label">{{$t('entities.creditScore')}}:</span>
+              <span class="body__row-label cn-icon cn-icon-risk">{{$t('entities.credit')}}:</span>
               <div class="body__row-value" :title="d.reputationScore">{{d.reputationScore || '-'}}</div>
             </div>
             <div class="body__detail" @click="entityDetail({domain: d.domainName})">{{$t('overall.detail')}}></div>
           </template>
           <template v-else-if="entityType === 'app'">
             <div class="body__row">
-              <span class="body__row-label">APP ID:</span>
+              <span class="body__row-label cn-icon cn-icon-id">APP ID:</span>
               <div class="body__row-value" :title="d.appId">{{d.appId || '-'}}</div>
             </div>
             <div class="body__row">
-              <span class="body__row-label">{{$t('entities.category')}}:</span>
+              <span class="body__row-label cn-icon cn-icon-category">{{$t('entities.category')}}:</span>
               <div class="body__row-value" :title="d.appCategory">{{d.appCategory || '-'}}</div>
             </div>
             <div class="body__row Select">
-              <span class="body__row-label">{{$t('entities.subcategory')}}:</span>
+              <span class="body__row-label cn-icon cn-icon-sub-category">{{$t('entities.subcategory')}}:</span>
               <div class="body__row-value" :title="d.appSubategory">{{d.appSubategory || '-'}}</div>
             </div>
             <div class="body__detail" @click="entityDetail({appId: d.appId})">{{$t('overall.detail')}}></div>
diff --git a/src/components/entities/entities.scss b/src/components/entities/entities.scss
index c181fac6..3fc33ebe 100644
--- a/src/components/entities/entities.scss
+++ b/src/components/entities/entities.scss
@@ -29,7 +29,10 @@
       overflow: auto;
 
       .cn-entity:hover{
-          box-shadow: inset 0 0 10px #ccc;
+          box-shadow:  0 0 10px #ccc;
+        .content__title{
+          color: #ffffff !important;
+        }
         .cn-entity__header{
           background: #8FA1BE;
         }
@@ -44,7 +47,7 @@
         box-sizing: border-box;
         margin: 14px 13px;
         width: 240px;
-        height: 290px;
+        height: 315px;
         background: #FFFFFF;
         border-radius: 2px;
         border: 1px solid $--right-box-border-color;
@@ -72,6 +75,7 @@
             height: 44px;
             border-radius: 50%;
             background: #B8C1D1;
+            border: 2px solid #FFFFFF;
 
             i {
               font-size: 20px;
@@ -98,42 +102,48 @@
             }
             .content__desc {
               font-size: 14px;
-              color: #666666;
+              color: #999999 !important;
               padding-top: 3px;
 
               .desc__label {
                 color: #aaa;
                 padding-right: 10px;
+
               }
             }
           }
         }
         .cn-entity__body {
           overflow: hidden;
-         padding-top: 34px;
+         padding-top:43px;
           font-size: 14px;
-
           .body__row {
             display: flex;
             width:200px;
-            margin:5px auto;
-            color: #666;
-            overflow-y: scroll;
+            margin:19px auto;
             border-bottom: 1px solid #EFF2F5;
+            color: #666666;
+          }
 
-            .body__row-label {
-              padding-right: 15px;
-            }
-            .body__row-value {
-              width: calc(100% - 69px);
-              height:31px;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              overflow-y: scroll;
-            }
-            .body__row-value::-webkit-scrollbar{
-              display: none;
-            }
+          .body__row-label {
+            padding-right: -5px;
+            width: 284px;
+            color: #999999;
+            font-size: 14px;
+            font-family: PingFangSC-Regular;
+            font-weight: 400;
+
+          }
+          .body__row-value {
+            width: calc(100% - 69px);
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            font-family: PingFangSC-Regular;
+            font-size: 14px;
+            color: #666666;
+            line-height: 16px;
+            font-weight: 400;
           }
           .body__detail {
             padding: 1px 0 0 156px;
@@ -167,5 +177,35 @@
 .Select{
   border-bottom: 0px !important;
  }
+.cn-icon-position:before {
+  content: "\e72e";
+  padding: 5.5px;
+  font-size: 12px;}
+.cn-icon-category:before {
+  content: "\e733";
+  padding: 5.5px;
+  font-size: 12px;
+}
+.cn-icon-cloud:before {
+  content: "\e73c";
+  padding: 4.5px;
+  font-size: 12px;
+}
+.cn-icon-sub-category:before {
+  content: "\e730";
+  padding: 5.5px;
+  font-size: 12px;
+}
+.cn-icon-risk:before {
+  content: "\e731";
+  padding: 5.5px;
+  font-size: 12px;
+}
+.cn-icon-id:before {
+  content: "\e734";
+  padding: 5.5px;
+  font-size: 12px;
+}
+