创建子组件:CircleProgress.vue
<template>
<div class="circle-progress">
<div class="progress">
<div v-for="item in 4" :key="item" class="block" :class="`block${item}`">
<div
v-if="rate < 0.25 * item"
class="modal"
:class="`modal${item}`"
:style="{ transform: getProgress(item) }"
></div>
</div>
</div>
<div class="content">
<div class="content-bg1">
<div class="content-bg2"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "circle-progress",
props: {
rate: {
default: 0,
},
},
methods: {
getProgress(index) {