进度条样式预览

实现代码：

		<view class="mainPro"><view class="proBg"><view class="proDetail" :style="{ width: `${schedule}%` }"></view></view><view class="proTxt">完成进度： {{ schedule }}%</view></view>

schedule ：20

css

.mainPro {font-size: 22rpx;font-weight: 600;position: relative;z-index: 2;top: 40rpx;left: 50%;width: 360rpx;margin-left: -180rpx;.proTxt {text-align: center;color: #fff;margin-top: 10rpx;}.proBg {width: 356rpx;height: 8rpx;background-color: #E9DACD;border-radius: 20rpx;margin: 0 4rpx;font-size: 12rpx;.proDetail {height: 8rpx;background-color: #E5A47A;border-radius: 20rpx;}}}