效果
html
<div class="count">
<div class="pB_Container_top">
<div class="item">
<span style=" color:#23a459" class="data">{{ onlineRateValue }}%</span>
<span class="title">测点在线率</span>
</div>
<div class="item">
<span style=" color:#ff4d4f" class="data">{{ alarmValue }}个</span>
<span class="title">报警测站</span>
</div>
<div class="item">
<span style=" color:#1890ff" class="data">{{ totalValue }}个</span>
<span class="title">测站总数</span>
</div>
</div>
<div id="ProcessBar" class="pB_Container">
<div v-for="(item, index) in countList" :key="index"
:style="{ width: item.value + '%', backgroundColor: item.color, paddingLeft: 10 + 'px' }"></div>
</div>
<div class="pB_Container_bottom">
<div class="item" v-for="(item, index) in countList" :key="index">
<span>
<span style="display:inline-block;width:6px;height: 6px;border-radius: 50%;"
:style="{ backgroundColor: item.color }"></span>
<span :style="{ color: item.color }" class="data">{{ item.value }}</span>
</span>
<span class="title">{{ item.title }}</span>
</div>
</div>
</div>
js
countList: [
{
title: "在线测站",
value: 842,
color: '#1890ff',
status: 'inline'
},
{
title: "业务报警",
value: 21,
color: '#ff4d4f',
status: 'businessAlarm'
},
{
title: "工况报警",
value: 1999,
color: '#ff4d4f',
status: 'workingAlarm'
},
{
title: "离线测站",
value: 67,
color: '#dbdee4',
status: 'offline'
},
]
css
.pB_Container {
display: inline-flex;
line-height: 8px;
overflow: hidden;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
width: 388px;
height: 8px;
background: #dbdee4;
border: 1px solid #ecf2fe;
border-radius: 7px;
}
.pB_Container div {
float: left;
/*border-radius: 8px;*/
}
.pB_Container_bottom ul {
list-style: none;
text-align: left;
}
.pB_Container_bottom ul li {
float: left;
display: flex;
flex-direction: column;
}
.data {
display: inline-block;
font-weight: 700;
font-size: 16px;
}
.pB_Container_bottom {
display: flex;
justify-content: space-around;
width: 100%;
}
.pB_Container_top {
display: flex;
width: 100%;
justify-content: space-around;
.data {
font-size: 26px;
font-family: PingFangSC, PingFangSC-Semibold;
font-weight: 600;
}
.title {
font-size: 14px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
color: #666;
}
}
.item {
display: flex;
flex-direction: column;
}
.title {
font-size: 12px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
text-align: left;
color: #999999;
}