diff --git a/src/assets/css/components/views/charts2/npmAppEventTable.scss b/src/assets/css/components/views/charts2/npmAppEventTable.scss
index cad88d6b..c1adadbf 100644
--- a/src/assets/css/components/views/charts2/npmAppEventTable.scss
+++ b/src/assets/css/components/views/charts2/npmAppEventTable.scss
@@ -1,54 +1,49 @@
 .npm-app-event {
-  $blue:#046ECA;
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
+
   .metric-select {
-    color:#575757;
+    color: var(--el-text-color-regular);
     display: flex;
     margin-bottom: 10px;
     flex-direction: row-reverse;
     align-items: center;
-    .el-scrollbar {
-      width:100%;
-    }
+
     span {
       font-size: 12px;
-      font-weight: 400;
     }
     .option__select.select-column {
       border-radius: 2px;
+
       .el-input__inner {
         width: 100px;
-        height:24px;
+        height: 24px;
         padding-left: 4px;
         font-size: 12px;
-        color: #2C72C6;
-        font-weight:400;
       }
     }
     .option-popper {
-      margin-bottom:0px;
-      .el-select-dropdown__item.selected {
-        span{
-          color: #2C72C6 !important;
-        }
-      }
+      margin-bottom: 0;
     }
   }
   .npm-app-event-table {
     height: calc(100% - 30px) !important;
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
     border-radius: 4px;
-    padding: 1px;
+
+    .el-table__inner-wrapper::before {
+      height: 0; // 去掉底部的边框
+    }
     .el-table__header-wrapper {
       tr th {
         padding: 4px 0;
+
         .data-column__span {
           font-size: 12px;
-          color: $--text-color-1;
-          font-weight: 600;
+          color: var(--el-text-color-primary);
+          font-weight: bold;
         }
       }
     }
@@ -65,50 +60,48 @@
     flex-direction: row;
     align-items: center;
     flex-wrap: wrap;
+
     .data-severity {
       font-size: 12px;
-      color: #353636;
-      font-weight: 400;
-      margin-left:6px;
+      color: var(--el-text-color-primary);
+      margin-left: 6px;
     }
     .red-dot {
-      width:6px;
-      height:6px;
-      background: #E26154;
+      width: 6px;
+      height: 6px;
+      background: var(--el-color-error);
       border-radius: 3px;
       margin-right:4px;
     }
     .grey-dot {
       opacity: 0.35;
-      background: #717171;
+      background: var(--el-text-color-regular);
       border-radius: 3px;
-      width:6px;
-      height:6px;
-      margin-right:4px;
+      width: 6px;
+      height: 6px;
+      margin-right: 4px;
     }
     .data-applications {
       font-size: 12px;
-      color: $blue;
-      font-weight: 400;
+      color: var(--el-color-primary);
     }
     .data-eventType {
       padding: 0 6px;
       font-size: 12px;
-      color: $blue;
-      font-weight: 600;
-      background: #EBF1F4;
+      color: var(--el-color-primary);
+      font-weight: bold;
+      background: var(--cn-bg-color-light);
       border-radius: 4px;
       min-width: fit-content;
     }
     .data-eventCount {
       font-size: 12px;
-      color: #046ECA;
-      font-weight: 500;
-      width:200px;
+      color: var(--el-color-primary);
+      width: 200px;
     }
   }
   .el-table--group::after,.el-table--border::after,.el-table::before {
-    height: 0px;
+    height: 0;
   }
   .table-error {
     position: absolute;
diff --git a/src/assets/css/components/views/charts2/npmEventsByType.scss b/src/assets/css/components/views/charts2/npmEventsByType.scss
index de0904e5..4c4f49e6 100644
--- a/src/assets/css/components/views/charts2/npmEventsByType.scss
+++ b/src/assets/css/components/views/charts2/npmEventsByType.scss
@@ -2,19 +2,21 @@
   position: relative;
   width: 100%;
   height: 100%;
+
   .npm-event-title {
     display: flex;
     font-size: 14px;
-    color: #353636;
-    font-weight: 600;
+    color: var(--el-text-color-primary);
+    font-weight: bold;
     margin-bottom: 10px;
   }
   .npm-event-pie {
     width: 100%;
     height: calc(100% - 30px);
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
     border-radius: 4px;
     display: flex;
+
     .panel-chart__no-data {
       height: calc(100% - 30px);
     }
@@ -23,6 +25,7 @@
       width: 100%;
       display: flex;
       align-items: center;
+
       .chart-drawing {
         height: 100%;
         width: 50%;
@@ -31,12 +34,12 @@
         display: flex;
         width: 40%;
         justify-content: space-around;
+
         .npm-event-pie-legend {
           .npm-event-pie-legend-title {
             font-size: 12px;
-            color: #575757;
+            color: var(--el-text-color-regular);
             line-height: 12px;
-            font-weight: 400;
             margin-bottom: 15px;
           }
           .npm-event-pie-legend-type {
@@ -51,31 +54,30 @@
             .npm-event-pie-legend-type-severity {
               font-size: 12px;
               line-height: 12px;
-              color: #353636;
-              font-weight: 400;
+              color: var(--el-text-color-primary);
               text-transform: capitalize;
             }
             .critical {
-              background: rgb(226,97,84);
+              background: var(--cn-color-critical);
             }
             .high {
-              background: rgb(228,142,77);
+              background: var(--cn-color-high);
             }
             .info {
-              background: rgb(136,175,101);
+              background: var(--cn-color-info);
             }
             .medium {
-              background: rgb(231,179,78);
+              background: var(--cn-color-medium);
             }
             .low {
-              background: rgb(218,199,75);
+              background: var(--cn-color-low);
             }
           }
           .npm-event-pie-legend-total {
             font-size: 12px;
-            color: #353636;
+            color: var(--el-text-color-primary);
             line-height: 12px;
-            font-weight: 600;
+            font-weight: bold;
             margin-bottom: 11px;
           }
         }
diff --git a/src/assets/css/components/views/charts2/npmEventsHeader.scss b/src/assets/css/components/views/charts2/npmEventsHeader.scss
index a7854c2f..dce29d65 100644
--- a/src/assets/css/components/views/charts2/npmEventsHeader.scss
+++ b/src/assets/css/components/views/charts2/npmEventsHeader.scss
@@ -1,6 +1,7 @@
 .npm-header {
   display: flex;
   height: 100%;
+
   .npm-header-body:nth-of-type(5) {
     margin-right: 0;
   }
@@ -8,16 +9,18 @@
     height: 100%;
     display: flex;
     justify-content: space-between;
-    background: rgba(113,113,113,0.06);
-    border: 1px solid #E2E5EC;
+    background: var(--el-fill-color-lighter);
+    border: 1px solid var(--el-border-color-light);
     border-radius: 4px;
     padding: 0 14px 0 16px;
     margin-right: 12px;
     align-items: center;
     flex: 1;
+
     .npm-header-body-severity {
       display: flex;
       align-items: center;
+
       .npm-header-body-severity-icon {
         border-radius: 6px;
         width: 12px;
@@ -25,32 +28,32 @@
         margin-right: 10px;
       }
       .critical {
-        background: rgb(226,97,84);
+        background: var(--cn-color-critical);
       }
       .high {
-        background: rgb(228,142,77);
+        background: var(--cn-color-high);
       }
       .info {
-        background: rgb(136,175,101);
+        background: var(--cn-color-info);
       }
       .medium {
-        background: rgb(231,179,78);
+        background: var(--cn-color-medium);
       }
       .low {
-        background: rgb(218,199,75);
+        background: var(--cn-color-low);
       }
       .npm-header-body-severity-value {
         font-size: 12px;
-        color: #575757;
-        font-weight: 900;
+        color: var(--el-text-color-regular);
+        font-weight: bold;
         text-transform: capitalize;
       }
     }
     .npm-header-body-total {
       font-family: Helvetica-Bold;
       font-size: 16px;
-      color: #353636;
-      font-weight: 700;
+      color: var(--el-text-color-primary);
+      font-weight: bold;
     }
   }
 }
diff --git a/src/assets/css/components/views/charts2/npmLine.scss b/src/assets/css/components/views/charts2/npmLine.scss
index 6b92f002..8ac7d387 100644
--- a/src/assets/css/components/views/charts2/npmLine.scss
+++ b/src/assets/css/components/views/charts2/npmLine.scss
@@ -2,26 +2,27 @@
   position: relative;
   height: 100%;
   width: 100%;
-  border: 1px solid #f0f0f0;
+  border: 1px solid var(--el-border-color-lighter);
+
   .npm-line-title {
     display: flex;
     font-size: 14px;
-    color: #353636;
-    font-weight: 500;
+    color: var(--el-text-color-primary);
     margin: 20px 0 0 20px;
   }
   .npm-line-header {
     display: flex;
     margin: 20px 20px 0 20px;
     justify-content: space-between;
+
     .npm-line-header-title {
       display: flex;
       font-size: 14px;
-      color: #353636;
-      font-weight: 500;
+      color: var(--el-text-color-primary);
     }
     .npm-line-header-rights {
       display: flex;
+
       .npm-line-header-right {
         display: flex;
         margin-right: 10px;
@@ -33,10 +34,10 @@
     }
     .npm-line-header-right.active {
       .npm-line-header-icon {
-        background: #ccc;
+        background: var(--el-color-info-light-5);
       }
       .npm-line-header-value {
-        color: #ccc;
+        color: var(--el-color-info-light-5);
       }
     }
     .npm-line-header-icon {
@@ -46,39 +47,41 @@
       margin-right: 4px;
     }
     .npm-line-header-icon.icon0 {
-      background: #749F4D;
+      background: var(--el-color-success);
     }
     .npm-line-header-icon.icon1 {
-      background: #98709B;
+      background: #98709B; // TODO 暂无变量
     }
     .npm-line-header-icon.icon2 {
-      background: #E5A219;
+      background: var(--el-color-warning);
     }
     .npm-line-header-value {
       font-size: 12px;
-      color: #717171;
+      color: var(--el-text-color-regular);
       line-height: 12px;
-      font-weight: 400;
     }
   }
   .chart-drawing {
     height: calc(100% - 41px);
     width: 100%;
+
     .echarts-tooltip.echarts-tooltip-dark {
       .cn-chart-body {
         display: flex;
+
         .cn-chart-tooltip {
           display: flex;
           flex-direction: column;
           flex: 1;
+
           .cn-chart-tooltip-box {
             margin-right: 10px;
           }
           .cn-chart-tooltip-value.cn-chart-tooltip__color {
             font-size: 12px;
-            color: #353636;
+            color: var(--el-text-color-primary);
             line-height: 21px;
-            font-weight: 600;
+            font-weight: bold;
           }
         }
       }
diff --git a/src/assets/css/components/views/charts2/npmMap.scss b/src/assets/css/components/views/charts2/npmMap.scss
index 2d0273f2..26c6c21e 100644
--- a/src/assets/css/components/views/charts2/npmMap.scss
+++ b/src/assets/css/components/views/charts2/npmMap.scss
@@ -1,7 +1,7 @@
 .cn-chart__map-title {
   display: flex;
   font-size: 14px;
-  color: #353636;
+  color: var(--el-text-color-regular);
   font-weight: 600;
   margin-bottom: 10px;
 }
@@ -18,7 +18,7 @@
   .map-canvas {
     height: 100%;
     width: 100%;
-    background-color: #CAD2D3;
+    background-color: var(--cn-map-bg-color);
   }
   .map-filter {
     position: absolute;
@@ -32,7 +32,7 @@
     }
     .el-select__placeholder {
       padding-left: 16px;
-      color: #2c72c6;
+      color: var(--el-color-primary);
     }
     .el-select__prefix {
       padding-left: 5px;
@@ -45,7 +45,7 @@
       margin-left: 10px;
 
       .el-input__inner {
-        color: #2C72C6;
+        color: var(--el-color-primary);
       }
       &.map-select__direction {
         width: 110px;
@@ -60,7 +60,7 @@
         height: 28px;
         .el-select__placeholder {
           padding-left: 4px;
-          color: #c0c4cc;
+          color: var(--el-color-info-light-5);
         }
       }
     }
@@ -74,7 +74,7 @@
     left: 10px;
     position: absolute;
     padding: 0 10px;
-    background-color: white;
+    background-color: var(--el-fill-color-blank);
 
     .map-legend__row {
       display: flex;
@@ -87,18 +87,18 @@
         border-radius: 50%;
 
         &.map-legend__symbol--green {
-          background-color: #7E9F54;
+          background-color: var(--el-color-success-dark-2);
         }
         &.map-legend__symbol--yellow {
-          background-color: #E5A219;
+          background-color: var(--el-color-warning);
         }
         &.map-legend__symbol--red {
-          background-color: #E26154;
+          background-color: var(--el-color-error);
         }
       }
       .map-legend__desc {
         padding-left: 5px;
-        color: #575757;
+        color: var(--el-text-color-regular);
       }
     }
   }
diff --git a/src/assets/css/components/views/charts2/npmRecentEvents.scss b/src/assets/css/components/views/charts2/npmRecentEvents.scss
index c85bd123..a2d37c5e 100644
--- a/src/assets/css/components/views/charts2/npmRecentEvents.scss
+++ b/src/assets/css/components/views/charts2/npmRecentEvents.scss
@@ -1,11 +1,12 @@
 .npm-recent {
   height: 100%;
   width: 100%;
+
   .npm-recent-title {
     display: flex;
     font-size: 14px;
-    color: #353636;
-    font-weight: 600;
+    color: var(--el-text-color-primary);
+    font-weight: bold;
     margin-bottom: 10px;
   }
   .npm-recent-table-ten.npm-recent-table {
@@ -17,21 +18,16 @@
   }
   .npm-recent-table {
     height: calc(100% - 30px) !important;
-    border: 1px solid #E2E5EC;
+    border: 1px solid var(--el-border-color-light);
     border-radius: 4px;
-    padding: 1px;
 
-    .el-scrollbar__thumb {
-      background: rgba(0,0,0,0);
-      //width: calc(100% - 200px) !important;
-    }
-    .el-table__empty-block {
-      width: calc(100% - 2px) !important;
+    .el-table__inner-wrapper::before {
+      height: 0; // 去掉底部的边框
     }
     .el-table__empty-text {
       line-height: 25px !important;
+
       .table-no-data {
-        //margin-left: -2px !important;
         .icon {
           width: 30px;
           height: 30px;
@@ -39,18 +35,18 @@
         }
         .table-no-data__title {
           font-size: 14px;
-          color: #575757;
-          font-weight: 400;
+          color: var(--el-text-color-regular);
         }
       }
     }
     .el-table__header-wrapper {
       tr th {
         padding: 4px 0;
+
         .data-column__span {
           font-size: 12px;
-          color: $--text-color-1;
-          font-weight: 600;
+          color: var(--el-text-color-primary);
+          font-weight: bold;
         }
       }
     }
@@ -64,59 +60,51 @@
     display: flex !important;
     height: 20px;
     line-height: 20px;
+
     .data-recent-table-severity {
       font-size: 12px;
-      font-weight: 500;
       border-radius: 4px;
       padding: 0 6px;
       text-transform: capitalize;
     }
     .critical {
-      color: #E26154;
-      background: rgba(226,97,84, .18);
+      color: var(--cn-color-critical);
+      background: rgba(var(--cn-color-critical-rgb), .18);
     }
     .high {
-      color: #E48E4D;
-      background: rgba(228,142,77, .18);
+      color: var(--cn-color-high);
+      background: rgba(var(--cn-color-high-rgb), .18);
     }
     .info {
-      color: #88AF65;
-      background: rgba(136,175,101, .18);
+      color: var(--cn-color-info);
+      background: rgba(var(--cn-color-info-rgb), .18);
     }
     .medium {
-      color: #E7B34E;
-      background: rgba(231,179,78, .18);
+      color: var(--cn-color-medium);
+      background: rgba(var(--cn-color-medium-rgb), .18);
     }
     .low {
-      color: #DAC74B;
-      background: rgba(218,199,75, .18);
+      color: var(--cn-color-low);
+      background: rgba(var(--cn-color-low-rgb), .18);
     }
     .data-recent-table-entity {
       font-size: 12px;
-      color: #046ECA;
-      font-weight: 400
+      color: var(--el-color-primary);
     }
     .click-active {
       cursor: pointer;
     }
     .data-recent-table-eventType {
       font-size: 12px;
-      color: #046ECA;
-      font-weight: 600;
-      background: #EBF1F4;
+      color: var(--el-color-primary);
+      font-weight: bold;
+      background: var(--cn-bg-color-light);
       border-radius: 4px;
       padding: 0 6px;
     }
     span {
       font-size: 12px;
-      color: #353636;
-      font-weight: 400;
+      color: var(--el-text-color-primary);
     }
   }
-  .el-table--group::after,.el-table--border::after, .el-table::before {
-    height: 0px;
-  }
-  .el-table .cell {
-    padding: 0 10px !important;
-  }
 }
diff --git a/src/assets/css/components/views/entityExplorer/entityList/row.scss b/src/assets/css/components/views/entityExplorer/entityList/row.scss
index a2b8485d..ab2aba81 100644
--- a/src/assets/css/components/views/entityExplorer/entityList/row.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/row.scss
@@ -181,7 +181,7 @@
             }
 
             .basic-info__item1 {
-              span: {
+              span {
                 color: $color-regular;
               }
 
@@ -195,14 +195,12 @@
             }
 
             .row-item-label {
-              font-family: NotoSansSChineseRegular;
               font-size: 14px;
               color: var(--el-text-color-regular);
               font-weight: 400;
             }
 
             .row-item-value {
-              font-family: NotoSansSChineseRegular;
               font-size: 14px;
               color: var(--el-text-color-primary);
               font-weight: 400;
@@ -240,7 +238,6 @@
       font-size: 12px;
       //color: #2C72C6;
       color: var(--el-color-primary);
-      font-weight: 400;
       display: flex;
       flex-direction: column;
       justify-content: space-around;
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index bb842d80..c62affa3 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -71,10 +71,16 @@
   --cn-bg-color-light: #EBF1F4; // 一个用得比较多的背景色
   --cn-bg-color-lighter: #F7F7F7; // 一个用得比较多的背景色
   --cn-color-critical: #D84C4C; // critical 严重等级分布
+  --cn-color-critical-rgb: 216,76,76; // critical 严重等级分布
   --cn-color-high: #FF9A79; // high
+  --cn-color-high-rgb: 255,154,121; // high
   --cn-color-info: #D1BD50; // info
+  --cn-color-info-rgb: 209,189,80; // info
   --cn-color-medium: #FFB65A; // medium
+  --cn-color-medium-rgb: 255,182,90; // medium
   --cn-color-low: #FFD82D; // low
+  --cn-color-low-rgb: 255,216,45; // low
+  --cn-map-bg-color: #CAD2D3; // 地图底色
 }
 
 @font-face {
diff --git a/src/views/charts2/charts/npm/NpmAppEventTable.vue b/src/views/charts2/charts/npm/NpmAppEventTable.vue
index a4f628eb..460c3245 100644
--- a/src/views/charts2/charts/npm/NpmAppEventTable.vue
+++ b/src/views/charts2/charts/npm/NpmAppEventTable.vue
@@ -6,7 +6,6 @@
         :data="tableData"
         class="npm-app-event-table"
         :row-class-name="rowClassName"
-        height="100%"
         empty-text=""
     >
       <template v-for="(item, index) in customTableTitles" :key="index">
diff --git a/src/views/charts2/charts/npm/NpmRecentEvents.vue b/src/views/charts2/charts/npm/NpmRecentEvents.vue
index f68d85dd..bd1aa418 100644
--- a/src/views/charts2/charts/npm/NpmRecentEvents.vue
+++ b/src/views/charts2/charts/npm/NpmRecentEvents.vue
@@ -11,7 +11,6 @@
         class="npm-recent-table"
         :class="{'npm-recent-table-ten': tableData.length === 10}"
         empty-text=""
-        height="100%"
     >
       <template v-for="(item, index) in customTableTitles" :key="index">
         <el-table-column class="data-column">