diff --git a/src/assets/css/common/table-common.scss b/src/assets/css/common/table-common.scss
index 53b463cf..e3a318a8 100644
--- a/src/assets/css/common/table-common.scss
+++ b/src/assets/css/common/table-common.scss
@@ -352,6 +352,10 @@
   margin-bottom: 10px;
 }
 
+.padding-r-20 {
+  padding-right: 20px
+}
+
 .tooltip-column-name {
   color: #aeb0b9;
   height: 40px;
diff --git a/src/assets/css/components/components/entities/entities.scss b/src/assets/css/components/components/entities/entities.scss
index 0add7be8..635aafc8 100644
--- a/src/assets/css/components/components/entities/entities.scss
+++ b/src/assets/css/components/components/entities/entities.scss
@@ -73,7 +73,7 @@
           width: 328px;
           height: 89px;
           box-sizing: border-box;
-          transition: all .2s;
+          transition: all var(--el-transition-duration-fast);
 
           .header__bottom__line {
             width:288px;
diff --git a/src/assets/css/components/components/table/common.scss b/src/assets/css/components/components/table/common.scss
index eaa1673b..af20b17b 100644
--- a/src/assets/css/components/components/table/common.scss
+++ b/src/assets/css/components/components/table/common.scss
@@ -1,6 +1,6 @@
 .pop-custom {
   padding: 12px;
-  border: 1px solid #EBEEF5;
+  border: 1px solid var(--el-border-color-lighter);
   position: absolute;
   top: 55px;
   right: 20px;
diff --git a/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss b/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss
index 23f4fc67..b2423899 100644
--- a/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss
+++ b/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss
@@ -1,14 +1,16 @@
+$text-color-primary: var(--el-text-color-primary);
+
 .subscriber-map {
   height: 100%;
 
   svg {
-    fill: #fff;
+    fill: var(--el-fill-color-blank);
   }
   .subscriber-map-header {
     height: 34px;
     padding-bottom: 10px;
     font-size: 14px;
-    color: #353636;
+    color: $text-color-primary;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -20,7 +22,7 @@
   }
   .subscriber-map-body {
     position: relative;
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
     border-radius: 4px;
     height: calc(100% - 34px);
 
@@ -44,7 +46,7 @@
 
         svg {
           transition: height .1s linear, width .1s linear;
-          fill: #fff;
+          fill: var(--el-fill-color-blank);
         }
 
         &.map-marker--human {
@@ -67,7 +69,7 @@
         &.map-marker--hover {
           width: 30px;
           height: 30px;
-          border: 2px solid rgba(255,255,255,1);
+          border: 2px solid var(--el-color-white);
           z-index: 2;
 
           &.map-marker--human svg {
@@ -82,7 +84,7 @@
         &.map-marker--highlight {
           width: 30px;
           height: 30px;
-          border: 2px solid #fff;
+          border: 2px solid var(--el-color-white);
           background-color: rgb(204,68,68);
           z-index: 3;
 
@@ -148,7 +150,7 @@
                 text-align: right;
                 width: 60px;
                 font-size: 12px;
-                color: #353636;
+                color: $text-color-primary;
               }
               .item__value {
                 font-size: 12px;
@@ -163,7 +165,7 @@
               .item-record__header {
                 font-family: Helvetica;
                 font-size: 16px;
-                color: #353636;
+                color: $text-color-primary;
                 font-weight: 400;
                 height: 38px;
                 line-height: 38px;
@@ -219,7 +221,7 @@
                       border-left: 2px #cccccc dotted;
                       height: 34px;
                       margin-left: 6px;
-                      transition: all 0.2s;
+                      transition: all var(--el-transition-duration-fast);
                     }
                   }
                   .timeline__info--item {
@@ -282,7 +284,7 @@
                         height: 34px;
                         margin-left: 6px;
                         margin-top: 6px;
-                        transition: all 0.2s;
+                        transition: all var(--el-transition-duration-fast);
                       }
                     }
 
@@ -326,7 +328,7 @@
     .subscriber-map-point-tooltip__time {
       padding: 10px;
       font-size: 12px;
-      color: #353636;
+      color: $text-color-primary;
       font-weight: bold;
     }
     .subscriber-map-point-tooltip__coordinates {
@@ -342,7 +344,7 @@
         }
         .coordinate__value {
           font-size: 12px;
-          color: #353636;
+          color: $text-color-primary;
           font-weight: bold;
         }
       }
@@ -426,7 +428,7 @@
           text-align: right;
           width: 60px;
           font-size: 12px;
-          color: #353636;
+          color: $text-color-primary;
         }
         .item__value {
           font-size: 12px;
@@ -437,7 +439,7 @@
       .body__tracking {
         padding-top: 6px;
         font-size: 12px;
-        color: #38ACD2;
+        color: var(--el-color-business);
         text-decoration: underline;
         cursor: pointer;
       }
diff --git a/src/assets/css/components/views/detections/detection-create/detection-form.scss b/src/assets/css/components/views/detections/detection-create/detection-form.scss
index eb7ef26e..f8917956 100644
--- a/src/assets/css/components/views/detections/detection-create/detection-form.scss
+++ b/src/assets/css/components/views/detections/detection-create/detection-form.scss
@@ -1,9 +1,12 @@
+$text-color-primary: var(--el-text-color-primary);
+$bg-color-page: var(--el-bg-color-page);
+
 .detection-form {
   padding: 20px;
 
   .detection-form-header {
     font-size: 24px;
-    color: #353636;
+    color: $text-color-primary;
     font-weight: 900;
     margin-top: 10px;
   }
@@ -17,12 +20,16 @@
       margin-top: 20px;
       width: 1200px;
 
+      .rule-definition {
+        position: relative;
+      }
+
       .el-collapse-item__header {
         width: 1200px !important;
         height: 56px !important;
-        background: #FFFFFF !important;
-        border-left: 1px solid #EFF2F5;
-        border-right: 1px solid #EFF2F5;
+        background: var(--el-fill-color-blank) !important;
+        border-left: 1px solid $bg-color-page;
+        border-right: 1px solid $bg-color-page;
         //box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02) !important;
         border-radius: 4px !important;
         display: flex;
@@ -38,7 +45,7 @@
       }
 
       .el-collapse-item__wrap {
-        border: 1px solid #EFF2F5;
+        border: 1px solid $bg-color-page;
         border-top: none;
       }
 
@@ -61,18 +68,18 @@
         }
 
         .form-collapse-header-no {
-          background: #E2E5EC;
-          color: #333333;
+          background: var(--el-border-color-light);
+          color: $text-color-primary;
         }
 
         .form-collapse-header-no-active {
-          background: #38ACD2;
-          color: #FFFFFF;
+          background: var(--el-color-business);
+          color: var(--el-color-white);
         }
 
         .form-collapse-header-title {
           font-size: 16px;
-          color: #333333;
+          color: $text-color-primary;
           font-weight: 500;
         }
       }
@@ -85,11 +92,11 @@
           height: 90px;
           padding: 16px 12px;
           border-radius: 2px;
-          border: 1px #E2E5EC solid;
+          border: 1px var(--el-border-color-light) solid;
           display: flex;
           flex-direction: column;
           font-size: 14px;
-          color: #353636;
+          color: $text-color-primary;
           font-weight: 400;
 
           .trigger-block-item {
@@ -132,6 +139,7 @@
         .el-collapse-item__content {
           padding-bottom: 0 !important;
         }
+
         .el-input__wrapper, .el-select__wrapper {
           height: 24px !important;
           line-height: 24px !important;
@@ -139,6 +147,7 @@
           width: 112px;
           margin: 0 12px;
         }
+
         .el-input__inner {
           padding: 0 15px !important;
         }
@@ -160,7 +169,7 @@
     width: calc(100% + 40px);
     height: 60px;
     margin-left: -20px;
-    box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.10);
+    box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.10);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -169,9 +178,11 @@
   .el-overlay-message-box, .el-message-box {
     padding: 0 !important;
   }
+
   .el-overlay-message-box {
     text-align: center !important;
   }
+
   .is-message-box .el-overlay-message-box {
     display: flex;
     justify-content: center;
@@ -179,13 +190,15 @@
   }
 
   .el-switch {
-    --el-switch-on-color: #38ACD2;
+    --el-switch-on-color: var(--el-color-business);
     --el-switch-off-color: #C0CEDB;
   }
+
   .del-model {
     &.el-message-box {
       max-width: 480px !important;
     }
+
     display: flex;
     flex-direction: column;
     padding-bottom: 0 !important;
@@ -195,9 +208,9 @@
     .el-message-box__header {
       display: flex;
       flex-direction: row;
-      border-bottom: 1px solid #eee;
+      border-bottom: 1px solid var(--el-border-color-lighter);
       height: 42px;
-      background: #F7F7F7;
+      background: var(--cn-bg-color-lighter);
       box-shadow: 0 1px 0 0 rgba(53, 54, 54, 0.08);
       padding-left: 21px;
       padding-top: 10px;
@@ -220,7 +233,7 @@
 
       .el-message-box__title {
         font-size: 14px !important;
-        color: #353636;
+        color: $text-color-primary;
         letter-spacing: 0;
         font-weight: 400;
       }
@@ -229,7 +242,7 @@
     .el-message-box__content {
       height: 96px;
       font-size: 14px;
-      color: #353636;
+      color: $text-color-primary;
       letter-spacing: 0;
       line-height: 22px;
       font-weight: 400;
@@ -245,13 +258,14 @@
 
     .el-message-box__btns {
       height: 52px;
-      border-top: 1px solid #eee;
+      border-top: 1px solid var(--el-border-color-lighter);
       box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.07);
       padding: 13px 1px 12px 0 !important;
 
       .el-button {
         font-size: 12px;
       }
+
       .el-button--small {
         padding: 8px 21px !important;
         line-height: 12px;
@@ -264,7 +278,7 @@
         margin-right: 20px;
         width: 80px;
         height: 28px;
-        color: #353636;
+        color: $text-color-primary;
       }
 
       .el-button:nth-child(2) {
@@ -272,8 +286,10 @@
         height: 28px;
         margin-right: 20px;
         margin-left: 0 !important;
-        background-color: #2d8cf0;
-        border-color: #2d8cf0;
+        //background-color: #2d8cf0;
+        //border-color: #2d8cf0;
+        background-color: var(--el-color-business);
+        border-color: var(--el-color-business);
       }
     }
   }
diff --git a/src/assets/css/components/views/detections/detection-drawer.scss b/src/assets/css/components/views/detections/detection-drawer.scss
index 3d9eb68c..ac5fa316 100644
--- a/src/assets/css/components/views/detections/detection-drawer.scss
+++ b/src/assets/css/components/views/detections/detection-drawer.scss
@@ -1,11 +1,14 @@
+$text-color-primary: var(--el-text-color-primary);
+
 .detection-drawer {
-  padding: 20px;
-  height: 100%;
+  height: 100vh;
   overflow: scroll;
+  padding: 20px 20px 90px;
 
   .el-drawer {
     width: 440px !important;
   }
+
   .el-collapse-item__content {
     padding-bottom: 0 !important;
   }
@@ -18,7 +21,7 @@
   .detection-drawer-title, .basic-function-value, basic-description-value, .drawer-trigger-minutes {
     font-family: NotoSansSChineseRegular;
     font-size: 14px;
-    color: #717171;
+    color: var(--el-text-color-regular);
     font-weight: 400;
     line-height: 14px;
     display: flex;
@@ -28,7 +31,7 @@
     .drawer-basic-header {
       font-family: NotoSansHans-Black;
       font-size: 16px;
-      color: #353636;
+      color: $text-color-primary;
       font-weight: 900;
       margin-bottom: 20px;
 
@@ -51,37 +54,45 @@
     margin-bottom: 20px;
   }
 
+  .padding-b-0 {
+    padding-bottom: 0;
+  }
+
   .detection-drawer-title {
     margin-bottom: 8px;
+
+    .drawer-title__equal {
+      margin: 0 6px;
+    }
   }
 
   .basic-description-value {
     font-family: NotoSansSChineseRegular;
     font-size: 14px;
-    color: #353636;
+    color: $text-color-primary;
     line-height: 18px;
     font-weight: 400;
   }
 
   .basic-function-value {
-    color: #046ECA;
+    color: var(--el-color-primary);
   }
 
   .drawer-trigger-minutes {
-    color: #353636;
+    color: $text-color-primary;
   }
 
   .detection-drawer-collapse {
-    background: #FFFFFF;
-    border: 1px solid rgba(226, 229, 236, 1);
-    border-radius: 4px;
+    background: var(--el-fill-color-blank);
+    border: 1px solid var(--el-border-color-light);
+    border-radius: var(--el-border-radius-base);
     //box-shadow: 0 1px 0 0 rgba(226, 229, 236, 1);
 
     .el-collapse-item__header {
       height: 32px !important;
-      background-color: #F7F7F7 !important;
+      background-color: var(--cn-bg-color-lighter) !important;
       padding-left: 12px !important;
-      border-radius: 4px 4px 0 0;
+      border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
     }
 
     .drawer-collapse-content {
@@ -97,11 +108,19 @@
       .drawer-collapse-trigger {
         font-family: NotoSansSChineseRegular;
         font-size: 14px;
-        color: #353636;
+        color: $text-color-primary;
         line-height: 18px;
         font-weight: 400;
         margin-bottom: 20px;
+
+        .trigger__value {
+          color: #046ECA;
+        }
       }
     }
   }
+
+  .detection-drawer-collapse__margin {
+    margin: 20px 0;
+  }
 }
diff --git a/src/assets/css/components/views/detections/detection-filter.scss b/src/assets/css/components/views/detections/detection-filter.scss
index 28bebce8..92a16534 100644
--- a/src/assets/css/components/views/detections/detection-filter.scss
+++ b/src/assets/css/components/views/detections/detection-filter.scss
@@ -206,5 +206,10 @@ $color-light: var(--el-border-color-light);
         padding-left: 10px !important;
       }
     }
+
+    .content__display {
+      display: flex;
+      flex-direction: column;
+    }
   }
 }
diff --git a/src/assets/css/components/views/detections/detection-table.scss b/src/assets/css/components/views/detections/detection-table.scss
index 9279c4e8..691e1f95 100644
--- a/src/assets/css/components/views/detections/detection-table.scss
+++ b/src/assets/css/components/views/detections/detection-table.scss
@@ -1,18 +1,24 @@
+$color-primary: var(--el-color-primary);
+
 .detection-table {
+  position: relative;
   .el-table td, .el-table th {
     padding: 12px 0;
   }
+
   .el-table th > .cell, .el-table .cell {
     padding-left: 0 !important;
     padding-right: 0 !important;
     line-height: 16px;
   }
+
   .el-table--enable-row-transition .el-table__body td, .el-table--border th {
     border-left: 0 !important;
     border-right: 0 !important;
     font-size: 12px;
-    color: #353636;
+    color: var(--el-text-color-primary);
   }
+
   .el-table--border th {
     font-weight: 500;
     padding: 0;
@@ -21,7 +27,7 @@
   .el-table__header-wrapper {
     height: 32px !important;
     line-height: 32px !important;
-    border-bottom: 1px solid #EBEEF5;
+    border-bottom: 1px solid var(--el-border-color-lighter);
   }
 
   .el-table__body td {
@@ -32,15 +38,17 @@
     height: 32px !important;
   }
 }
+
 .policy-library-tip {
   max-width: 180px;
   padding: 4px;
 
   .tip__header {
-    color: #353636;
+    color: var(--el-text-color-primary);
     font-weight: bold;
     font-size: 14px;
   }
+
   .tip__tags {
     display: flex;
     margin-top: 8px;
@@ -48,21 +56,23 @@
     .tip__tag {
       margin-right: 10px;
       padding: 2px 10px;
-      background-color: #EBF7FA;
-      color: #046ECA;
-      box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+      background-color: var(--el-color-primary-light-9);
+      color: $color-primary;
+      box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
       border-radius: 12px;
     }
   }
+
   .tip__description {
     margin-top: 14px;
-    color: #666;
+    color: var(--el-text-color-regular);
 
     &.tip__description--non {
-      color: #999;
+      color: var(--el-color-info);
     }
   }
 }
+
 .detection-tag-blue, .detection-tag-red, .detection-tag-gray, .detection-tag-status0, .detection-tag-status1 {
   display: inline-block;
   border-radius: 10px;
@@ -76,35 +86,35 @@
 .detection-tag-blue {
   background: rgba(56, 172, 210, 0.10);
   box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
-  color: #046ECA;
+  color: $color-primary;
 }
 
 .detection-tag-red {
   background: rgba(226, 97, 84, 0.12);
-  color: #E26154;
+  color: var(--el-color-danger);
 }
 
 .detection-tag-gray {
   background: rgba(113, 113, 113, 0.12);
-  color: #717171;
+  color: var(--el-text-color-regular);
 }
 
 .detection-tag-status0 {
   font-weight: 500;
   background: rgba(113, 113, 113, 0.12);
-  color: #717171;
+  color: var(--el-text-color-regular);
   padding: 0 10px;
 }
 
 .detection-tag-status1 {
   font-weight: 500;
   background: rgba(126, 159, 84, 0.12);
-  color: #7E9F54;
+  color: var(--el-color-success);
   padding: 0 10px;
 }
 
 .detection-table-library {
   font-size: 12px;
-  color: #046ECA;
+  color: $color-primary;
   font-weight: 400;
 }
diff --git a/src/assets/css/components/views/detections/detection-tools.scss b/src/assets/css/components/views/detections/detection-tools.scss
index a5e97b10..06a48b05 100644
--- a/src/assets/css/components/views/detections/detection-tools.scss
+++ b/src/assets/css/components/views/detections/detection-tools.scss
@@ -1,23 +1,29 @@
+$color-white: var(--el-color-white);
+
 .top-tools__left {
   display: flex;
   align-items: center;
   flex-direction: row;
 
+  .btn__width {
+    width: 72px !important;
+  }
+
   .top-tool-btn {
     cursor: pointer;
     height: 28px;
     width: 28px;
-    border: 1px solid #DEDEDE;
+    border: 1px solid var(--el-color-info-light-7);
     outline: none;
     border-radius: 2px;
-    background-color: #F9F9F9;
+    background-color: var(--el-fill-color-lighter);
     transition: background-color linear .1s;
     font-size: 12px;
     font-weight: 500;
     //font-family: $fontFamily !important;
     i {
       font-size: 14px;
-      color: #575757;
+      color: var(--el-text-color-regular);
       margin-right: 4px;
     }
   }
@@ -25,73 +31,71 @@
   .top-tool-btn:disabled {
     cursor: not-allowed;
     opacity: 0.66;
-
-    i {
-
-    }
   }
 
   .top-tool-btn:hover:not(.cn-btn-disabled) {
-    border: 1px solid #DEDEDE;
-    background-color: #EBF1F4;
+    border: 1px solid var(--el-color-info-light-7);
+    background-color: var(--cn-bg-color-light);
   }
 
   .top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
-    background-color: #E0E7EA;
-    border: 1px solid #DEDEDE;
+    background-color: var(--el-color-primary-light-9);
+    border: 1px solid var(--el-color-info-light-7);
 
     i {
-      color: #575757;
+      color: var(--el-text-color-regular);
     }
   }
 
   .top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
-    background-color: #EBF1F4;
-    border-color: #FFC4B9;
+    background-color: var(--cn-bg-color-light);
+    //border-color: #FFC4B9;
+    border-color: var(--el-color-danger-light-5);
 
     i {
-      color: #F0745A;
+      //color: #F0745A;
+      color: var(--el-color-danger);
     }
   }
 
   .top-tool-btn--create {
-    background-color: #38ACD2 !important;
+    background-color: var(--el-color-business) !important;
     border-color: #2E88A6 !important;
-    color: #FFFFFF;
+    color: $color-white;
 
     i {
-      color: #FFFFFF;
+      color: $color-white;
     }
   }
 
   .top-tool-btn--create:hover {
     background-color: #57B8D9 !important;
     border-color: #2E88A6 !important;
-    color: #FFFFFF;
+    color: $color-white;
 
     i {
-      color: #FFFFFF;
+      color: $color-white;
     }
   }
 
   .top-tool-btn--create:focus {
     background-color: #31A5CD !important;
     border-color: #2E88A6 !important;
-    color: #FFFFFF !important;
+    color: $color-white !important;
 
     i {
-      color: #FFFFFF !important;
+      color: $color-white !important;
     }
   }
 
   .top-tool-btn--create:disabled {
     opacity: 0.66;
-    background-color: #38ACD2 !important;
+    background-color: var(--el-color-business) !important;
     border-color: #2E88A6 !important;
-    color: #FFFFFF;
+    color: $color-white;
 
     i {
-      color: #FFFFFF;
+      color: $color-white;
     }
   }
 
@@ -127,8 +131,17 @@
     display: flex;
     width: 100%;
 
+    .search__input {
+      height: 28px !important;
+    }
+
+    .search__btn {
+      border-radius: 0 2px 2px 0 !important;
+    }
+
     .el-input--small {
       line-height: 27px;
+
       .el-input__wrapper {
         height: 28px !important;
         border-radius: 2px 0 0 2px !important;
diff --git a/src/assets/css/components/views/detections/detections.scss b/src/assets/css/components/views/detections/detections.scss
index b2d52ec7..97344347 100644
--- a/src/assets/css/components/views/detections/detections.scss
+++ b/src/assets/css/components/views/detections/detections.scss
@@ -1,6 +1,6 @@
 .detection__event-severity-bar {
   flex: 0 0 175px;
-  background-color: white;
+  background-color: var(--el-fill-color-blank);
   width: 100%;
   margin-bottom: 10px;
 }
@@ -19,6 +19,59 @@
   }
 }
 
+.detection {
+  padding: 20px;
+  height: 100%;
+  overflow: auto;
+
+  .detection-title {
+    font-family: NotoSansHans-Black;
+    line-height: 24px;
+    font-size: 24px;
+    color: var(--el-text-color-primary);
+    font-weight: 900;
+    display: flex;
+    flex-direction: column;
+
+    .detection-title-label {
+      font-family: NotoSansSChineseRegular;
+      font-size: 12px;
+      color: var(--el-text-color-regular);
+      letter-spacing: 0;
+      line-height: 18px;
+      font-weight: 400;
+      margin-top: 5px;
+    }
+  }
+
+  .detection-content {
+    margin-top: 15px;
+    width: 100%;
+    height: calc(100% - 96px);
+    display: flex;
+
+    .detection-filter {
+      width: 320px;
+      height: calc(100% + 34px);
+      background: var(--el-fill-color-blank);
+      border: 1px solid var(--el-border-color-light);
+      border-radius: var(--el-border-radius-base);
+      margin-right: 20px;
+    }
+
+    .detection-block {
+      width: calc(100% - 340px);
+
+      .detection-table {
+        width: 100%;
+        height: calc(100% - 44px);
+        border-radius: var(--el-border-radius-base);
+        margin-top: 12px;
+      }
+    }
+  }
+}
+
 .detection__list {
   display: flex;
   flex-direction: column;
diff --git a/src/assets/css/components/views/report/report.scss b/src/assets/css/components/views/report/report.scss
index 906ded73..ae8f7193 100644
--- a/src/assets/css/components/views/report/report.scss
+++ b/src/assets/css/components/views/report/report.scss
@@ -80,7 +80,7 @@
             background: #fff; //盖住fixed产生的阴影
             :deep .is-leaf {
               color: #1b2e3b;
-              background: #ebeef5;
+              background: var(--el-border-color-lighter);
             }
             .el-range-editor--small.el-input__wrapper {
               height: 32px;
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 547be9ad..a6cd33b5 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -231,32 +231,32 @@ export const eventSeverity = {
   info: 'info'
 }
 export const eventSeverityColor = {
-  critical: '#D84C4C',
-  high: '#FE845D',
-  medium: '#FFB65A',
-  low: '#FFD82D',
-  info: '#D1BD50'
+  critical: 'var(--cn-color-critical)',
+  high: 'var(--cn-color-high)',
+  medium: 'var(--cn-color-medium)',
+  low: 'var(--cn-color-low)',
+  info: 'var(--cn-color-info)'
 }
 export const riskLevelColor = {
-  5: '#D84C4C',
-  4: '#FE845D',
-  3: '#FFB65A',
-  2: '#FFD82D',
-  1: '#D1BD50'
+  5: 'var(--cn-color-critical)',
+  4: 'var(--cn-color-high)',
+  3: 'var(--cn-color-medium)',
+  2: 'var(--cn-color-low)',
+  1: 'var(--cn-color-info)'
 }
 export const riskLevelColor1 = {
-  'High Risk': '#D84C4C',
-  Suspicious: '#FE845D',
-  'Moderate Risk': '#FFB65A',
-  'Low Risk': '#FFD82D',
-  Trustworthy: '#D1BD50'
+  'High Risk': 'var(--cn-color-critical)',
+  Suspicious: 'var(--cn-color-high)',
+  'Moderate Risk': 'var(--cn-color-medium)',
+  'Low Risk': 'var(--cn-color-low)',
+  Trustworthy: 'var(--cn-color-info)'
 }
 export const eventSeverityColor1 = {
-  Critical: '#D84C4C',
-  High: '#FE845D',
-  Medium: '#FFB65A',
-  Low: '#FFD82D',
-  Info: '#D1BD50'
+  Critical: 'var(--cn-color-critical)',
+  High: 'var(--cn-color-high)',
+  Medium: 'var(--cn-color-medium)',
+  Low: 'var(--cn-color-low)',
+  Info: 'var(--cn-color-info)'
 }
 export const securityType = {
   commandAndControl: 'common and control',
@@ -2713,27 +2713,27 @@ export const securityLevel = [
   {
     value: 'critical',
     label: 'overall.critical',
-    color: '#D84C4C'
+    color: 'var(--cn-color-critical)'
   },
   {
     value: 'high',
     label: 'overall.high',
-    color: '#FE845D'
+    color: 'var(--cn-color-high)'
   },
   {
     value: 'medium',
     label: 'overall.medium',
-    color: '#FFB65A'
+    color: 'var(--cn-color-medium)'
   },
   {
     value: 'low',
     label: 'overall.low',
-    color: '#FFD82D'
+    color: 'var(--cn-color-low)'
   },
   {
     value: 'info',
     label: 'overall.info',
-    color: '#D1BD50'
+    color: 'var(--cn-color-info)'
   }
 ]
 
diff --git a/src/views/detections/detectionPolicies/Index.vue b/src/views/detections/detectionPolicies/Index.vue
index cfa20151..ec529fd8 100644
--- a/src/views/detections/detectionPolicies/Index.vue
+++ b/src/views/detections/detectionPolicies/Index.vue
@@ -21,7 +21,7 @@
             :disableEdit="disableEdit"
             :disableDelete="disableDelete"/>
 
-        <div class="detection-table" style="position: relative">
+        <div class="detection-table">
           <loading :loading="loading"></loading>
           <detection-table
               ref="dataTable"
@@ -126,14 +126,14 @@ export default {
       myCellStyle: {
         padding: '4px 0px',
         'font-size': '12px',
-        color: '#353636',
+        color: 'var(--el-text-color-primary)',
         'font-weight': 400
       },
       myHeaderCellStyle: {
         padding: '4px 0px',
-        background: '#F5F8FA',
+        background: 'var(--el-fill-color-light)',
         'font-size': '12px',
-        color: '#353636',
+        color: 'var(--el-text-color-primary)',
         'font-weight': 500
       }
     }
@@ -347,58 +347,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.detection {
-  padding: 20px;
-  height: 100%;
-  overflow: auto;
-
-  .detection-title {
-    font-family: NotoSansHans-Black;
-    line-height: 24px;
-    font-size: 24px;
-    color: #353636;
-    font-weight: 900;
-    display: flex;
-    flex-direction: column;
-
-    .detection-title-label {
-      font-family: NotoSansSChineseRegular;
-      font-size: 12px;
-      color: #717171;
-      letter-spacing: 0;
-      line-height: 18px;
-      font-weight: 400;
-      margin-top: 5px;
-    }
-  }
-
-  .detection-content {
-    margin-top: 15px;
-    width: 100%;
-    height: calc(100% - 96px);
-    display: flex;
-
-    .detection-filter {
-      width: 320px;
-      height: calc(100% + 34px);
-      background: #FFFFFF;
-      border: 1px solid rgba(226, 229, 236, 1);
-      border-radius: 4px;
-      margin-right: 20px;
-    }
-
-    .detection-block {
-      width: calc(100% - 340px);
-
-      .detection-table {
-        width: 100%;
-        height: calc(100% - 44px);
-        border-radius: 4px;
-        margin-top: 12px;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/views/detections/detectionPolicies/PolicyDrawer.vue b/src/views/detections/detectionPolicies/PolicyDrawer.vue
index f1a9f058..d531c2d1 100644
--- a/src/views/detections/detectionPolicies/PolicyDrawer.vue
+++ b/src/views/detections/detectionPolicies/PolicyDrawer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="detection-drawer" style="height: 100vh;overflow: scroll;padding-bottom: 90px">
+  <div class="detection-drawer">
     <div class="drawer-basic">
       <div class="drawer-basic-header">
         <div class="drawer-basic-id">
@@ -91,11 +91,10 @@
               <div class="drawer-basic-function">
                 <div class="detection-drawer-title">{{ $t('detections.filters') }}</div>
                 <span class="detection-tag-blue">Source Port</span>
-                <span style="margin: 0 6px;">{{ $t('detections.equal') }}</span><span>19890</span>
+                <span class="drawer-title__equal">{{ $t('detections.equal') }}</span><span>19890</span>
               </div>
 
-              <div class="drawer-basic-function" v-for="item in severityList" :key="item.severity"
-                   style="padding-bottom: 0">
+              <div class="drawer-basic-function padding-b-0" v-for="item in severityList" :key="item.severity">
                 <div class="detection-drawer-title">
                   <div class="detection__icon" :style="`background-color: ${eventSeverityColor[item.severity]}`"></div>
                   <div>{{ toUpperCaseByString(item.severity) }}</div>
@@ -112,16 +111,16 @@
       </el-collapse>
     </div>
 
-    <div class="detection-drawer-collapse" style="margin: 20px 0">
+    <div class="detection-drawer-collapse detection-drawer-collapse__margin">
       <el-collapse v-model="activeTrigger">
         <el-collapse-item :title="$t('detection.create.trigger')" name="trigger">
           <div class="drawer-collapse-content" v-if="language===EN">
             <div class="drawer-collapse-trigger">
               Triggered when conditions occur at least
-              <span style="color: #046ECA">
+              <span class="trigger__value">
                 {{ atLeast }} {{ times }}
               </span> in
-              <span style="color: #046ECA">
+              <span class="trigger__value">
                 {{ getNumberFromStr($_.get(detailData, 'ruleTriggerObj.interval', '0')) || '-' }}
                 {{ $_.get(detailData, 'ruleTriggerObj.intervalVal', '-') || '-' }}
               </span>
@@ -138,11 +137,11 @@
           <div class="drawer-collapse-content" v-if="language===ZH">
             <div class="drawer-collapse-trigger">
               当条件为
-              <span style="color: #046ECA">
+              <span class="trigger__value">
                 {{ getNumberFromStr($_.get(detailData, 'ruleTriggerObj.interval', '0')) || '-' }}
                 {{ changeValueToLabel(detailData.ruleTriggerObj) }}
               </span>内至少出现
-              <span style="color: #046ECA">
+              <span class="trigger__value">
                 {{ $_.get(detailData, 'ruleTriggerObj.atLeast', '-') || '-' }} 次
               </span>时触发
             </div>
diff --git a/src/views/detections/detectionPolicies/PolicyFilter.vue b/src/views/detections/detectionPolicies/PolicyFilter.vue
index 6d635a99..48788754 100644
--- a/src/views/detections/detectionPolicies/PolicyFilter.vue
+++ b/src/views/detections/detectionPolicies/PolicyFilter.vue
@@ -7,7 +7,7 @@
       <div>
         <div class="new-filter-content-title">{{ $t('overall.status') }}</div>
         <div class="new-filter-content-content">
-          <el-checkbox-group v-model="checkStatus" @change="onChangeCategory" style="display: flex;flex-direction: column">
+          <el-checkbox-group v-model="checkStatus" @change="onChangeCategory" class="content__display">
             <el-checkbox v-for="item in statusList" :key="item.name" class="new-filter-content-checkbox" :label="item.status">
               <div>{{ item.name }}</div>
             </el-checkbox>
@@ -29,7 +29,7 @@
       <div>
         <div class="new-filter-content-title">{{ $t('overall.type') }}</div>
         <div class="new-filter-content-content">
-          <el-checkbox-group v-model="checkEventType" @change="onChangeCategory" style="display: flex;flex-direction: column">
+          <el-checkbox-group v-model="checkEventType" @change="onChangeCategory" class="content__display">
             <el-checkbox v-for="item in eventTypeList" :key="item.name" class="new-filter-content-checkbox" :label="item.name">
               {{ item.name }}
             </el-checkbox>
diff --git a/src/views/detections/detectionPolicies/PolicyForm.vue b/src/views/detections/detectionPolicies/PolicyForm.vue
index 76c85e38..9d48fbd5 100644
--- a/src/views/detections/detectionPolicies/PolicyForm.vue
+++ b/src/views/detections/detectionPolicies/PolicyForm.vue
@@ -26,7 +26,7 @@
 
       <!--第二步：Rule Definition-->
       <div class="detection-form-collapse">
-        <el-collapse v-model="activeNames" style="position: relative;">
+        <el-collapse v-model="activeNames" class="rule-definition">
           <el-collapse-item name="2">
             <template #title>
               <div class="form-collapse-header">
diff --git a/src/views/detections/detectionPolicies/PolicyTable.vue b/src/views/detections/detectionPolicies/PolicyTable.vue
index 9110b011..f2c78b3e 100644
--- a/src/views/detections/detectionPolicies/PolicyTable.vue
+++ b/src/views/detections/detectionPolicies/PolicyTable.vue
@@ -59,7 +59,7 @@
           {{ changeCategory(scope.row[item.prop]) }}
         </template>
         <template v-else-if="item.prop === 'description'">
-          <div style="padding-right: 20px">{{ scope.row[item.prop] }}</div>
+          <div class="padding-r-20">{{ scope.row[item.prop] }}</div>
         </template>
         <template v-else-if="item.prop === 'dimensions' && scope.row[item.prop]">
           <span class="detection-tag-blue">{{ scope.row[item.prop] }}</span>
@@ -83,7 +83,7 @@
                   <div
                       class="tip__tag"
                       v-if="$_.get(scope.row.ruleConfigObj, 'knowledgeBase.color')"
-                      :style="{backgroundColor: $_.get(scope.row.ruleConfigObj, 'knowledgeBase.color'), color: 'white'}"
+                      :style="{backgroundColor: $_.get(scope.row.ruleConfigObj, 'knowledgeBase.color'), color: 'var(--el-color-white)'}"
                   >{{colorText($_.get(scope.row.ruleConfigObj, 'knowledgeBase.color'))}}</div>
                 </div>
                 <div class="tip__description" :class="{ 'tip__description--non': !($_.get(scope.row.ruleConfigObj, 'knowledgeBase.description')) }">
@@ -239,7 +239,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-
-</style>
diff --git a/src/views/detections/detectionPolicies/PolicyTools.vue b/src/views/detections/detectionPolicies/PolicyTools.vue
index f2238fe3..9525ed12 100644
--- a/src/views/detections/detectionPolicies/PolicyTools.vue
+++ b/src/views/detections/detectionPolicies/PolicyTools.vue
@@ -5,9 +5,8 @@
           id="knowledge-base-add"
           v-if="hasPermission('createDetectionPolicy')"
           :title="$t('knowledgeBase.createKnowledgeBase')"
-          class="top-tool-btn margin-r-10 top-tool-btn--create"
-          @click="onCreate"
-          style="width:72px;">
+          class="top-tool-btn margin-r-10 top-tool-btn--create btn__width"
+          @click="onCreate">
         <i class="cn-icon-xinjian cn-icon"></i>
         <span>{{ $t('overall.create') }}</span>
       </button>
@@ -17,9 +16,8 @@
           v-if="hasPermission('editDetectionPolicy')"
           id="knowledge-base-edit"
           :title="$t('knowledgeBase.editKnowledgeBase')"
-          class="top-tool-btn margin-r-10"
-          @click="onEdit"
-          style="width:72px;">
+          class="top-tool-btn margin-r-10 btn__width"
+          @click="onEdit">
         <i class="cn-icon-edit cn-icon" ></i>
         <span>{{$t('overall.edit')}}</span>
       </button>
@@ -29,21 +27,18 @@
           v-if="hasPermission('deleteDetectionPolicy')"
           id="knowledge-base-delete"
           :title="$t('knowledgeBase.deleteKnowledgeBase')"
-          class="top-tool-btn margin-r-10"
-          @click="onDelete"
-          style="width:72px;">
+          class="top-tool-btn margin-r-10 btn__width"
+          @click="onDelete">
         <i class="cn-icon-delete cn-icon"></i>
         <span>{{ $t('overall.delete') }}</span>
       </button>
 
       <div class="top-tool-search margin-l-10">
-        <el-input v-model="keyWord" size="small" style="height: 28px;" @keyup.enter="onSearch"></el-input>
+        <el-input v-model="keyWord" size="small" class="search__input" @keyup.enter="onSearch"></el-input>
         <button
-            class="top-tool-btn top-tool-btn--search"
-            style="border-radius: 0 2px 2px 0 !important;"
+            class="top-tool-btn top-tool-btn--search search__btn"
             @click="onSearch">
           <el-icon><Search /></el-icon>
-<!--          <i class="el-icon-search"></i>-->
         </button>
       </div>
     </div>
@@ -107,7 +102,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-
-</style>