<template>
|
<div class="AssociationWarnContainer">
|
<div class="cardItem level2 fl">
|
<div class="title">
|
<span class="fl">关联预警一：热力管网预警</span>
|
<!-- <em class="fr">热力专题</em>-->
|
</div>
|
<div class="infos clearfix">
|
<p><span>预警等级：</span><em class="risk tc">较大风险</em></p>
|
<p><span>概率：</span><em>85%</em></p>
|
<p class="allItem"><span>预警描述：</span><em>根据算法模型综合研判，该区域存在热力管网泄漏风险</em></p>
|
<p class="allItem"><span>位置详情：</span><em>太白南路与科技二路交叉口</em></p>
|
<p><span>所属单位：</span><em>高新热力</em></p>
|
<p><span>负责人：</span><em>张三</em></p>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'AssociationWarn',
|
components: {},
|
data() {
|
return {}
|
},
|
created() {},
|
methods: {}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.AssociationWarnContainer {
|
width: 100%;
|
height: 100%;
|
|
.cardItem {
|
width: 100%;
|
|
.title {
|
height: 30px;
|
line-height: 30px;
|
padding: 0 10px;
|
font-size: 16px;
|
margin-top: 6px;
|
font-size: 14px;
|
font-weight: bold;
|
}
|
|
.infos {
|
margin-top: 6px;
|
background: rgba(25, 44, 65, 0.6);
|
height: calc(100% - 30px);
|
font-size: 13px;
|
padding: 0 10px;
|
|
p {
|
line-height: 24px;
|
margin-top: 6px;
|
float: left;
|
width: 50%;
|
|
span {
|
color: #94D6FF;
|
display: inline-block;
|
vertical-align: top;
|
}
|
|
em {
|
color: #FFF;
|
display: inline-block;
|
max-width: calc(100% - 70px);
|
vertical-align: top;
|
|
&.risk {
|
width: 86px;
|
height: 24px;
|
box-sizing: border-box;
|
line-height: 22px;
|
border-radius: 4px;
|
overflow: hidden;
|
}
|
}
|
|
&.allItem {
|
width: 100%;
|
}
|
}
|
}
|
|
&.level1 {
|
.title {
|
background: rgba(242, 236, 19, 0.15);
|
color: #F2EC13;
|
}
|
|
.infos {
|
p {
|
em {
|
&.risk {
|
border: 1px solid rgba(242, 236, 19, .6);
|
background: rgba(242, 236, 19, .3);
|
color: rgba(242, 236, 19, 1);
|
}
|
}
|
}
|
}
|
}
|
|
&.level2 {
|
.title {
|
background: rgba(255, 183, 86, 0.15);
|
color: #FFB756;
|
}
|
|
.infos {
|
p {
|
em {
|
&.risk {
|
border: 1px solid rgba(250, 179, 83, .6);
|
background: rgba(250, 179, 83, .3);
|
color: rgba(250, 179, 83, 1);
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
