61 lines
1.2 KiB
Vue
61 lines
1.2 KiB
Vue
<template>
|
|
<div class="segment-progress">
|
|
<!-- <div class="label">
|
|
<slot name="label">进度</slot>
|
|
</div> -->
|
|
<div class="bars">
|
|
<div v-for="i in total" :key="i" class="bar" :class="{ active: i <= activeBars }"></div>
|
|
</div>
|
|
<div class="percent">{{ value }}%</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SegmentProgress',
|
|
props: {
|
|
value: { type: Number, default: 0 }, // 百分比
|
|
total: { type: Number, default: 20 }, // 分段数
|
|
color: { type: String, default: '#00cfff' }, // 激活颜色
|
|
bgColor: { type: String, default: '#444' }, // 背景颜色
|
|
},
|
|
computed: {
|
|
activeBars() {
|
|
return Math.round((this.value / 100) * this.total)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.segment-progress {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: #9cf;
|
|
}
|
|
|
|
.bars {
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
|
|
.bar {
|
|
width: 6px;
|
|
height: 20px;
|
|
border-radius: 2px;
|
|
background: #294C68; /* 默认背景色，实际会用 style 动态覆盖 */
|
|
}
|
|
|
|
.bar.active {
|
|
background: #00cfff; /* 激活色，实际会用 style 动态覆盖 */
|
|
box-shadow: 0 0 4px #00cfff;
|
|
}
|
|
|
|
.percent {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
color: #00cfff;
|
|
}
|
|
</style>
|