hejunjie
1 month ago
6 changed files with 773 additions and 2 deletions
@ -0,0 +1,363 @@ |
|||
<template> |
|||
<div class="body slider-right"> |
|||
|
|||
<div class="top-title">巡查统计分析</div> |
|||
<div class="table-box slider-right-body"> |
|||
<div class="title mb-8">责任人巡查情况概览</div> |
|||
|
|||
<div class="search-item flex items-center mb-8"> |
|||
<span class="search-label">巡查周期</span> |
|||
<el-date-picker |
|||
clearable |
|||
size="small" |
|||
class="ml-10" |
|||
v-model="paramsData.personResponsibleArr" |
|||
@change="getPersonResponsible" |
|||
type="daterange" |
|||
placeholder="开始日期" |
|||
value-format="yyyy-MM-dd" |
|||
></el-date-picker> |
|||
</div> |
|||
<div ref="personResponsible" class="personResponsible mb-8"></div> |
|||
<div class="title mb-8">巡查隐患概览</div> |
|||
|
|||
<div class="search-form flex flex-wrap mb-8"> |
|||
<div class="search-item flex items-center mr-8"> |
|||
<span class="search-label">巡查周期</span> |
|||
<el-date-picker |
|||
clearable |
|||
size="small" |
|||
class="ml-10" |
|||
v-model="paramsData.hiddenDangerArr" |
|||
@change="gethiddenDanger" |
|||
type="daterange" |
|||
placeholder="开始日期" |
|||
value-format="yyyy-MM-dd" |
|||
></el-date-picker> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center mr-8"> |
|||
<span class="search-label">行政区划</span> |
|||
<el-cascader |
|||
class="ml-10 search-input" |
|||
ref="cascader" |
|||
@change="gethiddenDanger" |
|||
v-model="paramsData.adcd" |
|||
:props="areasOptionProps" |
|||
placeholder="请选择行政区划" |
|||
clearable |
|||
size="small" |
|||
> |
|||
</el-cascader> |
|||
</div> |
|||
</div> |
|||
<div class="cardList"> |
|||
<div class="total card"> |
|||
<div class="header">堤防数量(段)</div> |
|||
<div class="content">{{ hiddenDangerData.dfNumber }}</div> |
|||
</div> |
|||
<div class="major card"> |
|||
<div class="header">隐患数量(个)</div> |
|||
<div class="content">{{ hiddenDangerData.yhNumber }}</div> |
|||
</div> |
|||
<div class="handle card"> |
|||
<div class="header">处理数量(个)</div> |
|||
<div class="content">{{ hiddenDangerData.czNumber }}</div> |
|||
</div> |
|||
</div> |
|||
<div ref="hiddenDanger" class="hiddenDanger"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
import { cascaderLazyLoad } from "@/utils/elUtils"; |
|||
|
|||
import { |
|||
postYhStatisticsSituation, |
|||
postYhStatisticsHiddenDanger, |
|||
} from "@/api/dike"; |
|||
export default { |
|||
data () { |
|||
return { |
|||
personTypeOptions: '', |
|||
areasOptionProps: { |
|||
emitPath: false, |
|||
checkStrictly: true, //选择任意一级 |
|||
expandTrigger: "hover", |
|||
lazy: true, |
|||
lazyLoad: cascaderLazyLoad, |
|||
}, |
|||
paramsData: { |
|||
personResponsibleArr: [], |
|||
hiddenDangerArr: [], |
|||
adcd: '' |
|||
}, |
|||
personResponsibleData: { |
|||
city: ['广州市','韶关市','深圳市','珠海市','汕头市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市'], |
|||
administration: [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50], |
|||
technology: [100,100,100,100,10,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100], |
|||
patrol: [150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150] |
|||
}, |
|||
hiddenDangerData: { |
|||
czNumber: 0, |
|||
dfNumber: 0, |
|||
yhNumber: 0, |
|||
city: ['广州市','韶关市','深圳市','珠海市','汕头市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市'], |
|||
hiddenDangerNumber: [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50], |
|||
handleNumber: [100,100,100,100,10,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100] |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.getDicts("person_type").then((response) => { |
|||
this.personTypeOptions = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.getPersonResponsible() |
|||
this.gethiddenDanger() |
|||
}, |
|||
methods: { |
|||
gethiddenDanger() { |
|||
const node = this.$refs.cascader.getCheckedNodes() |
|||
postYhStatisticsHiddenDanger({ |
|||
adcd: this.paramsData.adcd, |
|||
districtLevelFlag: node[0] && node[0].level === 3 ? 1 : 0, |
|||
patrolStart: this.paramsData.hiddenDangerArr && this.paramsData.hiddenDangerArr.length > 1 ? this.paramsData.hiddenDangerArr[0] : '', |
|||
patrolEnd: this.paramsData.hiddenDangerArr && this.paramsData.hiddenDangerArr.length > 1 ? this.paramsData.hiddenDangerArr[1] : '' |
|||
}).then((res) => { |
|||
this.hiddenDanger(res) |
|||
}) |
|||
}, |
|||
getPersonResponsible() { |
|||
postYhStatisticsSituation({ |
|||
patrolStart: this.paramsData.personResponsibleArr && this.paramsData.personResponsibleArr.length > 1 ? this.paramsData.personResponsibleArr[0] : '', |
|||
patrolEnd: this.paramsData.personResponsibleArr && this.paramsData.personResponsibleArr.length > 1 ? this.paramsData.personResponsibleArr[1] : '' |
|||
}).then((res) => { |
|||
this.personResponsibleChart(res) |
|||
}) |
|||
}, |
|||
personResponsibleChart(res) { |
|||
this.personResponsibleData.city = res.data.xaxis |
|||
const legend = this.personTypeOptions.map(item => { |
|||
return item.dictLabel |
|||
}) |
|||
const series = this.personTypeOptions.map(person => { |
|||
const list = [] |
|||
console.log(res.data) |
|||
res.data.yaxis.forEach(item => { |
|||
let count = 0 |
|||
item.series.forEach(sub => { |
|||
console.log(sub.dutyHolderType) |
|||
if (sub.dutyHolderType == person.dictValue) { |
|||
count = sub.count |
|||
} |
|||
}) |
|||
list.push(count) |
|||
}) |
|||
return { |
|||
name: person.dictLabel, |
|||
barGap: 0, |
|||
barWidth: 10, |
|||
type: 'bar', |
|||
data: list || [] |
|||
} |
|||
}) |
|||
const chart = echarts.init(this.$refs.personResponsible) |
|||
const option = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
crossStyle: { |
|||
color: '#999' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: legend, |
|||
right: 'left', |
|||
}, |
|||
grid: { |
|||
left: '2%', |
|||
right: '2%', |
|||
top: '10%', |
|||
bottom: '10%', |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
data: this.personResponsibleData.city, |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
name: '次数', |
|||
interval: 1 |
|||
} |
|||
], |
|||
series: series |
|||
}; |
|||
chart.setOption(option); |
|||
}, |
|||
hiddenDanger(res) { |
|||
this.hiddenDangerData.czNumber = res.data.czNumber |
|||
this.hiddenDangerData.yhNumber = res.data.yhNumber |
|||
this.hiddenDangerData.dfNumber = res.data.dfNumber |
|||
this.hiddenDangerData.city = res.data.xaxis |
|||
const hiddenDangerNumberList = [] |
|||
const handleNumberList = [] |
|||
res.data.yaxis.forEach(item => { |
|||
let hiddenDangerNumber = 0 |
|||
let handleNumber = 0 |
|||
item.series.forEach(sub => { |
|||
if (sub.type == '1') { |
|||
hiddenDangerNumber = sub.count |
|||
} |
|||
if (sub.type == '2') { |
|||
handleNumber = sub.count |
|||
} |
|||
}) |
|||
hiddenDangerNumberList.push(hiddenDangerNumber) |
|||
handleNumberList.push(handleNumber) |
|||
}) |
|||
this.hiddenDangerData.hiddenDangerNumber = hiddenDangerNumberList |
|||
this.hiddenDangerData.handleNumber = handleNumberList |
|||
const chart = echarts.init(this.$refs.hiddenDanger) |
|||
const option = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
crossStyle: { |
|||
color: '#999' |
|||
} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '2%', |
|||
right: '2%', |
|||
top: '10%', |
|||
bottom: '10%', |
|||
}, |
|||
legend: { |
|||
data: ['隐患数量', '处理数量'], |
|||
right: 'left', |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
data: this.hiddenDangerData.city, |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
interval: 1, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
name: '隐患数量', |
|||
type: 'bar', |
|||
barGap: 0, |
|||
barWidth: 10, |
|||
itemStyle: { |
|||
color: '#165DFF', |
|||
}, |
|||
data: this.hiddenDangerData.hiddenDangerNumber |
|||
}, |
|||
{ |
|||
name: '处理数量', |
|||
type: 'bar', |
|||
barGap: 0, |
|||
barWidth: 10, |
|||
itemStyle: { |
|||
color: '#28CE8E', |
|||
}, |
|||
data: this.hiddenDangerData.handleNumber |
|||
}, |
|||
] |
|||
}; |
|||
chart.setOption(option); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
|
|||
.body { |
|||
width: 100%; |
|||
padding-left: 24px; |
|||
.top-title { |
|||
height: 40px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
width: 100%; |
|||
margin-top: 24px; |
|||
background-color: white; |
|||
.title { |
|||
padding-left: 20px; |
|||
position: relative; |
|||
&::before { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
content: ""; |
|||
width: 4px; |
|||
height: 16px; |
|||
background-color: #1890ff; |
|||
} |
|||
} |
|||
.cardList { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
.card { |
|||
width: 33%; |
|||
height: 102px; |
|||
border-radius: 8px; |
|||
padding: 16px 24px; |
|||
margin: 8px; |
|||
box-sizing: border-box; |
|||
border: 1px solid #9FD3CA; |
|||
background: linear-gradient(180deg, #EAFFFC 0%, rgba(222, 255, 250, 0) 100%), #FFFFFF; |
|||
.header { |
|||
font-size: 16px; |
|||
} |
|||
.content { |
|||
font-size: 32px; |
|||
font-weight: 500; |
|||
line-height: normal; |
|||
letter-spacing: 0em; |
|||
color: #31A08E; |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
.personResponsible { |
|||
width: 100%; |
|||
height: 295px; |
|||
} |
|||
.hiddenDanger { |
|||
width: 100%; |
|||
height: 290px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,366 @@ |
|||
<template> |
|||
<div class="body slider-right"> |
|||
|
|||
<div class="top-title">巡查统计分析</div> |
|||
<div class="table-box slider-right-body"> |
|||
<div class="title mb-8">责任人巡查情况概览</div> |
|||
|
|||
<div class="search-item flex items-center mb-8"> |
|||
<span class="search-label">巡查周期</span> |
|||
<el-date-picker |
|||
clearable |
|||
size="small" |
|||
class="ml-10" |
|||
v-model="paramsData.personResponsibleArr" |
|||
@change="getPersonResponsible" |
|||
type="daterange" |
|||
placeholder="开始日期" |
|||
value-format="yyyy-MM-dd" |
|||
></el-date-picker> |
|||
</div> |
|||
<div ref="personResponsible" class="personResponsible mb-8"></div> |
|||
<div class="title mb-8">巡查隐患概览</div> |
|||
|
|||
<div class="search-form flex flex-wrap mb-8"> |
|||
<div class="search-item flex items-center mr-8"> |
|||
<span class="search-label">巡查周期</span> |
|||
<el-date-picker |
|||
clearable |
|||
size="small" |
|||
class="ml-10" |
|||
v-model="paramsData.hiddenDangerArr" |
|||
@change="gethiddenDanger" |
|||
type="daterange" |
|||
placeholder="开始日期" |
|||
value-format="yyyy-MM-dd" |
|||
></el-date-picker> |
|||
</div> |
|||
|
|||
<div class="search-item flex items-center mr-8"> |
|||
<span class="search-label">行政区划</span> |
|||
<el-cascader |
|||
class="ml-10 search-input" |
|||
ref="cascader" |
|||
@change="gethiddenDanger" |
|||
v-model="paramsData.adcd" |
|||
:props="areasOptionProps" |
|||
placeholder="请选择行政区划" |
|||
clearable |
|||
size="small" |
|||
> |
|||
</el-cascader> |
|||
</div> |
|||
</div> |
|||
<div class="cardList"> |
|||
<div class="total card"> |
|||
<div class="header">堤防数量(段)</div> |
|||
<div class="content">{{ hiddenDangerData.dfNumber }}</div> |
|||
</div> |
|||
<div class="major card"> |
|||
<div class="header">隐患数量(个)</div> |
|||
<div class="content">{{ hiddenDangerData.yhNumber }}</div> |
|||
</div> |
|||
<div class="handle card"> |
|||
<div class="header">处理数量(个)</div> |
|||
<div class="content">{{ hiddenDangerData.czNumber }}</div> |
|||
</div> |
|||
</div> |
|||
<div ref="hiddenDanger" class="hiddenDanger"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
import { cascaderLazyLoad } from "@/utils/elUtils"; |
|||
|
|||
import { |
|||
postDfStatisticsSituation, |
|||
postDfStatisticsHiddenDanger, |
|||
} from "@/api/sluice"; |
|||
import {postYhStatisticsHiddenDanger} from "@/api/dike"; |
|||
export default { |
|||
data () { |
|||
return { |
|||
personTypeOptions: '', |
|||
areasOptionProps: { |
|||
emitPath: false, |
|||
checkStrictly: true, //选择任意一级 |
|||
expandTrigger: "hover", |
|||
lazy: true, |
|||
lazyLoad: cascaderLazyLoad, |
|||
}, |
|||
paramsData: { |
|||
personResponsibleArr: [], |
|||
hiddenDangerArr: [], |
|||
adcd: '' |
|||
}, |
|||
personResponsibleData: { |
|||
city: ['广州市','韶关市','深圳市','珠海市','汕头市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市'], |
|||
administration: [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50], |
|||
technology: [100,100,100,100,10,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100], |
|||
patrol: [150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150] |
|||
}, |
|||
hiddenDangerData: { |
|||
czNumber: 0, |
|||
dfNumber: 0, |
|||
yhNumber: 0, |
|||
city: ['广州市','韶关市','深圳市','珠海市','汕头市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市'], |
|||
hiddenDangerNumber: [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50], |
|||
handleNumber: [100,100,100,100,10,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100] |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.getDicts("person_type").then((response) => { |
|||
this.personTypeOptions = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.getPersonResponsible() |
|||
this.gethiddenDanger() |
|||
}, |
|||
methods: { |
|||
gethiddenDanger() { |
|||
const node = this.$refs.cascader.getCheckedNodes() |
|||
postYhStatisticsHiddenDanger({ |
|||
adcd: this.paramsData.adcd, |
|||
districtLevelFlag: node[0] && node[0].level === 3 ? 1 : 0, |
|||
patrolStart: this.paramsData.hiddenDangerArr && this.paramsData.hiddenDangerArr.length > 1 ? this.paramsData.hiddenDangerArr[0] : '', |
|||
patrolEnd: this.paramsData.hiddenDangerArr && this.paramsData.hiddenDangerArr.length > 1 ? this.paramsData.hiddenDangerArr[1] : '' |
|||
}).then((res) => { |
|||
this.hiddenDanger(res) |
|||
}) |
|||
}, |
|||
getPersonResponsible() { |
|||
console.log(this.paramsData) |
|||
postDfStatisticsSituation({ |
|||
patrolStart: this.paramsData.personResponsibleArr && this.paramsData.personResponsibleArr.length > 1 ? this.paramsData.personResponsibleArr[0] : '', |
|||
patrolEnd: this.paramsData.personResponsibleArr && this.paramsData.personResponsibleArr.length > 1 ? this.paramsData.personResponsibleArr[1] : '' |
|||
}).then((res) => { |
|||
this.personResponsibleChart(res) |
|||
}) |
|||
}, |
|||
personResponsibleChart(res) { |
|||
this.personResponsibleData.city = res.data.xaxis |
|||
const legend = this.personTypeOptions.map(item => { |
|||
return item.dictLabel |
|||
}) |
|||
const series = this.personTypeOptions.map(person => { |
|||
const list = [] |
|||
res.data.yaxis.forEach(item => { |
|||
let count = 0 |
|||
item.series.forEach(sub => { |
|||
if (sub.dutyHolderType == person.dictValue) { |
|||
count = sub.count |
|||
} |
|||
}) |
|||
list.push(count) |
|||
}) |
|||
return { |
|||
name: person.dictLabel, |
|||
barGap: 0, |
|||
barWidth: 10, |
|||
type: 'bar', |
|||
data: list || [] |
|||
} |
|||
}) |
|||
const chart = echarts.init(this.$refs.personResponsible) |
|||
const option = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
crossStyle: { |
|||
color: '#999' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: legend, |
|||
right: 'left', |
|||
}, |
|||
grid: { |
|||
left: '2%', |
|||
right: '2%', |
|||
top: '10%', |
|||
bottom: '10%', |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
data: this.personResponsibleData.city, |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
name: '次数', |
|||
interval: 1 |
|||
} |
|||
], |
|||
series: series |
|||
}; |
|||
chart.setOption(option); |
|||
}, |
|||
hiddenDanger(res) { |
|||
this.hiddenDangerData.czNumber = res.data.czNumber |
|||
this.hiddenDangerData.yhNumber = res.data.yhNumber |
|||
this.hiddenDangerData.dfNumber = res.data.dfNumber |
|||
this.hiddenDangerData.city = res.data.xaxis |
|||
const hiddenDangerNumberList = [] |
|||
const handleNumberList = [] |
|||
res.data.yaxis.forEach(item => { |
|||
let hiddenDangerNumber = 0 |
|||
let handleNumber = 0 |
|||
item.series.forEach(sub => { |
|||
if (sub.type == '1') { |
|||
hiddenDangerNumber = sub.count |
|||
} |
|||
if (sub.type == '2') { |
|||
handleNumber = sub.count |
|||
} |
|||
}) |
|||
hiddenDangerNumberList.push(hiddenDangerNumber) |
|||
handleNumberList.push(handleNumber) |
|||
}) |
|||
this.hiddenDangerData.hiddenDangerNumber = hiddenDangerNumberList |
|||
this.hiddenDangerData.handleNumber = handleNumberList |
|||
const chart = echarts.init(this.$refs.hiddenDanger) |
|||
const option = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
crossStyle: { |
|||
color: '#999' |
|||
} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '2%', |
|||
right: '2%', |
|||
top: '10%', |
|||
bottom: '10%', |
|||
}, |
|||
legend: { |
|||
data: ['隐患数量', '处理数量'], |
|||
right: 'left', |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
data: this.hiddenDangerData.city, |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
interval: 1, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
name: '隐患数量', |
|||
type: 'bar', |
|||
barGap: 0, |
|||
barWidth: 10, |
|||
itemStyle: { |
|||
color: '#165DFF', |
|||
}, |
|||
data: this.hiddenDangerData.hiddenDangerNumber |
|||
}, |
|||
{ |
|||
name: '处理数量', |
|||
type: 'bar', |
|||
barGap: 0, |
|||
barWidth: 10, |
|||
itemStyle: { |
|||
color: '#28CE8E', |
|||
}, |
|||
data: this.hiddenDangerData.handleNumber |
|||
}, |
|||
] |
|||
}; |
|||
chart.setOption(option); |
|||
}, |
|||
handleChangeQuery() { |
|||
this.initData(); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
|
|||
.body { |
|||
width: 100%; |
|||
padding-left: 24px; |
|||
.top-title { |
|||
height: 40px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
width: 100%; |
|||
margin-top: 24px; |
|||
background-color: white; |
|||
.title { |
|||
padding-left: 20px; |
|||
position: relative; |
|||
&::before { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
content: ""; |
|||
width: 4px; |
|||
height: 16px; |
|||
background-color: #1890ff; |
|||
} |
|||
} |
|||
.cardList { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
.card { |
|||
width: 33%; |
|||
height: 102px; |
|||
border-radius: 8px; |
|||
padding: 16px 24px; |
|||
margin: 8px; |
|||
box-sizing: border-box; |
|||
border: 1px solid #9FD3CA; |
|||
background: linear-gradient(180deg, #EAFFFC 0%, rgba(222, 255, 250, 0) 100%), #FFFFFF; |
|||
.header { |
|||
font-size: 16px; |
|||
} |
|||
.content { |
|||
font-size: 32px; |
|||
font-weight: 500; |
|||
line-height: normal; |
|||
letter-spacing: 0em; |
|||
color: #31A08E; |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
.personResponsible { |
|||
width: 100%; |
|||
height: 295px; |
|||
} |
|||
.hiddenDanger { |
|||
width: 100%; |
|||
height: 290px; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue