@@ -60,14 +72,14 @@
-
👥 战区排名
+战区排名
排名
战区名称
{{ localDisplayConfig.team?.totalScoreColumn?.displayName || '业绩' }}
人数
- 队长
+ 将军
奖金
{{ index + 1 }}
{{ item.name }}
- {{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' +
- item.totalScore : item.totalScore }}
+ {{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' : '' }}{{ formatNumber(item.totalScore) }}
{{ item.memberCount }}人
{{ item.leader }}
¥{{ item.bonus }}
@@ -118,7 +129,7 @@
-
👤 英雄排名
+英雄排名
排名
@@ -144,8 +155,7 @@
{{ item.name || '-' }}
{{ item.team || '-' }}
- {{ localDisplayConfig.individual?.scoreColumn?.displayStyle === 'amount' ? '¥' +
- item.score : item.score }}
+ {{ localDisplayConfig.individual?.scoreColumn?.displayStyle === 'amount' ? '¥' : '' }}{{ formatNumber(item.score) }}
{{ item.level }}
{{ item.department }}
@@ -303,6 +313,29 @@ const filteredTeamRankings = computed(() => {
}
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存在，也要和默认配置合并，保证结构完整性
const localDisplayConfig = ref(() => {
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 {
From 885f0a51dd98bf52fa84c8b2535bcf4c01958f23 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Mon, 24 Nov 2025 14:32:58 +0800
Subject: [PATCH 2/2] =?UTF-8?q?chore:=20=E6=94=AF=E6=8C=81=E6=88=98?=
=?UTF-8?q?=E5=8C=BA=E5=86=A0=E5=86=9B=E6=B7=BB=E5=8A=A0=E5=9B=BE=E7=89=87?=
=?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E8=8B=B1=E9=9B=84=E6=A6=9C=E5=AD=97?=
=?UTF-8?q?=E4=BD=93=E5=8F=8A=E7=89=B9=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/AdminPanel.vue | 37 ++++++--
src/views/BattleRanking.vue | 175 ++++++++++++++++++++++++++++++------
2 files changed, 179 insertions(+), 33 deletions(-)
diff --git a/src/views/AdminPanel.vue b/src/views/AdminPanel.vue
index b039f8a..0757665 100644
--- a/src/views/AdminPanel.vue
+++ b/src/views/AdminPanel.vue
@@ -475,30 +475,53 @@
🏆 冠军Logo配置
-
🎯 战区冠军Logo
+🎯 战区冠军配置
+
-
diff --git a/src/views/BattleRanking.vue b/src/views/BattleRanking.vue
index 5db4183..6756189 100644
--- a/src/views/BattleRanking.vue
+++ b/src/views/BattleRanking.vue
@@ -61,10 +61,21 @@
+
+
- ![战区冠军Logo]()
+ ![战区冠军]()
- 未上传Logo
+ 未上传图片
-
+
+
px
- 支持JPG、PNG、GIF格式，建议尺寸200x200像素，文件大小不超过5MB
+
+
+
+
+
+ px
+
+
+
+
+ px
+
+ 支持JPG、PNG、GIF格式，建议尺寸200x200像素（头像）或400x300像素（照片），文件大小不超过5MB
-
+
![战区冠军]()
+ :src="localDisplayConfig.championLogos.teamChampion" alt="战区冠军"
+ class="champion-logo"
+ :style="localDisplayConfig.championLogos?.teamChampionType === 'photo'
+ ? {
+ width: localDisplayConfig.championLogos?.teamChampionPhotoWidth + 'px',
+ height: localDisplayConfig.championLogos?.teamChampionPhotoHeight + 'px',
+ objectFit: 'cover'
+ }
+ : {
+ width: localDisplayConfig.championLogos?.teamChampionSize + 'px',
+ height: localDisplayConfig.championLogos?.teamChampionSize + 'px'
+ }
+ ">
@@ -102,30 +113,32 @@
-
-
- 👑
+
英雄榜
+
+ ![冠军头像]()
- ![英雄冠军]()
-
-
+ ![冠军头像]()
+ ![英雄冠军]()
+
+
+ 👑
+
+
+
+ {{ filteredIndividualRankings[0]?.avatar || '👤' }}
+
+
+
+ {{ filteredIndividualRankings[0]?.name || '暂无冠军' }}
-
-
- {{ filteredIndividualRankings[0]?.avatar || '👤' }}
-
-
-
-
- {{ filteredIndividualRankings[0]?.name || '暂无冠军' }}
+ 英雄榜
@@ -207,6 +220,9 @@ function createDefaultDisplayConfig() {
championLogos: {
teamChampion: '',
teamChampionSize: 60,
+ teamChampionType: 'avatar', // 'avatar' 或 'photo'
+ teamChampionPhotoWidth: 120,
+ teamChampionPhotoHeight: 80,
individualChampion: '',
individualChampionSize: 60
},
@@ -1097,6 +1113,12 @@ onUnmounted(() => {
border-radius: 50%;
}
+.photo-container .champion-logo {
+ max-width: unset !important;
+ border-radius: 0 !important;
+}
+
+
.avatar-image {
width: 30px;
height: 30px;
@@ -1802,6 +1824,108 @@ onUnmounted(() => {
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
+/* 照片容器样式 */
+.team-logo.photo-container {
+ overflow: hidden;
+}
+
+.individual-champion {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 20px;
+ gap: 30px;
+}
+
+.hero-ranking-text {
+ font-size: 2.8rem;
+ font-weight: 300;
+ color: #ffd700;
+ writing-mode: vertical-rl;
+ text-orientation: mixed;
+ letter-spacing: 10px;
+ position: relative;
+ text-shadow:
+ 0 0 5px rgba(255, 215, 0, 0.8),
+ 0 0 10px rgba(255, 215, 0, 0.6),
+ 0 0 15px rgba(255, 215, 0, 0.4),
+ 2px 2px 2px rgba(0, 0, 0, 0.8);
+
+ /* 3D立体效果 */
+ text-stroke: 1px rgba(255, 255, 255, 0.2);
+ -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
+
+ /* 金色渐变背景 */
+ background: linear-gradient(135deg, #ffd700, #ffc107, #ffd700);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+
+ /* 发光效果动画 */
+ animation: glow-hero 2s infinite alternate ease-in-out;
+}
+
+/* 发光效果动画 */
+@keyframes glow-hero {
+ 0% {
+ text-shadow:
+ 0 0 5px rgba(255, 215, 0, 0.8),
+ 0 0 10px rgba(255, 215, 0, 0.6),
+ 0 0 15px rgba(255, 215, 0, 0.4),
+ 2px 2px 2px rgba(0, 0, 0, 0.8);
+ }
+ 100% {
+ text-shadow:
+ 0 0 10px rgba(255, 215, 0, 1),
+ 0 0 20px rgba(255, 215, 0, 0.8),
+ 0 0 30px rgba(255, 215, 0, 0.6),
+ 3px 3px 3px rgba(0, 0, 0, 0.8);
+ }
+}
+
+/* 为容器添加旋转光环效果 */
+.hero-ranking-decoration::before {
+ content: '';
+ position: absolute;
+ width: 180%;
+ height: 180%;
+ top: -40%;
+ left: -40%;
+ background: radial-gradient(circle, transparent 50%, rgba(255, 215, 0, 0.4) 70%, transparent 90%);
+ border-radius: 50%;
+ animation: rotate-hero-ranking-decoration 8s linear infinite;
+ z-index: -1;
+ filter: blur(3px);
+}
+
+/* 添加第二层光环效果 */
+.hero-ranking-decoration::after {
+ content: '';
+ position: absolute;
+ width: 140%;
+ height: 140%;
+ top: -20%;
+ left: -20%;
+ background: radial-gradient(circle, transparent 60%, rgba(255, 140, 0, 0.3) 80%, transparent 100%);
+ border-radius: 50%;
+ animation: rotate-hero-ranking-decoration 12s linear infinite reverse;
+ z-index: -2;
+ filter: blur(2px);
+}
+
+@keyframes rotate-hero-ranking-decoration {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+
+.champion-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
@media (max-width: 768px) {
/* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */
@@ -2106,7 +2230,6 @@ onUnmounted(() => {
/* 冠军部分调整 */
.team-champion,
.individual-champion {
- transform: scale(0.9);
margin: 5px 0;
}