简单的环形进度条

<template>
<div class="circle">
<div class="pie_left">
<div class="left" :style="'transform: rotate('+leftDeg+'deg);'"></div>
</div>
<div class="pie_right">
<div class="right" :style="'transform: rotate('+rightDeg+'deg);'"></div>
</div>
<div class="mask">
<view class="p1">
<span>3</span>次
</view>
</div>
</div>
</template>

<script>
export default {
data() {
return {
rightDeg: 180,
leftDeg: 0,
}
},
props: ["value"],
mounted() {
if (this.value > 50) {
this.rightDeg = 180
this.leftDeg = (this.value - 50) * 180 / 50
} else {
this.leftDeg = this.value * 180 / 50
}
},
methods: {

}
}
</script>

<style lang="scss" scoped>
.circle {
width: 180rpx;
height: 180rpx;
position: absolute;
border-radius: 50%;
background: #0cc;
}

.pie_left,
.pie_right {
width: 180rpx;
height: 180rpx;
position: absolute;
top: 0;
left: 0;
}

.left,
.right {
display: block;
width: 180rpx;
height: 180rpx;
background: #00aacc;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
transform: rotate(0deg);
}

.pie_right,
.right {
clip: rect(0, auto, auto, 100rpx);
}

.pie_left,
.left {
clip: rect(0, 100rpx, auto, 0);
}

.mask {
width: 80%;
height: 80%;
border-radius: 50%;
left: 10%;
top: 10%;
display: flex;
align-items: center;
justify-content: center;
background: #FFF;
position: absolute;
text-align: center;
font-size: 30rpx;

.p1 {
display: flex;
align-items: baseline;

span {
font-size: 50rpx;
}
}

}
</style>

 

 

 

<yuan v-model="yuanNum" />