CN-1594 feat: 部分css重构：实体详情basicInfo和tabs

5 files changed, 96 insertions, 60 deletions

diff --git a/src/assets/css/common/table-common.scss b/src/assets/css/common/table-common.scss
index 7a28d4aa..ac5abe3d 100644
--- a/src/assets/css/common/table-common.scss
+++ b/src/assets/css/common/table-common.scss
@@ -471,6 +471,9 @@
 .margin-r-3{
   margin-right: 3px;
 }
+.margin-l-6 {
+  margin-left: 6px;
+}
 .tooltip-column-name {
   color: #aeb0b9;
   height:40px;
diff --git a/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss b/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
index c3984d3f..54408bef 100644
--- a/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
+++ b/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
@@ -1,13 +1,14 @@
 .el-popper.analysis-popper {
   margin-top: -5px !important;
   padding: 0;
-  border: 1px solid #C5C5C5 !important;
-  border-radius: 4px;
-  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: var(--el-border-radius-base); // 4px
+  box-shadow: -1px 1px 10px -1px rgba(205, 205, 205, 0.85);
 
   .el-popper__arrow {
     display: none;
   }
+
   .analysis-entry {
     display: flex;
     flex-direction: column;
@@ -15,11 +16,12 @@
     .analysis-entry__header {
       height: 42px;
       line-height: 42px;
-      background-color: #F7F7F7;
+      background-color: var(--cn-bg-color-lighter);
       padding-left: 20px;
-      color: #353636;
-      border-radius: 4px 4px 0 0;
+      color: var(--el-text-color-primary);
+      border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
     }
+
     .analysis-entry__body {
       display: flex;
       height: 134px;
@@ -35,9 +37,10 @@
 
         &:hover {
           div i, span {
-            color: #046ECA;
+            color: var(--el-color-primary);
           }
         }
+
         div {
           display: flex;
           align-items: center;
@@ -46,37 +49,43 @@
           height: 46px;
           width: 46px;
           border-radius: 50%;
-          background-color: #F5F6F8;
+          //background-color: #F5F6F8;
+          background-color: var(--el-color-info-light-9);
 
           i {
-            color: #353636;
+            color: var(--el-text-color-primary);
             font-size: 22px;
           }
         }
+
         span {
           font-size: 12px;
-          color: #353636;
+          color: var(--el-text-color-primary);
         }
       }
     }
   }
 }
+
 .entity-detail-basic-info {
   position: relative;
   padding: 35px 30px 0 30px;
   height: 100%;
-  border: 1px solid #E2E5EC;
-  border-radius: 4px;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: var(--el-border-radius-base);
 
   .dividing-line {
     height: 1px;
     width: 100%;
     margin-top: 21px;
-    background-color: #EFF2F5;
+    //background-color: #EFF2F5;
+    background-color: var(--el-border-color);
   }
+
   .entity-type {
-    color: #717171;
+    color: var(--el-text-color-regular);
   }
+
   .entity-basic-info {
     display: flex;
     align-items: center;
@@ -90,9 +99,10 @@
         padding-right: 12px;
         font-family: Helvetica-Bold;
         font-size: 32px;
-        color: #353636;
+        color: var(--el-text-color-primary);
         font-weight: bold;
       }
+
       div {
         display: flex;
         justify-content: center;
@@ -100,15 +110,17 @@
         height: 28px;
         width: 28px;
         border-radius: 50%;
-        background-color: #EFF1F4;
+        //background-color: #EFF1F4;
+        background-color: var(--el-color-info-light-9);
         cursor: pointer;
 
         i {
-          color: #717171;
+          color: var(--el-text-color-regular);
           font-size: 12px;
         }
       }
     }
+
     .analysis-btn {
       display: flex;
       align-items: center;
@@ -116,21 +128,24 @@
       height: 24px;
       padding: 0 10px;
       font-size: 12px;
-      color: #046ECA;
+      color: var(--el-color-primary);
       cursor: pointer;
-      background-color: #FFF;
-      transition: background-color linear .2s;
+      background-color: var(--el-fill-color-blank);
+      transition: background-color linear var(--el-transition-duration);
 
       &.analysis-btn--active {
-        background-color: #EBF7FA;
-        border-radius: 2px;
+        //background-color: #EBF7FA;
+        background-color: var(--el-color-primary-light-9);
+        border-radius: var(--el-border-radius-small); // 2px
       }
+
       i {
         padding-right: 4px;
         font-size: 14px;
       }
     }
   }
+
   .entity-tags {
     display: flex;
     flex-wrap: wrap;
@@ -147,6 +162,7 @@
       }
     }
   }
+
   .entity-detail-info {
     display: flex;
     flex-flow: row wrap;
@@ -162,21 +178,24 @@
 
       i {
         font-size: 22px;
-        color: #353636;
+        color: var(--el-text-color-primary);
         margin-right: 14px;
       }
+
       .detail-card__text {
         .detail-card__label {
           margin-bottom: 6px;
           font-size: 12px;
-          color: #717171;
+          color: var(--el-text-color-regular);
         }
+
         .detail-card__value {
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 3;
           overflow: hidden;
-          color: #222;
+          //color: #222;
+          color: var(--el-text-color-primary);
           line-height: 18px;
           font-size: 14px;
         }
diff --git a/src/assets/css/components/views/charts2/entityDetailTabs.scss b/src/assets/css/components/views/charts2/entityDetailTabs.scss
index c09be874..55e03eb2 100644
--- a/src/assets/css/components/views/charts2/entityDetailTabs.scss
+++ b/src/assets/css/components/views/charts2/entityDetailTabs.scss
@@ -1,16 +1,16 @@
 .entity-detail-tabs {
   position: relative;
-  $tab-border-color: #E2E5EC;
-  $tab-border-radius: 4px;
+  $tab-border-color: var(--el-border-color-light);
+  $tab-border-radius: var(--el-border-radius-base);
   height: 100%;
 
   .entity-detail-tabs__active-bar {
     position: absolute;
     height: 3px;
     top: 1px;
-    background-color: #046EC9;
-    border-radius: 4px 4px 0 0;
-    transition: all linear .2s;
+    background-color: var(--el-color-primary);
+    border-radius: $tab-border-radius $tab-border-radius 0 0;
+    transition: all linear var(--el-transition-duration);
     z-index: 3;
   }
 
@@ -20,11 +20,11 @@
     box-shadow: none;
 
     & > .el-tabs__header {
-      background-color: #fff;
+      background-color: var(--el-fill-color-blank);
       border-bottom: 1px solid $tab-border-color;
 
       .el-tabs__item {
-        color: #353636;
+        color: var(--el-text-color-primary);
         user-select: none; // 避免鼠标框选文字
 
         i {
@@ -34,19 +34,19 @@
       }
 
       .el-tabs__item:not(.is-disabled):not(.is-active):hover {
-        color: #353636;
+        color: var(--el-text-color-primary);
       }
 
       .el-tabs__item.is-active {
-        color: #046ECA;
-        background-color: #FFFFFF;
+        color: var(--el-color-primary);
+        background-color: var(--el-fill-color-blank);
         border-right-color: $tab-border-color;
         border-left-color: $tab-border-color;
-        border-radius: 4px 4px 0 0;
+        border-radius: $tab-border-radius $tab-border-radius 0 0;
         box-shadow: 0 1px $tab-border-color inset;
 
         &:hover {
-          color: #046ECA;
+          color: var(--el-color-primary);
         }
       }
 
@@ -67,6 +67,7 @@
       height: 100%;
       overflow: auto;
     }
+
     .tab-pane-warn--icon {
       width: 16px;
       color: #E48F3E;
@@ -76,76 +77,88 @@
   }
 
   .entity-detail-event-border {
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
     border-radius: $tab-border-radius;
     margin-bottom: 10px;
   }
 
   .entity-detail-event-block {
     width: calc(100% - 2px);
+
     .behavior-pattern {
-      height:100% ;
+      height: 100%;
       position: relative;
-      display:flex;
+      display: flex;
       flex-direction: row;
+
       .behavior-pattern-legend {
-        display:flex;
+        display: flex;
         flex-direction: column;
         justify-content: center;
         height: 100%;
-        padding:10px 18px 10px 18px;
-        width:400px;
+        padding: 10px 18px 10px 18px;
+        width: 400px;
+
         .behavior-pattern-legend__item {
-          display:flex;
+          display: flex;
           flex-direction: row;
           font-size: 12px;
-          color: #353636;
+          color: var(--el-text-color-primary);
           line-height: 12px;
-          margin-bottom:11px;
+          margin-bottom: 11px;
+
           .legend-icon {
             width: 8px;
             height: 8px;
             margin: 3px 8px 0 0;
             border-radius: 1px;;
           }
+
           .legend-name {
-            width:180px;
+            width: 180px;
             font-weight: 400;
           }
-          .legend-value{
+
+          .legend-value {
             display: flex;
             justify-content: left;
-            margin-left:20px;
-            width:90px;
+            margin-left: 20px;
+            width: 90px;
             font-weight: 500;
           }
+
           .legend-percent {
-            margin-left:20px;
-            width:70px;
+            margin-left: 20px;
+            width: 70px;
             justify-content: left;
             display: flex;
             font-weight: 500;
           }
         }
       }
-      .behavior-pattern-chart{
+
+      .behavior-pattern-chart {
         height: calc(100% - 50px);
-        width:calc(100% - 400px);
+        width: calc(100% - 400px);
         position: relative
       }
+
       .chart-bottom-dot__left {
         position: absolute;
         height: 0;
         width: 195px;
         border-bottom: 1px dashed #d3d3d3;
-        top: 319px;left: 575px;
+        top: 319px;
+        left: 575px;
       }
+
       .chart-bottom-dot__right {
         position: absolute;
         height: 0;
         width: 195px;
         border-bottom: 1px dashed #d3d3d3;
-        top: 319px;left: 830px;
+        top: 319px;
+        left: 830px;
       }
     }
   }
@@ -158,8 +171,9 @@
   .entity-subscriber-detail-error {
     margin-top: 0px;
     margin-left: 0px;
+
     .error-block {
-      margin:0px;
+      margin: 0px;
     }
   }
 
diff --git a/src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue b/src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue
index 9346d3d4..a449451b 100644
--- a/src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue
@@ -50,7 +50,7 @@
           <div v-if="card.name==='reputationLevel'"
                class="detail-card__value row__tag row__tag__level"
                :title="card.value"
-               :style="`background-color:${riskLevelColor1[card.level]};text-align: center;color: ${card.value !== '-' ? '#fff' : ''}`">
+               :style="`background-color:${riskLevelColor1[card.level]};text-align: center;color: ${card.value !== '-' ? 'var(--el-color-white)' : ''}`">
             {{card.value || '-'}}
           </div>
           <div v-else class="detail-card__value" :title="card.value">{{card.value || '-'}}</div>
diff --git a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
index 70179dc5..c5dc5b9d 100644
--- a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
@@ -10,8 +10,8 @@
         <template #label>
           <!--<div class="el-tabs__active-bar is-top" style="width: 80.9998px; transform: translateX(177px);"></div>-->
           <i :class="tab.icon"></i>{{$t(tab.label)}}
-          <el-tag size="small" style="margin-left: 6px" :color="tab.name === activeTab ? 'rgb(223,237,248)' : 'rgb(237,237,237)'" round>
-            <span :style="{color: tab.name === activeTab ? '#046ECA' : '#717171'}">{{ tab.tag }}</span>
+          <el-tag size="small" class="margin-l-6" :color="tab.name === activeTab ? 'var(--el-color-primary-light-9)' : 'var(--el-fill-color-dark)'" round>
+            <span :style="{color: tab.name === activeTab ? 'var(--el-color-primary)' : 'var(--el-text-color-regular)'}">{{ tab.tag }}</span>
           </el-tag>
         </template>
         <information-aggregation v-if="tab.name === entityDetailTabsName.informationAggregation && tab.name === activeTab" @toggleLoading="setLoading"  :entity="entity" @checkTag="setTag"></information-aggregation>