css实现圆环100%占比，进度条

<div class="right-view">
    <div class="circle-progress" :style="{'--percentage': kfInfo.progress+'%'}"></div>
    <div class="fx-val"><text class="big-txt">{{kfInfo.score}}</text></div>
</div>

<script>
export default {
  data() {
              return {
                  kfInfo:{
                    progress:100,//占比
                    total:100,//总分
                    score:50.05,//得分
                    }
               }
  }，
methods: {
                    init(){
this.kfInfo.progress = this.toPercent(this.kfInfo.score,this.kfInfo.total);
},
                    //得到百分比
            toPercent(num, total) {
                return (Math.round(Number(num) / Number(total) * 10000) / 100.00);// 小数点后两位百分比
            },
}
}
</script>

.right-view {
                position: absolute;
                width: 60px;
                height: 60px;
                right: 20px;
                top: 10px;
                background: none;
                border-radius: 100px;
                /*border: 5px solid rgba(255, 255, 255, 0.35);*/
                display: flex;
                align-items: center;
                justify-content: center;


                .circle-progress {
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    background: conic-gradient(rgba(255, 255, 255, 0.35) calc(100% - var(--percentage)), white 0);
                    position: absolute;
                }
                .circle-progress::before {
                    content: '';
                    position: absolute;
                    top: 5px;
                    left: 5px;
                    right: 5px;
                    bottom: 5px;
                    border-radius: 50%;
                    background: #ffffff; /* 或者你想要的背景颜色 */
                }

                .fx-val{
                    color: #ffffff;
                    font-size: 12px;
                    z-index: 99;
                    .big-txt{
                        font-size: 17px;
                    }
                    .small-txt{
                        font-size: 12px;
                    }
                }
}