CN-1594 feat: 部分css重构内容：实体详情tabs各模块

10 files changed, 164 insertions, 279 deletions

diff --git a/src/assets/css/common/table-common.scss b/src/assets/css/common/table-common.scss
index ac5abe3d..003990ae 100644
--- a/src/assets/css/common/table-common.scss
+++ b/src/assets/css/common/table-common.scss
@@ -2,10 +2,13 @@
 .list-page {
   height: 100%;
   width: 100%;
-  background-color: #f6f6f6;
+  background-color: var(--el-bg-color-page);
+  $border-color: var(--el-color-info-light-7);
+  $border-radius: 2px;
+  $color-white: var(--el-color-white);
 
   .main-list {
-    background-color: white;
+    background-color: var(--el-fill-color-blank);
     position: relative;
     display: flex;
     flex-direction: column;
@@ -13,16 +16,20 @@
     width: 100%;
     z-index: 0;
   }
+
   .main-container {
     padding: 0;
     height: 100%;
-    &>div {
-      background-color: white;
+
+    & > div {
+      background-color: var(--el-fill-color-blank);
     }
   }
+
   .main-list.main-list-with-sub {
     height: 50%;
   }
+
   .main-modal {
     position: absolute;
     height: 100%;
@@ -30,9 +37,10 @@
     display: none;
     z-index: 100;
   }
+
   .top-tools {
     display: flex;
-    align-items : center;
+    align-items: center;
     position: relative;
     justify-content: space-between;
     padding: 12px 20px;
@@ -41,41 +49,48 @@
       align-items: center;
       padding: 0 70px 0 15px;
       height: 44px;
-      background-color: white;
-      border: 1px solid #E6EAED;
-
+      background-color: var(--el-fill-color-blank);
+      border: 1px solid var(--el-border-color-light);
     }
+
     .top-tool-search {
       .top-tool-btn {
         border-left: none;
       }
+
       .top-tool-btn--search {
         width: 28px !important;
-        height:28px !important;
-        padding:unset !important;
+        height: 28px !important;
+        padding: unset !important;
         display: flex;
         align-items: center;
         justify-content: center;
+
         i {
           font-size: 14px;
-          color: $--text-color-2;
-          margin-right:unset !important;
+          color: var(--el-text-color-regular);
+          margin-right: unset !important;
         }
       }
+
       .top-tool-btn--search:hover {
         border-left: none !important;
       }
+
       .top-tool-btn--search:focus {
         border-left: none !important;
       }
+
       .el-input--small .el-input__wrapper {
         height: 28px !important;
         border-radius: 2px 0 0 2px !important;
       }
-      .el-input--small{
+
+      .el-input--small {
         width: 214px !important;
         line-height: 27px;
       }
+
       .el-input--small .el-input__inner {
         height: 28px;
         border-radius: 2px 0 0 2px;
@@ -85,44 +100,52 @@
     .top-tool-right {
       display: flex;
     }
+
     .top-tool-left {
       display: flex;
     }
+
     .top-tool-btn-group {
       display: flex;
+
       .top-tool-btn:not(:last-of-type):not(:first-of-type) {
         border-left: none;
         border-radius: 0;
       }
+
       .top-tool-btn:first-of-type:not(:last-of-type) {
-        border-radius: $--button-border-radius 0 0 $--button-border-radius;
+        border-radius: $border-radius 0 0 $border-radius;
       }
+
       .top-tool-btn:last-of-type:not(:first-of-type) {
-        border-radius: 0 $--button-border-radius $--button-border-radius 0;
+        border-radius: 0 $border-radius $border-radius 0;
         border-left: none;
       }
     }
+
     .top-tool-btn {
       cursor: pointer;
       height: 28px;
       width: 72px;
-      border: 1px solid $--border-color-primary;
+      border: 1px solid $border-color;
       outline: none;
-      border-radius: $--button-border-radius;
-      background-color: $--button-gray-background-color;
+      border-radius: 2px;
+      background-color: var(--el-fill-color-lighter);
       transition: background-color linear .1s;
-      font-size:12px;
+      font-size: 12px;
       font-weight: 500;
+
       i {
         font-size: 14px;
-        color: #575757;
-        margin-right:4px;
+        color: var(--el-text-color-regular);
+        margin-right: 4px;
       }
     }
 
     .top-tool-btn:disabled {
       cursor: not-allowed;
       opacity: 0.66;
+
       i {
 
       }
@@ -131,75 +154,79 @@
     .top-tool-btn.top-tool-btn--text {
       padding: 0 8px;
       width: unset;
-      color: #666;
+      color: var(--el-text-color-regular);
     }
+
     .top-tool-btn:hover:not(.cn-btn-disabled) {
-      border: 1px solid $--border-color-primary;
-      background-color: $--button-gray-hover-background-color;
+      border: 1px solid $border-color;
+      background-color: var(--cn-bg-color-light);
     }
+
     .top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
       background-color: $--button-gray-active-background-color;
-      border: 1px solid $--border-color-primary;
-      i {
-        color: #575757;
-      }
-    }
-    .top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
-      background-color: $--button-gray-hover-background-color;
-      border-color: #FFC4B9;
+      border: 1px solid $border-color;
 
       i {
-        color: #F0745A;
+        color: var(--el-text-color-regular);
       }
     }
+
     .top-tool-btn--create {
-      background-color: #38ACD2 !important;
-      border-color: #2E88A6 !important;
-      color:#FFFFFF;
+      background-color: var(--el-color-business) !important;
+      border-color: #2E88A6 !important; // 涉及到表格样式，后续修改
+      color: $color-white;
+
       i {
-        color: #FFFFFF;
+        color: $color-white;
       }
     }
+
     .top-tool-btn--create:hover {
       background-color: #57B8D9 !important;
       border-color: #2E88A6 !important;
-      color:#FFFFFF;
+      color: $color-white;
+
       i {
-        color: #FFFFFF;
+        color: $color-white;
       }
     }
+
     .top-tool-btn--create:focus {
       background-color: #31A5CD !important;
       border-color: #2E88A6 !important;
-      color:#FFFFFF !important;
+      color: $color-white !important;
+
       i {
-        color: #FFFFFF !important;
+        color: $color-white !important;
       }
     }
+
     .top-tool-btn--create:disabled {
       opacity: 0.66;
-      background-color: #38ACD2 !important;
+      background-color: var(--el-color-business) !important;
       border-color: #2E88A6 !important;
-      color:#FFFFFF;
+      color: $color-white;
+
       i {
-        color: #FFFFFF;
+        color: $color-white;
       }
     }
 
     .btn-customize {
       color: #2E88A6;
       font-size: 12px;
-      .icon-gear{
+
+      .icon-gear {
         color: #2E88A6;
-        width:12px;
-        height:12px;
-        margin-right:2px;
-        font-size:12px;
+        width: 12px;
+        height: 12px;
+        margin-right: 2px;
+        font-size: 12px;
       }
     }
 
     .btn-customize:hover {
-      cursor:pointer;
+      cursor: pointer;
     }
 
     .top-tool-btn--dropdown {
@@ -220,183 +247,17 @@
       border-bottom: none;
 
       thead {
-        color: #333;
-      }
-      .el-switch {
-        height: auto;
+        color: var(--el-text-color-primary);
       }
-    }
-  }
-  /*.cn-table {
-    position: relative;
-    padding: 0 20px;
-    width: 100%;
 
-    flex: auto;
-    height: calc(100% - 58px);
-
-    .el-table:not(.chart-table) {
-      position: absolute;
-      width: calc(100% - 40px);
-      // border: 1px solid $--right-box-border-color;
-      //border-bottom: none;
-      border-radius:4px;
-
-      .caret-wrapper {
-        height: 23px;
-        .sort-caret.ascending {
-          top: 1px;
-        }
-        .sort-caret.descending {
-          bottom: 0;
-        }
-      }
       .el-switch {
         height: auto;
-        --el-switch-on-color: #699DC9;
-        --el-switch-off-color: #C0CEDB;
-      }
-
-      .el-table-column--selection {
-        width: 55px !important;
-      }
-
-      td {
-        padding: 3px 0 4px 0;
-        border-bottom: 1px solid $--right-box-border-color;
-      }
-      th {
-        border-color: $--right-box-border-color;
-        padding: 8px 0;
-        background: #FFF;
-        border-right:0px;
       }
-      .el-table__header th:first-of-type {
-        border-left: none;
-      }
-      .gutter {
-        position: fixed;
-        right: 31px;
-        height: 49px;
-        border-bottom: 1px solid $--right-box-border-color;
-        background-color: white;
-      }
-      thead {
-        color: #333;
-      }
-
-      .el-table__body tr:hover>td, .el-table__body tr.hover-row.current-row>td,
-      .el-table__body tr.hover-row.el-table__row--striped.current-row>td,
-      .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td {
-        background-color: lighten($--color-primary, 95%) !important;
-      }
-      .table-operation-title {
-        text-align: center;
-      }
-      .table-operation-items {
-        display: flex;
-        justify-content: center;
-        .table-operation-item {
-          display: flex;
-          height: 22px;
-          border-radius: $--button-border-radius;
-          outline: none;
-          transition: background-color linear .1s;
-        }
-        .table-operation-item.table-operation-item--disable{
-          border: 1px solid $--border-color-primary;
-          background-color: #DEDEDE;
-          opacity: 0.6;
-          outline: none;
-          i {
-            font-size: 14px;
-            color: #fff;
-          }
-        }
-        &>.table-operation-item {
-          justify-content: center;
-          align-items: center;
-          width: 30px;
-          margin-right: 10px;
-          border: none;
-          border-radius: $--button-border-radius;
-          background-color: $--button-primary-background-color;
-          opacity: 1;
-          cursor: pointer;
-          transition: all .2s;
-          i {
-            color: $--button-primary-color;
-            font-size: 12px;
-          }
-        }
-        &>.table-operation-item:hover {
-          opacity: .8;
-        }
-        .table-operation-item.table-operation-item--more {
-          justify-content: center;
-          align-items: center;
-          border: 1px solid $--border-color-primary;
-          width: 30px;
-          i {
-            color: #999;
-            font-size: 12px;
-          }
-        }
-      }
-    }
-  }
-  !* start--覆盖el-table边框、gutter等样式 *!
-  .el-table__body-wrapper, .el-table__fixed-body-wrapper {
-    box-shadow: 1px 0 $--right-box-border-color;
-
-    .cell {
-      color: #333;
     }
   }
-  .el-table__body-wrapper .is-hidden, .el-table__header-wrapper .is-hidden {
-    visibility: hidden;
-  }
-  .cn-table {
-    .el-table--border td {
-      border-right: none !important;
-    }
-    !* 最后一列用box-shadow模拟边框 *!
-    !*.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
-      box-shadow: 1px 0 $--right-box-border-color;
-    }
-    .el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__header-wrapper th:nth-last-child(3) {
-      //border-right: none !important;
-      box-shadow: 1px 0 $--right-box-border-color;
-    }
-    .el-table__fixed-body-wrapper {
-      td:not(.is-hidden) {
-        border-left: 1px solid $--right-box-border-color;
-      }
-    }
-    .el-table__fixed-header-wrapper {
-      th:not(.is-hidden) {
-        border-left: 1px solid $--right-box-border-color;
-      }
-      th:last-of-type {
-        border-right: none !important;
-      }
-    }*!
-    .el-table--border:not(.chart-table)::after, .el-table--group:not(.chart-table)::after {
-      // width: 0;
-    }
-    .el-table--border {
-      border-bottom: 1px solid #E7EAED;
 
-      .el-table__inner-wrapper {
-        height: 100% !important;
-      }
-      .el-table__inner-wrapper::before {
-        height: 0;
-      }
-    }
-  }*/
   /* end--覆盖el-table边框、gutter等样式 */
-  .cn-pagination{
+  .cn-pagination {
     position: absolute;
     bottom: 8px;
     height: 48px;
@@ -409,11 +270,13 @@
   .el-scrollbar__view {
     height: 100%;
   }
+
   // 令no data出现时table底部不出现滚动条
   .el-table__empty-block {
     width: calc(100% - 8px) !important;
   }
 }
+
 /*.operation-dropdown-text {
   display: inline-block;
   font-size: 13px;
@@ -456,25 +319,36 @@
   height: 100%;
   cursor: col-resize;
 }
-.margin-r-10{
+
+.margin-r-10 {
   margin-right: 10px;
 }
-.margin-r-20{
+
+.margin-r-20 {
   margin-right: 20px;
 }
-.margin-l-10{
+
+.margin-l-10 {
   margin-left: 10px;
 }
-.margin-t-20{
+
+.margin-t-20 {
   margin-top: 20px;
 }
-.margin-r-3{
+
+.margin-r-3 {
   margin-right: 3px;
 }
+
+.margin-r-30 {
+  margin-right: 30px;
+}
+
 .margin-l-6 {
   margin-left: 6px;
 }
+
 .tooltip-column-name {
   color: #aeb0b9;
-  height:40px;
+  height: 40px;
 }
diff --git a/src/assets/css/components/views/charts2/digitalCertificate.scss b/src/assets/css/components/views/charts2/digitalCertificate.scss
index 41511a94..3ea77fd3 100644
--- a/src/assets/css/components/views/charts2/digitalCertificate.scss
+++ b/src/assets/css/components/views/charts2/digitalCertificate.scss
@@ -8,7 +8,7 @@
     .digital-certificate-header__icon {
       width: 4px;
       height: 16px;
-      background: #38ACD2;
+      background: var(--el-color-business);
       border-radius: 1px;
       margin-right: 6px;
     }
@@ -16,8 +16,8 @@
     .digital-certificate-header-name {
       font-family: PingFangSC-Semibold;
       font-size: 14px;
-      color: #575757;
-      font-weight: 600;
+      color: var(--el-text-color-regular);
+      font-weight: bold;
     }
   }
 
@@ -25,9 +25,9 @@
     height: auto;
     min-height: 262px;
     padding: 20px;
-    background: rgba(113, 113, 113, 0.04);
-    border: 1px solid #E2E5ECFF;
-    border-radius: 4px;
+    background: var(--el-fill-color-lighter);
+    border: 1px solid var(--el-border-color-light);
+    border-radius: var(--el-border-radius-base);
 
     .digital-certificate-body-tags {
       display: flex;
@@ -48,21 +48,19 @@
         width: 176px;
         font-family: $font-family;
         font-size: 14px;
-        color: #717171;
-        font-weight: 400;
+        color: var(--el-text-color-regular);
       }
 
       .certificate-list-item__value, .certificate-list-item__value1 {
         width: calc(100% - 176px - 75px);
         font-family: $font-family;
         font-size: 14px;
-        color: #353636;
-        font-weight: 400;
+        color: var(--el-text-color-primary);
       }
 
       .certificate-list-item__value1 {
         padding-bottom: 2px;
-        border-bottom: 1px #353636 solid;
+        border-bottom: 1px var(--el-text-color-primary) solid;
         word-break: break-word;
       }
     }
diff --git a/src/assets/css/components/views/charts2/domainNameResolution.scss b/src/assets/css/components/views/charts2/domainNameResolution.scss
index f32b5432..6a4872e3 100644
--- a/src/assets/css/components/views/charts2/domainNameResolution.scss
+++ b/src/assets/css/components/views/charts2/domainNameResolution.scss
@@ -1,69 +1,75 @@
 .type-data__column {
-  display:flex;
+  display: flex;
   flex-direction: column;
-  margin-left:5px;
-  margin-right:0px;
-  margin-top:0px;
+  margin-left: 5px;
+  margin-right: 0;
+  margin-top: 0;
+
   .type-data {
-    display:flex;
-    flex-flow:row wrap;
-    margin-top:0px;
+    display: flex;
+    flex-flow: row wrap;
+    margin-top: 0;
+
     .type-title {
-      display:flex;
+      display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: center;
-      margin-bottom:15px;
-      margin-right:10px;
+      margin-bottom: 15px;
+      margin-right: 10px;
       font-family: PingFangSC-Semibold;
       font-size: 14px;
-      color: #575757;
+      color: var(--el-text-color-regular);
       line-height: 20px;
       font-weight: 600;
+
       .title-mark {
         width: 4px;
         height: 16px;
-        margin-left:0px;
+        margin-left: 0;
         margin-right: 6px;
-        background: #38ACD2;
+        background: var(--el-color-business);
         border-radius: 1px;
       }
+
       .type-title-word {
         margin-right: 6px;
       }
     }
 
-    .more{
-      margin-bottom:20px;
+    .more {
+      margin-bottom: 20px;
+
       .button {
-        color:#909399;
+        color: var(--el-color-info);
         cursor: pointer;
       }
     }
+
     .type-content {
-      margin-bottom:0px;
-      display:flex;
+      margin-bottom: 0;
+      display: flex;
       flex-flow: row wrap;
-      width:100%;
+      width: 100%;
+
       .data-item {
         display: flex;
         justify-content: center;
         align-items: center;
-        background: rgba(119,131,145,0.06);
-        border: 1px solid rgba(119,131,145,0.36);
+        background: var(--cn-bg-color-lighter);
+        border: 1px solid var(--el-color-info-light-5);
         border-radius: 2px;
-        height:28px;
-        padding:8px 15px;
-        margin-right:10px;
-        margin-bottom:15px;
+        height: 28px;
+        padding: 8px 15px;
+        margin-right: 10px;
+        margin-bottom: 15px;
         font-size: 12px;
-        color: #353636;
-        font-weight: 400;
+        color: var(--el-text-color-primary);
       }
     }
 
     .type-error-content {
-      width:100%;
+      width: 100%;
       height: 40px;
       margin-bottom: 12px;
       position: relative;
diff --git a/src/assets/css/components/views/charts2/entityDetailTabs.scss b/src/assets/css/components/views/charts2/entityDetailTabs.scss
index db874797..14e9dd50 100644
--- a/src/assets/css/components/views/charts2/entityDetailTabs.scss
+++ b/src/assets/css/components/views/charts2/entityDetailTabs.scss
@@ -144,7 +144,7 @@
         position: absolute;
         height: 0;
         width: 195px;
-        border-bottom: 1px dashed var(--el-border-color-light);
+        border-bottom: 1px dashed #d3d3d3;
         top: 319px;
         left: 575px;
       }
@@ -153,7 +153,7 @@
         position: absolute;
         height: 0;
         width: 195px;
-        border-bottom: 1px dashed var(--el-border-color-light);
+        border-bottom: 1px dashed #d3d3d3;
         top: 319px;
         left: 830px;
       }
diff --git a/src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue b/src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue
index b86aa43a..9831ab7e 100644
--- a/src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue
@@ -1,5 +1,5 @@
 <template>
-  <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
+  <chart-error v-if="showError" :content="errorMsg"></chart-error>
   <chart-no-data v-if="isNoData && !showError"></chart-no-data>
 
   <div v-if="!isNoData && !showError" class="entity-detail-event-block" style="height: 100%;width: 100%;position: relative;">
diff --git a/src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue b/src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue
index 9860cbb4..77b8a168 100644
--- a/src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
+    <chart-error v-if="showError" :content="errorMsg"></chart-error>
     <chart-no-data v-if="isNoData && !showError"></chart-no-data>
 
     <div v-if="!isNoData && !showError && !loading" class="digital-certificate" :style="{width: moreCertificatesWidth}">
@@ -12,7 +12,7 @@
         </div>
       </div>
 
-      <div v-for="(item, index) in infoList" :key="index" style="margin-top: 20px">
+      <div v-for="(item, index) in infoList" :key="index" class="margin-t-20">
         <div class="digital-certificate-body">
           <div class="digital-certificate-body-tags">
             <div :class="item.flag === '0' ? 'entity-tag entity-tag--level-two-negative-no-background' : 'entity-tag entity-tag--level-two-positive-no-background'">{{ this.$t(getTrusted(item.flag)) }}</div>
diff --git a/src/views/charts2/charts/entityDetail/tabs/InformationAggregation.vue b/src/views/charts2/charts/entityDetail/tabs/InformationAggregation.vue
index 0a364d6f..d677ce20 100644
--- a/src/views/charts2/charts/entityDetail/tabs/InformationAggregation.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/InformationAggregation.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <!--初步方案：error提示替换table。后续若改为table内error提示，记得在此修改-->
-    <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
+    <chart-error v-if="showError" :content="errorMsg"></chart-error>
     <chart-no-data v-if="isNoData && !showError" test-id="no-data"></chart-no-data>
     <div v-if="!isNoData && !showError && !loading" class="information-aggregation__table">
       <el-table
diff --git a/src/views/charts2/charts/entityDetail/tabs/OpenPort.vue b/src/views/charts2/charts/entityDetail/tabs/OpenPort.vue
index 72088c36..0ae15c86 100644
--- a/src/views/charts2/charts/entityDetail/tabs/OpenPort.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/OpenPort.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
+    <chart-error v-if="showError" :content="errorMsg"></chart-error>
     <chart-no-data v-if="isNoData && !showError"></chart-no-data>
 
     <div v-if="!showError && !isNoData && initFlag" class="type-data__column">
@@ -15,7 +15,12 @@
           </div>
         </div>
         <div class="more" v-if="openPortList.length > entityDetailRelatedEntitiesShowSize">
-          <span class="button" :style="{'opacity': openPortList.length > showOpenPortListInfo.num ? 1 : 0.6}"  @click="showMore(showOpenPortListInfo,openPortList)">{{ $t('overall.more') }} > </span>
+          <span
+              class="button"
+              :style="{'opacity': openPortList.length > showOpenPortListInfo.num ? 1 : 0.6}"
+              @click="showMore(showOpenPortListInfo,openPortList)">
+            {{ $t('overall.more') }} >
+          </span>
         </div>
       </div>
     </div>
@@ -33,8 +38,7 @@ import { getNowTime } from '@/utils/date-util'
 export default {
   name: 'OpenPort',
   mixins: [chartMixin],
-  props: {
-  },
+  props: {},
   data () {
     return {
       openPortList: [],
@@ -98,9 +102,12 @@ export default {
     },
     getUrlByEntityType (type) {
       switch (type) {
-        case 'ip': return api.entity.openPortOfIp
-        case 'domain': return api.entity.openPortOfDomain
-        case 'app': return api.entity.openPortOfApp
+        case 'ip':
+          return api.entity.openPortOfIp
+        case 'domain':
+          return api.entity.openPortOfDomain
+        case 'app':
+          return api.entity.openPortOfApp
       }
     }
   }
diff --git a/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue b/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue
index f976fc2f..638587bd 100644
--- a/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue
@@ -1,5 +1,5 @@
 <template>
-  <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
+  <chart-error v-if="showError" :content="errorMsg"></chart-error>
   <chart-no-data v-if="isNoData && !showError"></chart-no-data>
 
   <div v-if="!isNoData && !showError" class="entity-detail-event-block">
@@ -17,7 +17,7 @@
                 class="detection-event-severity-color-block"
                 :style="`background-color: ${eventSeverityColor[item.eventSeverity]}`">
             </span>
-              <span class="detection-event-severity-block" style="margin-right: 30px">
+              <span class="detection-event-severity-block margin-r-30">
               {{ toUpperCaseByString(item.eventType) || '-' }}
             </span>
               <div class="cn-detection__body">
diff --git a/src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue b/src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue
index e804111f..539dcf81 100644
--- a/src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue
@@ -1,5 +1,5 @@
 <template>
-  <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
+  <chart-error v-if="showError" :content="errorMsg"></chart-error>
   <chart-no-data v-if="isNoData && !showError" test-id="no-data"></chart-no-data>
 
   <div v-if="!isNoData && !showError" class="entity-detail-event-block">