From e355eb31cd297648bc42d5665b2548280d62c489 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Wed, 9 Nov 2022 15:42:36 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20detection=E6=A8=A1=E5=9D=97=E4=B8=AD?=
 =?UTF-8?q?=EF=BC=8C=E8=B0=83=E6=95=B4=E5=9B=A0=E4=BF=AE=E6=94=B9=E5=85=AC?=
 =?UTF-8?q?=E5=85=B1class=E5=AF=BC=E8=87=B4=E7=9A=84=E5=85=B6=E4=BB=96?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E6=A0=B7=E5=BC=8F=E9=94=99=E4=B9=B1=EF=BC=8C?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8Atab=E5=9B=BE=E6=A0=87=E4=B8=8D=E5=B1=85?=
 =?UTF-8?q?=E4=B8=AD=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detection-list/detection-list.scss        |  6 +++-
 .../views/detections/detection-list/row.scss  |  2 +-
 .../views/entityExplorer/entity-explorer.scss | 35 +++++++++++++++++--
 .../common/TimeRange/DateTimeRange.vue        |  2 +-
 src/views/detections/DetectionList.vue        |  2 +-
 src/views/detections/DetectionRow.vue         | 16 +++++++--
 src/views/detections/Index.vue                | 32 +----------------
 7 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/src/assets/css/components/views/detections/detection-list/detection-list.scss b/src/assets/css/components/views/detections/detection-list/detection-list.scss
index 1c17487f..e19a8e86 100644
--- a/src/assets/css/components/views/detections/detection-list/detection-list.scss
+++ b/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;
+      }
     }
   }
 
diff --git a/src/assets/css/components/views/detections/detection-list/row.scss b/src/assets/css/components/views/detections/detection-list/row.scss
index 3f1ad7c3..0913d5c1 100644
--- a/src/assets/css/components/views/detections/detection-list/row.scss
+++ b/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 {
diff --git a/src/assets/css/components/views/entityExplorer/entity-explorer.scss b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
index 44f36367..fbdbff72 100644
--- a/src/assets/css/components/views/entityExplorer/entity-explorer.scss
+++ b/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;*/
diff --git a/src/components/common/TimeRange/DateTimeRange.vue b/src/components/common/TimeRange/DateTimeRange.vue
index b1972f38..10fa78c2 100644
--- a/src/components/common/TimeRange/DateTimeRange.vue
+++ b/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">
diff --git a/src/views/detections/DetectionList.vue b/src/views/detections/DetectionList.vue
index bff39085..8d5f9661 100644
--- a/src/views/detections/DetectionList.vue
+++ b/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"
diff --git a/src/views/detections/DetectionRow.vue b/src/views/detections/DetectionRow.vue
index 145e871e..3fb0feb2 100644
--- a/src/views/detections/DetectionRow.vue
+++ b/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,
diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue
index e29b573a..b9978797 100644
--- a/src/views/detections/Index.vue
+++ b/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>