From 0a3cf92ce92a4d85fb9b9e622dedf05df7f5375f 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, 15 Nov 2022 17:00:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Detection=E6=A8=A1=E5=9D=97=E6=8C=89UI?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=83=A8=E5=88=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/detections/detection-filter.scss    | 26 ++++++++++++++++++-
 .../views/detections/detection-list/row.scss  |  2 +-
 src/views/detections/DetectionFilter.vue      |  6 +++--
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/components/views/detections/detection-filter.scss b/src/assets/css/components/views/detections/detection-filter.scss
index 8762aa1a..c7a06528 100644
--- a/src/assets/css/components/views/detections/detection-filter.scss
+++ b/src/assets/css/components/views/detections/detection-filter.scss
@@ -18,7 +18,7 @@
       align-items: center;
       padding-left: 10px;
       color: #666;
-      background-color: #F3F7FA;
+      //background-color: #F3F7FA;
       cursor: pointer;
 
       span {
@@ -33,7 +33,18 @@
       i.arrow-rotate {
         transform: rotate(90deg) translate(2px, 3px);
       }
+      .new-detection-filter-header-title {
+        font-size: 14px;
+        color: #353636;
+        font-weight: 600;
+      }
+      .new-detection-filter-icon {
+        margin-left: 8px;
+        margin-bottom: 2px;
+        font-weight: bold !important;
+      }
     }
+
     .filter__body {
       padding: 5px 0 0 15px;
 
@@ -69,4 +80,17 @@
       }
     }
   }
+  .new-detection-filter-title {
+    display: flex;
+    flex: 0 0 32px;
+    align-items: center;
+    padding-left: 27px;
+    background-color: #EFF2F5;
+    cursor: pointer;
+    font-size: 14px;
+    color: #353636;
+    font-weight: 600;
+    margin: -10px;
+    margin-bottom: 10px;
+  }
 }
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 0913d5c1..d277989f 100644
--- a/src/assets/css/components/views/detections/detection-list/row.scss
+++ b/src/assets/css/components/views/detections/detection-list/row.scss
@@ -8,7 +8,7 @@
     align-items: flex-start;
     margin-bottom: 1px;
     padding-top: 18px;
-    background-color: #F3F7FA;
+    background-color: #EFF2F5;
 
     span {
       transform: rotate(0);
diff --git a/src/views/detections/DetectionFilter.vue b/src/views/detections/DetectionFilter.vue
index ccc5aa38..73bfb81d 100644
--- a/src/views/detections/DetectionFilter.vue
+++ b/src/views/detections/DetectionFilter.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="detection-filter-case">
     <div class="no-data" v-if="isNoData">No data</div>
+
+    <div class="new-detection-filter-title">Filters</div>
     <template v-for="(filter, index) in filterData" :key="index">
       <div class="detection-filter" v-show="filter.data.length > 0">
         <div class="filter__header" @click="filter.collapse = !filter.collapse">
-          <i class="el-icon-arrow-right" :class="{ 'arrow-rotate': !filter.collapse }"></i>
-          <span>{{filter.title}}</span>
+          <span class="new-detection-filter-header-title">{{filter.title}}</span>
+          <i class="el-icon-arrow-right new-detection-filter-icon" :class="{ 'arrow-rotate': !filter.collapse }"></i>
         </div>
         <el-collapse-transition>
           <div class="filter__body" v-show="!filter.collapse">