From 9242c3d3f07b00acd4d93e4f4df3fbafd57b78b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Tue, 9 May 2023 17:55:02 +0800
Subject: [PATCH] =?UTF-8?q?CN-988=20fix:=20=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/charts2/entityDetailTabs.scss       | 29 ++++++++++++++++---
 .../common/TimeRange/DateTimeRange.vue        |  2 +-
 .../entityDetail/tabs/PerformanceEvent.vue    |  9 +++---
 .../entityDetail/tabs/SecurityEvent.vue       |  9 +++---
 4 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/assets/css/components/views/charts2/entityDetailTabs.scss b/src/assets/css/components/views/charts2/entityDetailTabs.scss
index d5622209..36b8bc8e 100644
--- a/src/assets/css/components/views/charts2/entityDetailTabs.scss
+++ b/src/assets/css/components/views/charts2/entityDetailTabs.scss
@@ -1,6 +1,7 @@
 .entity-detail-tabs {
   position: relative;
   $tab-border-color: #E2E5EC;
+  $tab-border-radius: 4px;
   height: 100%;
 
   .entity-detail-tabs__active-bar {
@@ -66,9 +67,29 @@
       overflow: auto;
     }
   }
-}
 
-.entity-detail-event-border {
-  border: 1px solid #E2E5EC;
-  border-radius: 4px;
+  .entity-detail-event-border {
+    border: 1px solid #E2E5EC;
+    border-radius: $tab-border-radius;
+    margin-bottom: 10px;
+  }
+
+  .entity-detail-event-block {
+    width: calc(100% - 2px);
+  }
+
+  .entity-detail-event-error {
+    margin-top: 18px;
+    margin-left: 8px;
+  }
+
+  .entity-detail-performance {
+    height: 46px;
+    border-radius: $tab-border-radius;
+  }
+
+  .entity-detail-security {
+    height: 70px;
+    border-radius: $tab-border-radius;
+  }
 }
diff --git a/src/components/common/TimeRange/DateTimeRange.vue b/src/components/common/TimeRange/DateTimeRange.vue
index 9f88ff66..9444f8e2 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: 3" class="date-range-box">
+  <div v-ele-click-outside="changeDropdown" style="position: relative;z-index: 4" class="date-range-box">
     <div @click="showDropdown" class="date-range-text" :class="class" :style="style">
       <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/charts2/charts/entityDetail/tabs/PerformanceEvent.vue b/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue
index 967d94d2..18f31663 100644
--- a/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue
@@ -1,15 +1,14 @@
 <template>
-  <chart-error v-if="showError" style="margin-top: 18px;margin-left: 8px;"></chart-error>
+  <chart-error v-if="showError" class="entity-detail-event-error"></chart-error>
   <chart-no-data v-if="isNoData && !showError"></chart-no-data>
 
-  <div v-if="!isNoData && !showError">
+  <div v-if="!isNoData && !showError" class="entity-detail-event-block">
     <div
         class="entity-detail-event-border"
         v-for="item in eventList"
-        :key="item.eventId"
-        style="margin-bottom: 10px;">
+        :key="item.eventId">
       <div class="cn-detection--list">
-        <div class="cn-detection__case" style="height: 46px">
+        <div class="cn-detection__case entity-detail-performance">
           <div class="cn-detection__icon" :style="`background-color: ${eventSeverityColor1[item.eventSecurity]}`"></div>
           <div class="cn-detection__row">
             <div class="cn-detection__header">
diff --git a/src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue b/src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue
index 90ae1208..04627b7e 100644
--- a/src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue
@@ -1,15 +1,14 @@
 <template>
-  <chart-error v-if="showError" style="margin-top: 18px;margin-left: 8px;"></chart-error>
+  <chart-error v-if="showError" class="entity-detail-event-error"></chart-error>
   <chart-no-data v-if="isNoData && !showError"></chart-no-data>
 
-  <div v-if="!isNoData && !showError">
+  <div v-if="!isNoData && !showError" class="entity-detail-event-block">
     <div
         class="entity-detail-event-border"
         v-for="item in eventList"
-        :key="item.eventId"
-        style="margin-bottom: 10px;">
+        :key="item.eventId">
       <div class="cn-detection--list">
-        <div class="cn-detection__case" style="height: 70px">
+        <div class="cn-detection__case entity-detail-security">
           <div class="cn-detection__icon" :style="`background-color: ${eventSeverityColor1[item.eventSecurity]}`"></div>
           <div class="cn-detection__row">
             <div class="cn-detection__header">