环形进度条-uniapp-vue

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