<template>
  <view>
    <l-circle current="30" percent="30" size="80px" strokeColor="#c83428">
      <view class="centerTxt">
        <view class="num">
          80%
        </view>
        <view class="txt">
          正确率
        </view>
      </view>
    </l-circle>
  </view>
  <view class="progressBox">
    <wt-progress-circle :percent="80" :size="168" progressColor="#4ADA88" id='a'>
      <view class="centerTxt">
        <view class="num">
          80%
        </view>
        <view class="txt">
          正确率
        </view>
      </view>
    </wt-progress-circle>
  </view>

</template>

<script>
</script>

<style lang="scss" scoped>
.progressBox {
  position: relative;
  width: 168rpx;
  height: 168rpx;
  margin: 0 auto;
  margin-top: 33rpx;
}

.centerTxt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .num {
    font-size: 30rpx;
    font-family: Arial;
    font-weight: bold;
    color: #38393A;
  }

  .txt {
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #8A8B8B;
    margin-top: 10rpx;
  }

}
</style>
