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