1.需求,图如下,数据可变 ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9ee35a3cad5006166d065a7b860b644a.png)
2.思路
进度条分两层:底层为深色的100%层,上层带颜色的是数量层,末端的圆圈用:after携带。上层的宽度通过style
来修改。
直接在数量层写伪类放不上去,新建了一个div用来装末端的圆点。
更改itemNum
的数就可以改变进度了
3.代码
<div class="item">
<span>意见建议数</span>
<div class="g-container">
<div class="g-progress" :style="{ width: `${itemNum[0]}%`}"/>
<div class="point" />
</div>
<span>{{ itemNum[0]}}</span>
</div>
.g-container {
width: 550px;
height: 12px;
border-radius: 25px;
background: #0e3475;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.g-progress {
height: inherit;
border-radius: 25px 0 0 25px;
background: linear-gradient(to right, #2366d1, #43ede7);
}
.point::after {
content: ' ';
margin-left: -18px;
width: 26px;
height: 26px;
display: block;
background: radial-gradient(#fff 40%, #43ede7 10%, #43ede7 10px);
border-radius: 50%;
}