组件预览:
组件代码:
<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%)); }
标签:circularProgress,center,进度条,text,环形,height,content,progress,font From: https://www.cnblogs.com/abby-lrwei/p/17616213.html