效果图
Vue代码
<!-- active值为12345 -->
<div class="signal">
<div
class="signal-item"
v-for="(item, index) in 5"
:key="index"
:style="[
{ '--i': index + 1 },
{ background: index < active ? '#409eff' : '' }
]"
></div>
</div>
.signal {
display: flex;
justify-content: center;
align-items: flex-end;
&-item {
width: 4px;
height: calc(4px * var(--i));
background: #d7d7d7;
+.signal-item {
margin-left: 2px;
}
}
}