小程序环形进度条（基于l-circularProgress）

WhoLovesAbby / 2023-08-09 / 原文

组件预览：

组件代码：

<view class="progress-wrap">
				<l-circularProgress :box-width="progressBoxWidth" :box-height="progressBoxWidth" :fontShow="false"
					progressColor="#fff5de" :lineWidth="circleProgresaBorderWidth" fontColor="#fff3e2"
					gradualColor="#cfa365" bg-color="#373c43" :percent="updatePercent">
					<view class="progress-slot-text-block">
						<view class="progress-text-wrap">
							<text class="progress-num">{{ updatePercent || 0 }}</text>
							<text class="progress-unit">%</text>
						</view>
					</view>
				</l-circularProgress>
				<view class="progress-tips">{{ progressTips }}</view>
			</view>

.progress-wrap {
		width: 750rpx;
		height: 468rpx;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding-top: 20rpx;
	}

	.progress-slot-text-block {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;

		.progress-text-wrap {
			width: 100%;
			height: 112rpx;
			line-height: 112rpx;
			display: inline-flex;
			align-items: baseline;
			justify-content: center;
		}

		.progress-num {
			font-size: 80rpx;
			color: #fff3e2;
			font-weight: 500;
			text-shadow: 0rpx 4rpx 8rpx #ffad3266;
			margin-right: 10rpx;
		}

		.progress-unit {
			color: #fff3e2;
			font-size: 36rpx;
			line-height: 80rpx;
		}
	}

	::v-deep .circular-container {
		transform: translateX(calc(50vw - 50%));
	}