From 2bd376d852810523af797c1077bb082752ea24d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A7=A6=E6=B1=89?= <5725748+qin_and_han_dynasties@user.noreply.gitee.com> Date: Wed, 29 Apr 2026 21:39:50 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=97=A5=E5=B8=B8=E4=BB=BB?= =?UTF-8?q?=E5=8A=A1=E7=9A=84=E6=8E=A5=E5=8F=96=E6=8C=89=E9=92=AE=E7=9A=84?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Build_God_Game/src/views/DailyMissionView.vue | 126 +++++++----------- 1 file changed, 49 insertions(+), 77 deletions(-) diff --git a/Build_God_Game/src/views/DailyMissionView.vue b/Build_God_Game/src/views/DailyMissionView.vue index cd46664..7ff2f99 100644 --- a/Build_God_Game/src/views/DailyMissionView.vue +++ b/Build_God_Game/src/views/DailyMissionView.vue @@ -4,6 +4,7 @@ import { useRouter } from 'vue-router' import { dailyMissionApi, type DailyMission, DailyMissionStatus, RewardType, MissionType, MissionDifficulty, ProgressTargetType } from '@/api/dailyMission' import Particles from '@/components/Particles/Particles.vue' import ElectricBorder from '@/components/ElectricBorder/ElectricBorder.vue' +import StarBorder from '@/components/StarBorder/StarBorder.vue' import collectionIcon from '@/assets/images/collection.svg?raw' import huntingNormalIcon from '@/assets/images/hunting.svg?raw' @@ -140,16 +141,16 @@ const getRewardIcon = (type: RewardType) => { const getProgressText = (mission: DailyMission) => { if (!mission.progresses || mission.progresses.length === 0) return '' const progress = mission.progresses[0] - const targetTypeLabel = progress.targetType === ProgressTargetType.CollectItem ? '收集' + const targetTypeLabel = progress.targetType === ProgressTargetType.CollectItem ? '收集' : progress.targetType === ProgressTargetType.KillMonster ? '击杀' - : progress.targetType === ProgressTargetType.Fish ? '钓鱼' - : progress.targetType === ProgressTargetType.ConsumeItem ? '消耗' - : progress.targetType === ProgressTargetType.Custom ? '挂机' - : '完成' + : progress.targetType === ProgressTargetType.Fish ? '钓鱼' + : progress.targetType === ProgressTargetType.ConsumeItem ? '消耗' + : progress.targetType === ProgressTargetType.Custom ? '挂机' + : '完成' const targetName = progress.targetItemName || (progress.targetType === ProgressTargetType.KillMonster ? '怪物' : '物品') // Pending状态显示目标数量，进行中/已完成显示当前进度 - const displayCount = mission.status === DailyMissionStatus.Pending - ? `0/${progress.targetCount}` + const displayCount = mission.status === DailyMissionStatus.Pending + ? `0/${progress.targetCount}` : `${progress.currentCount}/${progress.targetCount}` return `${targetTypeLabel} ${displayCount} ${targetName}` } @@ -204,9 +205,9 @@ const MissionCardContent = defineComponent({ ]), props.mission.progresses && props.mission.progresses.length > 0 ? h('div', { class: 'objective-panel' }, [ - h('span', { class: 'objective-label' }, '任务目标'), - h('span', { class: 'objective-value' }, getProgressText(props.mission)), - ]) + h('span', { class: 'objective-label' }, '任务目标'), + h('span', { class: 'objective-value' }, getProgressText(props.mission)), + ]) : null, h('div', { class: 'reward-section' }, [ h('div', { class: 'section-label' }, '任务奖励'), @@ -231,15 +232,17 @@ const MissionCardContent = defineComponent({ ) : null, canAccept(props.mission) - ? h('button', { class: 'card-btn accept-btn', type: 'button', onClick: () => emit('accept') }, [ + ? h(StarBorder, { as: 'div', color: '#e63d3d', speed: '3s', thickness: 2 }, () => + h('button', { class: 'card-btn accept-btn', type: 'button', onClick: () => emit('accept') }, [ h('span', { class: 'btn-label' }, '准备好后即可接取'), - h('span', { class: 'btn-arrow' }, '›'), ]) + ) : canClaim(props.mission) - ? h('button', { class: 'card-btn claim-btn', type: 'button', onClick: () => emit('claim') }, [ + ? h(StarBorder, { as: 'div', color: '#22c55e', speed: '3s', thickness: 2 }, () => + h('button', { class: 'card-btn claim-btn', type: 'button', onClick: () => emit('claim') }, [ h('span', { class: 'btn-label' }, '领取奖励'), - h('span', { class: 'btn-arrow' }, '›'), ]) + ) : props.mission.status === DailyMissionStatus.InProgress ? h('button', { class: 'card-btn disabled-btn', type: 'button', disabled: true }, '进行中') : props.mission.status === DailyMissionStatus.Claimed @@ -277,35 +280,17 @@ const MissionCardContent = defineComponent({
@@ -392,6 +377,7 @@ const MissionCardContent = defineComponent({ opacity: 0; transform: translateX(-50%) translateY(-10px); } + to { opacity: 1; transform: translateX(-50%) translateY(0); @@ -704,62 +690,48 @@ const MissionCardContent = defineComponent({ transform: scale(0.98); } -:deep(.btn-arrow) { - font-size: 1.3rem; - line-height: 1; - transform: translateY(-1px); -} - :deep(.card-btn.accept-btn) { - background: linear-gradient(135deg, #facc15 0%, #ff8844 45%, #ef4444 100%); - border-color: rgba(255, 214, 102, 0.55); - color: #ffffff; - box-shadow: - 0 10px 24px rgba(255, 136, 68, 0.26), - inset 0 1px 0 rgba(255, 255, 255, 0.22); - text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); + background: rgba(255, 255, 255, 0.03); + color: #888888; + width: 100%; + border-radius: 12px; + padding: 12px 16px; + border: none; } :deep(.card-btn.accept-btn .btn-label) { - font-size: 1rem; - font-weight: 900; - color: #ffffff; + font-size: 0.9rem; + font-weight: 500; + color: white; letter-spacing: 0.1em; } :deep(.card-btn.accept-btn:hover) { - transform: translateY(-1px); - filter: brightness(1.08); - box-shadow: - 0 14px 30px rgba(255, 136, 68, 0.38), - 0 0 20px rgba(250, 204, 21, 0.22), - inset 0 1px 0 rgba(255, 255, 255, 0.26); + background: rgba(255, 255, 255, 0.06); + color: #aaaaaa; } :deep(.card-btn.claim-btn) { - background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); - border-color: rgba(134, 239, 172, 0.4); - color: #ffffff; - box-shadow: - 0 10px 24px rgba(34, 197, 94, 0.24), - inset 0 1px 0 rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.03); + color: #888888; + width: 100%; + border-radius: 12px; + padding: 12px 16px; + border: none; } :deep(.card-btn.claim-btn:hover) { - transform: translateY(-1px); - filter: brightness(1.08); - box-shadow: - 0 14px 30px rgba(34, 197, 94, 0.36), - 0 0 18px rgba(134, 239, 172, 0.18), - inset 0 1px 0 rgba(255, 255, 255, 0.24); + background: rgba(255, 255, 255, 0.06); + color: #aaaaaa; } :deep(.card-btn.disabled-btn) { - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); - color: #6b7280; + background: rgba(255, 255, 255, 0.03); + color: #555555; cursor: not-allowed; - box-shadow: none; + width: 100%; + border-radius: 12px; + padding: 12px 16px; } .status-pending {