进度条样式预览

实现代码：

		<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;
				}
			}
		}