From a0b44806bd2a69d4d1ca42134cc94e8fc9807cdd Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Thu, 28 Mar 2024 19:35:44 +0800
Subject: [PATCH] =?UTF-8?q?CN-1594=20feat:=20=E9=83=A8=E5=88=86css?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=86=85=E5=AE=B9=EF=BC=9Anpm=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=80=E4=B8=AAtab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/common/cover-element-plus.scss |  4 +-
 .../common/TimeRange/date-time-range.scss     | 13 ++--
 .../views/charts2/entityDetailBasicInfo.scss  |  8 +--
 .../views/charts2/entityDetailTabs.scss       | 17 ++---
 .../views/charts2/networkOverviewTabs.scss    | 10 +--
 .../views/charts2/npmAppCategoryScore.scss    | 71 ++++++++++---------
 .../views/charts2/npmNetworkQuantity.scss     | 34 ++++-----
 .../views/charts2/npmTrafficLine.scss         | 31 ++++----
 .../charts/entityDetail/EntityDetailTabs.vue  |  4 +-
 9 files changed, 99 insertions(+), 93 deletions(-)

diff --git a/src/assets/css/common/cover-element-plus.scss b/src/assets/css/common/cover-element-plus.scss
index 6eeb4fe3..d1450d49 100644
--- a/src/assets/css/common/cover-element-plus.scss
+++ b/src/assets/css/common/cover-element-plus.scss
@@ -14,7 +14,7 @@
   height: 0 !important;
 }*/
 
-.el-select__wrapper {
+/*.el-select__wrapper {
   min-height: 28px !important;
 }
 .el-input__wrapper {
@@ -26,7 +26,7 @@
 }
 .el-table td.el-table__cell div {
   margin-left: -1px;
-}
+}*/
 .el-table .sort-caret.ascending {
   border-bottom-color: #c0c4cc !important;
 }
diff --git a/src/assets/css/components/components/common/TimeRange/date-time-range.scss b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
index 65cfbe60..39636d7d 100644
--- a/src/assets/css/components/components/common/TimeRange/date-time-range.scss
+++ b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
@@ -63,24 +63,22 @@
   .date-range-title {
     font-size: 14px;
     color: var(--el-text-color-regular);
-    font-weight: 600;
+    font-weight: bold;
     padding: 14px 0 7px 8px;
   }
 
-  .calendar-popover-text.calendar-popover__small {
-    i {
-      font-weight: 300;
-      color: #575757;
-    }
-  }
   .calendar-popover-text {
     white-space: nowrap;
     display: inline-block;
     margin: 0 5px;
     color: var(--el-text-color-primary);
+
     .cn-icon-Data {
       color: var(--el-text-color-regular);
     }
+    .cn-icon-dropdown {
+      color: var(--el-text-color-placeholder);
+    }
   }
 
   .calendar-popover-text:first-of-type {
@@ -108,7 +106,6 @@
       .content-title {
         font-size: 14px;
         color: var(--el-text-color-regular);
-        font-weight: 400;
         margin-bottom: 12px;
       }
 
diff --git a/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss b/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
index 54408bef..0fb3fddc 100644
--- a/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
+++ b/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
@@ -1,9 +1,9 @@
 .el-popper.analysis-popper {
   margin-top: -5px !important;
   padding: 0;
-  border: 1px solid var(--el-border-color-light);
+  border: 1px solid var(--el-border-color);
   border-radius: var(--el-border-radius-base); // 4px
-  box-shadow: -1px 1px 10px -1px rgba(205, 205, 205, 0.85);
+  box-shadow: var(--el-box-shadow-light);
 
   .el-popper__arrow {
     display: none;
@@ -79,7 +79,7 @@
     width: 100%;
     margin-top: 21px;
     //background-color: #EFF2F5;
-    background-color: var(--el-border-color);
+    background-color: var(--el-bg-color-page);
   }
 
   .entity-type {
@@ -111,7 +111,7 @@
         width: 28px;
         border-radius: 50%;
         //background-color: #EFF1F4;
-        background-color: var(--el-color-info-light-9);
+        background-color: var(--el-bg-color-page);
         cursor: pointer;
 
         i {
diff --git a/src/assets/css/components/views/charts2/entityDetailTabs.scss b/src/assets/css/components/views/charts2/entityDetailTabs.scss
index 55e03eb2..db874797 100644
--- a/src/assets/css/components/views/charts2/entityDetailTabs.scss
+++ b/src/assets/css/components/views/charts2/entityDetailTabs.scss
@@ -10,7 +10,7 @@
     top: 1px;
     background-color: var(--el-color-primary);
     border-radius: $tab-border-radius $tab-border-radius 0 0;
-    transition: all linear var(--el-transition-duration);
+    transition: all linear var(--el-transition-duration-fast);
     z-index: 3;
   }
 
@@ -70,7 +70,7 @@
 
     .tab-pane-warn--icon {
       width: 16px;
-      color: #E48F3E;
+      color: var(--el-color-warning);
       margin-left: 10px;
       margin-right: 0 !important;
     }
@@ -116,7 +116,6 @@
 
           .legend-name {
             width: 180px;
-            font-weight: 400;
           }
 
           .legend-value {
@@ -124,7 +123,6 @@
             justify-content: left;
             margin-left: 20px;
             width: 90px;
-            font-weight: 500;
           }
 
           .legend-percent {
@@ -132,7 +130,6 @@
             width: 70px;
             justify-content: left;
             display: flex;
-            font-weight: 500;
           }
         }
       }
@@ -147,7 +144,7 @@
         position: absolute;
         height: 0;
         width: 195px;
-        border-bottom: 1px dashed #d3d3d3;
+        border-bottom: 1px dashed var(--el-border-color-light);
         top: 319px;
         left: 575px;
       }
@@ -156,7 +153,7 @@
         position: absolute;
         height: 0;
         width: 195px;
-        border-bottom: 1px dashed #d3d3d3;
+        border-bottom: 1px dashed var(--el-border-color-light);
         top: 319px;
         left: 830px;
       }
@@ -169,11 +166,11 @@
   }
 
   .entity-subscriber-detail-error {
-    margin-top: 0px;
-    margin-left: 0px;
+    margin-top: 0;
+    margin-left: 0;
 
     .error-block {
-      margin: 0px;
+      margin: 0;
     }
   }
 
diff --git a/src/assets/css/components/views/charts2/networkOverviewTabs.scss b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
index b129a395..838ec6ac 100644
--- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
@@ -166,7 +166,6 @@
         align-items: center;
         margin-top: 2px;
         border-radius: 10px;
-        font-weight:500;
         padding: 0 9px;
 
         span {
@@ -174,8 +173,8 @@
         }
       }
       .data-total-trend-black {
-        background-color: rgba(113,113,113,0.12);
-        color: #717171;
+        background-color: var(--el-fill-color-dark);
+        color: var(--el-text-color-regular);
         height: 20px;
       }
       .data-total-trend-green {
@@ -220,7 +219,7 @@
         .data-score {
           border-radius: 10px;
           font-size: 12px;
-          color: #FFFFFF;
+          color: var(--el-color-white);
           height: 20px;
           width: 34px;
           line-height: 20px;
@@ -271,7 +270,8 @@
     }
     .el-tabs__content {
       height: calc(100% - 40px);
-      border:none;
+      border: none;
+
       .el-table__body-wrapper {
         height: calc(100% - 45px) !important;
       }
diff --git a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
index da3f3c5b..a2b39b62 100644
--- a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
+++ b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
@@ -1,13 +1,14 @@
 .npm-app {
-  $grey:#353636;
   height: 100%;
   width: 100%;
   display: flex;
+
   .npm-app-left {
     position: relative;
     height: 100%;
     display: flex;
     flex: 1;
+
     .npm-app-letter-no-data.npm-app-letter {
       min-width: 500px;
     }
@@ -15,6 +16,7 @@
       display: flex;
       flex-direction: column-reverse;
       justify-content: space-between;
+
       div {
         width: 40px;
         height: 40px;
@@ -22,8 +24,7 @@
         text-align: center;
         margin: 0 5px 12.3px 0;
         font-size: 14px;
-        color: #353636;
-        font-weight: 500;
+        color: var(--el-text-color-primary);
       }
       div:nth-of-type(1) {
         height: 25px;
@@ -32,24 +33,26 @@
     }
     .npm-app-body {
       display: flex;
+
       .npm-app-body-patch {
         display: flex;
         flex-direction: column-reverse;
+
         .npm-app-body-color {
           width: 40px;
           height: 40px;
           margin: 0 36px 12.3px 0;
-          background: #EFEFEF;
+          background: var(--el-fill-color-dark);
           border-radius: 4px;;
         }
         .npm-app-body-color.score-color:nth-child(2),.npm-app-body-color.score-color:nth-child(3) {
-          background: #E26154;
+          background: var(--el-color-error);
         }
         .npm-app-body-color.score-color:nth-child(4),.npm-app-body-color.score-color:nth-child(5) {
-          background: #E5A219;
+          background: var(--el-color-warning);
         }
         .npm-app-body-color.score-color:nth-child(6),.npm-app-body-color.score-color:nth-child(7) {
-          background: #749F4D;
+          background: var(--el-color-success);
         }
         .npm-app-body-icon {
           width: 40px;
@@ -57,6 +60,7 @@
           line-height: 25px;
           text-align: center;
           margin-right: 36px;
+
           span {
             i {
               font-size: 20px;
@@ -67,15 +71,17 @@
     }
   }
   .app-table.el-table {
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
     border-bottom: none;
+
     .el-table__header-wrapper {
       tr th {
         padding: 5px 0;
+
         .data-column__span {
           font-size: 12px;
-          color: $--text-color-1;
-          font-weight: 600;
+          color: var(--el-text-color-primary);
+          font-weight: bold;
         }
       }
     }
@@ -89,11 +95,13 @@
     }
     .el-table__body-wrapper.is-scrolling-none {
       height: 306px !important;
+
       tr td {
         padding: 13px 0 !important;
       }
       tr td:nth-last-child(-n+3) {
         text-align: center;
+
         .data-total {
           justify-content: center;
         }
@@ -102,25 +110,25 @@
   }
   .data-total {
     display: flex !important;
+
     .data-total-category-icon {
       margin-left: -2px;
+
       i {
         font-size: 16px;
         margin-right: 12px;
-        color:  #717171;
+        color: var(--el-text-color-regular);
       }
     }
     .data-total-category-value {
       font-size: 12px;
-      color: #353636;
-      font-weight: 400;
+      color: var(--el-text-color-primary);
       cursor: pointer;
     }
     .data-score {
       border-radius: 10px;
       font-size: 12px;
-      color: #FFFFFF;
-      font-weight: 500;
+      color: var(--el-color-white);
       height: 20px;
       width: 34px;
       line-height: 20px;
@@ -128,13 +136,13 @@
       margin-left: -2px;
     }
     .data-score.data-score-red {
-      background: #E26154;
+      background: var(--el-color-danger);
     }
     .data-score.data-score-yellow {
-      background: #E5A219;
+      background: var(--el-color-warning);
     }
     .data-score.data-score-green {
-      background: #749F4D;
+      background: var(--el-color-success);
     }
     .data-score-no-data {
       width: 34px;
@@ -147,8 +155,7 @@
     justify-content: right;
     width: 50%;
     font-size: 12px;
-    color: #353636;
-    font-weight: 400;
+    color: var(--el-text-color-primary);
   }
   .data-trend{
     display: flex;
@@ -156,40 +163,38 @@
   }
   .data-total-trend {
     display: flex;
-    justify-content: left;
     margin-left: 6px;
-    font-size: 12px;
     justify-content: center;
     margin-top: 2px;
     border-radius: 10px;
-    font-weight: 500;
     font-size: 12px;
     height: 20px;
     padding: 0 5px;
   }
   .data-total-trend-black {
-    background-color: rgba(113,113,113,0.12);
-    color: #717171;
+    background-color: var(--el-fill-color-dark);
+    color: var(--el-text-color-regular);
     width: 36px;
   }
   .data-total-trend-green {
-    background-color: rgba(126,159,84,0.12);
-    color: #7E9F54;
+    background-color: rgba(var(--el-color-success-rgb),0.12);
+    color: var(--el-color-success);
   }
   .data-total-trend-red {
-    background-color: rgba(226,97,84,0.12);
-    color: #E26154;
+    background-color: rgba(var(--el-color-error-rgb),0.12);
+    color: var(--el-color-error);
+
     .cn-icon-rise1{
-      color: #E44D3E;
+      color: var(--el-color-error);
     }
   }
   .el-table--group::after,.el-table--border::after, .el-table::before {
-    height: 0px;
+    height: 0;
   }
   .el-table thead {
-    color: $grey;
+    color: var(--el-text-color-primary);
   }
 }
 .npm-app-border {
-  border: 1px solid #E2E5EC;
+  border: 1px solid var(--el-border-color-light);
 }
diff --git a/src/assets/css/components/views/charts2/npmNetworkQuantity.scss b/src/assets/css/components/views/charts2/npmNetworkQuantity.scss
index 23f76456..7d699fee 100644
--- a/src/assets/css/components/views/charts2/npmNetworkQuantity.scss
+++ b/src/assets/css/components/views/charts2/npmNetworkQuantity.scss
@@ -1,9 +1,10 @@
 .npm-network-quantity {
   display: flex;
-  border: 1px solid #E2E5EC;
+  border: 1px solid var(--el-border-color-light);
   height: 100%;
   width: 100%;
   border-radius: 4px;
+
   .single-value:nth-of-type(1) {
     border-left: none;
   }
@@ -12,24 +13,25 @@
     padding-left: 20px;
     height: calc(100% - 48px);
     margin: auto;
-    border-left: 1px solid #E2E5EC;
+    border-left: 1px solid var(--el-border-color-light);
     display: flex;
     flex-direction: column;
     justify-content: center;
+
     .single-value__title {
       font-size: 14px;
-      color: #575757;
-      font-weight: 400;
+      color: var(--el-text-color-regular);
     }
     .single-value__content {
       margin: 10px 0 12px 0;
       display: flex;
       align-items: center;
+
       .single-value__content-number {
         font-family: Helvetica-Bold;
         font-size: 24px;
-        color: #353636;
-        font-weight: 700;
+        color: var(--el-text-color-primary);
+        font-weight: bold;
         margin-right: 12px;
       }
       .single-value__content-trend {
@@ -39,33 +41,33 @@
         justify-content: center;
         margin-top: 2px;
         border-radius: 10px;
-        font-weight:500;
         font-size: 12px;
         height: 20px;
         padding: 0 5px;
       }
       .single-value__content-trend-black {
-        background-color: rgba(113,113,113,0.12);
-        color: #717171;
+        background-color: var(--el-fill-color-dark);
+        color: var(--el-text-color-regular);
         width: 36px;
       }
       .single-value__content-trend-green {
-        background-color: rgba(126,159,84,0.12);
-        color:#7E9F54;
+        background-color: rgba(var(--el-color-success-rgb),0.12);
+        color: var(--el-color-success);
       }
       .single-value__content-trend-red {
-        background-color: rgba(226,97,84,0.12);
-        color:#E26154;
+        background-color: rgba(var(--el-color-error-rgb),0.12);
+        color: var(--el-color-error);
+
         .cn-icon-rise1 {
-          color: #E44D3E;
+          color: var(--el-color-error);
         }
       }
     }
     .single-value__circle {
       display: flex;
       font-size: 12px;
-      color: #717171;
-      font-weight: 400;
+      color: var(--el-text-color-regular);
+
       .single-value__circle-p95 {
         margin-right: 10px;
       }
diff --git a/src/assets/css/components/views/charts2/npmTrafficLine.scss b/src/assets/css/components/views/charts2/npmTrafficLine.scss
index ea3f1f5b..42224e0d 100644
--- a/src/assets/css/components/views/charts2/npmTrafficLine.scss
+++ b/src/assets/css/components/views/charts2/npmTrafficLine.scss
@@ -1,13 +1,15 @@
 .npm-traffic-line {
   height: 100%;
   width: 100%;
+
   .npm-traffic-line-header {
     display: flex;
     justify-content: space-between;
+
     .npm-traffic-line-title {
       font-size: 14px;
-      color: #353636;
-      font-weight: 600;
+      color: var(--el-text-color-primary);
+      font-weight: bold;
       height: 32px;
     }
     .line-select-metric {
@@ -16,8 +18,7 @@
 
       &>span {
         font-size: 12px;
-        color: #575757;
-        font-weight: 400;
+        color: var(--el-text-color-regular);
         margin-right: 3px;
       }
       .line-select__operation {
@@ -26,6 +27,7 @@
         margin-left: 3px;
         box-shadow: none;
         border-radius: 2px;
+
         .el-select__wrapper {
           width: 225px;
           height: 24px !important;
@@ -33,9 +35,9 @@
           padding-left: 4px;
           line-height: 24px;
           font-size: 12px;
-          font-weight: 400;
+
           .el-select__placeholder {
-            color: #2C72C6;
+            color: var(--el-color-primary);
             margin-left: 1px;
           }
           .el-input__inner {
@@ -44,23 +46,24 @@
             padding-left: 4px;
             line-height: 24px;
             font-size: 12px;
-            color: #2C72C6;
-            font-weight: 400;
+            color: var(--el-color-primary);
           }
           .el-select__suffix {
             i {
-              color: #575757 !important;
+              color: var(--el-color-primary) !important;
             }
           }
         }
         .el-input__suffix {
           display: flex;
+
           .el-input__suffix-inner {
             line-height: 24px;
+
             .el-select__caret {
               line-height: 24px;
               width: 16px;
-              color: #575757;
+              color: var(--el-color-primary);
             }
           }
         }
@@ -68,23 +71,27 @@
     }
   }
   .npm-traffic-line-body {
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
     border-radius: 4px;
     height: calc(100% - 32px);
     width: 100%;
+
     .panel-chart__no-data {
       height: calc(100% - 32px);
     }
     .chart-drawing {
       height: 100%;
       width: 100%;
+
       .echarts-tooltip.echarts-tooltip-dark {
         .cn-chart-body {
           display: flex;
+
           .cn-chart-tooltip {
             display: flex;
             flex-direction: column;
             flex: 1;
+
             .cn-chart-tooltip-box {
               margin-right: 10px;
             }
@@ -92,7 +99,7 @@
               font-size: 12px;
               color: var(--el-text-color-primary);
               line-height: 21px;
-              font-weight: 600;
+              font-weight: bold;
             }
           }
         }
diff --git a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
index c5dc5b9d..aac2672c 100644
--- a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
@@ -10,9 +10,7 @@
         <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" 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>
+          <el-tag :type="tab.name === activeTab ? 'primary' : 'info'" size="small" class="margin-l-6" round>{{ tab.tag }}</el-tag>
         </template>
         <information-aggregation v-if="tab.name === entityDetailTabsName.informationAggregation && tab.name === activeTab" @toggleLoading="setLoading"  :entity="entity" @checkTag="setTag"></information-aggregation>
         <domain-name-resolution v-else-if="tab.name === entityDetailTabsName.relatedEntity && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity"  @checkTag="setTag"></domain-name-resolution>