还是直接上代码
二、使用步骤
1.效果图
代码如下(示例):html / css
<div class="content">
信息统计:
<div class="top1" v-for="(item, index) in list" :key="index">
<span>{{ item.name }}:</span>
<ul style="" :style="{ width: item.num * 2 + 'px' }">
<li v-for="(i, indexs) in item.num" :key="indexs">
<span></span>
</li>
</ul>
<span>{{item.num}}</span>
</div>
</div>
<style lang="scss">
.content {
width: 800px;
height: 180px;
padding: 10px;
background: black;
color: #fff;
}
.top1 {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
> span {
display: inline-block;
width: 40px;
line-height: 50px;
margin-right: 10px;
}
> ul {
list-style-type: none;
padding-inline-start: 0;
height: 20px;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
background-image: linear-gradient(to right, #7a88ff, #7affaf);
li:nth-child(n) {
display: inline-block;
height: 100%;
width: 2px;
}
li:nth-child(2n) {
display: inline-block;
height: 100%;
width: 2px;
background: black;
}
}
}
</style>