fix: Detection模块右侧tab的图标自适应居中

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

@@ -7,9 +7,18 @@
     justify-content: center;
     align-items: flex-start;
     margin-bottom: 1px;
-    padding-top: 18px;
+    //padding-top: 18px;
     background-color: #EFF2F5;
 
+    .cn-detection__collapse-block {
+      min-height: 66px;
+      height: 100%;
+      max-height: 88px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+
     span {
       transform: rotate(0);
       transition: all linear .2s;

src/views/detections/DetectionRow.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="cn-detection--list" :style="{zIndex: !isCollapse ? 5 : 'unset'}">
     <!-- 左侧下拉按钮 -->
-    <div class="cn-detection__collapse" id="detectionTab" :style="{'padding-top': paddingTop}">
-      <span @click="switchCollapse" :class="{'reg-down': !isCollapse}">
+    <div class="cn-detection__collapse">
+      <div class="cn-detection__collapse-block" @click="switchCollapse">
+        <span :class="{'reg-down': !isCollapse}">
         <i class="cn-icon cn-icon-arrow-right"></i>
       </span>
       </div>
+    </div>
     <div class="cn-detection__case">
       <div class="cn-detection__icon" :style="`background-color: ${eventSeverityColor[detection.eventSecurity]}`"></div>
       <div class="cn-detection__row">
@@ -127,8 +129,7 @@ export default {
       entityType,
       detectionPageType,
       isCollapse: true, // 是否是折叠状态
-      eventSeverityColor,
-      paddingTop: '21px'
+      eventSeverityColor
     }
   },
   computed: {
@@ -164,15 +165,6 @@ 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,