CN-1594 feat: right-box调整

19 files changed, 117 insertions, 419 deletions

diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
index 03d69024..108c64a7 100644
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -40,10 +40,6 @@ body {
 .fade-leave-to {
   opacity: 0;
 }
-/* 调整表单错误提示上边距 */
-.el-form-item__error {
-  padding-top: 0 !important;
-}
 
 /* 请求报错样式关于popover的修改 */
 .error-popover {
diff --git a/src/assets/css/common/right-box-common.scss b/src/assets/css/common/right-box-common.scss
index 3876f5a7..0ec3e862 100644
--- a/src/assets/css/common/right-box-common.scss
+++ b/src/assets/css/common/right-box-common.scss
@@ -1,5 +1,3 @@
-$border-color-light: var(--el-border-color-light);
-$color-primary: var(--el-color-business);
 $border-radius-small: 2px;
 
 .common-right-box {
@@ -29,7 +27,7 @@ $border-radius-small: 2px;
     align-items: center;
     height: 60px;
     padding: 0 20px;
-    border-bottom: 1px solid $border-color-light;
+    border-bottom: 1px solid var(--el-border-color-light);
 
     .header__title {
       font-size: 16px;
@@ -51,62 +49,6 @@ $border-radius-small: 2px;
     overflow-x: hidden;
     overflow-y: auto;
 
-    .el-textarea__inner {
-      padding: 5px 70px 4px 15px;
-    }
-
-    .container__form-width.container__form {
-      .input-box {
-        .el-textarea {
-          .el-textarea__inner {
-            width: 530px;
-            height: 32px;
-            padding: 5px 70px 4px 10px;
-          }
-
-          .el-input__count {
-            right: -40px;
-            line-height: 29px;
-            height: 25px;
-          }
-        }
-      }
-    }
-
-    .el-form-item__content {
-      .input-box {
-        .el-textarea {
-          .el-textarea__inner {
-            width: 517px;
-            height: 32px;
-            padding: 5px 70px 4px 10px;
-          }
-
-          .el-input__count {
-            right: -40px;
-            line-height: 29px;
-            height: 25px;
-          }
-        }
-      }
-    }
-
-    .form-row-item {
-      .input-box {
-        .el-textarea {
-          .el-textarea__inner {
-            width: 466px;
-            height: 32px;
-            padding: 5px 70px 4px 10px;
-          }
-
-          .el-input__count {
-            right: 0;
-          }
-        }
-      }
-    }
-
     .el-form-item {
       .el-input__count {
         line-height: 29px;
@@ -114,25 +56,12 @@ $border-radius-small: 2px;
       }
     }
 
-    .el-form-item {
-      .el-input--small.not-fixed-height {
-        height: 32px;
-
-        .el-input__count {
-          line-height: 29px;
-          height: 25px;
-        }
-      }
-    }
-
     .el-input__inner, .el-textarea__inner {
-      padding: 0 10px;
       border-radius: $border-radius-small;
-      border: 1px solid $border-color-light;
     }
 
     .el-textarea__inner {
-      padding: 5px 70px 4px 15px;
+      padding-right: 70px;
     }
 
     .el-form {
@@ -148,14 +77,6 @@ $border-radius-small: 2px;
           color: var(--el-text-color-regular);
         }
 
-        .el-input__inner:hover {
-          border-color: darken(#e4e7ed, 10%); // 使用$border-color-light会提示识别不到颜色
-        }
-
-        .el-input__inner:focus {
-          border-color: darken(#e4e7ed, 20%);
-        }
-
         .el-form-item__label {
           padding-bottom: 2px;
         }
@@ -198,18 +119,6 @@ $border-radius-small: 2px;
         }
       }
 
-      /*.form__create-btn {
-        margin-bottom: 20px;
-        width: 300px;
-        height: 28px;
-        border: 1px solid lighten($color-primary, 60%);
-        border-radius: $border-radius-small;
-        background-color: lighten($color-primary, 95%);
-
-        i {
-          color: $color-primary;
-        }
-      }*/
       .form__flex-container {
         display: flex;
         justify-content: center;
@@ -251,33 +160,36 @@ $border-radius-small: 2px;
       min-width: 74px;
       padding: 0 15px;
       color: var(--el-color-white);
-      //background-color: $--color-primary;
       background-color: var(--el-color-business);
-      border: none;
+      border: 1px solid var(--el-color-business-dark-2);
       border-radius: var(--el-border-radius-base);
       outline: none;
       font-size: 14px;
       cursor: pointer;
-      transition: background-color linear var(--el-transition-duration-fast), color linear .1s;
+      transition: all linear .1s;
     }
 
     .footer__btn:hover:not(.footer__btn--disabled) {
-      background-color: lighten(#38ACD2, 10%);
+      background-color: var(--el-color-business-light-2);
+    }
+    .footer__btn:focus:not(.footer__btn--disabled) {
+      background-color: var(--el-color-business-dark-1);
     }
 
-    .footer__btn--light {
+    .footer__btn.footer__btn--light {
       background-color: var(--el-fill-color-blank);
       border: 1px solid var(--el-color-info-light-7);
       color: var(--el-text-color-primary);
     }
 
     .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
-      background-color: var(--el-fill-color-blank);
-      border-color: lighten(#38ACD2, 40%);
-      color: $color-primary;
+      background-color: var(--el-fill-color);
+    }
+    .footer__btn.footer__btn--light:focus:not(.footer__btn--disabled) {
+      background-color: var(--el-fill-color-darker);
     }
 
-    .footer__btn--disabled {
+    .footer__btn.footer__btn--disabled {
       opacity: .6;
       cursor: default;
     }
@@ -338,36 +250,7 @@ $border-radius-small: 2px;
     justify-content: space-between;
   }
 
-  .form-item--end-with-btn { // 末尾留出btn宽度空间的form item
-
-  }
-
   .el-form-item__content .el-autocomplete .el-input-group {
     vertical-align: unset;
   }
-
-  .el-input__wrapper {
-    border-radius: $border-radius-small;
-    height: 32px !important;
-    line-height: 32px !important;
-    //box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
-    box-shadow: 0 0 0 1px var(--el-border-color-light) inset;
-  }
-
-  .el-input__inner, .el-textarea__inner {
-    border: none !important;
-  }
-
-  .el-select__wrapper {
-    height: 32px;
-    line-height: 32px;
-  }
-
-  .el-switch {
-    --el-switch-on-color: #699DC9;
-  }
-
-  .el-textarea__inner {
-    font-size: 12px;
-  }
 }
diff --git a/src/assets/css/components/components/advancedSearch/advanced-search2.scss b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
index bef80b1a..7949d48c 100644
--- a/src/assets/css/components/components/advancedSearch/advanced-search2.scss
+++ b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
@@ -181,6 +181,7 @@ $color-primary: var(--el-color-primary);
         color: var(--el-text-color-primary);
         font-weight: bold;
         cursor: text;
+
         .el-select {
           min-width: 210px !important;
           min-height: 20px !important;
@@ -192,9 +193,6 @@ $color-primary: var(--el-color-primary);
           margin-top: -4px;
           cursor: pointer;
         }
-        .el-select__wrapper.is-focused {
-          box-shadow: 0 0 0 1px var(--el-color-business) inset !important;
-        }
       }
       .condition__operator {
         color: $color-primary;
@@ -229,10 +227,3 @@ $color-primary: var(--el-color-primary);
   min-width: 120px !important;
   padding: 8px 10px !important;
 }
-.el-input__wrapper.is-focus {
-  box-shadow: 0 0 0 1px var(--el-color-business) inset !important;
-}
-.el-select-dropdown__item.is-selected {
-  //color: #2c72c6 !important;
-  color: var(--el-color-primary-light-3) !important;
-}
diff --git a/src/assets/css/components/components/layout/layout.scss b/src/assets/css/components/components/layout/layout.scss
index 59cfd7a0..c6117cf5 100644
--- a/src/assets/css/components/components/layout/layout.scss
+++ b/src/assets/css/components/components/layout/layout.scss
@@ -1,8 +1,8 @@
 .cn-container {
   height: calc(100% - 100px);
-  //background-color: $--content-right-background-color;
-  background-color: var(--bg-color);
+  background-color: var(--el-fill-color-blank);
   width: 100%;
+
   &>div {
     height: 100%;
   }
@@ -17,7 +17,7 @@
   .cn-header__banner {
     display: flex;
     height: 60px;
-    background-color: #233447;
+    background-color: #233447; // TODO 暂无变量
 
     .banner__left {
       display: flex;
@@ -34,13 +34,13 @@
         border-radius: 4px;
         margin-left: 14px;
         margin-right: 10px;
-        color: #F7F7F7;
+        color: var(--el-fill-color-lighter);
         cursor: pointer;
         background-color: transparent;
         transition: all linear var(--el-transition-duration);
 
         &.shrink-button--collapse {
-          background-color: #334355;
+          background-color: var(--el-text-color-primary);
         }
       }
     }
@@ -125,7 +125,7 @@
             font-size: 14px;
             font-weight: bolder;
             color: var(--el-text-color-primary);
-            border-bottom: 1px dashed #D8D8D8;
+            border-bottom: 1px dashed var(--el-border-color);
           }
           .middle-menus__body {
             display: flex;
@@ -158,16 +158,17 @@
     display: flex;
 
     .el-dropdown {
-      color: #fff;
+      color: var(--el-fill-color-blank);
       height: 40px;
       line-height: 60px;
       text-align: center;
       margin: 0 20px 0 10px;
     }
     .login-user {
-      color: #fff;
+      color: var(--el-color-white);
+
       i {
-        color: #fff;
+        color: var(--el-color-white);
         font-size: 12px;
       }
     }
@@ -256,6 +257,7 @@
 .search-input{
   width: 100%;
   padding: 4px 4px 0 4px;
+
   .el-input__inner{
     border-radius: 2px;
     font-size: 12px;
diff --git a/src/assets/css/components/components/rightBox/report/reportBox.scss b/src/assets/css/components/components/rightBox/report/reportBox.scss
index 0b5420c2..3ee79aaf 100644
--- a/src/assets/css/components/components/rightBox/report/reportBox.scss
+++ b/src/assets/css/components/components/rightBox/report/reportBox.scss
@@ -1,6 +1,3 @@
-$color-light: var(--el-border-color-light);
-$color-primary1: #1890FF;
-
 .right-box.right-box-report {
   .right-box__container {
     .container__form {
@@ -32,20 +29,20 @@ $color-primary1: #1890FF;
           height: 32px;
           width: 160px;
           text-align: center;
-          border: 1px solid $color-light;
+          border: 1px solid var(--el-border-color-light);
           border-right: none;
           line-height: 32px;
           color: var(--el-text-color-primary);
         }
 
         .enable-tabs:nth-of-type(4) {
-          border-right: 1px solid $color-light;
+          border-right: 1px solid var(--el-border-color-light);
         }
 
         .enable-tabs.active {
-          border: 1px solid $color-primary1;
+          border: 1px solid var(--el-color-primary);
           border-radius: 2px;
-          color: $color-primary1;
+          color: var(--el-color-primary);
         }
 
         .enable-tabs.disable {
@@ -63,20 +60,20 @@ $color-primary1: #1890FF;
             height: 32px;
             width: 290px;
             text-align: center;
-            border: 1px solid $color-light;
+            border: 1px solid var(--el-border-color-light);
             border-right: none;
             line-height: 32px;
             color: var(--el-text-color-primary);
           }
 
           .enable-month-tabs:nth-of-type(2) {
-            border-right: 1px solid $color-light;
+            border-right: 1px solid var(--el-border-color-light);
           }
 
           .enable-month-tabs.active {
-            border: 1px solid $color-primary1;
+            border: 1px solid var(--el-color-primary);
             border-radius: 2px;
-            color: $color-primary1;
+            color: var(--el-color-primary);
           }
 
           .enable-month-tabs.disable {
@@ -107,17 +104,13 @@ $color-primary1: #1890FF;
         color: var(--el-text-color-regular);
       }
 
-      .enable-month-all, .enable-month-data-tabs {
-        display: flex;
-      }
-
-      .enable-month-week {
+      .enable-tabs-weekly, .enable-month-all, .enable-month-data-tabs, .enable-month-week {
         display: flex;
+        margin-top: 10px;
       }
 
       .el-input-single {
         width: 140px;
-        height: 32px;
         margin-top: 10px;
 
         .el-input__inner {
@@ -134,24 +127,13 @@ $color-primary1: #1890FF;
       }
 
       .right-box__select-single {
-        height: 32px;
         margin: 10px 0 0 10px;
       }
 
       .el-input__wrapper {
-        height: 32px !important;
-        padding: 1px 11px !important;
         border-radius: 2px;
       }
 
-      .el-input__inner {
-        padding: 0;
-      }
-
-      .el-form-item__content {
-        line-height: 40px !important;
-      }
-
       .report__display {
         width: 100%;
         display: flex;
@@ -169,40 +151,23 @@ $color-primary1: #1890FF;
         }
       }
 
-      .report__margin-t {
-        margin-top: 0.3125rem;
-      }
-
       .report__params-vertical {
         vertical-align: unset;
       }
     }
 
-    .el-input__inner {
-      border: none;
-    }
-
-    .el-select--small .el-select__wrapper {
-      padding: 0 10px;
-      min-height: 32px !important;
-      line-height: 32px !important;
-      margin-top: -2px;
-      border-radius: 2px;
-    }
   }
 
   .right-box__select--param {
     .el-select__prefix, .el-input__prefix {
-      left: 0;
       background-color: var(--el-border-color-extra-light);
       color: var(--el-color-info);
       padding: 0 15px;
-      border: 1px solid var(--el-border-color);
       border-radius: 2px 0 0 2px;
     }
 
     .el-select__wrapper {
-      padding-left: 0 !important;
+      padding-left: 1px !important;
     }
   }
 }
diff --git a/src/assets/css/components/views/administration/License.scss b/src/assets/css/components/views/administration/License.scss
index 558ee961..65031333 100644
--- a/src/assets/css/components/views/administration/License.scss
+++ b/src/assets/css/components/views/administration/License.scss
@@ -63,7 +63,6 @@
 
       .el-form-item__content {
         color: var(--el-text-color-primary) !important;
-        font-weight: 400;
         font-size: 14px;
       }
     }
diff --git a/src/assets/css/components/views/detections/detection-create/detection-form-setting.scss b/src/assets/css/components/views/detections/detection-create/detection-form-setting.scss
index 9b9d4246..2ceb0f12 100644
--- a/src/assets/css/components/views/detections/detection-create/detection-form-setting.scss
+++ b/src/assets/css/components/views/detections/detection-create/detection-form-setting.scss
@@ -13,11 +13,6 @@ $color-info-light: var(--el-color-info-light-7);
     margin-top: -4px;
   }
 
-  .el-select__wrapper, .el-input__wrapper {
-    min-height: 24px !important;
-    height: 24px !important;
-  }
-
   .el-switch__label.is-active {
     color: $color-primary;
   }
@@ -27,15 +22,8 @@ $color-info-light: var(--el-color-info-light-7);
     line-height: 14px;
     padding: 0;
     margin-bottom: 12px;
-    font-family: NotoSansHans-Medium;
     font-size: 14px;
     color: $color-primary;
-    font-weight: 500;
-  }
-
-  .el-form-item__content {
-    height: 24px;
-    line-height: 24px;
   }
 
   .block-mode {
@@ -67,19 +55,15 @@ $color-info-light: var(--el-color-info-light-7);
       flex-direction: column;
 
       .block-mode-title {
-        font-family: NotoSansSChineseRegular;
         font-size: 14px;
         color: $color-primary;
-        font-weight: 400;
         line-height: 14px;
       }
 
       .block-mode-content {
-        font-family: NotoSansSChineseRegular;
         font-size: 12px;
         color: $color-regular;
         line-height: 15px;
-        font-weight: 400;
         margin: 10px 0;
       }
 
@@ -90,10 +74,8 @@ $color-info-light: var(--el-color-info-light-7);
         text-align: center;
         background: $fill-color-light;
         border-radius: 2px;
-        font-family: NotoSansHans-Medium;
         font-size: 12px;
         color: $color-primary;
-        font-weight: 500;
         cursor: pointer;
         transition: all var(--el-transition-duration-fast);
       }
@@ -106,16 +88,13 @@ $color-info-light: var(--el-color-info-light-7);
   }
 
   .block-title {
-    font-family: NotoSansHans-Medium;
     font-size: 14px;
     line-height: 14px;
     color: $color-primary;
-    font-weight: 500;
     margin-bottom: 12px;
   }
 
   .block-title1 {
-    font-family: NotoSansHans-Medium;
     font-size: 12px;
     line-height: 12px;
     color: $color-primary;
@@ -125,23 +104,6 @@ $color-info-light: var(--el-color-info-light-7);
 
   .form-setting__select {
     width: 620px !important;
-
-    .el-input--small .el-input__inner {
-      height: 24px !important;
-      line-height: 24px !important;
-    }
-  }
-
-  .form-setting__input {
-    &.el-input {
-      height: 24px !important;
-      line-height: 24px !important;
-    }
-
-    .el-input__inner {
-      height: 24px;
-      line-height: 24px;
-    }
   }
 
   .form-setting__textarea {
@@ -151,10 +113,8 @@ $color-info-light: var(--el-color-info-light-7);
   }
 
   .el-switch__label, .form-setting__block .el-switch__label {
-    font-family: NotoSansSChineseRegular;
     font-size: 14px;
     color: $color-primary;
-    font-weight: 400;
   }
 
   .block-dimension {
@@ -172,18 +132,11 @@ $color-info-light: var(--el-color-info-light-7);
       background: var(--el-fill-color-darker);
       border-radius: 2px;
       opacity: 0.6;
-      font-family: NotoSansSChineseRegular;
       font-size: 12px;
       color: $color-primary;
-      font-weight: 400;
       margin-right: 4px;
     }
   }
-
-  .el-input--small .el-input__inner {
-    height: 24px !important;
-    line-height: 24px !important;
-  }
 }
 
 .form-setting__block-key {
@@ -197,10 +150,8 @@ $color-info-light: var(--el-color-info-light-7);
     border: 1px solid $color-info-light;
     box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
     border-radius: 2px;
-    font-family: NotoSansHans-Medium;
     font-size: 12px;
     color: $color-primary;
-    font-weight: 500;
     margin-left: 12px;
     display: flex;
     align-items: center;
@@ -228,10 +179,8 @@ $color-info-light: var(--el-color-info-light-7);
     background: var(--el-color-business);
     border: 1px solid var(--el-color-business-dark-1);
     border-radius: 2px;
-    font-family: NotoSansHans-Medium;
     font-size: 12px;
     color: $fill-color-blank;
-    font-weight: 500;
     padding: 0 14px;
   }
 
@@ -293,11 +242,6 @@ $color-info-light: var(--el-color-info-light-7);
       width: 170px;
     }
 
-    .el-input--small .el-input__inner {
-      height: 24px;
-      line-height: 24px;
-    }
-
     i {
       font-size: 12px !important;
       font-variant-caps: all-small-caps;
@@ -416,10 +360,8 @@ $color-info-light: var(--el-color-info-light-7);
   }
 
   .condition-metric {
-    font-family: NotoSansSChineseRegular;
     font-size: 14px;
     color: $color-primary;
-    font-weight: 400;
     display: flex;
     flex-direction: column;
 
@@ -514,10 +456,8 @@ $color-info-light: var(--el-color-info-light-7);
   border: 1px solid $color-info-light;
   box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
   border-radius: 2px;
-  font-family: NotoSansHans-Medium;
   font-size: 12px;
   color: $color-primary;
-  font-weight: 500;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -536,10 +476,8 @@ $color-info-light: var(--el-color-info-light-7);
 
   .el-divider__text {
     padding: 0 4px;
-    font-family: NotoSansSChineseRegular;
     font-size: 12px;
     color: var(--el-text-color-disabled);
-    font-weight: 400;
   }
 }
 
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 ac586dec..1449a17c 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
@@ -7,7 +7,7 @@ $bg-color-page: var(--el-bg-color-page);
   .detection-form-header {
     font-size: 24px;
     color: $text-color-primary;
-    font-weight: 900;
+    font-weight: bold;
     margin-top: 10px;
   }
 
@@ -59,9 +59,7 @@ $bg-color-page: var(--el-bg-color-page);
           height: 24px;
           line-height: 24px;
           text-align: center;
-          font-family: NotoSansHans-Medium;
           font-size: 16px;
-          font-weight: 500;
           border-radius: 50%;
           margin-right: 10px;
           transition: 0.5s all;
@@ -80,7 +78,6 @@ $bg-color-page: var(--el-bg-color-page);
         .form-collapse-header-title {
           font-size: 16px;
           color: $text-color-primary;
-          font-weight: 500;
         }
       }
 
@@ -89,22 +86,18 @@ $bg-color-page: var(--el-bg-color-page);
 
         .trigger-block {
           width: 620px;
-          height: 90px;
-          padding: 16px 12px;
+          padding: 16px 12px 0 12px;
           border-radius: 2px;
           border: 1px var(--el-border-color-light) solid;
           display: flex;
           flex-direction: column;
           font-size: 14px;
           color: $text-color-primary;
-          font-weight: 400;
 
           .trigger-block-item {
             display: flex;
             align-items: flex-start;
             justify-content: flex-start;
-            height: 24px;
-            line-height: 24px;
 
             .policy-form-item {
               .el-form-item__error {
@@ -113,24 +106,21 @@ $bg-color-page: var(--el-bg-color-page);
             }
           }
 
-          .el-input--small .el-input__inner {
-            width: 112px;
+          .el-form-item__content {
             margin: 0 12px;
           }
+          .el-input--small {
+            .el-input__inner {
+              width: 112px;
+            }
+          }
 
           .el-select .el-input .el-select__caret {
-            height: 24px;
-            line-height: 24px;
             margin-right: 12px;
           }
 
-          .form-trigger__select {
-            margin-left: -12px;
-          }
-
-          .el-form-item__content {
-            height: 24px;
-            line-height: 24px !important;
+          .form-trigger__select .el-form-item__content {
+            margin-left: 0;
           }
         }
       }
@@ -141,11 +131,7 @@ $bg-color-page: var(--el-bg-color-page);
         }
 
         .el-input__wrapper, .el-select__wrapper {
-          height: 24px !important;
-          line-height: 24px !important;
-          min-height: 24px !important;
           width: 112px;
-          margin: 0 12px;
         }
 
         .el-input__inner {
@@ -155,8 +141,6 @@ $bg-color-page: var(--el-bg-color-page);
     }
 
     .el-input--small, .el-input--small .el-input__inner {
-      height: 24px !important;
-      line-height: 24px !important;
       border-radius: 2px !important;
     }
   }
diff --git a/src/assets/css/components/views/detections/detection-filter.scss b/src/assets/css/components/views/detections/detection-filter.scss
index 92a16534..bf6063c3 100644
--- a/src/assets/css/components/views/detections/detection-filter.scss
+++ b/src/assets/css/components/views/detections/detection-filter.scss
@@ -1,7 +1,3 @@
-$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;
@@ -9,7 +5,7 @@ $color-light: var(--el-border-color-light);
   margin-right: 12px;
   overflow: auto;
   z-index: 1;
-  border: 1px solid $color-light !important;
+  border: 1px solid var(--el-border-color-light) !important;
   border-radius: var(--el-border-radius-base) !important;
 
   .filter-case__header {
@@ -19,7 +15,7 @@ $color-light: var(--el-border-color-light);
     color: var(--el-text-color-regular);
     font-size: 14px;
     background: var(--cn-bg-color-lighter);
-    box-shadow: 0 1px 0 0 $color-light;
+    box-shadow: 0 1px 0 0 var(--el-border-color-light);
     border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
   }
 
@@ -28,8 +24,7 @@ $color-light: var(--el-border-color-light);
     line-height: 46px;
     margin: 0 20px;
     font-size: 14px;
-    color: $color-primary;
-    font-weight: 500;
+    color: var(--el-text-color-primary);
   }
 
   .filter__body {
@@ -51,7 +46,7 @@ $color-light: var(--el-border-color-light);
         display: flex;
         align-items: center;
         font-size: 14px;
-        color: $color-primary;
+        color: var(--el-text-color-primary);
         font-weight: 400;
 
         .filter__body-item-left-index {
@@ -61,10 +56,9 @@ $color-light: var(--el-border-color-light);
           background: var(--el-bg-color-page);
           border-radius: 2px;
           margin-right: 6px;
-          font-family: NotoSansHans-Black;
           font-size: 9px;
           color: var(--el-color-info);
-          font-weight: 900;
+          font-weight: bold;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -72,10 +66,8 @@ $color-light: var(--el-border-color-light);
 
         .filter__body-item-left-label {
           max-width: 180px;
-          font-family: NotoSansSChineseRegular;
           font-size: 14px;
-          color: $color-primary;
-          font-weight: 400;
+          color: var(--el-text-color-primary);
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
@@ -84,10 +76,8 @@ $color-light: var(--el-border-color-light);
 
       .filter__body-item-right {
         flex-shrink: 0;
-        font-family: NotoSansSChineseRegular;
         font-size: 12px;
         color: var(--el-text-color-regular);
-        font-weight: 400;
         margin-right: 10px;
       }
     }
@@ -129,7 +119,7 @@ $color-light: var(--el-border-color-light);
   line-height: 32px;
   background: var(--cn-bg-color-lighter);
   padding: 0 20px;
-  box-shadow: 0 1px 0 0 $color-light;
+  box-shadow: 0 1px 0 0 var(--el-border-color-light);
   border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
 }
 
@@ -142,11 +132,10 @@ $color-light: var(--el-border-color-light);
   }
 
   .new-filter-content-title {
-    font-family: NotoSansHans-Medium;
     font-size: 14px;
     line-height: 14px;
     margin-bottom: 10px;
-    color: $color-primary;
+    color: var(--el-text-color-primary);
     font-weight: 500;
   }
 
@@ -158,51 +147,12 @@ $color-light: var(--el-border-color-light);
       line-height: 16px;
       margin-bottom: 13.6px;
       font-size: 14px;
-      color: $color-primary;
-      font-weight: 400;
+      color: var(--el-text-color-primary);
       display: flex !important;
 
-      .el-checkbox__inner {
-        width: 16px !important;
-        height: 16px !important;
-        text-align: center !important;
-        line-height: 16px !important;
-      }
-
-      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-        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: 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: var(--el-bg-color-page);
-          background: var(--el-bg-color-page);
-          border-radius: 2px;
-        }
-      }
-
-      .el-checkbox__input.is-focus {
-        .el-checkbox__inner {
-          border-color: var(--el-bg-color-page);
-        }
-      }
-
       .el-checkbox__label {
         font-size: 14px;
-        color: $color-primary;
-        font-weight: 400;
+        color: var(--el-text-color-primary);
         padding-left: 10px !important;
       }
     }
diff --git a/src/assets/css/components/views/detections/detections.scss b/src/assets/css/components/views/detections/detections.scss
index 97344347..fdd3be0a 100644
--- a/src/assets/css/components/views/detections/detections.scss
+++ b/src/assets/css/components/views/detections/detections.scss
@@ -25,21 +25,18 @@
   overflow: auto;
 
   .detection-title {
-    font-family: NotoSansHans-Black;
     line-height: 24px;
     font-size: 24px;
     color: var(--el-text-color-primary);
-    font-weight: 900;
+    font-weight: bold;
     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;
     }
   }
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index c62affa3..054005d0 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -39,6 +39,15 @@
     'large': 32px,
     'default': 28px,
     'small': 24px
+  ),
+  // dropdown
+  $dropdown: (
+    'menuItem-hover-fill': var(--el-fill-color-light),
+    'menuItem-hover-color': var(--el-text-color-regular)
+  ),
+  $checkbox: (
+    'checked-input-border-color': var(--el-color-business),
+    'checked-bg-color': var(--el-color-business),
   )
 );
 // 导出重写后的var.scss，暴露内部变量供别处使用
diff --git a/src/components/rightBox/report/ReportBox.vue b/src/components/rightBox/report/ReportBox.vue
index 878be9c6..c050c193 100644
--- a/src/components/rightBox/report/ReportBox.vue
+++ b/src/components/rightBox/report/ReportBox.vue
@@ -11,7 +11,7 @@
         <el-form ref="reportForm" :model="editObject" :rules="rules" label-position="top" label-width="120px">
           <!--name-->
           <el-form-item :label="$t('report.name')" prop="name">
-            <el-input id="account-input-name" v-model="editObject.name" maxlength="64" placeholder=" " show-word-limit size="small" type="text"></el-input>
+            <el-input id="account-input-name" v-model="editObject.name" maxlength="64" placeholder=" " show-word-limit type="text"></el-input>
           </el-form-item>
           <!--time limit-->
           <el-form-item :label="$t('report.timeLimit')" prop="timeLimit">
@@ -20,8 +20,6 @@
                        class="right-box__select"
                        collapse-tags
                        placeholder=" "
-                       popper-class="right-box-select-dropdown right-box-select-report "
-                       size="small"
                        @change="timeConfigTypeChange"
             >
               <template v-for="time in timeRuleList" :key="time.value">
@@ -34,8 +32,7 @@
                          class="right-box__select"
                          collapse-tags
                          placeholder=" "
-                         popper-class="right-box-select-dropdown right-box-select-report "
-                         size="small"
+                         style="margin-top: 10px;"
                          @change="()=>{ this.$forceUpdate() }">
                 <template v-for="time in timeUnitList" :key="time.value">
                   <el-option :label="$t(time.name)" :value="time.value"></el-option>
@@ -43,7 +40,7 @@
               </el-select>
             </template>
             <div v-else-if="editObject.config.timeConfig.type === 'last' || editObject.config.timeConfig.type === 'previous'" class="report__display">
-              <el-input v-model.number="editObject.config.timeConfig.offset" size="small" class="el-input-single" placeholder=" ">
+              <el-input v-model.number="editObject.config.timeConfig.offset" class="el-input-single" placeholder=" ">
                 <template #prepend><i @click="timeOffsetHandle('m')" class="cn-icon cn-icon-a-"></i></template>
                 <template #append><i @click="timeOffsetHandle('p')" class="cn-icon cn-icon-a-1"></i></template>
               </el-input>
@@ -53,7 +50,6 @@
                          collapse-tags
                          placeholder=" "
                          popper-class="right-box-select-dropdown  el-select-last"
-                         size="small"
                          @change="()=>{ this.$forceUpdate() }">
                 <template v-for="time in timeUnitList" :key="time.value">
                   <el-option :label="$t(time.name)" :value="time.value"></el-option>
@@ -67,7 +63,6 @@
               <div class="block">
                 <el-date-picker
                     v-model="editObject.config.startTime"
-                    size="small"
                     :format="dateFormat"
                     :disabled-date="startDisabledDate"
                     @change="startTimeChang"
@@ -84,7 +79,6 @@
               <div class="block">
                 <el-date-picker
                     v-model="editObject.config.endTime"
-                    size="small"
                     :format="dateFormat"
                     :disabled-date="endDisabledDate"
                     @change="endTimeChange"
@@ -105,17 +99,17 @@
             </div>
             <div class="enable-tabs-daily" v-if="scheduleType === scheduleTypeList[0].value">
               <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
-              <el-input v-model.number="editObject.config.schedulerConfig.interval" size="small" placeholder=" " class="report__margin-t">
+              <el-input v-model.number="editObject.config.schedulerConfig.interval" placeholder=" ">
                 <template #append>{{$t('report.day')}}</template>
               </el-input>
             </div>
             <div class="enable-tabs-weekly" v-else-if="scheduleType === scheduleTypeList[1].value">
               <!-- 每隔几周暂时隐藏 -->
               <!-- <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
-              <el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder="Please input">
+              <el-input v-model="editObject.config.schedulerConfig.interval" placeholder="Please input">
                 <template #append>{{$t('report.week')}}</template>
               </el-input>-->
-              <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" class="report__margin-t">
+              <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates">
                 <el-checkbox v-for="(item, index) in weekdayList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
               </el-checkbox-group>
             </div>
@@ -130,7 +124,7 @@
                 <!-- 自定义月，循环 -->
                 <template v-if="monthIsCycle">
                   <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
-                  <el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder=" " class="report__margin-t">
+                  <el-input v-model="editObject.config.schedulerConfig.interval" placeholder=" ">
                     <template #append>{{$t('report.month')}}</template>
                   </el-input>
                 </template>
@@ -158,10 +152,9 @@
                   <el-select id="account-input-roleIds"
                              v-model="editObject.config.schedulerConfig.monthWeekDates"
                              class="right-box__select"
+                             style="margin-top: 10px;"
                              multiple
                              placeholder=" "
-                             popper-class="right-box-select-dropdown right-box-select-report"
-                             size="small"
                              @change="()=>{ this.$forceUpdate() }">
                     <template v-for="time in weekOptions" :key="time.value">
                       <el-option :label="$t(time.name)" :value="time.value"></el-option>
@@ -183,7 +176,6 @@
               <div class="block">
                 <el-date-picker
                     v-model="editObject.schedulerStart"
-                    size="small"
                     :format="dateFormat"
                     prefix-icon=""
                     type="datetime"
@@ -198,7 +190,6 @@
               <div class="block">
                 <el-date-picker
                     v-model="editObject.schedulerEnd"
-                    size="small"
                     :format="dateFormat"
                     prefix-icon=""
                     type="datetime"
@@ -215,8 +206,6 @@
                        collapse-tags
                        placeholder=" "
                        :disabled="!!editObject.id"
-                       popper-class="right-box-select-dropdown right-box-select-report"
-                       size="small"
             >
               <template v-for="category in categoryList" :key="category.id">
                 <el-option :label="category.name" :value="category.id"></el-option>
@@ -225,11 +214,11 @@
           </el-form-item>
           <!-- 参数 -->
           <el-form-item :label="$t('config.operationlog.params')" prop="categoryParams" v-if="editObject.categoryParams && editObject.categoryParams.length > 0">
-<!--            <el-input v-model="param.value" placeholder=" " v-for="(param, index) in editObject.categoryParams" :key="index" size="small" style="vertical-align: unset;" :disabled="!!editObject.id">
+<!--            <el-input v-model="param.value" placeholder=" " v-for="(param, index) in editObject.categoryParams" :key="index" style="vertical-align: unset;" :disabled="!!editObject.id">
               <template #prepend>{{param.key}}</template>
             </el-input>-->
             <template v-for="(param, index) in editObject.categoryParams" :key="index">
-              <el-input v-if="param.labelType === 'input'" v-model="param.value" placeholder=" " size="small" class="report__params-vertical" :disabled="!!editObject.id">
+              <el-input v-if="param.labelType === 'input'" v-model="param.value" placeholder=" " class="report__params-vertical" :disabled="!!editObject.id">
                 <template #prepend>{{param.key}}</template>
               </el-input>
               <el-select v-model="param.value"
@@ -238,8 +227,6 @@
                          placeholder=" "
                          filterable
                          :disabled="!!editObject.id"
-                         popper-class="right-box-select-dropdown right-box-select-report "
-                         size="small"
               >
                 <template #prefix>
                   {{$t(param.i18n)}}
diff --git a/src/components/rightBox/settings/I18nBox.vue b/src/components/rightBox/settings/I18nBox.vue
index 47653fb4..82b9ed8a 100644
--- a/src/components/rightBox/settings/I18nBox.vue
+++ b/src/components/rightBox/settings/I18nBox.vue
@@ -12,12 +12,12 @@
           <!--name-->
           <el-form-item :label="$t('overall.name')" prop="name">
             <el-input id="account-input-name" v-model="editObject.name" :disabled="editObject.name==='admin' && editObject.id === 1"
-                      maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
+                      maxlength="64" placeholder="" show-word-limit type="text"></el-input>
           </el-form-item>
           <!--code-->
           <el-form-item :label="$t('config.i18n.code')" prop="code">
             <el-input id="account-input-code" v-model="editObject.code" :disabled="editObject.code==='admin' && editObject.id === 1"
-                      maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
+                      maxlength="64" placeholder="" show-word-limit type="text"></el-input>
           </el-form-item>
           <!--lang-->
           <el-form-item :label="$t('config.i18n.lang')" prop="lang">
@@ -28,7 +28,7 @@
                        collapse-tags
                        placeholder=" "
                        popper-class="right-box-select-dropdown prevent-clickoutside"
-                       size="small"
+
                        @change="()=>{ this.$forceUpdate() }">
               <template v-for="role in langData" :key="role.value">
                 <el-option :label="role.value" :value="role.value"></el-option>
@@ -38,7 +38,7 @@
           <!--value-->
           <el-form-item :label="$t('config.i18n.value')" label-width="200px" prop="value">
             <el-input id="account-input-value" v-model="editObject.value"  maxlength="256" placeholder=""
-                      show-word-limit size="small"></el-input>
+                      show-word-limit></el-input>
           </el-form-item>
         </el-form>
       </div>
diff --git a/src/components/rightBox/settings/RoleBox.vue b/src/components/rightBox/settings/RoleBox.vue
index 7f6ce74f..febd860e 100644
--- a/src/components/rightBox/settings/RoleBox.vue
+++ b/src/components/rightBox/settings/RoleBox.vue
@@ -12,7 +12,7 @@
           <!--name-->
           <el-form-item :label="$t('config.roles.name')" prop="name">
             <el-input  maxlength="64" placeholder="" id="role-box-input-name"
-                       show-word-limit size="small" type="text" v-model="editRole.name"></el-input>
+                       show-word-limit type="text" v-model="editRole.name"></el-input>
           </el-form-item>
           <el-form-item :label="$t('overall.remark')">
             <el-input maxlength="255" show-word-limit :rows="2" size='mini' type="textarea" v-model="editRole.remark" id="role-box-input-remark"/>
diff --git a/src/components/rightBox/settings/UserBox.vue b/src/components/rightBox/settings/UserBox.vue
index 74282b42..33157ca8 100644
--- a/src/components/rightBox/settings/UserBox.vue
+++ b/src/components/rightBox/settings/UserBox.vue
@@ -13,31 +13,31 @@
           <el-form-item :label="$t('config.user.name')" prop="name">
             <el-input id="account-input-name" v-model="editObject.name"
                       :disabled="editObject.username==='admin' && editObject.id === 1"
-                      minlength="2" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
+                      minlength="2" maxlength="64" placeholder="" show-word-limit type="text"></el-input>
           </el-form-item>
           <!--username-->
           <el-form-item :label="$t('config.user.username')" prop="username">
             <el-input id="account-input-username" v-model="editObject.username"
                       :disabled="editObject.username==='admin' && editObject.id === 1"
-                      minlength="2" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
+                      minlength="2" maxlength="64" placeholder="" show-word-limit type="text"></el-input>
           </el-form-item>
           <!--password-->
           <el-form-item :label="$t('config.user.pin')" prop="pin">
             <el-input id="account-input-password" v-model="editObject.pin" minlength="5" maxlength="64" placeholder=""
-                      show-word-limit size="small" type="password" @blur="pinBlur" autocomplete="new-password"></el-input>
+                      show-word-limit type="password" @blur="pinBlur" autocomplete="new-password"></el-input>
           </el-form-item>
           <!--pinChange-->
           <el-form-item :label="$t('config.user.confirmPin')" label-width="200px" prop="pinChange">
             <el-input id="account-input-pinChange" v-model="editObject.pinChange" minlength="5" maxlength="64" placeholder=""
-                      show-word-limit size="small" type="password"></el-input>
+                      show-word-limit type="password"></el-input>
           </el-form-item>
           <!--email-->
           <el-form-item label="E-mail" prop="email">
-            <el-input id="account-input-email" v-model="editObject.email" maxlength="35" show-word-limit placeholder="" size="small" type="text"></el-input>
+            <el-input id="account-input-email" v-model="editObject.email" maxlength="35" show-word-limit placeholder="" type="text"></el-input>
           </el-form-item>
           <!--mobile-->
           <el-form-item :label="$t('config.user.mobile')" prop="mobile">
-            <el-input id="account-input-mobile" v-model.number="editObject.mobile" maxlength="11" show-word-limit placeholder="" size="small" type="text"></el-input>
+            <el-input id="account-input-mobile" v-model.number="editObject.mobile" maxlength="11" show-word-limit placeholder="" type="text"></el-input>
           </el-form-item>
           <!--roles-->
           <el-form-item :label="$t('config.user.roles')" prop="roleIds">
@@ -49,7 +49,7 @@
                        collapse-tags
                        placeholder=" "
                        popper-class="right-box-select-dropdown prevent-clickoutside"
-                       size="small"
+
                        @change="()=>{ this.$forceUpdate() }">
               <template v-for="role in roleData" :key="role.id">
                 <el-option :label="role.name" :value="role.id"></el-option>
@@ -65,7 +65,7 @@
                        collapse-tags
                        placeholder=" "
                        popper-class="right-box-select-dropdown prevent-clickoutside"
-                       size="small">
+            >
               <template v-for="lang in langData" :key="lang.value">
                 <el-option :label="lang.label" :value="lang.value"></el-option>
               </template>
diff --git a/src/components/table/detection/GeneralSettings.vue b/src/components/table/detection/GeneralSettings.vue
index 8ea11b0a..0bec52e6 100644
--- a/src/components/table/detection/GeneralSettings.vue
+++ b/src/components/table/detection/GeneralSettings.vue
@@ -43,7 +43,7 @@
     <!--category-->
     <el-form ref="form" :model="settingObj" label-position="top" :rules="rules">
       <el-form-item :label="$t('overall.category')" prop="category" class="form-setting__block margin-b-20">
-        <el-select :disabled="settingObj.ruleId" v-model="settingObj.category" class="form-setting__select" placeholder=" " size="small" @change="changeEditFlag">
+        <el-select :disabled="settingObj.ruleId" v-model="settingObj.category" class="form-setting__select" placeholder=" " @change="changeEditFlag">
           <el-option
               v-for="item in categoryList"
               :key="item.value"
@@ -55,7 +55,7 @@
 
       <!--type-->
       <el-form-item :label="$t('overall.type')" prop="eventType" class="form-setting__block margin-b-20">
-        <el-select v-model="settingObj.eventType" placeholder=" " size="small" class="form-setting__select" @change="changeEditFlag">
+        <el-select v-model="settingObj.eventType" placeholder=" " class="form-setting__select" @change="changeEditFlag">
           <el-option
               v-for="item in eventTypeList"
               :key="item.value"
diff --git a/src/components/table/detection/RuleDefinition.vue b/src/components/table/detection/RuleDefinition.vue
index f1dba07f..3f37bc5f 100644
--- a/src/components/table/detection/RuleDefinition.vue
+++ b/src/components/table/detection/RuleDefinition.vue
@@ -5,7 +5,7 @@
         <el-form ref="form" :model="thresholdRuleObj" label-position="top" :rules="rules">
           <!--source-->
           <el-form-item :label="$t('config.user.source')" prop="dataSource" class="form-setting__block margin-b-20">
-            <el-select v-model="thresholdRuleObj.dataSource" placeholder=" " size="small" class="form-setting__select">
+            <el-select v-model="thresholdRuleObj.dataSource" placeholder=" " class="form-setting__select">
               <el-option
                   v-for="item in sourceList"
                   :key="item.value"
@@ -38,7 +38,7 @@
           <div class="block-title1">{{ $t('detections.filters') }}</div>
           <div class="definition-filter-block" v-if="showFilter">
             <div class="definition-filter-item" v-for="(item, index) in thresholdRuleObj.filterList" :key="index">
-              <el-select class="filter-item__select margin-r-8" v-model="item.filter" placeholder=" " size="small">
+              <el-select class="filter-item__select margin-r-8" v-model="item.filter" placeholder=" ">
                 <el-option
                     v-for="item in selectList"
                     :key="item.value"
@@ -46,10 +46,10 @@
                     :value="item.value"
                 />
               </el-select>
-              <el-input class="filter-item__input margin-r-8" size="small" disabled placeholder="equal"></el-input>
+              <el-input class="filter-item__input margin-r-8" disabled placeholder="equal"></el-input>
               <el-input
                   class="filter-item__input margin-r-8"
-                  size="small"
+
                   oninput="value=value.replace(/[^\d]/g,'')"
                   v-model="item.value"></el-input>
               <i class="cn-icon cn-icon-close" @click="delFilterItem(index, item)"></i>
@@ -70,7 +70,7 @@
           <el-form ref="form2" :model="thresholdRuleObj" label-position="top">
           <div class="definition-condition-block" v-for="(item, index) in thresholdRuleObj.conditionData" :key="index">
             <el-form-item :label="$t('detection.level')" :prop="`conditionData.${index}.level`" :rules="rules.level">
-              <el-select class="condition__select margin-b-20" v-model="item.level" placeholder=" " size="small">
+              <el-select class="condition__select margin-b-20" v-model="item.level" placeholder=" ">
                 <template #prefix>
                   <div
                       class="condition__select__icon"
@@ -92,7 +92,7 @@
                 <div class="metric-item1__text">
                   <span style="margin-right: 9px;">If</span>
                   <el-form-item :prop="`conditionData.${index}.list.${i}.metric`" :rules="rules.metric">
-                    <el-select v-model="data.metric" placeholder=" " size="small">
+                    <el-select v-model="data.metric" placeholder=" ">
                       <el-option
                           v-for="item in metricList"
                           :key="item.label"
@@ -116,7 +116,7 @@
               <div class="condition-metric-item2">
                 <div style="height: 24px;line-height: 24px;display: flex;">
                   <el-form-item :prop="`conditionData.${index}.list.${i}.condition`" :rules="rules.condition">
-                    <el-select class="metric-item2__select" v-model="data.condition" placeholder=" " size="small">
+                    <el-select class="metric-item2__select" v-model="data.condition" placeholder=" ">
                       <el-option
                           v-for="item in conditionList"
                           :key="item.label"
@@ -132,7 +132,7 @@
                         class="metric-item2__input"
                         v-model.number="data.value"
                         oninput="value=value.replace(/[^\d]/g,'')"
-                        size="small"></el-input>
+                       ></el-input>
                   </el-form-item>
                 </div>
 
@@ -165,7 +165,7 @@
       <el-form ref="form" :model="indicatorRuleObj" label-position="top" :rules="rules">
         <!--Source-->
         <el-form-item :label="$t('config.user.source')" prop="dataSource" class="form-setting__block margin-b-20">
-          <el-select v-model="indicatorRuleObj.dataSource" class="form-setting__select" placeholder=" " size="small" @change="handleParamsComplete">
+          <el-select v-model="indicatorRuleObj.dataSource" class="form-setting__select" placeholder=" " @change="handleParamsComplete">
             <el-option
                 v-for="item in sourceList"
                 :key="item.value"
@@ -177,7 +177,7 @@
 
         <!--Library-->
         <el-form-item :label="$t('detection.library')" prop="knowledgeId" class="form-setting__block margin-b-20">
-          <el-select v-model="indicatorRuleObj.knowledgeId" class="form-setting__select" filterable placeholder=" " size="small" @change="handleParamsComplete">
+          <el-select v-model="indicatorRuleObj.knowledgeId" class="form-setting__select" filterable placeholder=" " @change="handleParamsComplete">
             <el-option
                 v-for="item in libraryList"
                 :key="item.knowledgeId"
@@ -189,7 +189,7 @@
 
         <!--Level-->
         <el-form-item :label="$t('detection.level')" prop="level" class="form-setting__block">
-          <el-select v-model="indicatorRuleObj.level" class="condition__select form-setting__select" placeholder=" " size="small" @change="handleParamsComplete">
+          <el-select v-model="indicatorRuleObj.level" class="condition__select form-setting__select" placeholder=" " @change="handleParamsComplete">
             <template #prefix>
               <div
                   class="condition__select__icon"
diff --git a/src/views/administration/Appearance.vue b/src/views/administration/Appearance.vue
index 86778e7f..a0e32b6a 100644
--- a/src/views/administration/Appearance.vue
+++ b/src/views/administration/Appearance.vue
@@ -7,8 +7,7 @@
               v-model="appearanceObject.date_format"
               collapse-tags
               placeholder=" "
-              popper-class="right-box-select-dropdown right-box-select-report "
-              size="small">
+          >
             <template v-for="dateFormat in dateFormatList" :key="dateFormat.id">
               <el-option :label="dateFormat.label" :value="dateFormat.value" class="appearance__option">
                 <span>{{ dateFormat.label }}</span>
@@ -22,8 +21,7 @@
                      v-model="appearanceObject.lang"
                      collapse-tags
                      placeholder=" "
-                     popper-class="right-box-select-dropdown right-box-select-report "
-                     size="small">
+          >
             <template v-for="lang in langList" :key="lang.id">
               <el-option :label="lang.label" :value="lang.value"></el-option>
             </template>
@@ -35,8 +33,7 @@
                      collapse-tags
                      filterable
                      placeholder=" "
-                     popper-class="right-box-select-dropdown right-box-select-report "
-                     size="small">
+          >
             <template v-for="timezone in timezoneList" :key="timezone.id">
               <el-option :label="timezone.name" :value="timezone.name" class="appearance__option">
                 <span>{{ timezone.name }}</span>
diff --git a/src/views/detections/detectionPolicies/PolicyForm.vue b/src/views/detections/detectionPolicies/PolicyForm.vue
index 9d48fbd5..d4f9ecb1 100644
--- a/src/views/detections/detectionPolicies/PolicyForm.vue
+++ b/src/views/detections/detectionPolicies/PolicyForm.vue
@@ -57,16 +57,16 @@
                 <div class="trigger-block-item margin-b-10">
                   <div>At least</div>
                   <el-form-item prop="atLeast">
-                    <el-input size="small" maxlength="5" v-model="triggerObj.atLeast" oninput="value=value.replace(/[^\d]/g,'')" @input="resetEditFlag"></el-input>
+                    <el-input maxlength="5" size="small" v-model="triggerObj.atLeast" oninput="value=value.replace(/[^\d]/g,'')" @input="resetEditFlag"></el-input>
                   </el-form-item>
                   <div>times within</div>
 
                   <el-form-item prop="interval" class="policy-form-item">
-                    <el-input size="small" maxlength="5" v-model="triggerObj.interval" oninput="value=value.replace(/[^\d]/g,'')" @input="resetEditFlag"></el-input>
+                    <el-input maxlength="5" size="small" v-model="triggerObj.interval" oninput="value=value.replace(/[^\d]/g,'')" @input="resetEditFlag"></el-input>
                   </el-form-item>
 
-                  <el-form-item prop="intervalVal">
-                    <el-select v-model="triggerObj.intervalVal" class="form-trigger__select" placeholder=" " size="small" @change="resetEditFlag">
+                  <el-form-item prop="intervalVal" class="form-trigger__select">
+                    <el-select v-model="triggerObj.intervalVal" placeholder=" " size="small" @change="resetEditFlag">
                       <el-option
                           v-for="item in intervalList"
                           :key="item.value"
@@ -80,10 +80,10 @@
                 <div class="trigger-block-item">
                   <div>With the counter resetting after no activity for</div>
                   <el-form-item prop="resetInterval" class="policy-form-item">
-                    <el-input size="small" maxlength="5" v-model="triggerObj.resetInterval" oninput="value=value.replace(/[^\d]/g,'')" @input="resetEditFlag"></el-input>
+                    <el-input maxlength="5" size="small" v-model="triggerObj.resetInterval" oninput="value=value.replace(/[^\d]/g,'')" @input="resetEditFlag"></el-input>
                   </el-form-item>
-                  <el-form-item prop="resetIntervalVal">
-                    <el-select v-model="triggerObj.resetIntervalVal" class="form-trigger__select" placeholder=" " size="small"  @change="resetEditFlag">
+                  <el-form-item prop="resetIntervalVal" class="form-trigger__select">
+                    <el-select v-model="triggerObj.resetIntervalVal" placeholder=" " size="small" @change="resetEditFlag">
                       <el-option
                           v-for="item in intervalList"
                           :key="item.value"
@@ -101,8 +101,8 @@
                     <el-input size="small" maxlength="5" v-model="triggerObj.interval" oninput="value=value.replace(/[^\d]/g,'')" @input="resetEditFlag"></el-input>
                   </el-form-item>
 
-                  <el-form-item prop="intervalVal">
-                    <el-select v-model="triggerObj.intervalVal" class="form-trigger__select" placeholder=" " size="small" @change="resetEditFlag">
+                  <el-form-item prop="intervalVal" class="form-trigger__select">
+                    <el-select size="small" v-model="triggerObj.intervalVal" placeholder=" " @change="resetEditFlag">
                       <el-option
                           v-for="item in intervalList"
                           :key="item.value"
@@ -123,8 +123,8 @@
                   <el-form-item prop="resetInterval">
                     <el-input size="small" maxlength="5" v-model="triggerObj.resetInterval" oninput="value=value.replace(/[^\d]/g,'')" @input="resetEditFlag"></el-input>
                   </el-form-item>
-                  <el-form-item prop="resetIntervalVal">
-                    <el-select v-model="triggerObj.resetIntervalVal" class="form-trigger__select" placeholder=" " size="small" @change="resetEditFlag">
+                  <el-form-item prop="resetIntervalVal" class="form-trigger__select">
+                    <el-select size="small" v-model="triggerObj.resetIntervalVal" placeholder=" " @change="resetEditFlag">
                       <el-option
                           v-for="item in intervalList"
                           :key="item.value"