<template>
|
<div class="DisposalProContainer">
|
<div class="disposeItem clearfix">
|
<div class="topBg"><img src="@/assets/img/warnAnalysis/rightCharts/disposeBg.png" alt=""></div>
|
<div class="leftCount tc fl"><span>1</span></div>
|
<div class="infos fl">
|
<h5><span>预警发布</span><em>2022-09-16 15:06:33 </em></h5>
|
<div class="infoItem">
|
<p class="inline"><span>当前环节用时：</span><em>10s</em></p>
|
<p class="inline"><span>审核人：</span><em>张三</em></p>
|
</div>
|
<div class="infoItem">
|
<p class="inline"><span>预警等级：</span><em class="level2">较大风险</em></p>
|
<p class="inline"><span>状态：</span><em>已完成</em></p>
|
</div>
|
</div>
|
<!-- <div class="notifyCount fr">已通知2人</div>-->
|
</div>
|
<div class="disposeItem clearfix">
|
<div class="topBg"><img src="@/assets/img/warnAnalysis/rightCharts/disposeBg.png" alt=""></div>
|
<div class="leftCount tc fl"><span>2</span></div>
|
<div class="infos fl">
|
<h5><span>预警审核</span><em>2022-09-16 13:05:14 </em></h5>
|
<div class="infoItem">
|
<p class="inline"><span>当前环节用时：</span><em>2h</em></p>
|
<p class="inline"><span>审核人：</span><em>李四</em></p>
|
</div>
|
<div class="infoItem">
|
<p class="inline"><span>预警等级：</span><em class="level2">较大风险</em></p>
|
<p class="inline"><span>状态：</span><em>已完成</em></p>
|
</div>
|
</div>
|
<!-- <div class="notifyCount fr">已通知3人</div>-->
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'DisposalPro',
|
components: {},
|
data() {
|
return {}
|
},
|
created() {},
|
methods: {}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.DisposalProContainer {
|
height: 100%;
|
padding-right: 10px;
|
|
.disposeItem {
|
position: relative;
|
padding-top: 4px;
|
margin-top: 10px;
|
font-size: 14px;
|
|
.level2 {
|
color: #FFB756;
|
}
|
|
.topBg {
|
position: absolute;
|
left: 59px;
|
top: 0;
|
}
|
|
.leftCount {
|
width: 50px;
|
height: 50px;
|
background: no-repeat url('../../../assets/img/warnAnalysis/rightCharts/disposeCountBg1.png');
|
background-size: 100% 100%;
|
line-height: 50px;
|
font-size: 24px;
|
|
span {
|
background: linear-gradient(23deg, #7ED6FF 0%, #E9FCFF 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
}
|
|
.notifyCount {
|
color: #FFFFFF;
|
}
|
|
.infos {
|
margin-left: 42px;
|
color: #FFF;
|
|
h5 {
|
margin-top: 14px;
|
|
span {
|
font-size: 14px;
|
margin-right: 40px;
|
vertical-align: baseline;
|
line-height: 18px;
|
}
|
|
em {
|
vertical-align: baseline;
|
}
|
}
|
|
.infoItem {
|
margin-top: 14px;
|
line-height: 14px;
|
|
p {
|
width: 100%;
|
|
span {
|
color: #94D6FF;
|
margin-right: 10px;
|
}
|
}
|
}
|
}
|
|
&:first-child {
|
.infos {
|
h5 {
|
span {
|
color: #FFB756;
|
}
|
}
|
}
|
|
.leftCount {
|
background: no-repeat url('../../../assets/img/warnAnalysis/rightCharts/disposeCountBg2.png');
|
background-size: 100% 100%;
|
span {
|
background: linear-gradient(23deg, #FFB756 0%, #FFF8EE 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
