cef974d94f
- 修复商店物品名称显示问题，添加堆叠物品出售数量选择 - 自动战斗状态持久化，战斗结束显示"寻找中"状态 - 战斗日志显示经验获取详情（战斗经验、武器经验） - 技能进度条显示当前/最大经验值 - 阅读自动解锁技能并持续获得阅读经验，背包可直接阅读 - 优化训练平衡：时长60秒，经验5点/秒，耐力消耗降低 - 实现自然回复系统：基于体质回复HP/耐力，休息提供3倍加成 - 战斗和训练时不进行自然回复 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
58 lines
1.3 KiB
Vue
58 lines
1.3 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">
|
|
{{ displayValue }}/{{ displayMax }}
|
|
</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 displayValue = computed(() => Math.floor(props.value))
|
|
|
|
const displayMax = computed(() => Math.floor(props.max))
|
|
|
|
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>
|