效果
html
<div class="left">
<span class="overview">实时监控</span>
<div class="descrip-list">
<div class="descrip-item" :style="{ width: item.large ? '100%' : '50%' }"
v-for="item in list">
<div class="lbl">{{ item.label }}</div>
<div class="txt" :class="item.status == 'online' ? 'online' : item.status == 'offline' ? 'offline' : item.status == 'alarm' ? 'alarm' : item.status == 'abnormal' ? 'abnormal' : ''">{{item.value }}</div>
</div>
</div>
</div>
js
props: {
list: {
type: Array,
default: function () {
return [
{
label: '水位(m)',
value: 0.34,
large: true,
status: 'online'
},
{
label: '1小时雨量(mm)',
value: 0.34,
status: 'offline'
},
{
label: '3小时雨量(mm)',
value: 0.34,
status: 'alarm'
},
{
label: '6小时雨量(mm)',
value: 0.34,
status: 'abnormal'
},
{
label: '12小时雨量(mm)',
value: 0.34,
status: 'online'
},
{
label: '最新上报时间',
value: 0.34,
large: true,
},
]
}
}
},
css
.content {
display: flex;
justify-content: space-between;
.left,
.right {
width: 589px;
background: #fcfcfc;
border: 1px solid rgba(151, 151, 151, 0.15);
}
.left {
position: relative;
.overview {
margin-left: 50px;
box-sizing: border-box;
padding-top: 16px;
display: inline-block;
}
.overview::before {
content: '';
position: absolute;
width: 4px;
height: 20px;
background-color: #117dee;
left: 19px;
border-radius: 10px;
}
.descrip-list {
box-sizing: border-box;
margin: 15px;
display: flex;
flex-wrap: wrap;
.descrip-item {
display: flex;
border-bottom: 1px solid #f0f0f0;
.lbl {
width: 140px;
height: 46px;
background: rgba(0, 0, 0, 0.02);
display: inline-block;
font-size: 14px;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
text-align: left;
color: #000;
line-height: 46px;
padding-left: 25px;
box-sizing: border-box;
}
.txt {
height: 45px;
line-height: 45px;
padding-left: 25px;
font-size: 14px;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: 500;
text-align: left;
color: #0a84ff;
box-sizing: border-box;
display: inline-block;
background: #fff;
flex: 1;
&.online {
color: #67c23a;
}
&.offline {
color: #666666;
}
&.alarm {
color: #ff4d4f;
}
&.abnormal {
color: #faad14;
}
}
}
}
.descrip-item:first-child {
border-top: 1px solid #f0f0f0;
}
}
}