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

任务接取界面排版优化

master
秦汉 2 weeks ago
parent
d406088c22
commit
ad85c42ca4
1 changed files with 128 additions and 58 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. 184
      Build_God_Game/src/views/DailyMissionView.vue

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

@ -129,6 +129,15 @@ const getDifficultyClass = (difficulty: MissionDifficulty) => {
}
}
const getDifficultySkullCount = (difficulty: MissionDifficulty): number => {
switch (difficulty) {
case MissionDifficulty.Normal: return 1
case MissionDifficulty.Hard: return 2
case MissionDifficulty.Purgatory: return 3
default: return 1
}
}
const getRewardIcon = (type: RewardType) => {
switch (type) {
case RewardType.Money: return '💰'
@ -190,19 +199,25 @@ const MissionCardContent = defineComponent({
return () => h('div', { class: 'mission-card-content' }, [
h('div', { class: 'card-header' }, [
h('div', { class: 'card-title-row' }, [
h('div', { class: 'card-icon', style: `filter: ${getMissionIconFilter(props.mission.missionType, props.mission.difficulty)}`, innerHTML: getMissionIcon(props.mission.missionType, props.mission.difficulty) }),
//h('div', { class: 'card-icon', style: `filter: ${getMissionIconFilter(props.mission.missionType, props.mission.difficulty)}`, innerHTML: getMissionIcon(props.mission.missionType, props.mission.difficulty) }),
h('div', { class: 'title-stack' }, [
h('div', { class: 'title-line' }, [
h('span', { class: 'card-title' }, props.mission.missionTitle),
h('span', {
class: ['difficulty-skulls', getDifficultyClass(props.mission.difficulty)],
'aria-label': `${getDifficultyLabel(props.mission.difficulty)}难度`,
}, '💀'.repeat(getDifficultySkullCount(props.mission.difficulty))),
]),
h('span', { class: 'card-subtitle' }, props.mission.missionName),
]),
]),
h('span', { class: ['card-status', getStatusClass(props.mission.status)] }, getStatusText(props.mission.status)),
]),
h('div', { class: 'card-desc' }, props.mission.missionDescription),
h('div', { class: 'card-meta-row' }, [
h('span', { class: ['difficulty-badge', getDifficultyClass(props.mission.difficulty)] }, getDifficultyLabel(props.mission.difficulty)),
h('span', { class: 'time-badge' }, `预计 ${props.mission.spendTimeMinutes} 分钟`),
]),
//h('div', { class: 'card-meta-row' }, [
//h('span', { class: ['difficulty-badge', getDifficultyClass(props.mission.difficulty)] }, getDifficultyLabel(props.mission.difficulty)),
//h('span', { class: 'time-badge' }, `预计 ${props.mission.spendTimeMinutes} 分钟`),
//]),
props.mission.progresses && props.mission.progresses.length > 0
? h('div', { class: 'objective-panel' }, [
h('span', { class: 'objective-label' }, '任务目标'),
@ -224,7 +239,7 @@ const MissionCardContent = defineComponent({
]),
h('div', { class: 'card-actions' }, [
!canAccept(props.mission)
? h('span', { class: 'action-hint' }, canClaim(props.mission)
? h('span', { class: ['action-hint', getStatusClass(props.mission.status)] }, canClaim(props.mission)
? '任务已完成，领取奖励'
: props.mission.status === DailyMissionStatus.InProgress
? '任务正在进行中'
@ -435,7 +450,8 @@ const MissionCardContent = defineComponent({
}
.card-inner {
padding: 18px;
--mission-gap: 12px;
padding: 16px;
}
.mission-collection {
@ -454,55 +470,65 @@ const MissionCardContent = defineComponent({
border-color: rgba(220, 38, 38, 0.5);
}
.mission-card-content {
:deep(.mission-card-content) {
display: flex;
flex-direction: column;
gap: 12px;
gap: var(--mission-gap);
}
.card-header {
:deep(.card-header) {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding-bottom: 12px;
padding-bottom: 4px;
margin-bottom: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.card-title-row {
:deep(.card-title-row) {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
/* SVG 图标相对标题略小，避免与标题同尺度显得突兀 */
font-size: 1.05rem;
}
.card-icon {
width: 34px;
height: 34px;
flex: 0 0 34px;
:deep(.card-icon) {
width: 0.72em;
height: 0.72em;
flex: 0 0 0.72em;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.06);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
padding: 1px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.05);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.card-icon :deep(svg) {
:deep(.card-icon svg) {
width: 100%;
height: 100%;
}
.title-stack {
:deep(.title-stack) {
display: flex;
flex-direction: column;
gap: 3px;
gap: 4px;
min-width: 0;
}
:deep(.title-line) {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.card-title {
:deep(.card-title) {
color: #ffffff;
font-size: 1.05rem;
font-weight: 700;
@ -510,9 +536,30 @@ const MissionCardContent = defineComponent({
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.card-subtitle {
:deep(.difficulty-skulls) {
flex-shrink: 0;
font-size: 0.95rem;
line-height: 1;
letter-spacing: -0.06em;
}
:deep(.difficulty-skulls.difficulty-normal) {
opacity: 0.72;
}
:deep(.difficulty-skulls.difficulty-hard) {
opacity: 0.88;
}
:deep(.difficulty-skulls.difficulty-purgatory) {
opacity: 1;
}
:deep(.card-subtitle) {
color: #777777;
font-size: 0.72rem;
overflow: hidden;
@ -520,19 +567,22 @@ const MissionCardContent = defineComponent({
white-space: nowrap;
}
.card-status {
/* MissionCardContent 为子组件，scoped 需 :deep 才能作用到内部 .card-status */
:deep(.card-status) {
padding: 5px 10px;
border-radius: 999px;
font-size: 0.72rem;
font-size: 0.76rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: 0.04em;
border: 1px solid transparent;
}
.card-desc {
:deep(.card-desc) {
color: #aaaaaa;
font-size: 0.84rem;
line-height: 1.55;
margin: 0;
}
.card-meta-row {
@ -574,49 +624,49 @@ const MissionCardContent = defineComponent({
color: #fca5a5;
}
.objective-panel {
:deep(.objective-panel) {
display: flex;
flex-direction: column;
gap: 5px;
gap: 8px;
background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(255, 255, 255, 0.035));
border: 1px solid rgba(34, 197, 94, 0.18);
padding: 11px 12px;
padding: 12px;
border-radius: 12px;
}
.objective-label {
:deep(.objective-label) {
color: #86efac;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.objective-value {
:deep(.objective-value) {
color: #ffffff;
font-size: 0.9rem;
font-weight: 700;
}
.reward-section {
:deep(.reward-section) {
display: flex;
flex-direction: column;
gap: 8px;
gap: var(--mission-gap);
}
.section-label {
:deep(.section-label) {
color: #777777;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.card-rewards {
:deep(.card-rewards) {
display: flex;
flex-wrap: wrap;
gap: 6px;
gap: 8px;
}
.reward-item {
:deep(.reward-item) {
background: rgba(255, 136, 68, 0.1);
border: 1px solid rgba(255, 136, 68, 0.2);
color: #ff8844;
@ -626,19 +676,19 @@ const MissionCardContent = defineComponent({
font-weight: 700;
}
.exp-reward {
:deep(.exp-reward) {
background: rgba(255, 215, 0, 0.1);
border-color: rgba(255, 215, 0, 0.3);
color: #ffd700;
}
.money-reward {
:deep(.money-reward) {
background: rgba(34, 197, 94, 0.1);
border-color: rgba(34, 197, 94, 0.3);
color: #22c55e;
}
.reward-more {
:deep(.reward-more) {
background: rgba(255, 255, 255, 0.1);
color: #888888;
padding: 5px 9px;
@ -650,9 +700,9 @@ const MissionCardContent = defineComponent({
:deep(.card-actions) {
display: flex;
flex-direction: column;
gap: 9px;
margin-top: 6px;
padding-top: 14px;
gap: var(--mission-gap);
margin-top: 0;
padding-top: var(--mission-gap);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
@ -734,24 +784,44 @@ const MissionCardContent = defineComponent({
padding: 12px 16px;
}
.status-pending {
background: rgba(100, 100, 100, 0.3);
color: #888888;
:deep(.card-status.status-pending) {
background: rgba(245, 158, 11, 0.18);
color: #fbbf24;
border-color: rgba(245, 158, 11, 0.45);
}
.status-progress {
background: rgba(59, 130, 246, 0.2);
color: #3b82f6;
:deep(.card-status.status-progress) {
background: rgba(59, 130, 246, 0.22);
color: #93c5fd;
border-color: rgba(59, 130, 246, 0.5);
}
.status-completed {
background: rgba(34, 197, 94, 0.2);
color: #22c55e;
:deep(.card-status.status-completed) {
background: rgba(34, 197, 94, 0.22);
color: #4ade80;
border-color: rgba(34, 197, 94, 0.48);
}
.status-claimed {
background: rgba(255, 255, 255, 0.1);
color: #666666;
:deep(.card-status.status-claimed) {
background: rgba(107, 114, 128, 0.14);
color: #9ca3af;
border-color: rgba(156, 163, 175, 0.35);
}
:deep(.action-hint.status-pending) {
color: #fbbf24;
}
:deep(.action-hint.status-progress) {
color: #93c5fd;
}
:deep(.action-hint.status-completed) {
color: #4ade80;
}
:deep(.action-hint.status-claimed) {
color: #9ca3af;
}
.empty-state {

Write Preview
Loading…
Cancel
Save