WeWork/vs100
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: PC 端基本页面完成

Browse Source
This commit is contained in:
ZF Sun
2025-11-13 08:21:46 +08:00
parent d6ee43e48b
commit e5010b6ea3
4 changed files with 92 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/views/BattleRanking.vue
View File

@@ -50,76 +50,72 @@
</section>
<!-- 冠军模块 -->
<section class="champion-section card-game">
<!-- 左侧：战区冠军 -->
<div class="team-champion">
<div class="team-logo">
🏅
</div>
<div class="champion-title">战区冠军</div>
<div class="champion-name">
{{ teamRankings[0]?.name || '暂无冠军' }}
</div>
</div>
<!-- 右侧：个人冠军 -->
<div class="individual-champion">
<div class="individual-avatar">
{{ individualRankings[0]?.avatar || '👤' }}
</div>
<div class="champion-title">个人冠军</div>
<div class="champion-name">
{{ individualRankings[0]?.name || '暂无冠军' }}
</div>
</div>
</section>
<!-- 第四部分：排名明细 -->
<section class="rankings-section card-game">
<div class="rankings-container">
<!-- 战区排名 -->
<div class="team-rankings">
<h2 class="game-subtitle">👥 战区排名</h2>
<div class="rank-table">
<div class="table-header" :style="{ 'grid-template-columns': teamGridTemplate }">
<span class="rank-col">排名</span>
<span class="name-col">战区名称</span>
<span class="score-col">{{ localDisplayConfig.team?.totalScoreColumn?.displayName || '业绩' }}</span>
<span v-if="localDisplayConfig.team?.showMemberCount" class="member-col">人数</span>
<span v-if="localDisplayConfig.team?.showLeader" class="leader-col">队长</span>
<span v-if="localDisplayConfig.team?.showBonus" class="bonus-col">奖金</span>
<!-- 战区冠军 -->
<div class="team-champion">
<div class="team-logo">
🏅
</div>
<div
v-for="(item, index) in teamRankings"
:key="item.id"
class="table-row"
:style="{ 'grid-template-columns': teamGridTemplate }"
:class="{
'top-three': index < 3,
'highlight': index === 0
}"
>
<span class="rank-col">{{ index + 1 }}</span>
<span class="name-col">{{ item.name }}</span>
<span class="score-col">{{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' + item.totalScore : item.totalScore }}</span>
<span v-if="localDisplayConfig.team?.showMemberCount" class="member-col">{{ item.memberCount }}人</span>
<span v-if="localDisplayConfig.team?.showLeader" class="leader-col">{{ item.leader }}</span>
<span v-if="localDisplayConfig.team?.showBonus" class="bonus-col">¥{{ item.bonus }}</span>
<div class="champion-name">
{{ teamRankings[0]?.name || '暂无冠军' }}
</div>
</div>
<div class="team-rankings-container">
<h2 class="game-subtitle">👥 战区排名</h2>
<div class="rank-table">
<div class="table-header" :style="{ 'grid-template-columns': teamGridTemplate }">
<span class="rank-col">排名</span>
<span class="name-col">战区名称</span>
<span class="score-col">{{ localDisplayConfig.team?.totalScoreColumn?.displayName || '业绩' }}</span>
<span v-if="localDisplayConfig.team?.showMemberCount" class="member-col">人数</span>
<span v-if="localDisplayConfig.team?.showLeader" class="leader-col">队长</span>
<span v-if="localDisplayConfig.team?.showBonus" class="bonus-col">奖金</span>
</div>
<div
v-for="(item, index) in teamRankings"
:key="item.id"
class="table-row"
:style="{ 'grid-template-columns': teamGridTemplate }"
:class="{
'top-three': index < 3,
'highlight': index === 0
}"
>
<span class="rank-col">{{ index + 1 }}</span>
<span class="name-col">{{ item.name }}</span>
<span class="score-col">{{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' + item.totalScore : item.totalScore }}</span>
<span v-if="localDisplayConfig.team?.showMemberCount" class="member-col">{{ item.memberCount }}人</span>
<span v-if="localDisplayConfig.team?.showLeader" class="leader-col">{{ item.leader }}</span>
<span v-if="localDisplayConfig.team?.showBonus" class="bonus-col">¥{{ item.bonus }}</span>
</div>
</div>
</div>
</div>
<div class="individual-rankings">
<!-- 英雄冠军 -->
<div class="individual-champion">
<div class="individual-avatar">
{{ individualRankings[0]?.avatar || '👤' }}
</div>
<div class="champion-name">
{{ individualRankings[0]?.name || '暂无冠军' }}
</div>
</div>
<!-- 英雄排名 -->
<h2 class="game-subtitle">👤 英雄排名</h2>
<div class="rank-table">
<div class="table-header" :style="{ 'grid-template-columns': individualGridTemplate }">
<span class="rank-col">排名</span>
<span class="avatar-col">头像</span>
<span class="name-col">姓名</span>
<div class="individual-rankings-container">
<h2 class="game-subtitle">👤 英雄排名</h2>
<div class="rank-table">
<div class="table-header" :style="{ 'grid-template-columns': individualGridTemplate }">
<span class="rank-col">排名</span>
<span class="avatar-col">头像</span>
<span class="name-col">姓名</span>
<span v-if="localDisplayConfig.individual?.showTeam" class="team-col">{{ localDisplayConfig.individual?.teamColumn?.displayName || '战区' }}</span>
<span class="score-col">{{ localDisplayConfig.individual?.scoreColumn?.displayName || '业绩' }}</span>
<span v-if="localDisplayConfig.individual?.showLevel" class="level-col">等级</span>
@@ -146,6 +142,7 @@
<span v-if="localDisplayConfig.individual?.showBonus" class="bonus-col">¥{{ item.bonus }}</span>
</div>
</div>
</div>
</div>
</div>
</section>
@@ -831,32 +828,36 @@ onUnmounted(() => {
.team-champion,
.individual-champion {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 15px;
margin-bottom: 10px;
}
.team-logo {
font-size: 2.5rem;
margin-bottom: 10px;
font-size: 2rem;
margin-bottom: 5px;
display: inline-block;
color: gold;
}
.individual-avatar {
font-size: 2.5rem;
margin-bottom: 10px;
font-size: 2rem;
margin-bottom: 5px;
display: inline-block;
}
.champion-title {
font-size: 1rem;
font-size: 0.9rem;
color: #999;
margin-bottom: 5px;
margin-bottom: 3px;
}
.champion-name {
font-size: 1.3rem;
font-size: 1.1rem;
font-weight: bold;
color: gold;
}
@@ -1313,18 +1314,28 @@ onUnmounted(() => {
gap: 15px;
flex-wrap: wrap;
justify-content: center;
background: none;
border: none;
}
.individual-rankings,
.team-rankings {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 20px;
flex: 1;
min-width: 350px;
max-width: 550px;
}
/* 为指定的容器添加背景和边框 */
.team-rankings-container,
.individual-rankings-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 215, 0, 0.5);
padding: 15px;
}
.section-title {
color: #d63031;
text-align: center;