fix: Detection模块按UI调整部分样式

This commit is contained in:
刘洪洪
2022-11-15 17:00:12 +08:00
parent 5ecf096e40
commit 0a3cf92ce9
3 changed files with 30 additions and 4 deletions

View File

@@ -18,7 +18,7 @@
align-items: center; align-items: center;
padding-left: 10px; padding-left: 10px;
color: #666; color: #666;
background-color: #F3F7FA; //background-color: #F3F7FA;
cursor: pointer; cursor: pointer;
span { span {
@@ -33,7 +33,18 @@
i.arrow-rotate { i.arrow-rotate {
transform: rotate(90deg) translate(2px, 3px); 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 { .filter__body {
padding: 5px 0 0 15px; 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;
}
} }

View File

@@ -8,7 +8,7 @@
align-items: flex-start; align-items: flex-start;
margin-bottom: 1px; margin-bottom: 1px;
padding-top: 18px; padding-top: 18px;
background-color: #F3F7FA; background-color: #EFF2F5;
span { span {
transform: rotate(0); transform: rotate(0);

View File

@@ -1,11 +1,13 @@
<template> <template>
<div class="detection-filter-case"> <div class="detection-filter-case">
<div class="no-data" v-if="isNoData">No data</div> <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"> <template v-for="(filter, index) in filterData" :key="index">
<div class="detection-filter" v-show="filter.data.length > 0"> <div class="detection-filter" v-show="filter.data.length > 0">
<div class="filter__header" @click="filter.collapse = !filter.collapse"> <div class="filter__header" @click="filter.collapse = !filter.collapse">
<i class="el-icon-arrow-right" :class="{ 'arrow-rotate': !filter.collapse }"></i> <span class="new-detection-filter-header-title">{{filter.title}}</span>
<span>{{filter.title}}</span> <i class="el-icon-arrow-right new-detection-filter-icon" :class="{ 'arrow-rotate': !filter.collapse }"></i>
</div> </div>
<el-collapse-transition> <el-collapse-transition>
<div class="filter__body" v-show="!filter.collapse"> <div class="filter__body" v-show="!filter.collapse">