diff --git a/Build_God_Game/src/views/DailyMissionView.vue b/Build_God_Game/src/views/DailyMissionView.vue index 0228996..d410896 100644 --- a/Build_God_Game/src/views/DailyMissionView.vue +++ b/Build_God_Game/src/views/DailyMissionView.vue @@ -105,6 +105,12 @@ onMounted(() => { loadMissions() }) +const todayProgressPercent = computed(() => { + const { claimed, total } = todayStats.value + if (!total || total <= 0) return 0 + return Math.min(100, Math.round((claimed / total) * 100)) +}) + const activeMissions = computed(() => missions.value.filter(m => !m.isFromYesterday)) const hasAnyMissions = computed(() => activeMissions.value.length > 0) @@ -321,6 +327,16 @@ const MissionCardContent = defineComponent({
今日进度: {{ todayStats.claimed }}/{{ todayStats.total }} +
+
+
@@ -442,6 +458,9 @@ const MissionCardContent = defineComponent({ } .stats-bar { + display: flex; + flex-direction: column; + gap: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; @@ -450,10 +469,27 @@ const MissionCardContent = defineComponent({ } .stats-text { - color: #888888; + color: #aaaaaa; font-size: 0.9rem; } +.stats-progress-track { + width: 100%; + height: 10px; + border-radius: 999px; + background: rgba(0, 0, 0, 0.35); + overflow: hidden; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); +} + +.stats-progress-fill { + height: 100%; + min-width: 0; + border-radius: 999px; + background: linear-gradient(90deg, #16a34a, #22c55e 45%, #4ade80); + transition: width 0.4s ease; +} + .mission-list { display: flex; flex-direction: column;