diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index d28dea540..aae8c34f0 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -110,6 +110,9 @@
 .color23bf9a {
   color: #23bf9a;
 }
+.color969dea{
+  color: #969dea;
+}
 .bgFFECD9{
   background: $--color-primary !important;
 }
diff --git a/nezha-fronted/src/assets/css/components/charts/chart-list.scss b/nezha-fronted/src/assets/css/components/charts/chart-list.scss
index 2f15e32a6..6488f8216 100644
--- a/nezha-fronted/src/assets/css/components/charts/chart-list.scss
+++ b/nezha-fronted/src/assets/css/components/charts/chart-list.scss
@@ -1,11 +1,11 @@
 .charts__chart-list {
   .chartBox {
-    float:left;
+    float: left;
     padding: 0 10px 10px 0;
-    position:relative;
+    position: relative;
     box-sizing: border-box;
   }
-  .no-data{
+  .no-data {
     height: 1189px;
     width: 100%;
     position: relative;
@@ -26,13 +26,24 @@
       font-weight: 400;
       margin-left: -29px;
       top: 52.5%;
-      left: 50%
+      left: 50%;
     }
   }
-  .list-width{
+  .list-width {
     width: 100%;
     padding: 0 10px 5px 10px;
     box-sizing: border-box;
-    overflow: hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
+    overflow: hidden; /*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
+  }
+}
+.chart-list {
+  flex: 1;
+  height: auto !important;
+  width: 100%;
+  border-top: 1px solid transparent;
+  box-sizing: border-box;
+  
+  .group-hide-header {
+    height: 40px !important;
   }
 }
diff --git a/nezha-fronted/src/assets/css/components/cli/webSSH.scss b/nezha-fronted/src/assets/css/components/cli/webSSH.scss
index 0b0ff2446..af98eb48f 100644
--- a/nezha-fronted/src/assets/css/components/cli/webSSH.scss
+++ b/nezha-fronted/src/assets/css/components/cli/webSSH.scss
@@ -334,3 +334,10 @@ div.sp-header{
   background: #101010;
   box-shadow: 0 1px 0 0 #303030;
 }
+.console{
+  height: 100%;
+  // height:270px;
+  padding:5px 5px;
+  background-color: black;
+  position: relative;
+}
diff --git a/nezha-fronted/src/assets/css/components/common/login.scss b/nezha-fronted/src/assets/css/components/common/login.scss
index a7c6d5b13..dff8043bc 100644
--- a/nezha-fronted/src/assets/css/components/common/login.scss
+++ b/nezha-fronted/src/assets/css/components/common/login.scss
@@ -1,4 +1,11 @@
 .login {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-image: url("../../assets/img/login-background.png");
+  background-size: cover;
   .model {
     height: 100%;
     width: 100%;
@@ -362,3 +369,140 @@
     border-color: $--border-color-light;
   }
 }
+.license-upload .el-upload-list{
+  display: none;
+}
+.cls-1{
+  fill: #150F29;
+}
+.cls-2{
+  fill: #201B33;
+}
+.star-cloud{
+  width: 70%;
+  height: 70%;
+  position: absolute;
+  opacity: 0.9;
+}
+.star-cloud1{
+  right: 0;
+  top: 0;
+  transform: translate(40%, -50%);
+}
+.star-cloud2{
+  left: 5%;
+  bottom: 0;
+  transform: translate(-60%, -10%);
+  width: 60%;
+  height: 60%;
+}
+.star-cloud3{
+  right: 0;
+  bottom: 0;
+  transform: translate(50%, 15%);
+}
+.constellation{
+  position: absolute;
+  transform-origin: 0 0;
+  /*transition: all 0.95s linear;*/
+  -webkit-animation: constellationAnimat var(--twinkle-duration) ease-in-out infinite;
+  animation: constellationAnimat var(--twinkle-duration) ease-in-out infinite;
+}
+.constellation1 {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+.constellation2 {
+  -webkit-animation-delay: -2s;
+  animation-delay: -2s;
+}
+.constellation3 {
+  -webkit-animation-delay: -3s;
+  animation-delay: -3s;
+}
+.constellation4 {
+  -webkit-animation-delay: -4s;
+  animation-delay: -4s;
+}
+:root {
+  --twinkle-duration: 4s;
+}
+.stars-wrapper {
+  position: absolute;
+  pointer-events: none;
+  width: 100vw;
+  height: 100vh;
+  /*background: -webkit-gradient(linear, left top, left bottom, from(#16161d), to(#07011D));*/
+  background: #07011D;
+  overflow: hidden;
+  z-index: 1;
+}
+.stars0,
+.stars1,
+.stars2,
+.stars3{
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-animation: twinkle var(--twinkle-duration) ease-in-out infinite;
+  animation: twinkle var(--twinkle-duration) ease-in-out infinite;
+  z-index: 1;
+}
+.stars1 {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+.stars2 {
+  -webkit-animation-delay: -2s;
+  animation-delay: -2s;
+}
+.stars3 {
+  -webkit-animation-delay: -3s;
+  animation-delay: -3s;
+}
+@-webkit-keyframes twinkle {
+  25% {
+    opacity: 0;
+  }
+}
+@keyframes twinkle {
+  25% {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes constellationAnimat {
+  25% {
+    opacity: 0.5;
+  }
+}
+@keyframes constellationAnimat {
+  25%{
+    opacity: 0.7;
+  }
+  /*50%{*/
+  /*  opacity: 1;*/
+  /*}*/
+  /*75%{*/
+  /*  opacity: 0.5;*/
+  /*}*/
+  /*100%{*/
+  /*  opacity: 1;*/
+  /*}*/
+}
+.star {
+  fill: white;
+}
+.star:nth-child(3n) {
+  opacity: 0.8;
+}
+.star:nth-child(7n) {
+  opacity: 0.6;
+}
+.star:nth-child(13n) {
+  opacity: 0.4;
+}
+.star:nth-child(19n) {
+  opacity: 0.2;
+}
diff --git a/nezha-fronted/src/assets/css/components/common/table/settings/endpointTable.scss b/nezha-fronted/src/assets/css/components/common/table/settings/endpointTable.scss
new file mode 100644
index 000000000..32dfe238f
--- /dev/null
+++ b/nezha-fronted/src/assets/css/components/common/table/settings/endpointTable.scss
@@ -0,0 +1,54 @@
+#endpointTable {
+    .bagEF7458 {
+        background: #ef7458;
+        color: #fff;
+    }
+    .bag23BF9A {
+        background: #23bf9a;
+        color: #fff;
+    }
+    .configs-endpoint {
+        border-radius: 4px;
+        padding: 2px 7px;
+        color: #3c92f1;
+        position: relative;
+        display: inline-block;
+        cursor: pointer;
+    }
+    .configs-endpoint.metrics {
+        color: #3c92f1;
+    }
+    .configs-endpoint.logs {
+        color: #25bf9a;
+    }
+    .colorEF7458 {
+        color: #ef7458;
+    }
+    .color23BF9A {
+        color: #23bf9a;
+    }
+    .inline-block {
+        display: inline-block;
+    }
+    .pointer {
+        cursor: pointer;
+    }
+    .endpoint-cell-left {
+        margin-right: 5px;
+    }
+    .copy-value-content {
+        position: absolute;
+        right: 8px;
+        top: 4px;
+    }
+    .alert-label__border.alert-label {
+        width: auto !important;
+    }
+    .copy-value-content__pre {
+        width: auto;
+        height: 200px;
+        margin-top: 20px;
+        overflow-y: scroll;
+        overflow-x: scroll;
+    }
+}
diff --git a/nezha-fronted/src/assets/css/components/common/table/settings/userTable.scss b/nezha-fronted/src/assets/css/components/common/table/settings/userTable.scss
index 87b8b580a..ea5550fc2 100644
--- a/nezha-fronted/src/assets/css/components/common/table/settings/userTable.scss
+++ b/nezha-fronted/src/assets/css/components/common/table/settings/userTable.scss
@@ -40,4 +40,7 @@
       color: #38cc20;
     }
   }
+  .endpoint-num, .alert-num{
+    cursor: pointer;
+  }
 }
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 486af40eb..5cdd149ea 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
@@ -37,6 +37,17 @@
       }
     }
   }
+  .view-mode{
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .view-mode .el-icon-monitor{
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+  }
 }
 
 .panel  {
diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue
index 7b27c7bac..432d08f22 100644
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -863,15 +863,3 @@ export default {
 }
 </script>
 
-<style scoped>
-.chart-list {
-  flex: 1;
-  height: auto !important;
-  width: 100%;
-  border-top: 1px solid transparent;
-  box-sizing: border-box;
-}
-.group-hide-header {
-  height: 40px!important;
-}
-</style>
diff --git a/nezha-fronted/src/components/cli/console.vue b/nezha-fronted/src/components/cli/console.vue
index 5ec6a1260..8d07e1758 100644
--- a/nezha-fronted/src/components/cli/console.vue
+++ b/nezha-fronted/src/components/cli/console.vue
@@ -1,11 +1,3 @@
-<style scoped>
-  .console{
-    height:270px;
-    padding:5px 5px;
-    background-color: black;
-    position: relative;
-  }
-</style>
 <template>
     <div :id="'ternimalContainer'+idIndex" class="console">
       <div class="ternimal-header">
@@ -386,6 +378,3 @@ export default {
   }
 }
 </script>
-<style scoped lang="scss">
-
-</style>
diff --git a/nezha-fronted/src/components/cli/consoleNew.vue b/nezha-fronted/src/components/cli/consoleNew.vue
index 734f66d5f..eca10d6a3 100644
--- a/nezha-fronted/src/components/cli/consoleNew.vue
+++ b/nezha-fronted/src/components/cli/consoleNew.vue
@@ -1,11 +1,3 @@
-<style scoped>
-  .console{
-    height: 100%;
-    padding:5px 5px;
-    background-color: black;
-    position: relative;
-  }
-</style>
 <template>
     <div :id="'ternimalContainer'+idIndex" class="console">
       <div :id="'terminal'+idIndex" style="height: 100%;width: 100%"></div>
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index 449874a3a..6c60e6135 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -795,154 +795,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.login {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  background-image: url("../../assets/img/login-background.png");
-  background-size: cover;
-}
-</style>
-<style>
-  .license-upload .el-upload-list{
-    display: none;
-  }
-  .cls-1{
-    fill: #150F29;
-  }
-  .cls-2{
-    fill: #201B33;
-  }
-  .star-cloud{
-    width: 70%;
-    height: 70%;
-    position: absolute;
-    opacity: 0.9;
-  }
-  .star-cloud1{
-    right: 0;
-    top: 0;
-    transform: translate(40%, -50%);
-  }
-  .star-cloud2{
-    left: 5%;
-    bottom: 0;
-    transform: translate(-60%, -10%);
-    width: 60%;
-    height: 60%;
-  }
-  .star-cloud3{
-    right: 0;
-    bottom: 0;
-    transform: translate(50%, 15%);
-  }
-  .constellation{
-    position: absolute;
-    transform-origin: 0 0;
-    /*transition: all 0.95s linear;*/
-    -webkit-animation: constellationAnimat var(--twinkle-duration) ease-in-out infinite;
-    animation: constellationAnimat var(--twinkle-duration) ease-in-out infinite;
-  }
-  .constellation1 {
-    -webkit-animation-delay: -1s;
-    animation-delay: -1s;
-  }
-  .constellation2 {
-    -webkit-animation-delay: -2s;
-    animation-delay: -2s;
-  }
-  .constellation3 {
-    -webkit-animation-delay: -3s;
-    animation-delay: -3s;
-  }
-  .constellation4 {
-    -webkit-animation-delay: -4s;
-    animation-delay: -4s;
-  }
-  :root {
-    --twinkle-duration: 4s;
-  }
-  .stars-wrapper {
-    position: absolute;
-    pointer-events: none;
-    width: 100vw;
-    height: 100vh;
-    /*background: -webkit-gradient(linear, left top, left bottom, from(#16161d), to(#07011D));*/
-    background: #07011D;
-    overflow: hidden;
-    z-index: 1;
-  }
-  .stars0,
-  .stars1,
-  .stars2,
-  .stars3{
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    -webkit-animation: twinkle var(--twinkle-duration) ease-in-out infinite;
-    animation: twinkle var(--twinkle-duration) ease-in-out infinite;
-    z-index: 1;
-  }
-  .stars1 {
-    -webkit-animation-delay: -1s;
-    animation-delay: -1s;
-  }
-  .stars2 {
-    -webkit-animation-delay: -2s;
-    animation-delay: -2s;
-  }
-  .stars3 {
-    -webkit-animation-delay: -3s;
-    animation-delay: -3s;
-  }
-  @-webkit-keyframes twinkle {
-    25% {
-      opacity: 0;
-    }
-  }
-  @keyframes twinkle {
-    25% {
-      opacity: 0;
-    }
-  }
-  @-webkit-keyframes constellationAnimat {
-    25% {
-      opacity: 0.5;
-    }
-  }
-  @keyframes constellationAnimat {
-    25%{
-      opacity: 0.7;
-    }
-    /*50%{*/
-    /*  opacity: 1;*/
-    /*}*/
-    /*75%{*/
-    /*  opacity: 0.5;*/
-    /*}*/
-    /*100%{*/
-    /*  opacity: 1;*/
-    /*}*/
-  }
-  .star {
-    fill: white;
-  }
-  .star:nth-child(3n) {
-    opacity: 0.8;
-  }
-  .star:nth-child(7n) {
-    opacity: 0.6;
-  }
-  .star:nth-child(13n) {
-    opacity: 0.4;
-  }
-  .star:nth-child(19n) {
-    opacity: 0.2;
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/message/src/main.vue b/nezha-fronted/src/components/common/message/src/main.vue
index 43c9c29e4..efb141873 100644
--- a/nezha-fronted/src/components/common/message/src/main.vue
+++ b/nezha-fronted/src/components/common/message/src/main.vue
@@ -8,6 +8,7 @@
         showClose ? 'is-closable' : '',
         customClass,
       ]"
+      id="nz-message"
       :style="positionStyle"
       v-show="visible"
       @mouseenter="clearTimer"
@@ -158,13 +159,11 @@ export default {
 }
 </script>
 
-<style scoped>
-
-.el-message{
+<style>
+#nz-message .el-message{
   min-width: 180px;
 }
-
-.progress{
+#nz-message .progress{
   height: 4px;
   position: absolute;
   left: 0;
diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
index 90e457512..5cb2d3724 100644
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -389,57 +389,3 @@ export default {
   computed: {}
 }
 </script>
-<style scoped>
-  .bagEF7458{
-    background: #EF7458;
-    color: #fff;
-  }
-  .bag23BF9A{
-    background: #23BF9A;
-    color: #fff;
-  }
-  .configs-endpoint{
-    border-radius: 4px;
-    padding: 2px 7px;
-    color: #3C92F1;
-    position: relative;
-    display: inline-block;
-    cursor: pointer;
-  }
-  .configs-endpoint.metrics{
-    color: #3C92F1;
-  }
-  .configs-endpoint.logs{
-    color: #25BF9A;
-  }
-  .colorEF7458{
-    color: #EF7458;
-  }
-  .color23BF9A{
-    color: #23BF9A;
-  }
-  .inline-block{
-    display: inline-block;
-  }
-  .pointer{
-    cursor: pointer;
-  }
-  .endpoint-cell-left{
-    margin-right: 5px;
-  }
-  .copy-value-content{
-    position: absolute;
-    right: 8px;
-    top: 4px;
-  }
-  .alert-label__border.alert-label{
-    width: auto !important;
-  }
-  .copy-value-content__pre {
-    width: auto;
-    height: 200px;
-    margin-top: 20px;
-    overflow-y: scroll;
-    overflow-x: scroll;
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/table/settings/moduleTable.vue b/nezha-fronted/src/components/common/table/settings/moduleTable.vue
index d26473355..e1d6c5c42 100644
--- a/nezha-fronted/src/components/common/table/settings/moduleTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/moduleTable.vue
@@ -191,17 +191,3 @@ export default {
   }
 }
 </script>
-<style scoped>
-  .colorEF7458{
-    color: #EF7458;
-  }
-  .color23BF9A{
-    color: #23BF9A;
-  }
-  .color969dea{
-    color: #969dea;
-  }
-  .endpoint-num, .alert-num{
-    cursor: pointer;
-  }
-</style>
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 8b10284e2..510b28b59 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 100%">
+  <div style="height: 100%" id="asset-batch-table">
     <nzDetailView
       v-my-loading="detailViewLoading || tools.loading"
       v-if="detailType !== 'list'"
@@ -1025,12 +1025,12 @@ export default {
   }
 }
 </script>
-<style scoped>
-  .list-page /deep/ .main-container{
+<style>
+  #asset-batch-table .list-page /deep/ .main-container{
     display: flex;
     flex-direction: column;
   }
-  /deep/ .nz-table-list{
+  #asset-batch-table /deep/ .nz-table-list{
     flex: 1;
   }
 </style>
diff --git a/nezha-fronted/src/components/page/asset/components/assetTagEx.vue b/nezha-fronted/src/components/page/asset/components/assetTagEx.vue
index c3653d408..fd64434e3 100644
--- a/nezha-fronted/src/components/page/asset/components/assetTagEx.vue
+++ b/nezha-fronted/src/components/page/asset/components/assetTagEx.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="emailError">
     <div v-if="type==='text'">
       <el-input v-model="inputValue" size="small" maxlength="128"/>
     </div>
@@ -168,8 +168,8 @@ export default {
 }
 </script>
 
-<style scoped>
-.emailError /deep/ .el-input__inner{
+<style>
+#emailError .emailError /deep/ .el-input__inner{
   border-color: #F56C6C;
 }
 </style>
diff --git a/nezha-fronted/src/components/page/config/globalization.vue b/nezha-fronted/src/components/page/config/globalization.vue
index 72993ff67..3064d4c33 100644
--- a/nezha-fronted/src/components/page/config/globalization.vue
+++ b/nezha-fronted/src/components/page/config/globalization.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="globalization">
     <nz-data-list
       ref="dataList"
       :api="url"
@@ -136,8 +136,8 @@ export default {
   }
 }
 </script>
-<style scoped>
-/deep/ td .nz-icon-gear:before{
+<style>
+#globalization /deep/ td .nz-icon-gear:before{
   color: #606266;
 }
 </style>
diff --git a/nezha-fronted/src/components/page/config/template/index.vue b/nezha-fronted/src/components/page/config/template/index.vue
index 0c41cead3..6a260aeb1 100644
--- a/nezha-fronted/src/components/page/config/template/index.vue
+++ b/nezha-fronted/src/components/page/config/template/index.vue
@@ -65,8 +65,8 @@ export default {
 }
 </script>
 
-<style scoped>
-.template-tab{
+<style>
+.temp .template-tab{
   height: 100%;
 }
 </style>
diff --git a/nezha-fronted/src/components/page/dashboard/alertChartParam.vue b/nezha-fronted/src/components/page/dashboard/alertChartParam.vue
index 03e43393b..eb43908b8 100644
--- a/nezha-fronted/src/components/page/dashboard/alertChartParam.vue
+++ b/nezha-fronted/src/components/page/dashboard/alertChartParam.vue
@@ -1,4 +1,5 @@
 <template>
+  <div id="alertChartParam">
     <el-form :model="parameters" ref="alertChartParam" size="small" label-position="top" label-width="200px" class="alert-chart-param-form alert-chart__padding-top">
       <el-form-item :label="$t('overall.select')" >
         <el-cascader
@@ -31,6 +32,7 @@
         </el-select>
       </el-form-item>
     </el-form>
+  </div>
 </template>
 
 <script>
@@ -180,27 +182,25 @@ export default {
 }
 </script>
 
-<style scoped>
-.alert-chart-param-form .form-item{
+<style>
+#alertChartParam .alert-chart-param-form .form-item{
   width: 100%;
 }
-.alert-chart__padding-top.alert-chart-param-form {
+#alertChartParam .alert-chart__padding-top.alert-chart-param-form {
   padding-top: 0;
 }
-.severity-circle{
+#alertChartParam .severity-circle{
   position: absolute;
   left: 10px;
   top: 0;
 }
-.severity-box{
+#alertChartParam .severity-box{
   position: relative;
 }
-.severity-box /deep/ .el-select .el-input__inner{
+#alertChartParam .severity-box /deep/ .el-select .el-input__inner{
   padding-left: 25px;
 }
-</style>
-<style>
-  .alert-form-pop{
+.alert-form-pop{
     z-index:3000 !important;
   }
   .alert-form-pop .el-cascader-panel {
diff --git a/nezha-fronted/src/components/page/dashboard/dashboard.vue b/nezha-fronted/src/components/page/dashboard/dashboard.vue
index ccf21e5b9..4d2c25c1a 100644
--- a/nezha-fronted/src/components/page/dashboard/dashboard.vue
+++ b/nezha-fronted/src/components/page/dashboard/dashboard.vue
@@ -1257,16 +1257,3 @@ export default {
   }
 }
 </script>
-<style scoped>
-.view-mode{
-  margin-right: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.view-mode .el-icon-monitor{
-  display: flex;
-  align-items: center;
-  font-size: 20px;
-}
-</style>
diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index 06fa6ca95..480f77f2c 100644
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="endpoint-list">
     <nzDetailView
       v-my-loading="detailViewLoading || tools.loading"
       v-if="detailType !== 'list'"
@@ -1008,14 +1008,14 @@ export default {
   }
 }
 </script>
-<style scoped>
-  .endpoint-list{
+<style>
+  #endpoint-list .endpoint-list{
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
   }
-  .dataList{
+  #endpoint-list .dataList{
     flex: 1;
     width: 100%;
   }