han
/
Build_God
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改日常任务的接取按钮的显示样式

master
秦汉 2 weeks ago
parent
d3f7813658
commit
2bd376d852
1 changed files with 49 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 120
      Build_God_Game/src/views/DailyMissionView.vue

120
Build_God_Game/src/views/DailyMissionView.vue
View File

@ -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'
@ -142,10 +143,10 @@ const getProgressText = (mission: DailyMission) => {
const progress = mission.progresses[0]
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
@ -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({
<div v-if="hasAnyMissions" class="mission-list">
<template v-for="mission in activeMissions" :key="mission.id">
<ElectricBorder
v-if="mission.difficulty === MissionDifficulty.Purgatory"
color="#dc2626"
:speed="1.2"
:chaos="1.5"
:thickness="2"
class="mission-card purgatory-card"
>
<ElectricBorder v-if="mission.difficulty === MissionDifficulty.Purgatory" color="#dc2626" :speed="1.2"
:chaos="1.5" :thickness="2" class="mission-card purgatory-card">
<div class="card-inner">
<component
:is="MissionCardContent"
:mission="mission"
@accept="handleAccept(mission)"
@claim="handleClaim(mission)"
/>
<component :is="MissionCardContent" :mission="mission" @accept="handleAccept(mission)"
@claim="handleClaim(mission)" />
</div>
</ElectricBorder>
<div
v-else
class="mission-card"
:class="getMissionTypeClass(mission.missionType, mission.difficulty)"
>
<div v-else class="mission-card" :class="getMissionTypeClass(mission.missionType, mission.difficulty)">
<div class="card-inner">
<component
:is="MissionCardContent"
:mission="mission"
@accept="handleAccept(mission)"
@claim="handleClaim(mission)"
/>
<component :is="MissionCardContent" :mission="mission" @accept="handleAccept(mission)"
@claim="handleClaim(mission)" />
</div>
</div>
</template>
@ -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 {

Write Preview
Loading…
Cancel
Save