fix: detection模块中，调整因修改公共class导致的其他界面样式错乱，以及tab图标不居中的问题

src/assets/css/components/views/detections/detection-list/detection-list.scss

@@ -40,7 +40,7 @@
       height: 100%;
       overflow: auto;
 
-      .cn-detection__shadow {
+      .cn-detection__shadow, .new-cn-detection__shadow {
         position: fixed;
         height: 100vh;
         width:100vw;
@@ -49,6 +49,10 @@
         z-index: 1;
         background-color: rgba(0, 0, 0, .2);
       }
+
+      .new-cn-detection__shadow {
+        z-index: 4;
+      }
     }
   }
 

src/assets/css/components/views/detections/detection-list/row.scss

@@ -7,7 +7,7 @@
     justify-content: center;
     align-items: flex-start;
     margin-bottom: 1px;
-    padding-top: 33px;
+    padding-top: 18px;
     background-color: #F3F7FA;
 
     span {

src/assets/css/components/views/entityExplorer/entity-explorer.scss

@@ -26,9 +26,9 @@
     justify-content: flex-start;
   }
 
-  .explorer-top-tools {
+  .explorer-top-tools, .explorer-detection-top-tools {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
     align-items: center;
     padding-bottom: 18px;
 
@@ -46,6 +46,37 @@
       }
     }
   }
+  .explorer-detection-top-tools {
+    display: flex;
+    justify-content: space-between;
+  }
+  .explorer-top-tools-title {
+    font-size: 24px;
+    line-height: 24px;
+    font-weight: 900;
+    color: #353636;
+  }
+  .explorer-top-tools-block {
+    font-family: NotoSansHans-Medium;
+    height: 28px;
+    line-height: 28px;
+    font-size: 14px;
+    color: #353636;
+    font-weight: 500;
+    padding: 0 10px;
+    margin-right: 10px;
+    border: 1px solid #E0E0E0;
+    border-radius: 2px;
+    cursor: pointer;
+  }
+  .detection-icon-setting {
+    margin-right: 10px;
+    font-size: 14px;
+  }
+  .detection-border {
+    border: 1px solid #E0E0E0;
+    border-radius: 4px;
+  }
   .explorer-container {
     display: flex;
     overflow: visible; /*overflow: hidden;*/

src/components/common/TimeRange/DateTimeRange.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-ele-click-outside="changeDropdown" style="position: relative;z-index: 99" class="date-range-box">
+  <div v-ele-click-outside="changeDropdown" style="position: relative;z-index: 2" class="date-range-box">
     <div @click="showDropdown" class="date-range-text">
       <div class="calendar-popover-text"><i class="cn-icon cn-icon-Data"></i></div>
       <div class="calendar-popover-text" style="display: flex" v-if="isCustom">

src/views/detections/DetectionList.vue

@@ -4,7 +4,7 @@
     <div class="detection-list__content">
       <div class="detection-list--list">
         <div class="no-data" v-if="noData">No data</div>
-        <div v-if="!isCollapse" @click="collapse" class="cn-detection__shadow"></div>
+        <div v-if="!isCollapse" @click="collapse" class="cn-detection__shadow new-cn-detection__shadow"></div>
         <detection-row
             style="margin-bottom: 10px"
             class="detection-border"

src/views/detections/DetectionRow.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="cn-detection--list" :style="{zIndex: !isCollapse ? 1 : 'unset'}">
+  <div class="cn-detection--list" :style="{zIndex: !isCollapse ? 5 : 'unset'}">
     <!-- 左侧下拉按钮 -->
-    <div class="cn-detection__collapse">
+    <div class="cn-detection__collapse" id="detectionTab" :style="{'padding-top': paddingTop}">
       <span @click="switchCollapse" :class="{'reg-down': !isCollapse}">
         <i class="cn-icon cn-icon-arrow-right"></i>
       </span>
@@ -127,7 +127,8 @@ export default {
       entityType,
       detectionPageType,
       isCollapse: true, // 是否是折叠状态
-      eventSeverityColor
+      eventSeverityColor,
+      paddingTop: '21px'
     }
   },
   computed: {
@@ -163,6 +164,15 @@ export default {
       }
     }
   },
+  mounted () {
+    // 不放在computed是因为第一个dom为null，造成较小屏幕下第一个tab的位置不居中
+    const dom = document.getElementById('detectionTab')
+    let top = 21
+    if (dom) {
+      top = dom.clientHeight / 2 - 12
+    }
+    this.paddingTop = top + 'px'
+  },
   methods: {
     unitConvert,
     getMillisecond,

src/views/detections/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="entity-explorer entity-explorer--show-list">
     <!-- 顶部工具栏，在列表页显示 -->
-    <div class="explorer-top-tools">
+    <div class="explorer-top-tools explorer-detection-top-tools">
       <div class="explorer-top-tools-title">{{$t('overall.detections')}}</div>
       <div style="display: flex">
         <div class="explorer-top-tools-block">
@@ -833,33 +833,3 @@ export default {
   }
 }
 </script>
-
-<style>
-  .explorer-top-tools-title {
-    font-size: 24px;
-    line-height: 24px;
-    font-weight: 900;
-    color: #353636;
-  }
-  .explorer-top-tools-block {
-    font-family: NotoSansHans-Medium;
-    height: 28px;
-    line-height: 28px;
-    font-size: 14px;
-    color: #353636;
-    font-weight: 500;
-    padding: 0 10px;
-    margin-right: 10px;
-    border: 1px solid #E0E0E0;
-    border-radius: 2px;
-    cursor: pointer;
-  }
-  .detection-icon-setting {
-    margin-right: 10px;
-    font-size: 14px;
-  }
-  .detection-border {
-    border: 1px solid #E0E0E0;
-    border-radius: 4px;
-  }
-</style>