From 86b9082f994c2a0a2a65b8b30ca9bcf730fc7263 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Wed, 3 Apr 2024 11:57:54 +0800
Subject: [PATCH] =?UTF-8?q?CN-1612=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=9Adetection=E6=A3=80?=
 =?UTF-8?q?=E6=B5=8B=E5=88=97=E8=A1=A8=E4=B8=8E=E4=B8=8B=E6=8B=89=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/common/table-common.scss       |  4 +
 .../advancedSearch/advanced-search2.scss      | 61 +++++++-------
 .../views/charts/chartRelationShipList.scss   | 68 +++++++++++-----
 .../views/detections/detection-filter.scss    | 66 ++++++++-------
 .../views/detections/detection-list/row.scss  | 81 ++++++++++++-------
 .../views/detections/detection-overview.scss  | 64 ++++++++-------
 .../views/detections/detections.scss          | 35 ++++----
 .../views/entityExplorer/entity-graph.scss    |  2 +-
 .../entityList/detail-overview.scss           | 14 ++--
 src/assets/css/main.scss                      |  5 ++
 src/views/detections/DetectionFilter.vue      |  2 -
 src/views/detections/DetectionList.vue        |  3 +-
 src/views/detections/DetectionRow.vue         |  2 +-
 13 files changed, 246 insertions(+), 161 deletions(-)

diff --git a/src/assets/css/common/table-common.scss b/src/assets/css/common/table-common.scss
index 003990ae..53b463cf 100644
--- a/src/assets/css/common/table-common.scss
+++ b/src/assets/css/common/table-common.scss
@@ -348,6 +348,10 @@
   margin-left: 6px;
 }
 
+.margin-b-10 {
+  margin-bottom: 10px;
+}
+
 .tooltip-column-name {
   color: #aeb0b9;
   height: 40px;
diff --git a/src/assets/css/components/components/advancedSearch/advanced-search2.scss b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
index 50d1d434..bef80b1a 100644
--- a/src/assets/css/components/components/advancedSearch/advanced-search2.scss
+++ b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
@@ -1,3 +1,4 @@
+$color-primary: var(--el-color-primary);
 .advanced-search {
   position: relative;
   height: 100%;
@@ -7,7 +8,7 @@
 
     &.entity-explorer-home {
       margin-right: 1px;
-      color: #3976CB;
+      color: $color-primary;
 
       &.search__suffixes--text-mode, &.search__suffixes--tag-mode {
         .search__suffix:last-of-type {
@@ -17,7 +18,7 @@
           background-color: transparent;
 
           i {
-            color: #3976CB;
+            color: $color-primary;
           }
         }
       }
@@ -37,7 +38,7 @@
         border-radius: 0 2px 2px 0;
 
         .cn-icon-search-advance, .cn-icon-search-normal, .cn-icon-filter {
-          color: #A6AAAE;
+          color: var(--el-color-info);
           font-size: 18px;
         }
 
@@ -49,18 +50,18 @@
           width: 41px;
           height: 38px;
           line-height: 39px;
-          background: #38ACD2;
+          background: var(--el-color-business);
 
           i {
             font-size: 22px;
-            color: #fff;
+            color: var(--el-color-white);
           }
         }
       }
       .search__suffix-close {
         i {
           font-size: 17px;
-          color: #C4C4C4;
+          color: var(--el-text-color-regular);
           cursor: pointer;
         }
       }
@@ -70,13 +71,13 @@
     }
 
     &.search__suffixes--tag-mode__block {
-      background: #fff;
+      background: var(--el-bg-color);
     }
   }
   .HintInfo {
     height: 280px;
     overflow: auto;
-    background: #fff;
+    background: var(--el-bg-color);
 
     ul {
       min-width: 300px;
@@ -88,13 +89,14 @@
     .relative-item {
       text-indent: 1em;
       font-size: 14px !important;
-      color: #575757;
+      color: var(--el-text-color-regular);
       height: 24px;
       line-height: 24px !important;
 
       &:hover {
-        background-color: #f0f5fa;
-        color: #046ECA;
+        //background-color: #f0f5fa;
+        background-color: var(--el-color-primary-light-9);
+        color: var(--el-color-primary);
       }
     }
     .hint-clear {
@@ -104,7 +106,7 @@
 }
 .detections {
   .tag-search, .CodeMirror {
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
   }
 }
 .tag-search {
@@ -115,8 +117,8 @@
   border-radius: 2px;
   padding-left: 10px;
   padding-right: 80px;
-  background-color: $--select-bg-color-1;
-  border: 1px solid #DEDEDE;
+  background-color: var(--el-bg-color);
+  border: 1px solid var(--el-color-info-light-7);
 
   &::-webkit-scrollbar {
     width: 8px;
@@ -134,17 +136,17 @@
     height: 22px;
     padding: 0 4px;
     font-size: 12px;
-    color: #333;
-    background-color: #F5F6F7;
-    border: 1px solid #D7D7D7;
+    color: var(--el-text-color-primary);
+    background-color: var(--el-fill-color-light);
+    border: 1px solid var(--el-border-color-dark);
     border-radius: 1px;
     cursor: pointer;
     transition: all linear .1s;
     margin-right: 30px;
 
     &:hover {
-      background-color: white;
-      color: #111;
+      background-color: var(--el-bg-color);
+      color: var(--el-text-color-primary);
     }
   }
 
@@ -153,7 +155,7 @@
     height: 22px;
     padding: 0 6px;
     font-size: 12px;
-    background-color: #F5F6F7;
+    background-color: var(--el-fill-color-light);
 
     &>div:not(:last-of-type) {
       margin-right: 6px;
@@ -163,20 +165,20 @@
       .condition__delete {
         display: flex;
         align-items: center;
-        color: #bcbdbd;
+        color: var(--el-text-color-disabled);
         font-size: 16px;
         margin-right: 6px;
         cursor: pointer;
         transition: all linear .1s;
 
         &:hover {
-          color: #999;
+          color: var(--el-color-info);
         }
       }
       .condition__column, .condition__operator, .condition__value {
         display: flex;
         align-items: center;
-        color: #333;
+        color: var(--el-text-color-primary);
         font-weight: bold;
         cursor: text;
         .el-select {
@@ -191,11 +193,11 @@
           cursor: pointer;
         }
         .el-select__wrapper.is-focused {
-          box-shadow: 0 0 0 1px $--color-primary inset !important;
+          box-shadow: 0 0 0 1px var(--el-color-business) inset !important;
         }
       }
       .condition__operator {
-        color: #3976CB;
+        color: $color-primary;
       }
       .condition__operation-select {
         display: flex;
@@ -203,7 +205,7 @@
 
         .condition__operation {
           margin: 0 5px;
-          color: #3976CB;
+          color: $color-primary;
         }
       }
     }
@@ -211,7 +213,7 @@
       .connection__value {
         display: flex;
         align-items: center;
-        color: #3976CB;
+        color: $color-primary;
         font-weight: bold;
         cursor: text;
       }
@@ -228,8 +230,9 @@
   padding: 8px 10px !important;
 }
 .el-input__wrapper.is-focus {
-  box-shadow: 0 0 0 1px $--color-primary inset !important;
+  box-shadow: 0 0 0 1px var(--el-color-business) inset !important;
 }
 .el-select-dropdown__item.is-selected {
-  color: #2c72c6 !important;
+  //color: #2c72c6 !important;
+  color: var(--el-color-primary-light-3) !important;
 }
diff --git a/src/assets/css/components/views/charts/chartRelationShipList.scss b/src/assets/css/components/views/charts/chartRelationShipList.scss
index 5355c794..74510d24 100644
--- a/src/assets/css/components/views/charts/chartRelationShipList.scss
+++ b/src/assets/css/components/views/charts/chartRelationShipList.scss
@@ -1,71 +1,88 @@
+$text-color-primary: var(--el-text-color-primary);
 .ship--show.ship {
   visibility: visible;
 }
+
 .chart-drawing-ship__width {
   width: 1542px !important;
 }
+
 .ship {
   width: 320px;
-  background: #FFFFFF;
-  border: 1px solid rgba(119,131,145,0.60);
-  box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
+  background: var(--el-fill-color-blank);
+  border: 1px solid rgba(119, 131, 145, 0.60);
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08);
   border-radius: 3px;
   position: absolute;
   display: flex;
   visibility: hidden;
   flex-direction: column;
+
   .ship-title {
     display: flex;
     height: 49px;
-    border-bottom: 1px solid #E6EAED;
+    border-bottom: 1px solid var(--el-border-color-light);
     padding-left: 10px;
+
     .ship-title-name {
       line-height: 49px;
       font-size: 16px;
-      color: #333333;
+      color: $text-color-primary;
       letter-spacing: 0;
       font-weight: 500;
     }
+
     .ship-title-symbol {
       padding-right: 5px;
       line-height: 65px;
+
       img {
         width: 30px;
         height: 30px;
       }
     }
   }
+
   .ship-body {
     display: flex;
     flex-direction: column;
     margin: 7px;
+
     .ship-body-basicInfo {
       position: relative;
       display: flex;
       flex-direction: column;
     }
+
     .ship-body-list.ship-body-child {
       display: flex;
       flex-direction: column;
+
       .ship-body-list-child {
         position: relative;
+
         .ship-body-list-child-left {
           margin: 3px 0 3px 10px;
           display: flex;
           font-size: 12px;
-          color: #999999;
+          color: var(--el-color-info);
           font-weight: 400;
+
           .ship-body-list-child-title {
             width: 120px;
           }
+
           .ship-body-list-child-trip {
             width: 160px;
           }
+
           .ship-body-list-child-value {
             display: flex;
+
             .ship-body-list-child-msg {
               margin-right: 7px;
             }
+
             .ship-body-list-child-loading {
               .ship-body-list-child-charts {
                 width: 38px;
@@ -76,78 +93,93 @@
         }
       }
     }
+
     .ship-body-list {
-      margin:0 0 5px 20px;
+      margin: 0 0 5px 20px;
       text-align: left;
       display: flex;
       width: calc(100% - 20px);
       position: relative;
+
       .ship-body-list-title {
         width: 130px;
         font-size: 14px;
-        color: #666666;
+        color: var(--el-text-color-regular);
         letter-spacing: 0;
         font-weight: 400;
         display: flex;
         flex: 1;
       }
+
       .security.ship-body-list-security-length {
         width: 140px;
       }
+
       .ship-body-list-value {
         font-size: 14px;
-        color: #333333;
+        color: $text-color-primary;
         letter-spacing: 0;
         font-weight: 400;
         display: flex;
         flex: 1;
       }
+
       .ship-body-list-value.security {
         font-size: 12px;
-        color: #FFFFFF;
+        color: var(--el-fill-color-blank);
         font-weight: 400;
         border-radius: 2px;
         margin: 0 3px;
         width: 200px;
         flex-wrap: wrap;
+
         .ship-severity {
           margin-bottom: 3px;
         }
+
         .ship-body-list-security-alert {
           padding: 1px;
           text-align: center;
         }
+
         .ship-body-list-security-length {
           margin: 0 10px 0 3px;
           font-size: 14px;
-          color: #333333;
+          color: $text-color-primary;
           letter-spacing: 0;
           font-weight: 400;
         }
+
         .no-recent-alerts {
           font-size: 12px;
-          color: #333333;
+          color: $text-color-primary;
           font-weight: 400;
           line-height: 19px;
+
           i {
-            color: #23BF9A;
+            color: var(--el-color-success);
             margin-right: 4px;
           }
         }
+
         .ship-body-list-security-alert.critical {
-          background-color: #D84C4C;
+          background-color: var(--cn-color-critical);
         }
+
         .ship-body-list-security-alert.high {
-          background-color: #FF9A79;
+          background-color: var(--cn-color-high);
         }
+
         .ship-body-list-security-alert.info {
-          background-color: #D1BD50;
+          background-color: var(--cn-color-info);
         }
+
         .ship-body-list-security-alert.medium {
-          background-color: #FFB65A;
+          background-color: var(--cn-color-medium);
         }
+
         .ship-body-list-security-alert.low {
-          background-color: #FFD82D;
+          background-color: var(--cn-color-low);
         }
       }
     }
diff --git a/src/assets/css/components/views/detections/detection-filter.scss b/src/assets/css/components/views/detections/detection-filter.scss
index 9b87a627..28bebce8 100644
--- a/src/assets/css/components/views/detections/detection-filter.scss
+++ b/src/assets/css/components/views/detections/detection-filter.scss
@@ -1,3 +1,7 @@
+$color-primary: var(--el-text-color-primary);
+$color-business: var(--el-color-business);
+$color-light: var(--el-border-color-light);
+
 .detection-filter-case {
   display: flex;
   flex-direction: column;
@@ -5,18 +9,18 @@
   margin-right: 12px;
   overflow: auto;
   z-index: 1;
-  border: 1px solid rgba(226, 229, 236, 1) !important;
-  border-radius: 4px !important;
+  border: 1px solid $color-light !important;
+  border-radius: var(--el-border-radius-base) !important;
 
   .filter-case__header {
     padding-left: 8px;
     height: 36px;
     line-height: 36px;
-    color: #666;
+    color: var(--el-text-color-regular);
     font-size: 14px;
-    background: #F7F7F7;
-    box-shadow: 0 1px 0 0 rgba(226,229,236,1);
-    border-radius: 4px 4px 0 0;
+    background: var(--cn-bg-color-lighter);
+    box-shadow: 0 1px 0 0 $color-light;
+    border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
   }
 
   .filter__header {
@@ -24,7 +28,7 @@
     line-height: 46px;
     margin: 0 20px;
     font-size: 14px;
-    color: #353636;
+    color: $color-primary;
     font-weight: 500;
   }
 
@@ -47,14 +51,14 @@
         display: flex;
         align-items: center;
         font-size: 14px;
-        color: #353636;
+        color: $color-primary;
         font-weight: 400;
 
         .filter__body-item-left-index {
           width: 16px;
           height: 16px;
           text-align: center;
-          background: #EFF2F5;
+          background: var(--el-bg-color-page);
           border-radius: 2px;
           margin-right: 6px;
           font-family: NotoSansHans-Black;
@@ -70,7 +74,7 @@
           max-width: 180px;
           font-family: NotoSansSChineseRegular;
           font-size: 14px;
-          color: #353636;
+          color: $color-primary;
           font-weight: 400;
           overflow: hidden;
           white-space: nowrap;
@@ -82,7 +86,7 @@
         flex-shrink: 0;
         font-family: NotoSansSChineseRegular;
         font-size: 12px;
-        color: #717171;
+        color: var(--el-text-color-regular);
         font-weight: 400;
         margin-right: 10px;
       }
@@ -94,7 +98,7 @@
   width: 18px;
   height: 12px;
   margin-right: 6px;
-  border: 1px solid #E8E8E8;
+  border: 1px solid var(--el-color-info-light-8);
 }
 
 .filter-show-more, .filter-no-show-more {
@@ -102,10 +106,11 @@
   height: 26px;
   line-height: 26px;
   margin-left: 20px;
-  color: #046ECA;
+  color: var(--el-color-primary);
   user-select: none; // 禁止文本选中
   font-size: 12px;
 }
+
 .filter-no-show-more {
   cursor: not-allowed;
   color: var(--el-text-color-disabled);
@@ -116,32 +121,35 @@
   margin-left: 20px;
   margin-top: 6px;
   height: 1px;
-  background: #EFF2F5;
-  //background: #000;
+  background: var(--el-bg-color-page);
 }
 
 .new-detection-filter-title {
   height: 32px;
   line-height: 32px;
-  background: #F7F7F7;
+  background: var(--cn-bg-color-lighter);
   padding: 0 20px;
-  box-shadow: 0 1px 0 0 rgba(226, 229, 236, 1);
-  border-radius: 4px 4px 0 0;
+  box-shadow: 0 1px 0 0 $color-light;
+  border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
 }
+
 .new-detection-filter-content {
   padding: 20px;
+
   .el-checkbox {
     display: inline-block !important;
     height: auto !important;
   }
+
   .new-filter-content-title {
     font-family: NotoSansHans-Medium;
     font-size: 14px;
     line-height: 14px;
     margin-bottom: 10px;
-    color: #353636;
+    color: $color-primary;
     font-weight: 500;
   }
+
   .new-filter-content-content {
     display: flex;
     flex-direction: column;
@@ -150,7 +158,7 @@
       line-height: 16px;
       margin-bottom: 13.6px;
       font-size: 14px;
-      color: #353636;
+      color: $color-primary;
       font-weight: 400;
       display: flex !important;
 
@@ -162,34 +170,38 @@
       }
 
       .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-        border-color: #38ACD2;
-        background: #38ACD2;
+        border-color: var(--el-bg-color-page);
+        background: var(--el-bg-color-page);
         border-radius: 2px;
       }
+
       .el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
-        background: #FFFFFF;
+        background: var(--el-fill-color-blank);
         border-radius: 1px;
       }
+
       .el-checkbox__inner::after {
         top: 2px;
         left: 5px;
       }
+
       .el-checkbox__input.is-checked {
         .el-checkbox__inner {
-          border-color: #38ACD2;
-          background: #38ACD2;
+          border-color: var(--el-bg-color-page);
+          background: var(--el-bg-color-page);
           border-radius: 2px;
         }
       }
+
       .el-checkbox__input.is-focus {
         .el-checkbox__inner {
-          border-color: #38ACD2;
+          border-color: var(--el-bg-color-page);
         }
       }
 
       .el-checkbox__label {
         font-size: 14px;
-        color: #353636;
+        color: $color-primary;
         font-weight: 400;
         padding-left: 10px !important;
       }
diff --git a/src/assets/css/components/views/detections/detection-list/row.scss b/src/assets/css/components/views/detections/detection-list/row.scss
index f992811b..5becd767 100644
--- a/src/assets/css/components/views/detections/detection-list/row.scss
+++ b/src/assets/css/components/views/detections/detection-list/row.scss
@@ -1,3 +1,5 @@
+$bg-color-page: var(--el-bg-color-page);
+
 .cn-detection--list {
   display: flex;
 
@@ -8,7 +10,7 @@
     align-items: flex-start;
     margin-bottom: 1px;
     //padding-top: 18px;
-    background-color: #EFF2F5;
+    background-color: $bg-color-page;
 
     .cn-detection__collapse-block {
       min-height: 66px;
@@ -21,7 +23,7 @@
 
     span {
       transform: rotate(0);
-      transition: all linear .2s;
+      transition: all linear var(--el-transition-duration-fast);
       padding-top: 0;
 
       &.reg-down {
@@ -35,7 +37,7 @@
     }
 
     .cn-icon-arrow-right {
-      color: #ADBCCA;
+      color: var(--el-text-color-placeholder);
       font-size: 12px;
     }
   }
@@ -46,7 +48,7 @@
     flex-wrap: wrap;
     padding: 9px 0;
     margin-bottom: 1px;
-    background-color: white;
+    background-color: var(--el-fill-color-blank);
 
     .cn-detection__icon {
       margin-left: 13px;
@@ -75,17 +77,18 @@
         flex-wrap: nowrap;
         font-size: 16px;
         padding-bottom: 3px;
-        color: #333333;
+        color: var(--el-text-color-primary);
         align-items: center;
 
         i {
-          color: #7b8fa2;
+          //color: #7b8fa2;
+          color: var(--el-color-info);
           margin-right: 5px;
           font-size: 18px;
         }
 
         .line {
-          color: #da5656;
+          color: var(--el-color-error);
           margin-left: 12px;
           font-size: xx-small;
           font-weight: bold;
@@ -95,17 +98,17 @@
         .circle {
           width: 10px;
           height: 10px;
-          border: 2px solid #da5656;
+          border: 2px solid var(--el-color-error);
           border-radius: 10px;
           margin-top: 1px;
           margin-right: 12px;
         }
 
         .domain {
-          background: #EFF2F5;
+          background: $bg-color-page;
           border-radius: 2px;
           font-size: 14px;
-          color: #333333;
+          color: var(--el-text-color-primary);
           letter-spacing: 0;
           line-height: 14px;
           margin-left: 5px;
@@ -113,6 +116,7 @@
           padding: 0 2px;
           font-weight: 500;
         }
+
         .detection-event-severity-color-block {
           width: 5px;
           height: 20px;
@@ -120,16 +124,17 @@
           margin-left: -16px;
           margin-right: 12px;
         }
+
         .detection-event-severity-block {
           height: 20px;
           line-height: 20px;
           font-size: 12px;
-          color: #046EC9;
+          color: var(--el-color-primary);
           font-weight: 500;
           padding: 0 10px;
-          background: rgba(56,172,210,0.10);
-          border: 1px solid #ADC7DB;
-          box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+          background: rgba(56, 172, 210, 0.10);
+          border: 1px solid var(--el-color-primary-light-7);
+          box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
           border-radius: 3px;
           margin-right: 10px;
         }
@@ -156,7 +161,7 @@
 
               i {
                 padding-right: 5px;
-                color: #8FA1BE;
+                color: var(--el-color-info);
                 font-size: 14px;
               }
 
@@ -165,16 +170,17 @@
               }
 
               span:first-of-type {
-                color: #999;
+                color: var(--el-color-info);
               }
 
               span:last-of-type {
-                color: #666;
+                color: var(--el-text-color-regular);
               }
             }
+
             .basic-info__item1 {
               span: {
-                color: #666;
+                color: var(--el-text-color-regular);
               }
             }
           }
@@ -183,7 +189,7 @@
             flex-shrink: 0;
             padding: 0 30px;
             font-size: 12px;
-            color: #3976CB;
+            color: var(--el-color-primary);
 
             &:hover {
               cursor: pointer;
@@ -198,32 +204,37 @@
       padding: 0 10px;
 
       .el-divider {
-        background-color: #EFF2F5;
+        background-color: $bg-color-page;
       }
     }
   }
 }
 
-.security.cn-detection--list,.service.cn-detection--list {
+.security.cn-detection--list, .service.cn-detection--list {
   height: 100%;
   flex-direction: column;
   justify-content: space-between;
+
   .cn-detection__case {
-    background: #FFFFFF;
-    border: 1px solid #E7EAED;
+    background: var(--el-fill-color-blank);
+    border: 1px solid var(--el-border-color-light);
     border-radius: 2px;
     margin-bottom: 10px;
   }
+
   .cn-detection__case {
     padding: 10px 0;
     flex: unset;
   }
+
   .cn-detection__header {
     margin-bottom: 2px;
   }
+
   .cn-detection-table {
     overflow: auto;
   }
+
   .cn-detection__case-severity {
     display: flex;
     width: 38px;
@@ -233,42 +244,52 @@
     margin-right: 20px;
     margin-left: 29px;
     line-height: 34px;
+
     i {
       font-size: 40px;
     }
   }
+
   .el-pagination__jump {
     margin-left: 0 !important;
   }
+
   .cn-detection__footer {
-    background: #FFFFFF;
+    background: var(--el-fill-color-blank);
     position: relative;
-    box-shadow: 0 0 4px 0 rgba(0,0,0,0.06);
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.06);
+
     .el-pagination__total {
       position: absolute;
       left: 0;
     }
   }
+
   .domain.cn-detection-domain {
     height: 20px;
     line-height: 20px !important;
     padding: 0 4px;
     font-style: italic;
   }
+
   .critical {
-    color: #D84C4C !important;
+    color: var(--cn-color-critical) !important;
   }
+
   .high {
-    color: #FF9A79 !important;
+    color: var(--cn-color-high) !important;
   }
+
   .info {
-    color: #D1BD50 !important;
+    color: var(--cn-color-info) !important;
   }
+
   .medium {
-    color: #FFB65A !important;
+    color: var(--cn-color-medium) !important;
   }
+
   .low {
-    color: #FFD82D !important;
+    color: var(--cn-color-low) !important;
   }
 }
 
diff --git a/src/assets/css/components/views/detections/detection-overview.scss b/src/assets/css/components/views/detections/detection-overview.scss
index 6c5756d8..4fef00aa 100644
--- a/src/assets/css/components/views/detections/detection-overview.scss
+++ b/src/assets/css/components/views/detections/detection-overview.scss
@@ -1,3 +1,7 @@
+$color-primary: var(--el-color-primary);
+$color-primary1: #1890FF;
+$color-regular: var(--el-text-color-regular);
+//$color-primary: var(--el-color-primary);
 .detection-detail-overview {
   display: flex;
   position: relative;
@@ -23,7 +27,7 @@
 
     .overview__title {
       padding: 10px 0;
-      color: #333;
+      color: var(--el-text-color-primary);
       font-weight: bold;
       font-size: 14px;
 
@@ -44,7 +48,7 @@
       .row__label {
         padding-right: 20px;
         min-width: 100px;
-        color: #6B717B;
+        color: $color-regular;
         line-height: 14px;
         word-break: normal;
       }
@@ -57,15 +61,14 @@
       .row__content--metric {
         display: flex;
         flex-wrap: nowrap;
-        color: #666666;
+        color: $color-regular;
         font-size:14px;
         font-weight: 400;
       }
 
       .row__content, .row__content1 {
         display: flex;
-        //color: #3976CB;
-        color: #046ECA;
+        color: $color-primary;
         font-weight: 500;
         font-size: 14px;
         align-items: center;
@@ -75,28 +78,28 @@
         &.row__content--link {
           font-style: italic;
           text-decoration: underline;
-          color: #1890FF;
+          color: $color-primary1;
           cursor: pointer;
         }
         .row__content--link{
           font-style: italic;
           text-decoration: underline;
-          color: #1890FF;
+          color: $color-primary1;
           cursor: pointer;
         }
         span{
           font-style: italic;
-          color: #046ECA;
+          color: $color-primary;
         }
         .row__content--span {
           font-style: italic;
-          color: #1890FF;
+          color: $color-primary1;
         }
 
         .row__content__icon {
           font-size: 14px;
           margin-right: 5px;
-          color: #1890FF;
+          color: $color-primary1;
         }
 
         .row__content__svg {
@@ -115,7 +118,7 @@
   display: flex;
   flex-wrap: wrap;
   padding: 17px;
-  background-color: #F9F9F9;
+  background-color: var(--el-fill-color-lighter);
 
   .row-timeline {
     flex: 0 0 110px;
@@ -128,7 +131,7 @@
       align-items: center;
       flex-basis: 16px;
       font-size: 12px;
-      color: #666666;
+      color: $color-regular;
     }
     .row-timeline__line {
       display: flex;
@@ -136,7 +139,7 @@
       align-items: center;
       height: 1px;
       margin: 5px 0;
-      background-color: #CBD0D5;
+      background-color: var(--el-border-color-darker);
       overflow: visible;
 
       .line-point-larger {
@@ -146,18 +149,19 @@
         height: 12px;
         width: 12px;
         border-radius: 50%;
-        background-color: #F9F9F9;
-        border: 1px solid #666;
+        background-color: var(--el-fill-color-lighter);
+        border: 1px solid $color-regular;
 
         .line-point {
-          background-color: #666;
+          background-color: $color-regular;
         }
       }
       .line-point {
         height: 6px;
         width: 6px;
         border-radius: 50%;
-        background-color: #A0B5CA;
+        //background-color: #A0B5CA;
+        background-color: var(--el-text-color-placeholder);
       }
     }
     .row-timeline__card {
@@ -167,7 +171,7 @@
         display: flex;
         flex-direction: column;
         padding: 10px;
-        background-color: #EFF2F5;
+        background-color: var(--el-bg-color-page);
         border-radius: 2px;
 
         .timeline__severity {
@@ -176,19 +180,19 @@
           margin-bottom: 10px;
 
           &.timeline__severity--critical i {
-            color: #D84C4C;
+            color: var(--cn-color-critical);
           }
           &.timeline__severity--high i {
-            color: #FE845D;
+            color: var(--cn-color-high);
           }
           &.timeline__severity--medium i {
-            color: #FEB65A;
+            color: var(--cn-color-medium);
           }
           &.timeline__severity--low i {
-            color: #F6C738;
+            color: var(--cn-color-low);
           }
           &.timeline__severity--info i {
-            color: #D1BD50;
+            color: var(--cn-color-info);
           }
           i {
             font-size: 16px;
@@ -197,20 +201,20 @@
             padding-left: 5px;
             font-size: 14px;
             //color: #3976CB;
-            color: #046ECA;
+            color: $color-primary;
             font-weight: 600 !important;
           }
         }
         .timeline__security-type {
           font-size: 12px;
-          color: #046ECA;
+          color: $color-primary;
           margin-bottom: 10px;
           font-weight: 500;
           height: 36px;
         }
         .timeline__start-time {
           font-size: 12px;
-          color: #666666;
+          color: $color-regular;
         }
       }
     }
@@ -223,11 +227,11 @@
         display: flex;
         align-items: center;
         padding-left: 5px;
-        color: #666;
+        color: $color-regular;
         font-size: 12px;
 
         &.detection-ip__current {
-          color: #D84C4C;
+          color: var(--cn-color-critical);
         }
         i {
           font-size: 12px;
@@ -247,13 +251,13 @@
   height: 16px;
   font-size: 12px;
   font-weight: 400;
-  color: #fff;
+  color: var(--el-color-white);
   border-radius: 2px;
 }
 
 .performance-event-remark {
   font-family: NotoSansSChineseRegular;
   font-size: 12px;
-  color: #353636;
+  color: var(--el-text-color-primary);
   font-weight: 400;
 }
diff --git a/src/assets/css/components/views/detections/detections.scss b/src/assets/css/components/views/detections/detections.scss
index 4d526da3..b2d52ec7 100644
--- a/src/assets/css/components/views/detections/detections.scss
+++ b/src/assets/css/components/views/detections/detections.scss
@@ -4,18 +4,21 @@
   width: 100%;
   margin-bottom: 10px;
 }
+
 .detections {
-  .entity__pagination{
+  .entity__pagination {
     bottom: 9px;
     height: 40px;
     width: 100%;
   }
+
   .detections__container {
     display: flex;
     flex-direction: column;
     padding-bottom: 20px;
   }
 }
+
 .detection__list {
   display: flex;
   flex-direction: column;
@@ -26,19 +29,19 @@
     flex: 0 0 192px;
     margin-bottom: 10px;
     width: 100%;
-    background-color: white;
+    background-color: var(--el-bg-color);
 
     .chart-header {
       display: flex;
-      justify-content:space-between;
-      align-items:center;
+      justify-content: space-between;
+      align-items: center;
       padding: 10px 20px 10px 0;
       flex: 0 0 40px;
 
       font-size: 14px;
-      color: $--color-text-primary;
-      transition: all 0.2s;
-      border-bottom: 1px solid #E7EAED;
+      color: var(--el-text-color-primary);
+      transition: all var(--el-transition-duration-fast);
+      border-bottom: 1px solid var(--el-border-color-light);
 
       .chart-header__title {
         max-width: calc(100% - 100px);
@@ -51,26 +54,30 @@
     .chart-content {
       height: 147px;
     }
+
     .statistics__severity {
       width: 33%;
-      margin-left:15px;
-      margin-right:15px;
+      margin-left: 15px;
+      margin-right: 15px;
     }
+
     .statistics__category {
       width: 34%;
-      margin-left:15px;
-      margin-right:15px;
+      margin-left: 15px;
+      margin-right: 15px;
     }
+
     .statistics__active-attack {
       width: 33%;
-      margin-left:15px;
-      margin-right:15px;
+      margin-left: 15px;
+      margin-right: 15px;
     }
   }
 }
+
 .filter__more {
   padding-top: 5px;
   font-size: 14px;
-  color: $--color-primary;
+  color: var(--el-color-business);
   cursor: pointer;
 }
diff --git a/src/assets/css/components/views/entityExplorer/entity-graph.scss b/src/assets/css/components/views/entityExplorer/entity-graph.scss
index 8cf9f93d..e23434f1 100644
--- a/src/assets/css/components/views/entityExplorer/entity-graph.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-graph.scss
@@ -44,7 +44,7 @@ $color-regular: var(--el-text-color-regular);
       flex-direction: column;
       align-items: center;
       background-color: transparent !important;
-      transition: linear all .2s;
+      transition: linear all var(--el-transition-duration-fast);
 
       .graph-node__text {
         width: 120px;
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 5569bd0e..fb75f49c 100644
--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -135,26 +135,26 @@
             padding: 1px 4px;
             margin-right: 6px;
             border-radius: 2px;
-            color: white;
+            color: var(--el-color-white);
 
             &.alert-level-tag--high.critical {
-              background-color: #D84C4C;
+              background-color: var(--cn-color-critical);
             }
 
             &.alert-level-tag--high.high {
-              background-color: #FF9A79;
+              background-color: var(--cn-color-high);
             }
 
             &.alert-level-tag--high.info {
-              background-color: #D1BD50;
+              background-color: var(--cn-color-info);
             }
 
             &.alert-level-tag--high.medium {
-              background-color: #FFB65A;
+              background-color: var(--cn-color-medium);
             }
 
             &.alert-level-tag--high.low {
-              background-color: #FFD82D;
+              background-color: var(--cn-color-low);
             }
 
             &.alert-level-tag--middle {
@@ -485,7 +485,7 @@
 
       i {
         //color: #7b8fa2; // todo 待确定
-        color: var(--el-text-color-primary);
+        color: var(--el-color-info);
         margin-right: 5px;
         font-size: 18px;
       }
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index 11da2b5e..ce8c86bb 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -52,6 +52,11 @@
   @include var.set-css-var-value(('color', 'business'), map.get(css-var.$colors, 'business', 'base'));
   --cn-bg-color-light: #EBF1F4; // 一个用得比较多的背景色
   --cn-bg-color-lighter: #F7F7F7; // 一个用得比较多的背景色
+  --cn-color-critical: #D84C4C; // critical 严重等级分布
+  --cn-color-high: #FF9A79; // high
+  --cn-color-info: #D1BD50; // info
+  --cn-color-medium: #FFB65A; // medium
+  --cn-color-low: #FFD82D; // low
 }
 
 @font-face {
diff --git a/src/views/detections/DetectionFilter.vue b/src/views/detections/DetectionFilter.vue
index 6581af27..7ba252fb 100644
--- a/src/views/detections/DetectionFilter.vue
+++ b/src/views/detections/DetectionFilter.vue
@@ -7,8 +7,6 @@
         <div class="filter__header">{{filter.title}}</div>
 
         <div class="filter__body" style="position: relative">
-<!--          <loading :loading="false" style="top: -5px;"></loading>-->
-
           <div class="filter__body-item"
                v-for="(data, i) in filter.data.slice(0, filter.showIndex)"
                :key="i"
diff --git a/src/views/detections/DetectionList.vue b/src/views/detections/DetectionList.vue
index b742a72e..9f4d56fb 100644
--- a/src/views/detections/DetectionList.vue
+++ b/src/views/detections/DetectionList.vue
@@ -6,8 +6,7 @@
         <div class="no-data" v-if="myListData.length===0">{{ $t('npm.noData') }}</div>
         <div v-if="!isCollapse" @click="collapse" class="cn-detection__shadow new-cn-detection__shadow"></div>
         <detection-row
-            style="margin-bottom: 10px"
-            class="detection-border"
+            class="detection-border margin-b-10"
             v-for="(data, index) in myListData"
             :detection="data"
             :page-type="pageType"
diff --git a/src/views/detections/DetectionRow.vue b/src/views/detections/DetectionRow.vue
index 586cf970..fad85a15 100644
--- a/src/views/detections/DetectionRow.vue
+++ b/src/views/detections/DetectionRow.vue
@@ -169,7 +169,7 @@ export default {
         let color = '#8FA1BE'
         if (detection.startTime && detection.endTime) {
           if (getMillisecond(detection.endTime) - getMillisecond(detection.startTime) < 5 * 60 * 1000) {
-            color = '#D84C4C'
+            color = 'var(--cn-color-critical)'
           }
         }
         return { backgroundColor: color }