From d1efdde2ba85d3a35222b90d475070a7391a452d Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 1 Nov 2021 23:05:28 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1072=20feat:=20=E4=B8=BB=E9=A2=98=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=86=B2=E7=AA=81=E8=A7=A3=E5=86=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/charts/chart-list.scss     |  38 ++
 .../components/common/alert/alertLabel.scss   |  25 +-
 .../common/alert/alertRuleInfo.scss           |   5 +-
 .../common/bottomBox/bottomBox.scss           |   6 +
 .../common/detailView/detailView.scss         |   3 +
 .../detailView/view/detailViewRight.scss      |   1 +
 .../common/project/L5/topoTooltip.scss        |   6 +-
 .../common/project/popData/Info.scss          |  78 ++++
 .../common/rightBox/alertRuleBox.scss         | 115 +++---
 .../common/table/alert/alertRuleTable.scss    |  10 +-
 .../src/assets/css/components/index.scss      |   2 +
 .../components/page/alert/alertMessage.scss   |  19 +-
 .../css/components/page/alert/nzAlertTag.scss |  11 +-
 .../components/page/config/mibBrowser.scss    |   2 +-
 .../page/dashboard/explore/logTab.scss        |   8 +
 .../css/components/page/dashboard/panel.scss  |   1 +
 nezha-fronted/src/assets/stylus/main.scss     |  32 +-
 .../src/components/charts/chart-list.vue      |  41 +-
 .../components/common/alert/alertLabel.vue    | 111 +----
 .../components/common/alert/alertRuleInfo.vue | 178 ---------
 .../components/common/bottomBox/bottomBox.vue | 132 ------
 .../bottomBox/tabs/endpointQueryTab.vue       |  18 +-
 .../list/alertRule/alertRuleDetail.vue        |   3 -
 .../detailView/list/asset/assetDetail.vue     |   4 -
 .../common/detailView/list/dc/dcDetail.vue    |   4 -
 .../common/detailView/list/detailList.scss    | 101 -----
 .../list/endpoint/endpointDetail.vue          |   4 -
 .../detailView/list/module/moduleDetail.vue   |   4 -
 .../terminalLogDetail/terminalLogDetail.vue   |   4 -
 .../detailView/list/userDetail/userDetail.vue |   4 -
 .../common/detailView/nzDetailView.vue        |   9 -
 .../detailView/view/detailViewRight.vue       |  63 ---
 .../common/project/L5/topoTooltip.vue         |  90 -----
 .../common/project/popData/Info.vue           |  70 ----
 .../common/rightBox/alertRuleBox.vue          |  64 ---
 .../common/table/alert/alertRuleTable.vue     |  53 ---
 .../common/table/settings/endpointTable.vue   |  40 +-
 .../components/page/alert/alertMessage.vue    |  18 +-
 .../src/components/page/alert/nzAlertTag.vue  |  79 ----
 .../src/components/page/config/mibBrowser.vue | 238 -----------
 .../page/dashboard/explore/exploreItem.vue    | 378 ------------------
 .../page/dashboard/explore/logTab.vue         | 115 ------
 .../page/dashboard/explore/promqlInput.vue    | 166 --------
 .../src/components/page/dashboard/panel.vue   |  76 ----
 44 files changed, 271 insertions(+), 2158 deletions(-)
 create mode 100644 nezha-fronted/src/assets/css/components/charts/chart-list.scss
 create mode 100644 nezha-fronted/src/assets/css/components/common/project/popData/Info.scss
 delete mode 100644 nezha-fronted/src/components/common/detailView/list/detailList.scss

diff --git a/nezha-fronted/src/assets/css/components/charts/chart-list.scss b/nezha-fronted/src/assets/css/components/charts/chart-list.scss
new file mode 100644
index 000000000..2f15e32a6
--- /dev/null
+++ b/nezha-fronted/src/assets/css/components/charts/chart-list.scss
@@ -0,0 +1,38 @@
+.charts__chart-list {
+  .chartBox {
+    float:left;
+    padding: 0 10px 10px 0;
+    position:relative;
+    box-sizing: border-box;
+  }
+  .no-data{
+    height: 1189px;
+    width: 100%;
+    position: relative;
+    .icon {
+      width: 5rem;
+      height: 5rem;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -52px;
+      margin-left: -40px;
+      text-align: center;
+    }
+    .no-data-div {
+      position: absolute;
+      font-size: 16px;
+      color: $--color-text-primary;
+      font-weight: 400;
+      margin-left: -29px;
+      top: 52.5%;
+      left: 50%
+    }
+  }
+  .list-width{
+    width: 100%;
+    padding: 0 10px 5px 10px;
+    box-sizing: border-box;
+    overflow: hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss b/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
index ced39ae33..fb8465129 100644
--- a/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
+++ b/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
@@ -7,7 +7,6 @@
   box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
 
   .alert-label-info{
-    border: 1px solid $--border-color-light;
     border-bottom: none;
     font-size: 13px;
     line-height: 26px;
@@ -15,21 +14,21 @@
   .alert-label-box{
     display: flex;
     justify-content:space-between;
-    border-bottom: 1px solid $--border-color-light;
   }
   .alert-label-title{
-    text-align: left;
-    width: 110px;
-    border-right: 1px solid $--border-color-light;
+    font-size: 14px;
     color: $--color-text-regular;
+    letter-spacing: 0;
+    line-height: 23px;
+    min-width: 110px;
     padding: 0 3px 0 13px;
   }
   .alert-label-value{
-    text-align: left;
-    width: 150px;
-    color: #1a1a1a;
-    padding: 0 3px 0 13px;
-    word-break: break-all;
+    height: 26px;
+    font-size: 14px;
+    color: $--color-text-primary;
+    letter-spacing: 0;
+    line-height: 23px;
   }
   .danger{
     background-color: $--color-danger;
@@ -46,6 +45,12 @@
   .active-icon{
     margin-top: 0;
   }
+  .alert-label-remark {
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    max-width: 210px;
+  }
 }
 .alert-label::after, .alert-labelUp::after {
   content: '';
diff --git a/nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss b/nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss
index e7ca43e66..2970fbc3d 100644
--- a/nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss
+++ b/nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss
@@ -16,7 +16,7 @@
   line-height: 0;
   border: 5px;
   border-style: dashed solid dashed dashed;
-  border-color: transparent #fff transparent transparent;
+  border-color: transparent $--background-color-empty transparent transparent;
   position: absolute;
   top: 100px;
   left: 0;
@@ -47,7 +47,7 @@
   line-height: 0;
   border: 5px;
   border-style: dashed solid dashed dashed;
-  border-color: transparent #fff transparent transparent;
+  border-color: transparent $--background-color-empty transparent transparent;
   position: absolute;
   bottom: 95px;
   left: 0;
@@ -61,7 +61,6 @@
   box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
 }
 .alert-rule-info{
-  border: 1px solid $--border-color-light;
   border-bottom: none;
   font-size: 13px;
   line-height: 26px;
diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
index 13c55a5a6..c21903c8e 100644
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
@@ -119,6 +119,12 @@
 .bottom-box .sub-container .nz-table2{
   height: calc(100% - 20px);
 }
+.asset-detail .sub-container .nz-table2 {
+  height: 100%;
+}
+.endpoint-tab-new .sub-container .nz-table2 {
+  height: 100%;
+}
 /* end--二级顶部工具栏*/
 
 .log-no-data {
diff --git a/nezha-fronted/src/assets/css/components/common/detailView/detailView.scss b/nezha-fronted/src/assets/css/components/common/detailView/detailView.scss
index cccbaff60..0f0c00641 100644
--- a/nezha-fronted/src/assets/css/components/common/detailView/detailView.scss
+++ b/nezha-fronted/src/assets/css/components/common/detailView/detailView.scss
@@ -80,5 +80,8 @@
     width: calc(100% - 20px);
   }
 }
+.nz-detail-view-no-data {
+  border-top: 1px solid $--border-color-light;
+}
 
 
diff --git a/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss b/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss
index 5916cd1d9..129ecf20d 100644
--- a/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss
+++ b/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss
@@ -39,6 +39,7 @@
     position: relative;
     padding: 0;
     background-color: $--background-color-empty;
+    overflow-y: hidden;
   }
 
   .sub-box .top-tools.top-tools--sub {
diff --git a/nezha-fronted/src/assets/css/components/common/project/L5/topoTooltip.scss b/nezha-fronted/src/assets/css/components/common/project/L5/topoTooltip.scss
index 2901a44eb..30c4bb1dc 100644
--- a/nezha-fronted/src/assets/css/components/common/project/L5/topoTooltip.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/L5/topoTooltip.scss
@@ -1,15 +1,15 @@
 .tooltip-box {
   background: $--background-color-empty;
-  box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.11);
+  box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.08);
   border-radius: 4px;
   padding: 10px;
   max-height: 400px;
   min-height: 200px;
   height: 100%;
   box-sizing: border-box;
+  border: 1px solid $--border-color-light;
 
   .tooltip-box-chart {
-    border: 1px solid $--border-color-light;
     max-height: 400px;
     min-height: 200px;
     height: 100%;
@@ -38,6 +38,7 @@
       margin-top: 24px;
       padding-top: 5px;
       line-height: 16px;
+      border-top: 1px dashed $--border-color-base;
     }
   }
 
@@ -61,7 +62,6 @@
   .topology-tool-tip .topology-chart-title {
     margin-top: -23px;
     border-bottom: 1px dashed $--border-color-base;
-    padding-left: 0;
     margin-left: 10px;
     padding: 0;
     box-sizing: border-box;
diff --git a/nezha-fronted/src/assets/css/components/common/project/popData/Info.scss b/nezha-fronted/src/assets/css/components/common/project/popData/Info.scss
new file mode 100644
index 000000000..0a3ca5055
--- /dev/null
+++ b/nezha-fronted/src/assets/css/components/common/project/popData/Info.scss
@@ -0,0 +1,78 @@
+.info-content{
+  display: flex;
+  margin-right: 15px;
+  flex-direction: column;
+  justify-content: space-between;
+  background: $--background-color-empty;
+  border: 1px solid $--border-color-light;
+  box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
+  border-radius: 3px;
+}
+.pop-data-info-content {
+
+  .info-box {
+    background: $--background-color-empty;
+    margin-bottom: 15px;
+    min-width: 260px;
+  }
+
+  .info-box-title {
+    background: $--background-color-1;
+    font-size: 14px;
+    color: $--color-text-primary;
+    height: 26px;
+    line-height: 26px;
+    padding-left: 12px;
+    font-weight: bold;
+  }
+
+  .info-box-content {
+    font-size: 12px;
+    color: $--color-text-primary;
+  }
+
+  .content-box {
+    padding: 0 12px;
+    height: 26px;
+    line-height: 24px;
+  }
+
+  .content-title {
+    font-size: 14px;
+    min-width: 120px;
+    display: inline-block;
+    color: $--color-text-regular;
+    padding: 3px 0;
+  }
+
+  .content-text {
+    color: $--color-text-primary;
+    font-size: 14px;
+    padding: 3px 5px;
+  }
+
+  .module-type {
+    text-align: center;
+    width: 44px;
+    display: inline-block;
+    height: 20px;
+    margin: 0 auto;
+    line-height: 20px;
+  }
+
+  .module-type:first-child {
+    border-radius: 4px 0 0 4px;
+    margin-right: -4px;
+    border-right: none;
+  }
+
+  .module-type:last-child {
+    border-radius: 0 4px 4px 0;
+    z-index: -1;
+  }
+
+  .module-type-select {
+    border-color: rgba(255, 140, 14, 0.54);
+    color: rgba(255, 140, 14, 0.54);
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
index bae4b6160..448e65ac9 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
@@ -1,59 +1,64 @@
-.severity-circle{
-  position: absolute;
-  left: 10px;
-  top: 0;
-}
-.severity-box{
-  position: relative;
-}
-.severity-box /deep/ .el-select .el-input__inner{
-  padding-left: 25px;
-}
-.half-form-item {
-  width: calc(50% - 5px);
-  display: inline-block;
-  .el-form-item__content,.el-select{
-    width: 100%;
+.right-box-alert-rule {
+  .severity-circle{
+    position: absolute;
+    left: 10px;
+    top: 0;
   }
-}
-.right-box-alert-rule /deep/ .right-box__container .el-form-item__content .el-input-group--prepend{
-  width: 100%;
-}
-/deep/ .rich-text-editor{
-  line-height: 24px;
-}
-/deep/ .el-input-group__prepend{
-  position: relative;
-  .hide-icon{
-    width: 38px;
-    .el-input__inner{
-      border: none;
-      text-align: center;
+  .severity-box{
+    position: relative;
+  }
+  .severity-box .el-select .el-input__inner{
+    padding-left: 25px;
+  }
+  .half-form-item {
+    width: calc(50% - 5px);
+    display: inline-block;
+    .el-form-item__content,.el-select{
+      width: 100%;
     }
   }
-}
-.alert-rule-split-title{
-  background: $--background-color-base;
-  font-size: 14px;
-  color: $--color-text-primary;
-  letter-spacing: 0;
-  font-weight: 400;
-  line-height: 24px;
-  padding-left: 10px;
-  margin-bottom: 10px;
-  height: 24px;
-}
-/deep/ .el-form-item__content .el-input-group{
-  vertical-align: middle;
-}
-.severity-item{
-  color: $--color-text-secondary;
-  font-size: 12px;
-  max-width: 120px;
-  overflow: hidden;
-}
-.text-ellipsis{
-  overflow:hidden;
-  text-overflow:ellipsis;
-  white-space:nowrap
+  .right-box-alert-rule .right-box__container .el-form-item__content .el-input-group--prepend{
+    width: 100%;
+  }
+  .rich-text-editor{
+    line-height: 24px;
+  }
+  .el-input-group__prepend{
+    position: relative;
+    .hide-icon{
+      width: 38px;
+      .el-input__inner{
+        border: none;
+        text-align: center;
+      }
+    }
+  }
+  .alert-rule-split-title{
+    background: $--background-color-base;
+    font-size: 14px;
+    color: $--color-text-primary;
+    letter-spacing: 0;
+    font-weight: 400;
+    line-height: 24px;
+    padding-left: 10px;
+    margin-bottom: 10px;
+    height: 24px;
+  }
+  .el-form-item__content .el-input-group{
+    vertical-align: middle;
+  }
+  .severity-item{
+    color: $--color-text-secondary;
+    font-size: 12px;
+    max-width: 120px;
+    overflow: hidden;
+  }
+  .text-ellipsis{
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap
+  }
+  .query-row .metric-selector-input-box {
+    width: calc(100% - 120px);
+  }
 }
diff --git a/nezha-fronted/src/assets/css/components/common/table/alert/alertRuleTable.scss b/nezha-fronted/src/assets/css/components/common/table/alert/alertRuleTable.scss
index 7d7ffbda4..53f8d8739 100644
--- a/nezha-fronted/src/assets/css/components/common/table/alert/alertRuleTable.scss
+++ b/nezha-fronted/src/assets/css/components/common/table/alert/alertRuleTable.scss
@@ -20,11 +20,17 @@
   padding: 2px 6px;
 }
 .schedEnableTitle {
-  padding: 15px 20px;
+  padding: 20px 15px;
+  margin-right: 0;
+  left: 1995px !important;
+  background: $--background-color-empty;
+  border: 1px solid rgba(119,131,145,0.60);
+  box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
+  border-radius: 3px;
 }
 .schedEnableTitle .nz-icon-a-rilizhou, .schedEnableTitle .nz-icon-dingshishijian {
   font-size: 14px;
-  color: $--color-primary;
+  color: $--color-text-regular;
   margin-right: 12px;
 }
 .schedEnableTitle .week-item {
diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss
index 6851698ce..446f3bfcb 100644
--- a/nezha-fronted/src/assets/css/components/index.scss
+++ b/nezha-fronted/src/assets/css/components/index.scss
@@ -1,4 +1,5 @@
 @import './charts/chart.scss';
+@import './charts/chart-list.scss';
 @import './cli/webSSH.scss';
 @import './common/alert/alertLabel.scss';
 @import './common/alert/alertRuleInfo.scss';
@@ -19,6 +20,7 @@
 @import './common/popBox/selectAssetType.scss';
 @import './common/popBox/selectPanel.scss';
 @import './common/popBox/selectWalk.scss';
+@import './common/project/popData/Info.scss';
 @import './common/project/L5/popData/common.scss';
 @import './common/project/L5/CanvasContextMenu.scss';
 @import './common/project/L5/CanvasProps.scss';
diff --git a/nezha-fronted/src/assets/css/components/page/alert/alertMessage.scss b/nezha-fronted/src/assets/css/components/page/alert/alertMessage.scss
index 9f7c30a38..a7e67041c 100644
--- a/nezha-fronted/src/assets/css/components/page/alert/alertMessage.scss
+++ b/nezha-fronted/src/assets/css/components/page/alert/alertMessage.scss
@@ -1,6 +1,15 @@
-.active {
-  border-bottom: 3px solid $--color-primary;
-  color: $--color-text-primary;
-  cursor: default;
-  font-weight: bold;
+.alert-message-list {
+  .active {
+    border-bottom: 3px solid $--color-primary;
+    color: $--color-text-primary;
+    cursor: default;
+    font-weight: bold;
+  }
+  .list-page .main-container{
+    display: flex;
+    flex-direction: column;
+    .nz-table2{
+      flex: 1;
+    }
+  }
 }
diff --git a/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss b/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss
index c2a0e12d3..dea03cd98 100644
--- a/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss
+++ b/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss
@@ -4,13 +4,11 @@
   font-size: 12px;
   line-height: 20px;
   border-radius: 4px;
-  display: inline-block;
+  display: inline-flex;
   box-sizing: content-box;
   .nz-alert-tag__label {
     border-radius: 3px 0 0 3px;
     padding: 0 4px;
-    min-width: 36px;
-    max-width: 100px;
     text-align: center;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -22,6 +20,7 @@
     margin-left: -1px;
   }
   .nz-alert-tag__content {
+    flex: 1;
     border-radius: 0 3px 3px 0;
     padding: 0 4px;
     min-width: 36px;
@@ -34,10 +33,10 @@
     display: inline-block;
   }
   .nz-alert-tag_normal {
-    border-color: #409eff;
+    border-color: $--color-text-link;
     .nz-alert-tag__label {
-      border-right: 1px solid #409eff;
-      background-color: #409eff;
+      border-right: 1px solid $--color-text-link;
+      background-color: $--color-text-link;
       color: white;
     }
   }
diff --git a/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss b/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss
index ec0440eca..bb68b0915 100644
--- a/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss
@@ -9,7 +9,7 @@
   line-height: 24px;
 }
 .mib-browser-ad-search {
-  width: 450px;
+  width: 300px;
 }
 .mib-browser-model-dropdown {
   height: 300px;
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/explore/logTab.scss b/nezha-fronted/src/assets/css/components/page/dashboard/explore/logTab.scss
index 9f575b676..d88704e89 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/explore/logTab.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/logTab.scss
@@ -6,6 +6,14 @@
   .log-table{
     position: relative;
     min-height: 200px;
+    .table-no-data {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -35px;
+      margin-left: -50px;
+      text-align: center;
+    }
   }
   .log-table .nz-table2 {
     padding: 10px 0 0 0;
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
index b5d1aadec..294a087c1 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
@@ -1,5 +1,6 @@
 .border-t-1-de{
   border-top: 1px solid $--border-color-base;
+  padding-top: 10px;
 }
 .border-t-1-tr{
   border-top: 1px solid transparent;
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index c22d19d88..282bac6d1 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1214,32 +1214,30 @@ li {
 }
 .result-detail{
   height: 100px;
-  /*overflow-y: auto;*/
   margin-bottom: 20px;
 }
 .result-title-top{
-  font-family: Roboto-Regular;
   font-size: 14px;
-  color: #333333;
+  color: $--color-text-primary;
   letter-spacing: 0;
   font-weight: 400;
 }
 .nz-icon-import-success{
   margin-right: 5px;
-  color: #23BF9A ;
+  color: $--color-success;
   font-size: 14px;
-  background: #fff;
+  background: $--background-color-empty;
 }
 .nz-icon-import-failed {
   margin-right: 5px;
-  color: #EC7F66 ;
+  color: $--color-danger;
   font-size: 14px;
-  background: #fff;
+  background: $--background-color-empty;
 }
 .result-detail {
   opacity: 0.9;
-  background: #F6F8FA;
-  border: 1px solid #E7EAED;
+  background: $--background-color-base;
+  border: 1px solid $--border-color-light;
   border-radius: 2px;
   padding: 12px;
   margin-top: 10px;
@@ -1248,9 +1246,8 @@ li {
     display: flex;
     margin-bottom: 5px;
     .line-num {
-      font-family: Roboto-Medium;
       font-size: 14px;
-      color: #333333;
+      color: $--color-text-primary;
       letter-spacing: 0;
       line-height: 16px;
       font-weight: 600;
@@ -1258,16 +1255,14 @@ li {
     }
     .line-content{
       flex: 1;
-      font-family: Roboto-Black;
       font-size: 14px;
-      color: #666666;
+      color: $--color-text-regular;
       letter-spacing: 0;
       line-height: 16px;
       font-weight: 400;
       overflow: hidden;
-      white-space:nowrap;
-      overflow:hidden;
-      text-overflow:ellipsis;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
   }
 }
@@ -1278,11 +1273,11 @@ li {
   align-items: center;
   justify-content: center;
   font-size: 14px;
-  color: #666666;
+  color: $--color-text-regular;
   letter-spacing: 0;
   font-weight: 600;
   .nz-icon-import-success {
-    color: #23BF9A;
+    color: $--color-success;
     font-size: 80px;
   }
   .result-success-txt{
@@ -1307,7 +1302,6 @@ li {
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
-  /*height:600px;*/
   max-height:calc(100% - 30px);
   max-width:calc(100% - 30px);
 }
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 3bfb88ca4..54c97a47b 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -1,44 +1,5 @@
-<style scoped>
-  .chartBox {
-    float:left;
-    padding: 0 10px 10px 0;
-    position:relative;
-    box-sizing: border-box;
-  }
-  .no-data{
-    height: 1189px;
-    width: 100%;
-    position: relative;
-    .icon {
-      width: 5rem;
-      height: 5rem;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      margin-top: -52px;
-      margin-left: -40px;
-      text-align: center;
-    }
-    .no-data-div {
-      position: absolute;
-      font-size: 16px;
-      color: #333333;
-      font-weight: 400;
-      margin-left: -29px;
-      top: 52.5%;
-      left: 50%
-    }
-  }
-  .list-width{
-    width: 100%;
-    //height: 100%;
-    padding: 0 10px 5px 10px;
-    box-sizing: border-box;
-    overflow: hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
-  }
-</style>
 <template>
-  <div class="list-width"  id="listContainer" ref="listContainer"><!--v-drag-->
+  <div id="listContainer" ref="listContainer" class="list-width charts__chart-list"><!--v-drag-->
 
     <draggable v-model="dataList" :disabled="panelLock" :move="move" @end="end" @start="start"
                :scroll-sensitivity="150"
diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue
index e7332f736..72e969a91 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -177,7 +177,7 @@
         <div class="alert-label-title">{{$t('overall.state')}}</div>
         <div class="alert-label-value">
            <span style="width: auto">
-            <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
+            <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics active" /> {{$t('project.endpoint.metrics')}} </span>
             <span v-if="alertLabelData && alertLabelData.configs[0].state === 0">
               <span class="active-icon red-bg inline-block"></span>
             </span>
@@ -189,7 +189,7 @@
             </span>
           </span>
           <span style="width: auto">
-            <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
+            <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs active" /> {{$t('project.endpoint.logs')}} </span>
             <span v-if="alertLabelData && alertLabelData.configs[1].state === 0">
               <span class="active-icon red-bg inline-block"></span>
             </span>
@@ -401,110 +401,3 @@ export default {
 }
 
 </script>
-
-<style scoped>
-  .alert-label {
-    position: fixed;
-    background-color: white;
-    z-index: 3000;
-    padding: 10px 23px 10px 10px;
-    border-radius: 4px;
-    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
-  }
-  .alert-label__border {
-    background: #FFFFFF;
-    border: 1px solid #E7EAED;
-    box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
-    border-radius: 3px 3px 3px 3px 0 0;
-  }
-  .alert-labelUp {
-    position: fixed;
-    background-color: white;
-    z-index: 3000;
-    padding: 10px;
-    border-radius: 4px;
-    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
-  }
-  .alert-label::after {
-    content: '';
-    display: block;
-    width:0;
-    height:0;
-    overflow: hidden;
-    font-size: 0;
-    line-height: 0;
-    /*border: 5px;*/
-    /*border-style: dashed solid dashed dashed;*/
-    /*border-color: transparent #fff transparent transparent;*/
-    position: absolute;
-    top: 20px;
-    left: 0;
-    transform: translate(-100%, -50%);
-  }
-  .alert-labelUp::after {
-    content: '';
-    display: block;
-    width:0;
-    height:0;
-    overflow: hidden;
-    font-size: 0;
-    line-height: 0;
-    /*border: 5px;*/
-    /*border-style: dashed solid dashed dashed;*/
-    /*border-color: transparent #fff transparent transparent;*/
-    position: absolute;
-    bottom: 20px;
-    left: 0;
-    transform: translate(-100%, -50%);
-  }
-  .alert-label-info{
-    /*border: 1px solid #ebeef5;*/
-    border-bottom: none;
-    font-size: 13px;
-    line-height: 26px;
-  }
-  .alert-label-box{
-    display: flex;
-    flex-direction: row;
-    /*border-bottom: 1px solid #ebeef5;*/
-  }
-  .alert-label-title{
-    font-size: 14px;
-    color: #666666;
-    letter-spacing: 0;
-    line-height: 23px;
-    min-width: 110px;
-    padding: 0 3px 0 13px;
-  }
-  .alert-label-value{
-    height: 26px;
-    font-size: 14px;
-    color: #333333;
-    letter-spacing: 0;
-    line-height: 23px;
-  }
-  .alert-label-remark {
-    overflow: hidden;
-    text-overflow:ellipsis;
-    white-space: nowrap;
-    max-width: 210px;
-  }
-  .danger{
-    background-color: #d64f40;
-    color: white;
-    padding: 2px 5px;
-    border-radius: 4px;
-  }
-  .success{
-    background-color: #50d050;
-    color: white;
-    padding: 2px 5px;
-    border-radius: 4px;
-  }
-  /deep/.active-icon{
-    margin-top: 0;
-  }
-  .colorFA901C{
-    color: #fa901c;
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
index 825eb0431..d418ceb99 100644
--- a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
@@ -16,17 +16,6 @@
       <div class="alert-rule-box">
         <div class="alert-rule-title">{{$t('alert.severity')}}</div>
         <div class="alert-rule-value"><i class="nz-icon nz-icon-circle" :style="{color:severityColor,'font-size':'12px','margin-right':'5px'}"></i>{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : '--'}}</div>
-        <!--        <div class="alert-rule-value severity">
-                  <span v-if="alertRuleData && alertRuleData.severity === 'P1'" class="P1">
-                    {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P1'}).label}}
-                  </span>
-                  <span v-if="alertRuleData && alertRuleData.severity === 'P2'" class="P2">
-                    {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P2'}).label}}
-                  </span>
-                  <span v-if="alertRuleData && alertRuleData.severity === 'P3'" class="P3">
-                    {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P3'}).label}}
-                  </span>
-                </div>-->
       </div>
       <div class="alert-rule-box">
         <div class="alert-rule-title">{{$t('alert.config.expr')}}</div>
@@ -155,170 +144,3 @@ export default {
 }
 
 </script>
-
-<style scoped>
-  .alert-rule-tip {
-    position: fixed;
-    background-color: white;
-    z-index: 3000;
-    padding: 10px 23px 10px 10px;
-    border-radius: 4px;
-    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
-  }
-  .alert-rule-tip::after {
-    content: '';
-    display: block;
-    width:0;
-    height:0;
-    overflow: hidden;
-    font-size: 0;
-    line-height: 0;
-    border: 5px;
-    border-style: dashed solid dashed dashed;
-    border-color: transparent #fff transparent transparent;
-    position: absolute;
-    top: 100px;
-    left: 0;
-    transform: translate(-100%, -50%);
-  }
-  .alert-rule-abs {
-    background-color: white;
-    z-index: 3000;
-    padding: 10px;
-    border-radius: 4px;
-    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
-  }
-  .alert-rule-tip-Up {
-    position: fixed;
-    background-color: white;
-    z-index: 3000;
-    padding: 10px;
-    border-radius: 4px;
-    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
-  }
-  .alert-rule-tip-Up::after {
-    content: '';
-    display: block;
-    width:0;
-    height:0;
-    overflow: hidden;
-    font-size: 0;
-    line-height: 0;
-    border: 5px;
-    border-style: dashed solid dashed dashed;
-    border-color: transparent #fff transparent transparent;
-    position: absolute;
-    bottom: 95px;
-    left: 0;
-    transform: translate(-100%, -50%);
-  }
-  .alert-rule-abs-Up {
-    background-color: white;
-    z-index: 3000;
-    padding: 10px;
-    border-radius: 4px;
-    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
-  }
-  .alert-rule-info{
-    border-bottom: none;
-    font-size: 13px;
-    line-height: 26px;
-  }
-  .alert-rule-box{
-    display: flex;
-    flex-direction: row;
-  }
-  .alert-rule-title{
-    text-align: left;
-    min-width: 110px;
-    color: #666;
-    padding: 0 3px 0 13px;
-  }
-  .alert-rule-value{
-    text-align: left;
-    color: #1a1a1a;
-    padding: 0 3px 0 13px;
-    width: 159px;
-    word-wrap: break-word;
-    white-space: normal;
-    overflow: hidden;
-  }
-  .severity .P1{
-    background: #F5846A;
-    border-radius: 2px;
-    font-size: 12px;
-    color: #FFFFFF;
-    padding: 2px 6px;
-  }
-  .severity .P2{
-    background: #F7A54A;
-    border-radius: 2px;
-    font-size: 12px;
-    color: #FFFFFF;
-    padding: 2px 6px;
-  }
-  .severity .P3{
-    background: #F1C13D;
-    border-radius: 2px;
-    font-size: 12px;
-    color: #FFFFFF;
-    padding: 2px 6px;
-  }
-  .alert-label__border {
-    background: #FFFFFF;
-    border: 1px solid #E7EAED;
-    box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
-    border-radius: 3px 3px 3px 3px 0 0;
-  }
-/*  .alert-rule-info::after {
-    content: '';
-    display: block;
-    width:0;
-    height:0;
-    overflow: hidden;
-    font-size: 0;
-    line-height: 0;
-    border: 5px;
-    border-style: dashed solid dashed dashed;
-    border-color: transparent #fff transparent transparent;
-    position: absolute;
-    top: calc(50% - 6px);
-    left: 0;
-    transform: translate(-100%, -100%);
-  }
-  .alert-rule-info{
-    border: 1px solid #ebeef5;
-    border-bottom: none;
-    font-size: 13px;
-    line-height: 26px;
-  }*/
-/*  .alert-rule-info{
-    border: 1px solid #ebeef5;
-    border-bottom: none;
-    font-size: 13px;
-    line-height: 26px;
-    display: flex;
-    background-color: white;
-    padding: 10px;
-    transform: translateY(-50%);
-    overflow-wrap: break-word;
-    border-radius: 4px;
-    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
-  }
-  .alert-rule-box{
-    display: flex;
-    border-bottom: 1px solid #ebeef5;
-  }
-  .alert-rule-title{
-    text-align: left;
-    width: 80px;
-    border-right: 1px solid #ebeef5;
-    color: #666;
-    padding: 0 3px 0 13px;
-  }
-  .alert-rule-value{
-    text-align: left;
-    color: #1a1a1a;
-    padding: 0 3px 0 13px;
-  }*/
-</style>
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index defe32216..de5fb5d7e 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -293,135 +293,3 @@ export default {
   }
 }
 </script>
-<style lang="scss">
-/* begin--二级顶部工具栏*/
-.sub-top-tools {
-  display: flex;
-  height: 32px;
-  align-items: center;
-  justify-content: space-between;
-  border-top: 1px solid #DCDFE6;
-  border-bottom: 1px solid #E4E7ED;
-  margin: 0 -6px;
-  padding-right: 80px;
-  background-color: $content-right-background-color;
-  margin-bottom: 10px;
-}
-.sub-top-tools>div {
-  margin-top: 2px;
-}
-.sub-top-tools .top-tool-search {
-  width: 260px;
-  margin: -1px 0 0 0;
-  .select_input input {
-    background-color: white;
-  }
-}
-.bottom-data-list .sub-container {
-  padding: 10px;
-  height: calc(100% - 64px);
-  background-color: #f6f6f6;
-  overflow-y: auto;
-  &>div {
-    background-color: white;
-  }
-  &>.nz-table2 {
-    height: 100%;
-    padding-top: 20px !important;
-  }
-}
-.sub-top-tools .top-tool-btn-txt .nz-icon{
-  display: inline-block;
-  font-size: 12px;
-  margin-right: 6px;
-}
-.sub-top-tool-right {
-  display: flex;
-  align-content: center;
-}
-.has-sub-popper {
-  color: $danger-color;
-}
-.sub-box {
-  height: 50%;
-  position: relative;
-}
-.sub-list {
-  height: calc(100% - 9px);
-  position: absolute;
-  width: 100%;
-  z-index: 1;
-  top: 9px;
-
-  .sub-list__tabs {
-    height: 100%;
-    background-color: white;
-
-    &>div {
-      height: 100%;
-      background-color: #f6f6f6;
-
-      &>.nz-table2 {
-        height: calc(100% - 92px);
-        padding: 20px 20px 0;
-      }
-    }
-    .chart-list{
-      .nz-table2 {
-        box-sizing: border-box;
-        padding: 0;
-      }
-    }
-  }
-}
-.main-and-sub-transition {
-  transition: .4s height;
-}
-
-.bottom-panel {
-  padding-top: 15px;
-  background-color: white;
-  /*padding-bottom: 50px;*/
-  /*height: calc(100% - 50px);*/
-  padding-bottom: 10px;
-  height: calc(100% - 30px);
-}
-.bottom-log {
-  padding: 15px;
-}
-.bottom-common {
-  padding: 20px;
-  height: 100%;
-  box-sizing: border-box;
-}
-.chart-temp{
-  height: calc(100% - 20px);
-  overflow-y: auto;
-}
-.resize-modal {
-  width: calc(100% - 240px);
-  opacity: 0.6;
-  background-color: #f5f9ff;
-  border: 1px solid #a7d0f7;
-  box-sizing: border-box;
-  position: fixed;
-  cursor: ns-resize;
-  display: none;
-  z-index: 20;
-  vertical-align: bottom;
-  bottom: 0;
-}
-.bottom-box .sub-container{
-  height: calc(100% - 64px);
-}
-.bottom-box .sub-container .nz-table2{
-  height: calc(100% - 20px);
-}
-.asset-detail .sub-container .nz-table2 {
-  height: 100%;
-}
-.endpoint-tab-new .sub-container .nz-table2 {
-  height: 100%;
-}
-/* end--二级顶部工具栏*/
-</style>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
index 0bf1f33c3..b405fa782 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -1,18 +1,14 @@
 <style scope>
-  .chart-bottom {
-    text-align: center;
-    margin-top: 16px;
-  }
-  .plTableBox.nz-table /deep/  .el-table{
-    display: block !important;
-  }
+.plTableBox.nz-table /deep/  .el-table{
+  display: block !important;
+}
 .project-calendar{
   margin-top: 2px;
 }
-  .control-icon-unchecked {
-    color: #999999;
-    cursor: not-allowed;
-  }
+.control-icon-unchecked {
+  color: #999999;
+  cursor: not-allowed;
+}
 </style>
 <style>
   .endpoint-dialog .el-dialog__body{
diff --git a/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue b/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
index 6b56dc43f..50866eeb5 100644
--- a/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
@@ -232,6 +232,3 @@ export default {
   left: 440px !important;
 }
 </style>
-<style scoped lang="scss">
-  @import '../detailList';
-</style>
diff --git a/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue b/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
index 3d3aa7eb4..b2f7a5160 100644
--- a/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
@@ -171,7 +171,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="scss">
-  @import '../detailList';
-</style>
diff --git a/nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue b/nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue
index 54a14e7ab..fd0991b81 100644
--- a/nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue
@@ -155,7 +155,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="scss">
-  @import '../detailList';
-</style>
diff --git a/nezha-fronted/src/components/common/detailView/list/detailList.scss b/nezha-fronted/src/components/common/detailView/list/detailList.scss
deleted file mode 100644
index d773512ce..000000000
--- a/nezha-fronted/src/components/common/detailView/list/detailList.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-.order-box{
-  display: flex;
-  height:40px;
-  padding: 0 15px;
-  line-height: 40px;
-  align-items: center;
-  /*.detail-select{*/
-  /*  height: 30px;*/
-  /*  line-height: 30px;*/
-  /*  flex: 1;*/
-  /*  /deep/ .el-input--small{*/
-  /*    height: 30px;*/
-  /*    line-height: 30px;*/
-  /*    background-color: rgba(9,30,66,0.08);*/
-  /*    border: none;*/
-  /*    color: #344563;*/
-  /*    input{*/
-  /*      height: 30px;*/
-  /*      line-height: 30px;*/
-  /*      background-color: rgba(9,30,66,0.08);*/
-  /*      border: none;*/
-  /*      color: #344563;*/
-  /*    }*/
-  /*  }*/
-  /*}*/
-  /*.detail-select:hover{*/
-  /*  /deep/ .el-input--small{*/
-  /*    input{*/
-  /*      background-color: rgba(9,30,66,0.13);*/
-  /*    }*/
-  /*  }*/
-  /*}*/
-  /*.detail-button{*/
-  /*  height: 28px;*/
-  /*  line-height: 28px;*/
-  /*  background-color: rgba(9,30,66,0.08);*/
-  /*  border: none;*/
-  /*  .nz-icon{*/
-  /*    color: #344563;*/
-  /*  }*/
-  /*}*/
-  /*.detail-button:hover{*/
-  /*  background-color: rgba(9,30,66,0.13);*/
-  /*}*/
-}
-.detail-row-box{
-  height: calc(100% - 40px);
-  overflow: hidden;
-  overflow-y: auto;
-}
-.detail-row{
-  width: 245px;
-  padding: 0px 0 0px 15px;
-  height: 60px;
-  border-bottom: 1px solid #E7EAED;
-  cursor: pointer;
-}
-.detail-row:last-of-type{
-  border-bottom: none
-}
-.detail-row-info{
-  display: flex;
-  height: 100%;
-  width: calc(100% - 15px);
-  justify-content:center;
-  flex-direction: column;
-  > div{
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .asset-manageIp{
-    font-size: 16px;
-    color: #333333;
-    font-weight: 400;
-    .nz-icon{
-      font-size: 14px;
-      padding-right: 2px;
-    }
-  }
-  .asset-name {
-    padding-left: 22px;
-    width: calc(100% - 22px);
-    font-size: 14px;
-    color: #999999;
-    font-weight: 400;
-  }
-}
-.selected{
-  background: #FFFBF6;
-}
-.colorEF7458{
-  color: #EF7458;
-}
-.color23BF9A{
-  color: #23BF9A;
-}
-.colorFA901C{
-  color: #fa901c;
-}
diff --git a/nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue b/nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue
index ee4970ac9..3c9ee8b63 100644
--- a/nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue
@@ -152,7 +152,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="scss">
-  @import '../detailList';
-</style>
diff --git a/nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue b/nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue
index cd89f1092..aaca352af 100644
--- a/nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue
@@ -135,7 +135,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="scss">
-  @import '../detailList';
-</style>
diff --git a/nezha-fronted/src/components/common/detailView/list/terminalLogDetail/terminalLogDetail.vue b/nezha-fronted/src/components/common/detailView/list/terminalLogDetail/terminalLogDetail.vue
index 43ca6523e..e76f4f657 100644
--- a/nezha-fronted/src/components/common/detailView/list/terminalLogDetail/terminalLogDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/terminalLogDetail/terminalLogDetail.vue
@@ -161,7 +161,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="scss">
-  @import '../detailList';
-</style>
diff --git a/nezha-fronted/src/components/common/detailView/list/userDetail/userDetail.vue b/nezha-fronted/src/components/common/detailView/list/userDetail/userDetail.vue
index c967ce4cf..0ce5180de 100644
--- a/nezha-fronted/src/components/common/detailView/list/userDetail/userDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/userDetail/userDetail.vue
@@ -136,7 +136,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="scss">
-  @import '../detailList';
-</style>
diff --git a/nezha-fronted/src/components/common/detailView/nzDetailView.vue b/nezha-fronted/src/components/common/detailView/nzDetailView.vue
index d79237b80..b7e821708 100644
--- a/nezha-fronted/src/components/common/detailView/nzDetailView.vue
+++ b/nezha-fronted/src/components/common/detailView/nzDetailView.vue
@@ -182,12 +182,3 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-  @import './detailView.scss';
-  .active{
-    color: #fa901c;
-  }
-  .nz-detail-view-no-data{
-    border-top: 1px solid #E7EAED;
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue b/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
index 2cf984fef..cc4b21460 100644
--- a/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
+++ b/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
@@ -305,66 +305,3 @@ export default {
   }
 }
 </script>
-<style scoped lang="scss">
-  .detail-view-right-top{
-    height: 60px;
-    background: #FFFFFF;
-    border: 1px solid #E7EAED;
-    margin-bottom: 10px
-  }
-  .sub-box{
-    height: 100%;
-    flex-direction: column;
-  }
-  .sub-list__tabs {
-    flex: 1;
-    background-color: white;
-    /*height: calc(100% - 82px);*/
-    height: calc(100% - 12px);
-    border: 1px solid #E7EAED;
-    &>div {
-      height: 100%;
-      &>.nz-table2 {
-        height: calc(100% - 92px);
-        padding: 20px 20px 0;
-      }
-    }
-    .chart-list{
-      .nz-table2 {
-        box-sizing: border-box;
-        padding: 0;
-      }
-    }
-  }
-  /deep/ .bottom-data-list .sub-container{
-    height: calc(100% - 45px);
-    position: relative;
-    padding: 0;
-    background-color: #fff;
-    overflow-y: hidden;
-  }
-  .sub-box /deep/ .top-tools.top-tools--sub{
-    border: none;
-    padding: 0 15px 0px 0px;
-    margin-right: 15px;
-    margin-left: 20px;
-    border-bottom: 1px solid #E7EAED;
-  }
-  .sub-box /deep/ .list-width {
-    padding: 0;
-  }
-  .sub-box /deep/ .nz-table2{
-    padding: 20px;
-    height: 100%;
-  }
-  .sub-box /deep/ .table-list{
-    padding: 0;
-    height: 100%;
-  }
-  .sub-box /deep/ .pagination-bottom {
-    bottom: -3px;
-  }
-  .sub-box /deep/ .sub-list-tab{
-    cursor: pointer;
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
index d805c9dad..82900c47f 100644
--- a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
+++ b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
@@ -340,30 +340,16 @@ export default {
                             series.push(seriesItem.theData)
                             seriesItem = null
                           }
-                        } else if (chartItem.elements && chartItem.elements[innerPos]) {
-                          // 无数据提示
-                          /*
-                            const currentInfo = chartItem.elements[innerPos];
-                            const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
-                            this.$message.warning({
-                              duration: 15,
-                              content: errorMsg,
-                              closable: true,
-                            });
-                            */
                         }
                       })
                     }
                   }
                 } else {
                   if (response.msg) {
-                    // this.$message.error(response.msg);
                     errorMsg = response.msg
                   } else if (response.error) {
-                    // this.$message.error(response.error);
                     errorMsg = response.error
                   } else {
-                    // this.$message.error(response);
                     errorMsg = response
                   }
                 }
@@ -457,79 +443,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-  .tooltip-box{
-      padding: 10px;
-      max-height: 400px;
-      min-height: 200px;
-      height: 100%;
-      box-sizing: border-box;
-      background: #FFFFFF;
-      border: 1px solid #E7EAED;
-      box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
-      border-radius: 3px 3px 3px 3px;
-
-    .tooltip-box-chart{
-      max-height: 400px;
-      min-height: 200px;
-      height: 100%;
-      display: flex;
-      overflow: hidden;
-      .line-chart{
-        width: 300px;
-        flex: 1;
-        /deep/ .resize-box{
-          border: none;
-        }
-      }
-      .chart-remark{
-        white-space: pre-wrap;
-        width: 110px;
-        font-size: 12px;
-        color: #666666;
-        letter-spacing: 0;
-        font-weight: 400;
-        word-break: break-word;
-        padding-right: 5px;
-        height: calc(100% - 29px) !important;
-        margin-top: 29px;
-        padding-top: 5px;
-        line-height: 16px;
-        border-top: 1px dashed  #DCE1E7;
-      }
-    }
-    .tooltip-box-info{
-      border: 1px solid #E7EAED;
-      background: #FFFFFF;
-      max-height: 400px;
-      min-height: 200px;
-      min-width: 186px;
-      max-width: 300px;
-    }
-      /deep/ .line-area{
-          padding: 0;
-      }
-  }
-/deep/ .topology-chart-title{
-    text-align: left;
-    width: 100%;
-    line-height: 19px;
-    padding: 5px 0 5px 10px;
-    height: 29px;
-    box-sizing: border-box;
-    border-bottom: 1px dashed  #DCE1E7;
-}
-  .topology-tool-tip /deep/ .topology-chart-title{
-    margin-top: -23px;
-    border-bottom: 1px dashed #DCE1E7;
-    padding-left: 0;
-    margin-left: 10px;
-    padding: 0;
-    box-sizing: border-box;
-    width: 388px;
-  }
-  .topology-tool-tip /deep/ .line-area{
-    margin-top: -15px;
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/project/popData/Info.vue b/nezha-fronted/src/components/common/project/popData/Info.vue
index cb47c8075..f4f694024 100644
--- a/nezha-fronted/src/components/common/project/popData/Info.vue
+++ b/nezha-fronted/src/components/common/project/popData/Info.vue
@@ -72,73 +72,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-  .info-content{
-    display: flex;
-    margin-right: 15px;
-    flex-direction: column;
-    justify-content: space-between;
-    background: #FFFFFF;
-    border: 1px solid #E7EAED;
-    box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
-    border-radius: 3px 3px 3px 3px 0 0;
-  }
-  .info-box{
-    background: #FFFFFF;
-    margin-bottom: 15px;
-    min-width: 260px;
-  }
-  .info-box-title{
-    background: #EFEFEF;
-    font-size: 14px;
-    color: #333333;
-    height: 26px;
-    line-height: 26px;
-    padding-left: 12px;
-    font-weight: bold;
-  }
-  .info-box-content{
-    font-size: 12px;
-    color: #333333;
-  }
-  .content-box{
-    padding: 0 12px;
-    height: 26px;
-    line-height: 24px;
-  }
-  .content-title{
-    font-size: 14px;
-    color: #333333;
-    min-width: 120px;
-    display: inline-block;
-    color: #666666;
-    padding: 3px 0;
-  }
-  .content-text{
-    color: #333333;
-    font-size: 14px;
-    padding: 3px 5px;
-  }
-  .module-type{
-    text-align: center;
-    width: 44px;
-    display: inline-block;
-    height: 20px;
-    margin: 0 auto;
-    line-height: 20px;
-  }
-  .module-type:first-child{
-    border-radius: 4px 0 0 4px;
-    margin-right: -4px;
-    border-right: none;
-  }
-  .module-type:last-child{
-    border-radius: 0 4px 4px 0;
-    z-index: -1;
-  }
-  .module-type-select{
-    border-color:rgba(255,140,14,0.54);
-    color: rgba(255,140,14,0.54);
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index a77adad0d..fd3b91554 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -673,67 +673,3 @@ export default {
   display: none;
 }
 </style>
-<style scoped lang="scss">
-  .severity-circle{
-    position: absolute;
-    left: 10px;
-    top: 0;
-  }
-  .severity-box{
-    position: relative;
-  }
-  .severity-box /deep/ .el-select .el-input__inner{
-    padding-left: 25px;
-  }
-  .half-form-item {
-    width: calc(50% - 5px);
-    display: inline-block;
-    .el-form-item__content,.el-select{
-      width: 100%;
-    }
-  }
-  .right-box-alert-rule /deep/ .right-box__container .el-form-item__content .el-input-group--prepend{
-    width: 100%;
-  }
-  /deep/ .rich-text-editor{
-    line-height: 24px;
-  }
-   /deep/ .el-input-group__prepend{
-     position: relative;
-     .hide-icon{
-       width: 38px;
-       .el-input__inner{
-         border: none;
-         text-align: center;
-       }
-     }
-  }
-  .alert-rule-split-title{
-    background: #F6F6F6;
-    font-size: 14px;
-    color: #333333;
-    letter-spacing: 0;
-    font-weight: 400;
-    line-height: 24px;
-    padding-left: 10px;
-    margin-bottom: 10px;
-    height: 24px;
-  }
-  /deep/ .el-form-item__content .el-input-group{
-    vertical-align: middle;
-  }
-  .severity-item{
-    color: #999999;
-    font-size: 12px;
-    max-width: 120px;
-    overflow: hidden;
-  }
-  .text-ellipsis{
-    overflow:hidden;
-    text-overflow:ellipsis;
-    white-space:nowrap
-  }
-  /deep/ .query-row  .metric-selector-input-box {
-    width: calc(100% - 120px);
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
index ba44e9691..6eda566c5 100644
--- a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
@@ -291,56 +291,3 @@ export default {
     margin-left: 5px;
   }
 </style>
-<style>
-.severity .P1{
-  background: #F5846A;
-  border-radius: 2px;
-  font-size: 12px;
-  color: #FFFFFF;
-  padding: 2px 6px;
-}
-.severity .P2{
-  background: #F7A54A;
-  border-radius: 2px;
-  font-size: 12px;
-  color: #FFFFFF;
-  padding: 2px 6px;
-}
-.severity .P3{
-  background: #F1C13D;
-  border-radius: 2px;
-  font-size: 12px;
-  color: #FFFFFF;
-  padding: 2px 6px;
-}
-.schedEnableTitle{
-  padding: 20px 15px;
-  margin-right: 0;
-  left: 1995px !important;
-  background: #FFFFFF;
-  border: 1px solid rgba(119,131,145,0.60);
-  box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
-  border-radius: 3px;
-}
-.schedEnableTitle .nz-icon-a-rilizhou, .schedEnableTitle .nz-icon-dingshishijian{
-  font-size: 14px;
-  color: #666666;
-  margin-right: 12px;
-}
-.schedEnableTitle .week-item{
-  width: 32px;
-  height: 22px;
-  line-height: 22px;
-  opacity: 0.9;
-  background: #F6F6FA;
-  border-radius: 2px;
-  display: inline-block;
-  font-size: 12px;
-  color: #666666;
-  letter-spacing: 0;
-  font-weight: 400;
-  padding-left: 3px;
-  margin-right: 12px;
-  margin-bottom: 6px;
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
index dac7c9bff..78aa67317 100644
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -124,7 +124,7 @@
               <div v-html="suspendedStr(scope.row.configs[0].state)"></div>
             </div>
             <span slot="reference" style="width: auto">
-              <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
+              <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics active" /> {{$t('project.endpoint.metrics')}} </span>
               <span v-if="scope.row.configs[0].state===0 || !scope.row.configs[0].state">
                 <span class="active-icon red-bg inline-block"></span>
               </span>
@@ -141,7 +141,7 @@
               <div v-html="suspendedStr(scope.row.configs[1].state)"></div>
             </div>
             <span slot="reference" style="width: auto">
-              <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
+              <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs active" /> {{$t('project.endpoint.logs')}} </span>
               <span v-if="scope.row.configs[1].state===0 || !scope.row.configs[1].state">
                 <span class="active-icon red-bg inline-block"></span>
               </span>
@@ -337,11 +337,6 @@ export default {
 }
 </script>
 <style scoped>
-  .endpoint-num{
-    padding: 0 3px;
-    cursor: pointer;
-    border-radius: 2px;
-  }
   .bagEF7458{
     background: #EF7458;
     color: #fff;
@@ -367,38 +362,13 @@ export default {
   .color23BF9A{
     color: #23BF9A;
   }
-  .endpoint-num, .alert-num{
-    cursor: pointer;
-  }
   .inline-block{
     display: inline-block;
   }
   .pointer{
     cursor: pointer;
   }
-  .state-box{
-    display: flex;
-    flex-wrap: wrap;
-    border: 1px solid #E7EAED;
-    border-bottom: none;
-  }
-  .state-box-content{
-    padding: 0 5px;
-    width: 50%;
-    border-bottom: 1px solid #E7EAED;
-  }
-  .state-box-content:nth-of-type(odd){
-    border-right: 1px solid #E7EAED;
-  }
-  .state-content-text{
-    width:64px;text-align:left;margin-right: 5px;display: inline-block
-  }
-  .colorFA901C{
-    color: #fa901c;
-  }
   .endpoint-cell-left{
-    /*display: inline-block;*/
-    /*width: 70px;*/
     margin-right: 5px;
   }
 </style>
@@ -412,12 +382,6 @@ export default {
     right: 6px;
     top: 6px;
   }
-  .data-column__endpoint {
-    background: #FFFFFF;
-    border: 1px solid #E7EAED;
-    box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
-    border-radius: 3px 3px 3px 3px 0 0;
-  }
   .copy-value-content__pre {
     height: 200px;
     margin-top: 20px;
diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue
index 561ca44dd..e21aca718 100644
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="alert-message-list">
     <nz-data-list
       ref="dataList"
       :api="url"
@@ -1009,19 +1009,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="scss">
-  .active{
-    border-bottom: 3px solid #fa901c;
-    color: #333;
-    cursor: default;
-    font-weight: bold;
-  }
-  .list-page /deep/ .main-container{
-    display: flex;
-    flex-direction: column;
-    /deep/ .nz-table2{
-      flex: 1;
-    }
-  }
-</style>
diff --git a/nezha-fronted/src/components/page/alert/nzAlertTag.vue b/nezha-fronted/src/components/page/alert/nzAlertTag.vue
index ad21c0ef9..70c6b12ad 100644
--- a/nezha-fronted/src/components/page/alert/nzAlertTag.vue
+++ b/nezha-fronted/src/components/page/alert/nzAlertTag.vue
@@ -16,82 +16,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="scss">
-.nz-alert-tag {
-  border: 1px solid;
-  height: 20px;
-  font-size: 12px;
-  line-height: 20px;
-  border-radius: 4px;
-  display: inline-block;
-  box-sizing: content-box;
-  display: inline-flex;
-}
-.nz-alert-tag__label {
-  border-radius: 3px 0 0 3px;
-  padding: 0 4px;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  word-break: break-all;
-  display: inline-block;
-  height: 21px;
-  box-sizing: content-box;
-  margin-left: -1px;
-}
-.nz-alert-tag__content {
-  flex: 1;
-  border-radius: 0 3px 3px 0;
-  padding: 0 4px;
-  min-width: 36px;
-  max-width: 115px;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  word-break: break-all;
-  display: inline-block;
-}
-.nz-alert-tag_normal {
-  border-color: #409eff;
-  .nz-alert-tag__label {
-    border-right: 1px solid #409eff;
-    background-color: #409eff;
-    color: white;
-  }
-}
-.nz-alert-tag_success {
-  border-color: #50d050;
-  .nz-alert-tag__label {
-    border-right: 1px solid #50d050;
-    background-color: #50d050;
-    color: white;
-  }
-}
-.nz-alert-tag_info {
-  border-color: #909399;
-  .nz-alert-tag__label {
-    border-right: 1px solid #909399;
-    background-color: #909399;
-    color: white;
-  }
-}
-.nz-alert-tag_danger {
-  border-color: #d64f40;
-  .nz-alert-tag__label {
-    border-right: 1px solid #d64f40;
-    background-color: #d64f40;
-    color: white;
-  }
-}
-.nz-alert-tag_warning {
-  border-color: #e6a23c;
-  .nz-alert-tag__label {
-    border-right: 1px solid #e6a23c;
-    background-color: #e6a23c;
-    color: white;
-  }
-}
-</style>
diff --git a/nezha-fronted/src/components/page/config/mibBrowser.vue b/nezha-fronted/src/components/page/config/mibBrowser.vue
index 3799c4852..0aa37cfbf 100644
--- a/nezha-fronted/src/components/page/config/mibBrowser.vue
+++ b/nezha-fronted/src/components/page/config/mibBrowser.vue
@@ -571,241 +571,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.mib-browser-ad-search-item {
-  margin-bottom: 10px;
-}
-.mib-browser-ad-search .el-radio-group .el-radio-button__inner {
-  height: 24px;
-  line-height: 0;
-}
-.mib-browser-ad-search-label {
-  line-height: 24px;
-}
-.mib-browser-ad-search {
-  width: 300px;
-}
-.mib-browser-model-dropdown {
-  height: 300px;
-  overflow-y: auto;
-}
-.mib-browser {
-  .operation {
-    width: 90px;
-  }
-  #browser-advanced {
-    border-radius: 0;
-    border-right: 1px solid rgba(162,162,162,0.50);
-  }
-  .mib-browser-btn-group {
-    position: relative;
-  }
-  .mib-browser-ad-tip {
-    position: absolute;
-    transform: translate(-100%, -100%);
-    top: 3px;
-    left: 114px;
-    width: 20px;
-    min-width: 0;
-    font-size: 12px;
-    text-align: center;
-    padding: 0;
-    color: #999;
-    height: 13px;
-  }
-  .mib-browser-ad-tip::after {
-    content: '';
-    display: block;
-    width:0;
-    height:0;
-    overflow: hidden;
-    font-size: 0;
-    line-height: 0;
-    border: 4px;
-    border-style: solid dashed dashed dashed;
-    border-color: #fff transparent transparent transparent;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translate(-6px, 6px);
-  }
-
-  .mib-browser-box {
-    display: flex;
-    height: calc(100% - 55px);
-    width: 100%;
-    border: 1px solid #D8D8D8;
-    border-radius: 4px;
-    box-sizing: border-box;
-  }
-
-  .mib-browser-left {
-    height: 100%;
-    width: 28%;
-  }
-  .mib-browser-tree {
-    height: calc(69% - 40px);
-    background-color: white;
-    border-radius: 4px 0 0 0;
-    font-size: 14px;
-    padding-bottom: 5px;
-    width: 100%;
-    overflow: auto;
-  }
-  .mib-browser-detail {
-    height: 31%;
-    width: 100%;
-  }
-  .el-scrollbar__wrap .el-scrollbar__view, .el-scrollbar__wrap, .el-tree {
-    height: 100%;
-  }
-  .tree-detail-resize {
-    height: 2px;
-    width: 100%;
-    background-color: #fcfcfc;
-    cursor: ns-resize;
-    border: 1px solid #d8d8d8;
-    border-left: none;
-    border-right: none;
-  }
-  .mib-browser-detail-row {
-    line-height: 25px;
-    background-color: white;
-    border-bottom: 1px solid #D8D8D8;
-    font-size: 14px;
-    display: flex;
-  }
-  .mib-browser-detail-row:last-of-type {
-    border-bottom: none;
-    position: relative;
-  }
-  .mib-browser-detail-row:last-of-type div:last-of-type {
-    position: absolute;
-    left: calc(25% + 2px);
-    width: calc(75% - 20px);
-    height: 100%;
-    padding-right: 12px;
-    overflow: auto;
-  }
-  /*第一列宽25%*/
-  .mib-browser-detail-row>div:first-of-type {
-    color: #666;
-    width: 25%;
-    word-break: break-all;
-  }
-  /*第一列宽75%*/
-  .mib-browser-detail-row>div:last-of-type {
-    width: 75%;
-    border-left: 1px solid #D8D8D8;
-    word-break: break-all;
-  }
-  .mib-browser-detail-row:not(:last-of-type) {
-    border-bottom: 1px solid #D8D8D8;
-    height: 25px;
-  }
-  .mib-browser-detail-row:last-of-type {
-    min-height: calc(100% - 182px);
-  }
-  .mib-browser-detail-row>div {
-    padding-left: 5px;
-  }
-  .mib-browser-detail-description {
-    padding: 0 14px 0 0;
-  }
-  .mib-browser-right {
-    width: calc(72% - 4px);
-    height: 100%;
-  }
-  .left-right-resize {
-    width: 2px;
-    border: 1px solid #d8d8d8;
-    background-color: #fcfcfc;
-    cursor: ew-resize;
-    height: 100%;
-    border-top: none;
-    border-bottom: none;
-  }
-  .mib-browser-table {
-    height: calc(100% - 50px) !important;
-    width: calc(100% - 20px) !important;
-    padding: 10px;
-    .ant-table-scroll {
-      max-height: unset !important;
-      width: 100%;
-      height: 100%;
-
-      .el-table {
-        height: calc(100% - 20px) !important;
-        width: calc(100% - 20px) !important;
-      }
-      .el-table__body-wrapper td {
-        padding: 2px 0 !important;
-      }
-    }
-  }
-  .mib-browser-table-title, .mib-browser-tree-title {
-    height: 30px;
-    line-height: 30px;
-    color: #333;
-    font-size: 16px;
-    border-bottom: 1px solid #D8D8D8;
-    padding: 0 5px 0 8px;
-    display: flex;
-    justify-content: space-between;
-  }
-  .mib-browser-table-op {
-    display: inline-block;
-    margin: 0 5px;
-    cursor: pointer;
-    color: #666;
-  }
-  .mib-browser-table-op.mib-browser-table-op-light {
-    color: #ccc;
-    cursor: default;
-  }
-  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
-    background-color: #F5F7FA;
-    font-weight: bold;
-    color: #ee9d3f;
-  }
-
-  .pagination-bottom {
-    display: none;
-  }
-}
-
-.mib-browser-table.nz-table th .cell {
-  height: 28px;
-  line-height: 28px;
-}
-.mib-browser-table.nz-table td .cell {
-  height: 28px;
-  min-height: 28px;
-  line-height: 28px;
-}
-.snmp-set-form {
-  padding: 0 15px;
-}
-.snmp-set-form>div {
-  margin-top: 15px;
-  width: calc(100% - 11px);
-}
-.snmp-set-form>span {
-  color: #F56C6C;
-}
-.mib-browser .el-dialog .el-dialog__footer {
-   margin-top: 0;
- }
-.mib-browser .el-button:focus, .mib-browser .el-button:hover {
-  color: unset;
-  border-color: unset;
-  background-color: unset;
-}
-</style>
-<style scoped>
-  .plTableBox.nz-table /deep/  .el-table{
-    display: block !important;
-    border-top: 1px solid #d8d8d8;
-  }
-</style>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
index 6107cb2be..593d08a82 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -1004,381 +1004,3 @@ export default {
   }
 }
 </script>
-<style lang="scss">
-.explore-collapse.el-collapse {
-  border: none;
-  .el-collapse-item {
-    margin-bottom: 10px;
-    border: 1px solid $--right-box-border-color;
-    border-bottom: none;
-  }
-  .el-collapse-item__header {
-    height: 38px;
-    line-height: 38px;
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-
-    i {
-      margin: 0 8px;
-    }
-  }
-  .el-collapse-item__content {
-    padding: 0 30px 20px;
-  }
-}
-
-</style>
-<style lang="scss" scoped>
-  .el-dropdown-link {
-    span:nth-of-type(1) {
-      color:  #FA901C;
-      padding-right: 10px;
-    }
-    span:nth-of-type(2) {
-      font-family: Roboto-Medium;
-      font-size: 16px;
-      color: #333333;
-      font-weight: 500;
-      padding-right: 20px;
-    }
-    span:nth-of-type(3) {
-      color: #BEBEBE;
-    }
-  }
-  .explore {
-    height: 100%;
-    .explore-close {
-      display: flex;
-      justify-content: flex-end;
-      padding: 18px 20px 4px 0px;
-
-      span {
-        cursor: pointer;
-      }
-      i {
-        font-size: 14px;
-        color: #333;
-      }
-    }
-  }
-
-  .explore .chart-room {
-    width: 100%;
-    height: 300px
-  }
-
-  .explore .chart-view, .table-view {
-    padding: 22px 10px 10px 10px;
-    border: 1px solid lightgrey;
-    box-sizing: inherit;
-    margin-bottom: 5px;
-    transition: height 1s;
-  }
-  .explore .chart-view:hover,.explore .table-view:hover {
-    cursor: default;
-  }
-  .shrink-view {
-    height: 30px;
-
-    .view-title i {
-      transform: rotate(180deg);
-    }
-
-    .chart-room, .table-room {
-      height: 0px;
-      visibility: hidden;
-    }
-
-  }
-  .table-room {
-    position: relative;
-    margin-top: 10px;
-  }
-  .explore .view-title {
-    font-weight: 500;
-    margin-right: 8px;
-    font-size: 14px;
-    box-shadow: none;
-  }
-
-  .introduce-view .info-room {
-    padding: 24px;
-    background-color: #e9edf2;
-    border-top: 3px solid #3274d9;
-    -webkit-box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
-    box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-  .introduce-view {
-    .title-heard.info-room {
-      color: #333333;
-      h1 {
-        font-family: Roboto-Medium;
-        font-size: 22px;
-        color: #333333;
-        font-weight: 500;
-      }
-      .title-heard__divider {
-        width: 100%;
-        height: 1px;
-        border-bottom: 2px solid #DEDEDE;
-        margin: 5px 0 28px 0;
-      }
-      .introduce-view__content {
-        line-height: 28px;
-        margin-top: 18px;
-        h2 {
-          font-family: Roboto-Black;
-          font-size: 22px;
-          margin-bottom: 5px;
-          color: #333333;
-          font-weight: 400;
-        }
-        .introduce-view__content-label {
-          p {
-            font-family: Roboto-Black;
-            font-size: 16px;
-            color: #333333;
-            font-weight: 400;
-          }
-          span {
-            font-family: Roboto-Black;
-            font-size: 14px;
-            color: #666666;
-            font-weight: 400;
-          }
-        }
-      }
-    }
-  }
-
-  .info-room .cheat-sheet-item__title {
-    font-size: 21px;
-  }
-
-  .info-room .cheat-sheet-item__label {
-    font-size: 13px;
-  }
-
-  .info-room code {
-    font-family: Menlo, Monaco, Consolas, Courier New, monospace;
-    font-size: 11px;
-    background-color: #e9edf2;
-    color: #52545c;
-    border: 1px solid #c7d0d9;
-    border-radius: 4px;
-  }
-  /*外部引用 样式start*/
-  .doc-content {
-    font-size: 16px;
-  }
-
-  .doc-content p, .doc-content.ul, .doc-content .alert {
-    margin: 15px 0 15px 0;
-    line-height: 1.5;
-  }
-
-  .doc-content .content-divider{
-    height: 1px;
-    width:100%;
-    border-bottom: 2px solid #C0C4CC;
-    margin: 5px 0px;
-  }
-
-  .doc-content > h1 {
-    color: #e6522c;
-    font-size: 30px;
-    text-transform: uppercase;
-  }
-
-  .doc-content > h1 a {
-    color: #000 !important;
-  }
-
-  .doc-content.blog > h1 {
-    text-transform: none;
-  }
-
-  .doc-content.blog .sponsor-logos > a > img {
-    width: 250px;
-    display: inline-block !important;
-    margin: 15px 55px;
-  }
-  .doc-content > h1 {
-    color: #e6522c;
-    font-size: 22px;
-  }
-
-  .doc-content > h2 {
-    color: #e6522c;
-    font-size: 18px;
-  }
-
-  .doc-content > h2 code {
-    color: #e6522c;
-    background: none;
-  }
-
-  .doc-content > h3 {
-    font-size: 20px;
-    font-weight: bold;
-  }
-
-  .doc-content > h4 {
-    font-weight: bold;
-    font-size: 18px;
-    margin-top: 20px;
-  }
-
-  .doc-content a.header-anchor {
-    padding-left: 15px;
-    color: gray;
-    text-decoration: none;
-  }
-
-  .doc-content a.header-anchor:link,
-  .doc-content a.header-anchor:visited {
-    /*visibility: hidden;*/
-  }
-
-  .doc-content h1:hover a.header-anchor:hover,
-  .doc-content h2:hover a.header-anchor:hover,
-  .doc-content h3:hover a.header-anchor:hover,
-  .doc-content h4:hover a.header-anchor:hover,
-  .doc-content h5:hover a.header-anchor:hover,
-  .doc-content h6:hover a.header-anchor:hover {
-    /*color: #000;*/
-  }
-
-  .doc-content h1:hover a.header-anchor,
-  .doc-content h2:hover a.header-anchor,
-  .doc-content h3:hover a.header-anchor,
-  .doc-content h4:hover a.header-anchor,
-  .doc-content h5:hover a.header-anchor,
-  .doc-content h6:hover a.header-anchor {
-    /*color: #999;*/
-    /*visibility: visible;*/
-  }
-
-  .doc-content img {
-    width: 90%;
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
-  }
-
-  .doc-content img.orig-size {
-    width: auto;
-    margin-left: 0;
-  }
-
-  .doc-content .open-source-notice {
-    color: #666;
-    background-color: #f5f5f5;
-    text-align: center;
-    padding: 0.8em;
-    margin-top: 1.5em;
-  }
-
-  .toc {
-    padding: 1em;
-    background-color: #f5f5f5;
-  }
-
-  .toc-right {
-    float: right;
-    width: 40%;
-    margin: 0 0 0.5em 0.5em;
-  }
-
-  .toc ul {
-    padding: 0 0 0 1.5em;
-    margin: 0;
-  }
-
-  .toc a code {
-    color: #337ab7;
-    background-color: transparent;
-  }
-
-  pre {
-    border: 1px solid #ddd;
-    border-left: 4px solid #e6522c;
-    border-radius: 0;
-    font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
-    background-color: #f5f5f5;
-    color: #333;
-    padding: 15px;
-  }
-
-  pre code {
-    white-space: pre;
-  }
-
-  code {
-    color: #333;
-  }
-
-  aside {
-    color: #888;
-    padding-bottom: 8px;
-    border-bottom: 1px solid #aaa;
-  }
-
-  article {
-    margin: 10px 0 60px 0;
-  }
-  .explore {
-    .chart-view__switch {
-      margin-top: 20px;
-      border: 1px solid #E4E8EB;
-      border-radius: 2px;
-      height: 50px;
-      line-height: 50px;
-      .el-switch.is-checked {
-        margin-left: 35px;
-      }
-    }
-  }
-  .metric-table{
-    border-bottom: 1px solid #e7eaed !important;
-  }
-  /*外部引用 样式end*/
-  .el-collapse-item__height  /deep/ .el-collapse-item__wrap{
-    overflow: unset;
-  }
-</style>
-<style lang="scss">
-  .explore-table {
-    .el-table {
-      position: static !important;
-    }
-    .explore-table-gear .cell {
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .explore-table tr td .cell {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .explore .promqlInput {
-    .query-row > div:first-of-type {
-      margin-right: 10px;
-    }
-  }
-  .explore .promqlInput:not(:first-of-type) {
-    margin-top: 10px;
-  }
-  .explore {
-    border-right: 1px solid #f6f6f6;
-    .main-container {
-      padding: 0 !important;
-      overflow: auto;
-    }
-  }
-</style>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
index e252170aa..695a78d38 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
@@ -566,118 +566,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.log-detail {
-  position: relative;
-  * {
-    box-sizing: border-box;
-  }
-  .log-table{
-    position: relative;
-    min-height: 200px;
-    .table-no-data {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      margin-top: -35px;
-      margin-left: -50px;
-      text-align: center;
-    }
-  }
-  .log-table .nz-table2 {
-    padding: 10px 0 0 0;
-    position: relative;
-    .el-table__body {
-      border-collapse: separate;
-      border-spacing: 0 6px;
-
-      td {
-        vertical-align: top;
-        padding: 1px 0;
-        border: none;
-      }
-      td.el-table__expanded-cell {
-        padding: 0 0 0 60px;
-        background-color: #fafafa;
-      }
-      // 左侧边框
-      td:first-child {
-        border-left: 3px solid;
-      }
-      td.log-border--debug {
-        border-left-color: #1f78c1;
-      }
-      td.log-border--info {
-        border-left-color: #7eb26d;
-      }
-      td.log-border--warn {
-        border-left-color: #ff851b;
-      }
-      td.log-border--error {
-        border-left-color: #e24d42;
-      }
-      td.log-border--fatel {
-        border-left-color: #705da0;
-      }
-      td.log-border--trace {
-        border-left-color: #6ed0e0;
-      }
-      td.log-border--unknown {
-        border-left-color: #dde4ed;
-      }
-      td.el-table__expanded-cell:first-child {
-        border-left: none;
-      }
-      // 不换行
-      .log-row-wrap--no-wrap .cell {
-        white-space: nowrap;
-        overflow: visible;
-        .text-ellipsis{
-          overflow:hidden;
-          text-overflow:ellipsis;
-          white-space:nowrap
-        }
-      }
-      .cell {
-        .text-ellipsis{
-          overflow:visible;
-          text-overflow:unset;
-          white-space: unset;
-        }
-      }
-    }
-  }
-
-  .log-chart {
-    height: 300px;
-    width: 100%;
-  }
-  .log-operations {
-    display: flex;
-    align-items: center;
-    height: 50px;
-    width: 100%;
-    padding: 0 10px 0 20px;
-    border: 1px solid #E4E8EB;
-    border-radius: 2px;
-
-    .log-operation {
-      display: flex;
-      align-items: center;
-
-      &.log-operation--right {
-        margin-left: auto;
-      }
-      &:not(:last-of-type) {
-        margin-right: 30px;
-      }
-
-      .operation-label {
-        padding-right: 10px;
-        color: #666666;
-      }
-    }
-  }
-}
-</style>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index 19f2193ce..eb1c5afdf 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -642,172 +642,6 @@ export default {
   }
 }
 </script>
-<style scoped lang="scss">
-  .no-resize{
-    background: rgba(255,255,255,0);
-  }
-  /deep/ .el-textarea.no-resize .el-input__count {
-    right: 5px !important;
-  }
-  .promqlInput {
-    position: relative;
-    width: 100%;
-    display: flex;
-  }
-
-  .promqlInput .query-row {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-  }
-
-  .input-box .append-msg {
-    font-size: 12px;
-    line-height: 1;
-    padding-top: 4px;
-  }
-
-  .input-box .error {
-    color: #F56C6C;
-  }
-
-  .promqlInput .query-options {
-    /*display: flex;*/
-    /*justify-content: flex-start;*/
-    /*width: 84px;*/
-  }
-
-  .query-options .option {
-    /*border-right: 1px solid #dde4ed;*/
-    /*border-radius: 3px;*/
-    /*background-color: #dde4ed;*/
-    width: 34px;
-    height: 29px !important;
-    line-height: 30px;
-    text-align: center;
-  }
-
-  .query-options .option:focus, .query-options .option:hover {
-    background-color:   rgb(247, 248, 250);
-  }
-
-  .query-row .input-box {
-    flex: auto;
-  }
-
-  .metric-btn {
-    height: 29px !important;
-    width: 105px;
-    margin-left: 1px;
-  }
-
-  .metric-btn:hover, .metric-btn:focus {
-    background-image:  linear-gradient(180deg, rgb(247, 248, 250) 0%, rgb(247, 248, 250) 100%);
-    color: #606266;
-  }
-
-  .metric-selector .el-cascader-panel {
-    height: 300px;
-    position: absolute;
-    z-index: 2100;
-    background-color: #FFF;
-  }
-
-  .expr-title {
-    width: 120px;
-    padding-right: 20px;
-    text-align: right;
-    color: #666;
-    font-size: 14px;
-    letter-spacing: 0;
-    line-height: 22px;
-  }
-
-  /deep/ .el-cascader-node {
-    padding: 0;
-  }
-
-  /deep/ .el-cascader-menu:last-child .el-cascader-node, /deep/ .el-cascader-node__label {
-    padding: 0;
-    max-width: 250px;
-    /deep/ .nz-cascade {
-      overflow: hidden;
-      width: calc(100% - 50px);
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-  .metric-selector-title{
-  /*'width':plugins.indexOf('metric-selector') > -1 ? '110px':'100%',*/
-  /*'padding': plugins.indexOf('metric-selector') > -1 ?'0 0 0 10px':'0 20px 0 0 ',*/
-  /*'text-align':'left', 'color': '#666',*/
-  /*'font-weight':plugins.indexOf('metric-selector') > -1 ?'400':'bold',*/
-    width:108px;
-    margin-right: 10px;
-    height: 32px;
-    text-align: left;
-    padding: 0 0 0 10px;
-    font-weight: 400;
-    line-height: 33px;
-    background: #E7EAED;
-    border-radius: $--primary-border-radius;
-    font-family: ArialMT;
-    font-size: 14px;
-    color: #333333;
-    letter-spacing: 0;
-  }
-  .metric-selector-input-box{
-    width: calc(100% - 160px);
-  }
-  .metric-null-input-box{
-    width: 100%;
-  }
-  .metric-null-title{
-    width:100%;
-    font-weight: bold;
-    letter-spacing: 0;
-  }
-  .nz-cascade {
-    padding: 0 10px 0 25px;
-    position: relative;
-    overflow: hidden;
-    width: calc(100% - 50px);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .nz-cascade .nz-icon-template2 {
-    display: none;
-  }
-
-  .nz-cascade-temp .nz-icon-template2{
-    display: inline-block;
-    position: absolute;
-    left: 5px;
-
-    /*background: #F8F9FB;*/
-  }
-  .cascader-panel-more {
-    text-align: center;
-  }
-  .temp-form-box{
-    width: 480px;
-  }
-  .temp-form-box .temp-form-box-title{
-    font-family: PingFangSC-Medium;
-    font-size: 14px;
-    color: #666666;
-    letter-spacing: 0;
-    font-weight: 600;
-    margin-bottom: 5px;
-  }
-  .temp-form-box .temp-form-box-col{
-    margin-right: 10px;
-  }
-  .explore-select-header {
-    text-align: center;
-    margin-bottom: 14px;
-  }
-</style>
 <style>
   .input-box .el-input__inner {
     height: 30px;
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index a661557dd..4a74c794a 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -744,79 +744,3 @@ export default {
   }
 }
 </script>
-<style lang="scss">
-  .border-t-1-de{
-    border-top: 1px solid #dedede;
-    padding-top: 10px;
-  }
-  .border-t-1-tr{
-    border-top: 1px solid transparent;
-  }
-  .panel {
-    height: 100%;
-    display: flex;
-    flex-direction:column;
-  }
-
-  .panel .el-table {
-    border-radius: 5px;
-  }
-
-  /* begin-chart list*/
-  .table-list {
-    margin-top: 0px;
-    overflow-y: auto;
-    height: calc(100% - 50px);
-    flex: 1;
-  }
-
-  .box-content {
-    position: relative;
-    height: 100%;
-  }
-  .panel-select-header {
-    display: flex;
-    justify-content: space-evenly;
-    margin-bottom: 15px;
-  }
-  .panel-select-tail {
-    border-top: 1px solid  #DEDEDE;
-    .panel-select-add {
-      line-height: 32px;
-      height: 32px;
-      display: inline-block;
-      cursor: pointer;
-      i {
-        color: #FA901C;
-        font-size: 12px;
-        font-weight: bold;
-        padding-left: 20px;
-      }
-    }
-  }
-  /* end-chart list*/
-</style>
-<style lang="scss">
-  @import '@/assets/css/common/tableCommon.scss';
-</style>
-<style scoped>
-  .loading {
-    position: fixed;
-    left: 250px;
-    top: 59px;
-    height: 100%;
-    width: 100%;
-    background: center center no-repeat #fff;
-    z-index: 10;
-  }
-  .show-panel-name{
-    display: inline-block;
-    padding: 0 7px;
-    font-weight: bold;
-    max-width: 310px;
-    overflow:hidden;
-    text-overflow:ellipsis;
-    white-space:nowrap;
-    vertical-align: bottom;
-  }
-</style>