效果
代码
index.vue
<template>
<div class="main">
<div
style="
display: flex;
width: 158px;
height: 136px;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
"
>
<svg width="122" height="122">
<!-- 內層圓環未使用部分,直接繪製圓,用已使用的覆蓋 -->
<circle
cx="61"
cy="61"
r="50"
stroke="#FFEFD7"
stroke-width="15"
fill="none"
/>
<!-- 內層圓環已使用部分 -->
<circle
cx="61"
cy="61"
r="50"
stroke="#F6A500"
stroke-width="15"
fill="none"
:stroke-dasharray="`${endAngle} 360`"
transform="rotate(-90, 61, 61)"
/>
<text
x="50%"
y="40%"
text-anchor="middle"
dominant-baseline="middle"
style="
fill: var(--cool-gray-500, #6b7280);
font-family: Inter;
font-size: 14px;
font-weight: 400;
"
>
使用率
</text>
<text
x="50%"
y="60%"
text-anchor="middle"
dominant-baseline="middle"
style="
fill: var(--cool-gray-700, #374151);
font-family: Inter;
font-size: 18px;
font-weight: 700;
"
>
{
{ redemptionRatio }}%
</text>
</svg>
</div>
<div>
<div style="margin: 10px 0;">總數</div>
<el-input
v-model="form.quantity"
type="text"
style="width: 100%"
></el-input>
<div style="margin: 10px 0;">已使用</div>
<el-input
v-model="form.redeemed_quantity"
type="text"
style="width: 100%"
></el-input>
<div style="margin: 10px 0;">版权声明:本文为CSDN博主「772389」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/u014288878/article/details/132541994
</div>
<el-link href="https://blog.csdn.net/u014288878/article/details/132541994" type="primary">原文链接</el-link>
</div>
</div>
</template>
<script>
export default {
name: "index",
props: {
},
data() {
return {
form: {
quantity: 10, //優惠券總數
redeemed_quantity: 5, //優惠券已兌換數量
},
};
},
computed: {
// 顯示兌換率
redemptionRatio() {
// 检查form.quantity是否是有效的数值
const quantity = parseFloat(this.form.quantity);
if (isNaN(quantity) || quantity === 0) {
return (0).toFixed(2);
} else {
return ((this.form.redeemed_quantity / quantity) * 100).toFixed(2);
}
},
// 顯示兌換率的結束角度
endAngle() {
return this.redemptionRatio * Math.PI;
},
},
watch: {
},
created() {
},
methods: {
},
}
</script>
<style lang="scss" scoped>
.main {
margin: 48px 48px 0px 48px;
}
</style>