circle vant3环形组件

<template>
  <div class="circle-page1">
    <van-circle
      :id="id"
      class="circle-box"
      v-model:current-rate="currentRate"
      layer-color="rgba(212,214,230,0.72)"
      :stroke-width="100"
      :clockwise="false"
      :color="gradientColor"
      :rate="rate"
      :speed="speed"
      text=""
    />
    <!-- <div :class="props.total_score-0 > 9999 ? 'point-box1' : 'point-box'">
            <span class="point-number" :class="props.total_score-0 > 9999 ?'numberMore':''">{{props.total_score}}</span>
            <span class="fen">分</span>
        </div> -->
  </div>
</template>
<script setup>
  import { ref, onMounted, defineProps, nextTick } from 'vue'
  let props = defineProps({
    total_score: {},
    id: {},
    total_full_score: {}
  })
  let rate = ref(0)
  let speed = ref(0)
  onMounted(() => {
    nextTick(() => {
      let dom = document.getElementById(props.id)?.getElementsByTagName('linearGradient')[0]
      dom && dom.setAttribute('x1', '0%')
      dom && dom.setAttribute('y2', '100%')
    })
    rate.value = Math.ceil((+props.total_score / +props.total_full_score) * 100)
    speed.value = rate.value / 6
  })
  const currentRate = ref(0)
  const gradientColor = {
    '0%': '#89D2FA',
    '50%': '#6CAFF6',
    '100%': '#4F8CF2'
  }
</script>
<style scoped lang="scss">
  .circle-page1 {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;

    .circle-box {
      width: 298px;
      height: 298px;
    }

    // .point-box {
    //   position: absolute;
    //   left: 50%;
    //   height: 36px;
    //   top: 50%;
    //   width: 100%;
    //   transform: translate(-50%, -50%);
    //   width: fit-content;
    //   display: flex;
    //   justify-content: center;

    //   span.fen {
    //     font-size: 20px;
    //     color: #292a2d;
    //     display: block;
    //     padding-top: 5px;
    //     box-sizing: border-box;
    //     height: 100%;
    //   }

    //   .point-number {
    //     font-size: 34px;
    //     line-height: 36px;
    //     font-weight: 600;
    //     color: #5491f3;
    //     &.numberMore {
    //       font-size: 28px;
    //     }
    //   }
    // }
    // .point-box1 {
    //   position: absolute;
    //   left: 50%;
    //   height: 36px;
    //   top: 50%;
    //   width: 100%;
    //   transform: translate(-50%, -50%);
    //   width: fit-content;
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;

    //   span.fen {
    //     font-size: 20px;
    //     line-height: 36px;
    //     color: #292a2d;
    //   }

    //   .point-number {
    //     font-size: 34px;
    //     line-height: 36px;
    //     font-weight: 600;
    //     color: #5491f3;
    //     &.numberMore {
    //       font-size: 28px;
    //     }
    //   }
    // }
  }
</style>