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

怪物显示界面调整

master
秦汉 4 weeks ago
parent
ff0261945b
commit
36aae7e254
2 changed files with 269 additions and 147 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      Build_God_Game/src/api/monster.ts
  2. 356
      Build_God_Game/src/views/MonsterListView.vue

2
Build_God_Game/src/api/monster.ts
View File

@ -43,7 +43,7 @@ export interface BattleRewardDto {
export const monsterApi = { export const monsterApi = {
getMonsterList: (): Promise<MonsterDto[]> => { getMonsterList: (): Promise<MonsterDto[]> => {
return http.get('/monster/all', {}) return http.post('/monster/all', {}).then((res: any) => res.items || res)
}, },
getMonsterById: (id: number): Promise<MonsterDto> => { getMonsterById: (id: number): Promise<MonsterDto> => {

356
Build_God_Game/src/views/MonsterListView.vue
View File

@ -47,59 +47,79 @@ const handleChallenge = async (monster: { id: number; level: number }) => {
router.push(`/battle?id=${monster.id}`) router.push(`/battle?id=${monster.id}`)
} }
const handleGoBack = () => {
router.push('/game')
}
onMounted(async () => { onMounted(async () => {
await monsterStore.fetchMonsters() await monsterStore.fetchMonsters()
}) })
</script> </script>
<template> <template>
<div class="monster-list-container"> <div class="monster-list-page">
<div class="header"> <div class="page-container">
<h2>怪物挑战</h2> <div class="page-header">
<span class="player-level">等级: {{ playerLevel }}</span> <span class="back-btn" @click="handleGoBack">← 返回</span>
<span class="title">怪物挑战</span>
<span class="player-level">Lv.{{ playerLevel }}</span>
</div> </div>
<div v-if="monsterStore.loading" class="loading"> <div v-if="monsterStore.loading" class="loading">
加载中... 加载中...
</div> </div>
<div v-else-if="monsterStore.monsters.length === 0" class="empty"> <div v-else-if="monsterStore.monsters.length === 0" class="empty-state">
暂无可挑战的怪物 <div class="empty-icon">👹</div>
<div class="empty-text">暂无可挑战的怪物</div>
</div> </div>
<div v-else class="monster-grid"> <div v-else class="monster-list">
<div <div
v-for="monster in monsterStore.monsters" v-for="monster in monsterStore.monsters"
:key="monster.id" :key="monster.id"
class="monster-card" class="monster-card"
:class="{ disabled: !canChallenge(monster) }" :class="[getMonsterTypeClass(monster.type), { disabled: !canChallenge(monster) }]"
@click="handleChallenge(monster)" @click="handleChallenge(monster)"
> >
<div class="monster-icon"> <div class="card-inner">
<div class="card-header">
<div class="card-title-row">
<div class="card-icon">
<img :src="getMonsterIcon(monster.icon)" :alt="monster.name" /> <img :src="getMonsterIcon(monster.icon)" :alt="monster.name" />
</div> </div>
<div class="monster-info"> <div class="card-info">
<h3>{{ monster.name }}</h3> <span class="card-title">{{ monster.name }}</span>
<span class="monster-level">等级: {{ monster.level }}</span> <span class="card-level">等级 {{ monster.level }}</span>
<span class="monster-type" :class="getMonsterTypeClass(monster.type)"> </div>
</div>
<span class="type-badge" :class="getMonsterTypeClass(monster.type)">
{{ getMonsterTypeLabel(monster.type) }} {{ getMonsterTypeLabel(monster.type) }}
</span> </span>
</div> </div>
<div class="monster-stats">
<div class="stat"> <div class="card-desc">{{ monster.description }}</div>
<span class="label">生命</span>
<span class="value">{{ monster.health }}</span> <div class="card-stats">
<div class="stat-item">
<span class="stat-label">生命</span>
<span class="stat-value health">{{ monster.health }}</span>
</div>
<div class="stat-item">
<span class="stat-label">攻击</span>
<span class="stat-value attack">{{ monster.attack }}</span>
</div> </div>
<div class="stat"> <div class="stat-item">
<span class="label">攻击</span> <span class="stat-label">防御</span>
<span class="value">{{ monster.attack }}</span> <span class="stat-value defense">{{ monster.defense }}</span>
</div> </div>
<div class="stat"> <div class="stat-item">
<span class="label">防御</span> <span class="stat-label">暴击</span>
<span class="value">{{ monster.defense }}</span> <span class="stat-value">{{ (monster.criticalRate * 100).toFixed(0) }}%</span>
</div> </div>
</div> </div>
<div class="monster-rewards" v-if="monster.rewards && monster.rewards.length > 0">
<div class="card-rewards" v-if="monster.rewards && monster.rewards.length > 0">
<span class="reward-label">击杀奖励:</span> <span class="reward-label">击杀奖励:</span>
<span <span
v-for="reward in monster.rewards" v-for="reward in monster.rewards"
@ -108,9 +128,15 @@ onMounted(async () => {
> >
{{ reward.itemName }} ×{{ reward.count }} {{ reward.itemName }} ×{{ reward.count }}
</span> </span>
<span v-if="monster.rewards.length > 2" class="reward-more">+{{ monster.rewards.length - 2 }}</span>
</div> </div>
<div class="challenge-hint">
<div class="card-action">
<span class="action-text">
{{ canChallenge(monster) ? '点击挑战' : '等级不足' }} {{ canChallenge(monster) ? '点击挑战' : '等级不足' }}
</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -118,56 +144,86 @@ onMounted(async () => {
</template> </template>
<style scoped lang="css"> <style scoped lang="css">
.monster-list-container { .monster-list-page {
padding: 20px;
min-height: 100vh; min-height: 100vh;
background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); background: #000000;
padding: 20px;
position: relative;
}
.page-container {
max-width: 480px;
margin: 0 auto;
} }
.header { .page-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 24px; padding: 16px 0;
margin-bottom: 20px;
} }
.header h2 { .back-btn {
color: #f8fafc; color: #666666;
margin: 0; font-size: 0.9rem;
font-size: 24px; cursor: pointer;
padding: 8px;
}
.back-btn:hover {
color: #ffffff;
}
.title {
color: #ffffff;
font-size: 1.1rem;
font-weight: 500;
} }
.player-level { .player-level {
color: #94a3b8; color: #888888;
font-size: 14px; font-size: 0.9rem;
} }
.loading, .loading {
.empty { text-align: center;
color: #64748b; color: #666666;
padding: 40px;
}
.empty-state {
text-align: center; text-align: center;
padding: 60px 20px; padding: 60px 20px;
} }
.monster-grid { .empty-icon {
display: grid; font-size: 3rem;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 16px;
gap: 16px; }
.empty-text {
color: #ffffff;
font-size: 1.1rem;
}
.monster-list {
display: flex;
flex-direction: column;
gap: 12px;
} }
.monster-card { .monster-card {
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid;
border-radius: 12px; border-radius: 12px;
padding: 20px; overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease;
} }
.monster-card:hover { .monster-card:hover {
transform: translateY(-2px); transform: translateY(-2px);
border-color: rgba(139, 92, 246, 0.5);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
} }
.monster-card.disabled { .monster-card.disabled {
@ -177,126 +233,192 @@ onMounted(async () => {
.monster-card.disabled:hover { .monster-card.disabled:hover {
transform: none; transform: none;
border-color: rgba(255, 255, 255, 0.08);
box-shadow: none;
} }
.monster-icon { .type-normal {
width: 80px; border-color: rgba(239, 68, 68, 0.3);
height: 80px; }
margin: 0 auto 16px;
.type-elite {
border-color: rgba(139, 92, 246, 0.4);
}
.type-boss {
border-color: rgba(220, 38, 38, 0.5);
}
.card-inner {
padding: 16px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.card-title-row {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
.card-icon {
width: 36px;
height: 36px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: rgba(255, 255, 255, 0.04); background: rgba(255, 255, 255, 0.04);
border-radius: 12px; border-radius: 8px;
flex-shrink: 0;
} }
.monster-icon img { .card-icon img {
width: 60px; width: 28px;
height: 60px; height: 28px;
object-fit: contain; object-fit: contain;
} }
.monster-info { .card-info {
text-align: center; display: flex;
margin-bottom: 12px; flex-direction: column;
min-width: 0;
} }
.monster-info h3 { .card-title {
color: #f8fafc; color: #ffffff;
margin: 0 0 8px; font-size: 1rem;
font-size: 18px; font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.monster-level { .card-level {
color: #94a3b8; color: #888888;
font-size: 14px; font-size: 0.75rem;
margin-right: 8px;
} }
.monster-type { .type-badge {
display: inline-block;
padding: 2px 8px; padding: 2px 8px;
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: 0.7rem;
font-weight: 600; font-weight: 500;
white-space: nowrap;
} }
.type-normal { .type-badge.type-normal {
background-color: #475569; background: rgba(100, 100, 100, 0.3);
color: #e2e8f0; color: #888888;
} }
.type-elite { .type-badge.type-elite {
background-color: #7c3aed; background: rgba(139, 92, 246, 0.3);
color: #fff; color: #a78bfa;
} }
.type-boss { .type-badge.type-boss {
background-color: #dc2626; background: rgba(220, 38, 38, 0.3);
color: #fff; color: #fca5a5;
} }
.monster-stats { .card-desc {
display: flex; color: #888888;
justify-content: center; font-size: 0.8rem;
gap: 16px; line-height: 1.4;
margin: 12px 0; margin-top: 10px;
padding: 12px 0; overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, 0.08); text-overflow: ellipsis;
border-bottom: 1px solid rgba(255, 255, 255, 0.08); white-space: nowrap;
}
.card-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: 12px;
padding: 10px;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
} }
.stat { .stat-item {
text-align: center; text-align: center;
} }
.stat .label { .stat-label {
display: block; display: block;
color: #64748b; color: #666666;
font-size: 12px; font-size: 0.7rem;
margin-bottom: 2px;
} }
.stat .value { .stat-value {
display: block; display: block;
color: #f8fafc; color: #ffffff;
font-size: 16px; font-size: 0.85rem;
font-weight: 600; font-weight: 500;
} }
.monster-rewards { .stat-value.health {
margin-top: 12px; color: #ef4444;
padding-top: 12px; }
border-top: 1px solid rgba(255, 255, 255, 0.08);
.stat-value.attack {
color: #f97316;
}
.stat-value.defense {
color: #3b82f6;
}
.card-rewards {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin-top: 10px;
} }
.reward-label { .reward-label {
display: block; color: #666666;
color: #64748b; font-size: 0.7rem;
font-size: 12px;
margin-bottom: 4px;
} }
.reward-item { .reward-item {
display: inline-block;
color: #22c55e;
font-size: 12px;
margin-right: 8px;
background: rgba(34, 197, 94, 0.1); background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.2);
color: #22c55e;
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
font-size: 0.7rem;
} }
.challenge-hint { .reward-more {
background: rgba(255, 255, 255, 0.1);
color: #888888;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.7rem;
}
.card-action {
margin-top: 12px; margin-top: 12px;
text-align: center; text-align: center;
color: #8b5cf6;
font-size: 14px;
font-weight: 600;
} }
.monster-card.disabled .challenge-hint { .action-text {
color: #ef4444; color: #ff8844;
font-size: 0.85rem;
font-weight: 500;
}
.monster-card.disabled .action-text {
color: #666666;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save