<view class="circle-out-box">
<view class="circle-inner-box">
<view
class="circle"
:class="{ 'clip-auto': baseForm.detailShowVO.rate > 50 }"
>
<view
class="percent left"
:style="renderLeftRate(baseForm.detailShowVO.rate)"
></view>
<view
class="percent right"
:class="{ wth0: baseForm.detailShowVO.rate < 50 }"
></view>
</view>
<view class="circle-num-box">
<view>
<view class="circle-sign-box">签字率</view>
<view class="circle-percent-box"
>{{ baseForm.detailShowVO.rate || 0 }}%</view
>
</view>
</view>
</view>
</view>
renderLeftRate(percent) {
return `transform: rotate(${3.6 * percent}deg);`;
},
.circle-out-box {
width: 148rpx;
height: 148rpx;
position: relative;
.circle-inner-box,
.circle,
.percent {
position: absolute;
width: 148rpx;
height: 148rpx;
border-radius: 50%;
}
.circle-inner-box {
// top: 74rpx;
// left: 74rpx;
background-color: #f5f6f8;
}
.circle {
box-sizing: border-box;
border: 14rpx solid #f5f6f8;
clip: rect(0, 148rpx, 148rpx, 74rpx);
}
.clip-auto {
clip: rect(auto, auto, auto, auto);
}
.percent {
box-sizing: border-box;
top: -14rpx;
left: -14rpx;
}
.left {
transition: transform ease;
border: 14rpx solid #ff851a;
clip: rect(0, 74rpx, 148rpx, 0);
}
.right {
border: 14rpx solid #ff851a;
clip: rect(0, 148rpx, 148rpx, 74rpx);
}
.wth0 {
width: 0;
}
.circle-num-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120rpx;
height: 120rpx;
box-sizing: border-box;
text-align: center;
font-size: 28rpx;
border-radius: 50%;
background-color: #fff;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
.circle-sign-box {
width: 100%;
text-align: center;
font-weight: 700;
font-size: 28rpx;
color: #ff851a;
}
.circle-percent-box {
margin-top: 6rpx;
font-weight: 500;
font-size: 24rpx;
color: #ff851a;
line-height: 34rpx;
}
}
}
环形进度条-uniapp-vue
于 2024-03-22 16:41:57 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)