From 0e752cb3a33715e9af3d8f8a97ba9b0918f0ad85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Fri, 30 Jun 2023 10:41:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=9E=E4=BD=93=E5=85=B3=E7=B3=BB?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=8F=B3=E4=BE=A7=E5=88=97=E8=A1=A8=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=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

---
 .../views/charts2/graphRightDetailBlock.scss  | 64 ++++++++++++----
 .../views/charts2/graphRightListBlock.scss    | 76 +++++++++++--------
 .../entityList/detail-overview.scss           | 20 ++++-
 .../entityGraphDetail/AppOrDomainList.vue     |  4 +-
 .../entityGraphDetail/GraphDetail.vue         | 20 ++---
 .../entityGraphDetail/IpList.vue              | 22 +++---
 6 files changed, 138 insertions(+), 68 deletions(-)

diff --git a/src/assets/css/components/views/charts2/graphRightDetailBlock.scss b/src/assets/css/components/views/charts2/graphRightDetailBlock.scss
index f6696fd1..4511e6e3 100644
--- a/src/assets/css/components/views/charts2/graphRightDetailBlock.scss
+++ b/src/assets/css/components/views/charts2/graphRightDetailBlock.scss
@@ -1,11 +1,23 @@
-$font-size: 14px;
+$font-size: 12px;
 .graph-detail-basic-info {
   position: relative;
-  padding-bottom: 20px;
+  padding-bottom: 12px;
   display: flex;
   justify-content: space-between;
   //height: 100%;
 
+  .graph-detail-header {
+    display: flex;
+    flex-direction: column;
+
+    .entity-graph-type {
+      font-family: NotoSansSChineseRegular;
+      font-size: 12px;
+      color: #717171;
+      font-weight: 400;
+    }
+  }
+
   .entity-type {
     color: #717171;
   }
@@ -31,8 +43,8 @@ $font-size: 14px;
         display: flex;
         justify-content: center;
         align-items: center;
-        height: 28px;
-        width: 28px;
+        height: 18px;
+        width: 18px;
         border-radius: 50%;
         background-color: #EFF1F4;
         cursor: pointer;
@@ -40,15 +52,16 @@ $font-size: 14px;
 
         i {
           color: #717171;
-          font-size: 12px;
+          font-size: 10px;
+          -webkit-transform: scale(0.8); // 强制给文字进行缩放，达到12px以下小字体的效果
         }
       }
     }
   }
 
   .graph-detail__icon {
-    width: 52px;
-    height: 52px;
+    width: 50px;
+    height: 50px;
     overflow: hidden;
     display: flex;
     justify-content: center;
@@ -56,7 +69,7 @@ $font-size: 14px;
     align-items: center;
     margin-right: 10px;
     border-radius: 50%;
-    background-color: #e5edf3;
+    background-color: #F3F7FA;
 
     i {
       font-size: 26px;
@@ -72,7 +85,8 @@ $font-size: 14px;
 }
 
 .graph-basic-info__block {
-  margin: 10px 0;
+  margin-top: 12px;
+  margin-bottom: 18px;
 
   .graph-header__icon {
     width: 3px !important;
@@ -103,6 +117,7 @@ $font-size: 14px;
         color: #353636;
         font-weight: 400;
         overflow-wrap: break-word;
+        line-height: normal;
       }
     }
 
@@ -117,18 +132,21 @@ $font-size: 14px;
 
       .graph-relationship-item-label, .graph-relationship-item-value {
         font-family: NotoSansSChineseRegular;
-        font-size: $font-size; // 原型上为12px，呈现效果不好，后续再调节
+        font-size: $font-size;
         color: #353636;
         font-weight: 400;
         //height: 40px;
         display: flex;
         align-items: center !important;
         padding-top: 1px;
+
+        .graph-relationship-item-label-icon {
+          font-size: 14px;
+        }
       }
 
       .graph-relationship-item-value {
         color: #717171;
-
       }
     }
   }
@@ -143,7 +161,13 @@ $font-size: 14px;
       margin-bottom: 10px;
       margin-right: 9px;
       padding: 0 8px;
+      height: 24px;
+      line-height: 24px;
       font-size: 12px;
+
+      span {
+        margin-top: -2px;
+      }
     }
   }
 }
@@ -152,6 +176,10 @@ $font-size: 14px;
   padding-bottom: 10px;
 }
 
+.padding-b-4 {
+  padding-bottom: 4px;
+}
+
 //修改popover样式
 .graph-popover {
   width: auto !important;
@@ -165,6 +193,16 @@ $font-size: 14px;
   background: #303133 !important;
 }
 
-.graph-expand-relationship__icon:hover {
-  color: #D80000 !important;
+.graph-expand-relationship__icon {
+  font-size: 13px;
+  &:hover {
+    color: #D80000 !important;
+  }
+}
+
+.graph-basic-info__block-title {
+  font-family: NotoSansHans-Medium;
+  font-size: 13px;
+  color: #353636;
+  font-weight: 600;
 }
diff --git a/src/assets/css/components/views/charts2/graphRightListBlock.scss b/src/assets/css/components/views/charts2/graphRightListBlock.scss
index 99e031a4..5bc94c68 100644
--- a/src/assets/css/components/views/charts2/graphRightListBlock.scss
+++ b/src/assets/css/components/views/charts2/graphRightListBlock.scss
@@ -1,4 +1,4 @@
-$font-size: 14px;
+$font-size: 12px;
 .graph-list-header {
   display: flex;
   justify-content: space-between;
@@ -6,7 +6,7 @@ $font-size: 14px;
   .graph-list-header-title {
     display: flex;
     align-items: center;
-    margin-bottom: 14px;
+    margin-bottom: 10px;
 
     span {
       font-family: PingFangSC-Semibold;
@@ -25,7 +25,7 @@ $font-size: 14px;
 
   .graph-list-header-number {
     font-family: NotoSansSChineseRegular;
-    font-size: 14px;
+    font-size: 12px;
     color: #717171;
     font-weight: 400;
 
@@ -36,46 +36,47 @@ $font-size: 14px;
 }
 
 .graph-list-expand-btn-block {
-  margin-top: 20px;
-  margin-bottom: 30px;
+  margin-top: 16px;
+  margin-bottom: 24px;
 
   .graph-list-expand-btn {
+    width: 90px;
+    height: 28px;
+    line-height: 28px;
     background: #38ACD2;
-    border: 1px solid rgba(46, 136, 166, 0.85);
-    border-radius: 2px;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: NotoSansHans-Medium;
+    font-weight: 500;
+    padding: 10px 0;
+    cursor: pointer;
 
-    span {
-      display: flex;
-      align-items: center;
-
-      i {
-        font-size: 18px;
-        margin-right: 7px;
-      }
-    }
-
-    &.el-button {
-      padding: 8px 10px !important;
+    i {
+      font-size: 16px;
+      margin-right: 7px;
     }
   }
 }
 
 .graph-list-content-header {
-  font-family: NotoSansHans-Medium;
   font-size: 14px;
   color: #353636;
-  font-weight: bold;
+  font-weight: 500;
 }
 
 .graph-list-content {
   padding: 0 10px;
 
   .graph-list-item-ip {
-    margin-bottom: 12px;
+    margin-bottom: 10px;
     font-family: NotoSansSChineseRegular;
     font-size: $font-size;
     color: #353636;
-    font-weight: 600;
+    font-weight: 400;
     cursor: pointer;
 
     &:hover {
@@ -88,29 +89,31 @@ $font-size: 14px;
     background: rgba(247, 247, 247, 1);
     border: 1px solid rgba(226, 229, 236, 1);
     border-radius: 2px;
-    padding: 15px;
+    padding: 10px 15px;
 
     .graph-list-item, .graph-list-item__app {
       display: flex;
 
       .graph-list-item-label, .graph-list-item-label__app {
         width: 62px;
-        margin-right: 15px;
+        //margin-right: 15px;
         font-family: NotoSansSChineseRegular;
-        font-size: $font-size; // 原型上为12px，但页面呈现效果不好
+        font-size: $font-size;
         color: #717171;
         font-weight: 400;
         flex-shrink: 0;
       }
 
       .graph-list-item-label__app {
-        width: 78px;
-        line-height: 24px;
+        width: 73px;
+        display: flex;
+        align-items: flex-start;
+        line-height: 22px;
       }
 
       .graph-list-country-flag {
-        width: 20px;
-        height: 18px;
+        width: 16px;
+        height: 14px;
         margin-right: 5px;
       }
 
@@ -119,6 +122,9 @@ $font-size: 14px;
         font-size: $font-size;
         color: #353636;
         font-weight: 400;
+        line-height: 18px;
+        display: flex;
+        align-items: center;
       }
 
       .graph-list-item-value1 {
@@ -137,9 +143,17 @@ $font-size: 14px;
   padding-bottom: 20px;
 }
 
+.padding-b-16 {
+  padding-bottom: 16px;
+}
+
+.padding-b-12 {
+  padding-bottom: 12px;
+}
+
 .graph-list-dividing-line {
   width: 300px;
   height: 1px;
   background: #ECECEC;
-  margin: 12px 0;
+  margin: 11px 0;
 }
diff --git a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
index 9598116b..40ab4f7f 100644
--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -34,6 +34,7 @@
     .overview__title {
       color: #333;
       font-size: 14px;
+      font-weight: 600;
     }
     .overview__content-loading.overview__content {
       position: relative;
@@ -130,6 +131,9 @@
               background-color: #F6C738;
             }
           }
+          &.row__content--width90 {
+            width: 90px;
+          }
           &.row__content--width200 {
             width: 200px;
           }
@@ -144,7 +148,7 @@
         }
         .row__contents {
           display: flex;
-          flex-direction: column;
+          //flex-direction: column;
 
           .row__content {
             padding: 2px 0;
@@ -157,14 +161,21 @@
               padding-bottom: 0;
             }
           }
+          .row__content-accept {
+            margin-left: 39px;
+          }
           .row__charts-msg {
             width: auto;
-            padding-right: 20px;
+            padding-right: 10px;
+          }
+          .new-row__charts-msg {
+            width: auto;
+            padding-right: 10px;
           }
           .row__charts {
             height: 20px;
             width: 60px;
-            padding-left: 5px;
+            //padding-left: 5px;
           }
         }
         .row__charts {
@@ -292,3 +303,6 @@
     }
   }
 }
+.margin-l-140 {
+  margin-left: 140px;
+}
diff --git a/src/views/entityExplorer/entityGraphDetail/AppOrDomainList.vue b/src/views/entityExplorer/entityGraphDetail/AppOrDomainList.vue
index ebca08d2..1f96c9b2 100644
--- a/src/views/entityExplorer/entityGraphDetail/AppOrDomainList.vue
+++ b/src/views/entityExplorer/entityGraphDetail/AppOrDomainList.vue
@@ -6,7 +6,7 @@
           <i class="graph-list-header-icon" :class="entityIcon"></i>
           <span>{{ $t(entityName) }}</span>
         </div>
-        <div class="graph-list-header-number" style="margin-bottom: 30px">
+        <div class="graph-list-header-number" style="margin-bottom: 24px">
           {{ $t('entity.graph.associatedQuantity') }}：<span>2</span>
         </div>
       </div>
@@ -16,7 +16,7 @@
 
     <div>
       <div class="digital-certificate">
-        <div class="digital-certificate-header padding-b-20">
+        <div class="digital-certificate-header padding-b-12">
           <div class="digital-certificate-header__icon graph-header__icon"></div>
           <div class="graph-list-content-header ">
             {{ $t('entity.graph.expandedEntityQuantity') }}:&nbsp;&nbsp;
diff --git a/src/views/entityExplorer/entityGraphDetail/GraphDetail.vue b/src/views/entityExplorer/entityGraphDetail/GraphDetail.vue
index b59feca6..d0543955 100644
--- a/src/views/entityExplorer/entityGraphDetail/GraphDetail.vue
+++ b/src/views/entityExplorer/entityGraphDetail/GraphDetail.vue
@@ -4,7 +4,7 @@
     <div style="display: flex">
       <div class="graph-detail__icon"><i :class="iconClass"></i></div>
 
-      <div style="display: flex;flex-direction: column;">
+      <div class="graph-detail-header">
         <div class="entity-graph-type">{{ entityType[entity.entityType] }}</div>
         <div class="graph-basic-info">
           <div class="graph-basic-info-name__block">
@@ -24,7 +24,7 @@
   <div class="digital-certificate graph-basic-info__block">
     <div class="digital-certificate-header padding-b-10">
       <div class="digital-certificate-header__icon graph-header__icon"></div>
-      <div class="digital-certificate-header-name">
+      <div class="graph-basic-info__block-title">
         {{ $t('overall.basicInfo') }}
       </div>
     </div>
@@ -41,12 +41,12 @@
   <div class="digital-certificate graph-basic-info__block">
     <div class="digital-certificate-header padding-b-10">
       <div class="digital-certificate-header__icon graph-header__icon"></div>
-      <div class="digital-certificate-header-name">
+      <div class="graph-basic-info__block-title">
         {{ $t('entity.graph.relationshipExpansion') }}
       </div>
     </div>
 
-    <div class="graph-basic-info__block-content">
+    <div class="graph-basic-info__block-content" style="margin-top: -4px;">
       <div v-for="item in relationList" :key="item.name" @click="expandRelation(item.name)">
         <el-popover
             v-if="item.value.length === item.total"
@@ -72,7 +72,7 @@
 
         <div v-else class="graph-content-item graph-content-relationship-item">
           <div class="graph-relationship-item-label">
-            <i class="margin-r-6" :class="item.icon"></i>
+            <i class="graph-relationship-item-label-icon margin-r-6" :class="item.icon"></i>
             <span>{{ item.label }}：</span>
           </div>
           <div class="graph-relationship-item-value">
@@ -94,7 +94,7 @@
   <div class="digital-certificate graph-basic-info__block">
     <div class="digital-certificate-header padding-b-10">
       <div class="digital-certificate-header__icon graph-header__icon"></div>
-      <div class="digital-certificate-header-name">
+      <div class="graph-basic-info__block-title">
         {{ $t('entity.graph.labels') }}
       </div>
     </div>
@@ -103,7 +103,7 @@
       <div class="graph-tag-list">
         <div v-for="ic in tagList" :key="ic.key">
           <div class="entity-tag graph-tag-item" :class="`entity-tag--level-two-${ic.type}`">
-            {{ic.value}}
+            <span>{{ic.value}}</span>
           </div>
         </div>
       </div>
@@ -185,10 +185,10 @@ export default {
     switch (props.entity.entityType) {
       case 'ip': {
         detailCards.value = _.concat(detailCards.value,
-          { name: 'asn', label: 'ASN', value: '' },
+          { name: 'asn', label: i18n.global.t('entities.asNumber'), value: '' },
           { name: 'asOrg', label: i18n.global.t('entities.asOrg'), value: '' },
-          // { name: 'asSubnet', label: i18n.global.t('entities.asSubnet'), value: '' },
-          { name: 'isp', label: 'ISP', value: '' },
+          { name: 'asSubnet', label: i18n.global.t('entities.asSubnet'), value: '' },
+          { name: 'isp', label: i18n.global.t('entities.graph.isp'), value: '' },
           { name: 'location', label: i18n.global.t('entities.geographicLocation'), value: '' }
           // { name: 'dnsPtr', label: 'DNS PTR', value: '' }
         )
diff --git a/src/views/entityExplorer/entityGraphDetail/IpList.vue b/src/views/entityExplorer/entityGraphDetail/IpList.vue
index edecd05d..71243a87 100644
--- a/src/views/entityExplorer/entityGraphDetail/IpList.vue
+++ b/src/views/entityExplorer/entityGraphDetail/IpList.vue
@@ -15,17 +15,21 @@
     </div>
 
     <div class="graph-list-expand-btn-block">
-      <el-button type="primary" class="graph-list-expand-btn">
-        <span>
-          <i class="cn-icon cn-icon-expand-continue graph-expand-continue"></i>
-          {{ $t('entity.graph.continueToExpand') }}
-        </span>
-      </el-button>
+      <div class="graph-list-expand-btn">
+        <i class="cn-icon cn-icon-expand-continue graph-expand-continue"></i>
+        {{ $t('entity.graph.continueToExpand') }}
+      </div>
+<!--      <el-button type="primary" class="graph-list-expand-btn">-->
+<!--        <span>-->
+<!--          <i class="cn-icon cn-icon-expand-continue graph-expand-continue"></i>-->
+<!--          {{ $t('entity.graph.continueToExpand') }}-->
+<!--        </span>-->
+<!--      </el-button>-->
     </div>
 
     <div>
       <div class="digital-certificate">
-        <div class="digital-certificate-header padding-b-20">
+        <div class="digital-certificate-header padding-b-16">
           <div class="digital-certificate-header__icon graph-header__icon"></div>
           <div class="graph-list-content-header ">
             {{ $t('entity.graph.expandedEntityQuantity') }}:&nbsp;&nbsp;
@@ -37,9 +41,9 @@
           <div v-for="(item, index) in ipList" :key="index" @mouseenter="onMouseenter(item)">
             <div class="graph-list-item-ip"><span @click="expandDetail">{{ item.ip }}</span></div>
             <div class="graph-list-item-block">
-              <div class="graph-list-item padding-b-10">
+              <div class="graph-list-item padding-b-4">
                 <div class="graph-list-item-label">{{ $t('overall.location') }}:</div>
-                <div class="graph-list-item-value graph-list-item-value1">
+                <div class="graph-list-item-value graph-list-item-value1" style="display: flex;align-items: center;">
                   <img :src="require(`../../../../public/images/flag/${item.flag}.svg`)" class="graph-list-country-flag"/>
                   <span>{{ item.city }}</span>
                 </div>