vue 通过后台数据制作进度条效果

先看效果：

思路： 两个div相套，给外层div固定宽度，内部的div通过后台数据得算出百分比的一个宽度，再把外层红色背景隐藏即可得出进度条效果。

话不多说，上代码：

<!-- 进度条 开始 -->
				<div v-for="(item,index) in ysqshuju" v-show="ysqshuju_">
					<div class="" style="display: flex;justify-content: space-around;margin-top: 1rem;">
						<div class=""
							style="color: white;font-size: .8rem;border: #00B8CE solid 0px;width: 4rem;text-align: center;">
							{{item.names}}
						</div>
						<div class="" style="width: 10rem;background-color: black;height: .8rem;margin-top: .1rem;">
							<div class="line_" :style="'width:'+ (item.yl/40)*100 +'%'">

							</div>
						</div>
						<div class="" style="color: white;font-size: .8rem;width: 4rem;text-align: center;">
							{{item.yl}}mm
						</div>
					</div>
				</div>
				<!-- 进度条 结束		 -->

	/* 里层div */
	.line_ {
		background-color: azure;
		height: .8rem;
		border-radius: 10px;
		background: linear-gradient(to right,
				rgba(0, 225, 255, 1),
				rgba(0, 225, 255, 1),
				rgba(0, 225, 255, 1),
				rgba(0, 225, 255, 1),
				rgba(0, 225, 255, 0.8),
				rgba(0, 225, 255, 0.7),
				rgba(0, 225, 255, 0.6));
	}