54 lines
1.2 KiB
Vue
54 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<view class="progress-bar" :style="{ height }">
|
||
|
|
<view class="progress-bar__fill" :style="fillStyle"></view>
|
||
|
|
<view v-if="showText" class="progress-bar__text">
|
||
|
|
{{ value }}/{{ max }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { computed } from 'vue'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
value: { type: Number, default: 0 },
|
||
|
|
max: { type: Number, default: 100 },
|
||
|
|
color: { type: String, default: '#4ecdc4' },
|
||
|
|
showText: { type: Boolean, default: true },
|
||
|
|
height: { type: String, default: '16rpx' }
|
||
|
|
})
|
||
|
|
|
||
|
|
const percentage = computed(() => {
|
||
|
|
return Math.min(100, Math.max(0, (props.value / props.max) * 100))
|
||
|
|
})
|
||
|
|
|
||
|
|
const fillStyle = computed(() => ({
|
||
|
|
width: `${percentage.value}%`,
|
||
|
|
backgroundColor: props.color
|
||
|
|
}))
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.progress-bar {
|
||
|
|
position: relative;
|
||
|
|
background-color: $bg-tertiary;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
&__fill {
|
||
|
|
height: 100%;
|
||
|
|
transition: width 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__text {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
font-size: 20rpx;
|
||
|
|
color: $text-primary;
|
||
|
|
text-shadow: 0 0 4rpx rgba(0,0,0,0.8);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|