chore: 排名明细,表名称居中显示
This commit is contained in:
@@ -142,6 +142,7 @@ h2.game-subtitle {
|
|||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 游戏化链接样式 */
|
/* 游戏化链接样式 */
|
||||||
|
|||||||
@@ -41,7 +41,19 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 第四部分:排名明细 -->
|
<!-- 第四部分:总战绩 -->
|
||||||
|
<section class="total-score-section card-game">
|
||||||
|
<div class="total-score-container">
|
||||||
|
<h2 class="game-subtitle">总战绩</h2>
|
||||||
|
<div class="total-score-content">
|
||||||
|
<div class="total-score-item">
|
||||||
|
<span class="score-value">{{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' : '' }}{{ totalTeamScore }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 第五部分:排名明细 -->
|
||||||
<section class="rankings-section card-game">
|
<section class="rankings-section card-game">
|
||||||
<div class="rankings-container">
|
<div class="rankings-container">
|
||||||
|
|
||||||
@@ -60,14 +72,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="team-rankings-container">
|
<div class="team-rankings-container">
|
||||||
<h2 class="game-subtitle">👥 战区排名</h2>
|
<h2 class="game-subtitle">战区排名</h2>
|
||||||
<div class="rank-table">
|
<div class="rank-table">
|
||||||
<div class="table-header" :style="{ 'grid-template-columns': teamGridTemplate }">
|
<div class="table-header" :style="{ 'grid-template-columns': teamGridTemplate }">
|
||||||
<span class="rank-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.rank || 'left' }">排名</span>
|
<span class="rank-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.rank || 'left' }">排名</span>
|
||||||
<span class="name-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.name || 'left' }">战区名称</span>
|
<span class="name-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.name || 'left' }">战区名称</span>
|
||||||
<span class="score-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.score || 'left' }">{{ localDisplayConfig.team?.totalScoreColumn?.displayName || '业绩' }}</span>
|
<span class="score-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.score || 'left' }">{{ localDisplayConfig.team?.totalScoreColumn?.displayName || '业绩' }}</span>
|
||||||
<span v-if="localDisplayConfig.team?.showMemberCount" class="member-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.memberCount || 'left' }">人数</span>
|
<span v-if="localDisplayConfig.team?.showMemberCount" class="member-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.memberCount || 'left' }">人数</span>
|
||||||
<span v-if="localDisplayConfig.team?.showLeader" class="leader-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.leader || 'left' }">队长</span>
|
<span v-if="localDisplayConfig.team?.showLeader" class="leader-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.leader || 'left' }">将军</span>
|
||||||
<span v-if="localDisplayConfig.team?.showBonus" class="bonus-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.bonus || 'left' }">奖金</span>
|
<span v-if="localDisplayConfig.team?.showBonus" class="bonus-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.bonus || 'left' }">奖金</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-for="(item, index) in filteredTeamRankings" :key="item.id" class="table-row"
|
<div v-for="(item, index) in filteredTeamRankings" :key="item.id" class="table-row"
|
||||||
@@ -77,8 +89,7 @@
|
|||||||
}">
|
}">
|
||||||
<span class="rank-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.rank || 'left' }">{{ index + 1 }}</span>
|
<span class="rank-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.rank || 'left' }">{{ index + 1 }}</span>
|
||||||
<span class="name-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.name || 'left' }">{{ item.name }}</span>
|
<span class="name-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.name || 'left' }">{{ item.name }}</span>
|
||||||
<span class="score-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.score || 'left' }">{{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' +
|
<span class="score-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.score || 'left' }">{{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' : '' }}{{ formatNumber(item.totalScore) }}</span>
|
||||||
item.totalScore : item.totalScore }}</span>
|
|
||||||
<span v-if="localDisplayConfig.team?.showMemberCount" class="member-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.memberCount || 'left' }">{{ item.memberCount }}人</span>
|
<span v-if="localDisplayConfig.team?.showMemberCount" class="member-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.memberCount || 'left' }">{{ item.memberCount }}人</span>
|
||||||
<span v-if="localDisplayConfig.team?.showLeader" class="leader-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.leader || 'left' }">{{ item.leader }}</span>
|
<span v-if="localDisplayConfig.team?.showLeader" class="leader-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.leader || 'left' }">{{ item.leader }}</span>
|
||||||
<span v-if="localDisplayConfig.team?.showBonus" class="bonus-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.bonus || 'left' }">¥{{ item.bonus }}</span>
|
<span v-if="localDisplayConfig.team?.showBonus" class="bonus-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.bonus || 'left' }">¥{{ item.bonus }}</span>
|
||||||
@@ -118,7 +129,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 英雄排名 -->
|
<!-- 英雄排名 -->
|
||||||
<div class="individual-rankings-container">
|
<div class="individual-rankings-container">
|
||||||
<h2 class="game-subtitle">👤 英雄排名</h2>
|
<h2 class="game-subtitle">英雄排名</h2>
|
||||||
<div class="rank-table">
|
<div class="rank-table">
|
||||||
<div class="table-header" :style="{ 'grid-template-columns': individualGridTemplate }">
|
<div class="table-header" :style="{ 'grid-template-columns': individualGridTemplate }">
|
||||||
<span class="rank-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.rank || 'left' }">排名</span>
|
<span class="rank-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.rank || 'left' }">排名</span>
|
||||||
@@ -144,8 +155,7 @@
|
|||||||
</span>
|
</span>
|
||||||
<span class="name-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.name || 'left' }">{{ item.name || '-' }}</span>
|
<span class="name-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.name || 'left' }">{{ item.name || '-' }}</span>
|
||||||
<span v-if="localDisplayConfig.individual?.showTeam" class="team-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.team || 'left' }">{{ item.team || '-' }}</span>
|
<span v-if="localDisplayConfig.individual?.showTeam" class="team-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.team || 'left' }">{{ item.team || '-' }}</span>
|
||||||
<span class="score-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.score || 'left' }">{{ localDisplayConfig.individual?.scoreColumn?.displayStyle === 'amount' ? '¥' +
|
<span class="score-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.score || 'left' }">{{ localDisplayConfig.individual?.scoreColumn?.displayStyle === 'amount' ? '¥' : '' }}{{ formatNumber(item.score) }}</span>
|
||||||
item.score : item.score }}</span>
|
|
||||||
<span v-if="localDisplayConfig.individual?.showLevel" class="level-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.level || 'left' }"
|
<span v-if="localDisplayConfig.individual?.showLevel" class="level-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.level || 'left' }"
|
||||||
:class="`level-${item.level}`">{{ item.level }}</span>
|
:class="`level-${item.level}`">{{ item.level }}</span>
|
||||||
<span v-if="localDisplayConfig.individual?.showDepartment" class="dept-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.department || 'left' }">{{ item.department }}</span>
|
<span v-if="localDisplayConfig.individual?.showDepartment" class="dept-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.department || 'left' }">{{ item.department }}</span>
|
||||||
@@ -303,6 +313,29 @@ const filteredTeamRankings = computed(() => {
|
|||||||
}
|
}
|
||||||
return filtered;
|
return filtered;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 格式化数字为中国人习惯的金额表达方式(使用万分位分隔符)
|
||||||
|
function formatNumber(num) {
|
||||||
|
if (num === null || num === undefined || isNaN(num)) return '0';
|
||||||
|
const numStr = num.toString();
|
||||||
|
// 先处理小数部分
|
||||||
|
const parts = numStr.split('.');
|
||||||
|
let integerPart = parts[0];
|
||||||
|
const decimalPart = parts.length > 1 ? '.' + parts[1] : '';
|
||||||
|
|
||||||
|
// 对于整数部分,从右往左每四位添加一个逗号(万分位分隔)
|
||||||
|
const formattedInteger = integerPart.replace(/\B(?=(\d{4})+(?!\d))/g, ',');
|
||||||
|
|
||||||
|
return formattedInteger + decimalPart;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算属性 - 所有战区业绩总和
|
||||||
|
const totalTeamScore = computed(() => {
|
||||||
|
const total = teamRankings.value.reduce((total, team) => {
|
||||||
|
return total + (team.totalScore || 0);
|
||||||
|
}, 0);
|
||||||
|
return formatNumber(total);
|
||||||
|
});
|
||||||
// 确保即使displayConfig存在,也要和默认配置合并,保证结构完整性
|
// 确保即使displayConfig存在,也要和默认配置合并,保证结构完整性
|
||||||
const localDisplayConfig = ref(() => {
|
const localDisplayConfig = ref(() => {
|
||||||
if (displayConfig) {
|
if (displayConfig) {
|
||||||
@@ -1735,7 +1768,41 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
|
|
||||||
/* 移动端背景图片设置 - 全局样式 */
|
/* 移动端背景图片设置 - 全局样式 */
|
||||||
@media (max-width: 768px) {
|
/* 总战绩部分样式 */
|
||||||
|
.total-score-section {
|
||||||
|
margin: 20px auto;
|
||||||
|
max-width: 1200px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||||
|
animation: fadeIn 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-score-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-score-content {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-score-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center; /* 水平居中 */
|
||||||
|
align-items: center; /* 垂直居中 */
|
||||||
|
padding: 10px;
|
||||||
|
min-height: 60px; /* 确保有足够的高度来展示垂直居中效果 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-value {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--gold-primary);
|
||||||
|
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
/* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */
|
/* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */
|
||||||
.team-rankings-container .rank-table {
|
.team-rankings-container .rank-table {
|
||||||
|
|||||||
Reference in New Issue
Block a user