From 91e8af324dfc5e2b8df68d0b9b4fb57e32047108 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Fri, 21 Nov 2025 14:43:43 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=88=98?=
 =?UTF-8?q?=E5=8C=BA=E6=8E=92=E5=90=8D=E5=85=A8=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/AdminPanel.vue    | 500 ++++++++++++++-------------------
 src/views/BattleRanking.vue | 540 ++++++++++++++++++++----------------
 2 files changed, 501 insertions(+), 539 deletions(-)

diff --git a/src/views/AdminPanel.vue b/src/views/AdminPanel.vue
index cc8d5a7..561c485 100644
--- a/src/views/AdminPanel.vue
+++ b/src/views/AdminPanel.vue
@@ -6,23 +6,11 @@
         <h2 class="game-title">🔐 管理员登录</h2>
         <div class="form-group">
           <label for="username" class="text-gold">用户名:</label>
-          <input
-            id="username"
-            v-model="loginForm.username"
-            type="text"
-            placeholder="请输入用户名"
-            class="form-input"
-          />
+          <input id="username" v-model="loginForm.username" type="text" placeholder="请输入用户名" class="form-input" />
         </div>
         <div class="form-group">
           <label for="password" class="text-gold">密码:</label>
-          <input
-            id="password"
-            v-model="loginForm.password"
-            type="password"
-            placeholder="请输入密码"
-            class="form-input"
-          />
+          <input id="password" v-model="loginForm.password" type="password" placeholder="请输入密码" class="form-input" />
         </div>
         <div style="display: flex; gap: 15px; margin-top: 25px;">
           <button @click="login" type="submit" class="btn-game" style="flex: 1; padding: 12px;">登录</button>
@@ -32,50 +20,40 @@
       </div>
     </div>
 
-    <!-- 管理界面 --><div v-else class="management-container">
+    <!-- 管理界面 -->
+    <div v-else class="management-container">
       <!-- 顶部导航 -->
       <div class="top-nav">
         <h1 class="game-title">📊 百日大战管理系统</h1>
         <div class="nav-actions">
-      <span class="welcome-text">欢迎您，{{ currentUser.username }}！</span>
-      <button @click="handleRefreshData" class="btn-game" style="margin-right: 10px;">刷新数据</button>
-      <button @click="logout" class="btn-game-secondary">退出登录</button>
-    </div>
+          <span class="welcome-text">欢迎您，{{ currentUser.username }}！</span>
+          <button @click="handleRefreshData" class="btn-game" style="margin-right: 10px;">刷新数据</button>
+          <button @click="logout" class="btn-game-secondary">退出登录</button>
+        </div>
       </div>
 
       <!-- 功能选项卡 -->
       <div class="tabs">
-        <button
-          v-for="tab in tabs"
-          :key="tab.key"
-          @click="currentTab = tab.key"
-          :class="['btn-game', { active: currentTab === tab.key }]"
-        >{{ tab.label }}</button>
+        <button v-for="tab in tabs" :key="tab.key" @click="currentTab = tab.key"
+          :class="['btn-game', { active: currentTab === tab.key }]">{{ tab.label }}</button>
       </div>
 
-      <!-- 内容区域 --><div class="tab-content" style="max-height: calc(100vh - 200px); overflow-y: auto;">
-        <!-- 结束时间设置 --><div v-if="currentTab === 'endTime'" class="end-time-content">
+      <!-- 内容区域 -->
+      <div class="tab-content" style="max-height: calc(100vh - 200px); overflow-y: auto;">
+        <!-- 结束时间设置 -->
+        <div v-if="currentTab === 'endTime'" class="end-time-content">
           <h2 class="game-subtitle">⏰ 百日大战结束时间设置</h2>
           <div class="time-setting-section">
             <div class="config-item">
               <label class="checkbox-label text-gold">
                 <span>结束日期：</span>
-                <input 
-                  type="date" 
-                  v-model="localBattleEndTime.date"
-                  class="text-input"
-                >
+                <input type="date" v-model="localBattleEndTime.date" class="text-input">
               </label>
             </div>
             <div class="config-item">
               <label class="checkbox-label">
                 <span>结束时间：</span>
-                <input 
-                  type="time" 
-                  step="1"
-                  v-model="localBattleEndTime.time"
-                  class="text-input"
-                >
+                <input type="time" step="1" v-model="localBattleEndTime.time" class="text-input">
               </label>
             </div>
             <div class="config-item">
@@ -83,37 +61,44 @@
             </div>
           </div>
         </div>
-        
-        <!-- 显示配置管理 --><div v-if="currentTab === 'config'" class="config-content">
+
+        <!-- 显示配置管理 -->
+        <div v-if="currentTab === 'config'" class="config-content">
           <h2 class="game-subtitle">⚙️ 显示配置管理</h2>
-          
+
           <!-- 个人排名显示配置 -->
           <div class="config-section">
             <h3 class="text-gold">👤 个人排名显示选项</h3>
             <div class="config-options">
               <div class="config-item">
                 <label class="checkbox-label text-gold">
-                  <input 
-                    type="checkbox" 
-                    v-model="localDisplayConfig.individual.showLevel"
-                  >
+                  <input type="checkbox" v-model="localDisplayConfig.individual.showLevel">
                   <span class="text-gold">显示等级列</span>
                 </label>
               </div>
               <div class="config-item">
                 <label class="checkbox-label">
-                  <input 
-                    type="checkbox" 
-                    v-model="localDisplayConfig.individual.showDepartment"
-                  >
+                  <input type="checkbox" v-model="localDisplayConfig.individual.showDepartment">
                   <span class="text-gold">显示部门列</span>
                 </label>
               </div>
+              <div class="config-item">
+                <label class="checkbox-label">
+                  <input type="checkbox" v-model="localDisplayConfig.individual.showAvatar">
+                  <span class="text-gold">显示头像列</span>
+                </label>
+              </div>
+              <div class="config-item">
+                <label class="checkbox-label">
+                  <span class="text-gold">移动端最大显示行数：</span>
+                  <input type="number" v-model.number="localDisplayConfig.individual.maxDisplayRows" min="1" max="50" class="number-input">
+                </label>
+              </div>
               <div class="config-item">
                 <label class="checkbox-label">
                   <span class="text-gold">业绩列显示名称：</span>
                   <input type="text" v-model="localDisplayConfig.individual.scoreColumn.displayName"
-                           placeholder="输入显示名称" class="text-input">
+                    placeholder="输入显示名称" class="text-input">
                 </label>
               </div>
               <div class="config-item">
@@ -125,16 +110,18 @@
                   </select>
                 </label>
               </div>
-              
+
               <div class="column-widths-section">
                 <h4 class="text-gold">列宽设置（单位：像素）</h4>
                 <div class="column-width-item">
                   <label class="text-gold">排名列：</label>
-                  <input type="number" v-model.number="localDisplayConfig.individual.columnWidths.rank" min="40" max="200" class="width-input">
+                  <input type="number" v-model.number="localDisplayConfig.individual.columnWidths.rank" min="40"
+                    max="200" class="width-input">
                 </div>
                 <div class="column-width-item">
                   <label class="text-gold">头像列：</label>
-                  <input type="number" v-model.number="localDisplayConfig.individual.columnWidths.avatar" min="40" max="200" class="width-input">
+                  <input type="number" v-model.number="localDisplayConfig.individual.columnWidths.avatar" min="40"
+                    max="200" class="width-input">
                 </div>
                 <div class="column-width-item">
                   <label class="text-gold">姓名列：</label>
@@ -148,11 +135,13 @@
                 </div>
                 <div class="column-width-item">
                   <label class="text-gold">业绩列：</label>
-                  <input type="number" v-model.number="localDisplayConfig.individual.columnWidths.score" min="60" max="200" class="width-input">
+                  <input type="number" v-model.number="localDisplayConfig.individual.columnWidths.score" min="60"
+                    max="200" class="width-input">
                 </div>
                 <div class="column-width-item" v-if="localDisplayConfig.individual.showLevel">
                   <label class="text-gold">等级列：</label>
-                  <input type="number" v-model.number="localDisplayConfig.individual.columnWidths.level" min="60" max="200" class="width-input">
+                  <input type="number" v-model.number="localDisplayConfig.individual.columnWidths.level" min="60"
+                    max="200" class="width-input">
                 </div>
                 <div class="column-width-item" v-if="localDisplayConfig.individual.showDepartment">
                   <label class="text-gold">部门列：</label>
@@ -163,41 +152,41 @@
                     <option value="200">200px</option>
                   </select>
                 </div>
+                <div class="column-width-item" v-if="localDisplayConfig.individual.showAvatar">
+                  <label class="text-gold">头像列：</label>
+                  <input type="number" v-model.number="localDisplayConfig.individual.columnWidths.avatar" min="40"
+                    max="200" class="width-input">
+                </div>
                 <div class="column-width-item">
                   <label class="text-gold">奖金列：</label>
-                  <input type="number" v-model.number="localDisplayConfig.individual.columnWidths.bonus" min="60" max="200" class="width-input">
+                  <input type="number" v-model.number="localDisplayConfig.individual.columnWidths.bonus" min="60"
+                    max="200" class="width-input">
                 </div>
               </div>
             </div>
           </div>
-          
+
           <!-- 战区排名显示配置 -->
           <div class="config-section">
             <h3 class="text-gold">👥 战区排名显示选项</h3>
             <div class="config-options">
               <div class="config-item">
                 <label class="checkbox-label">
-                  <input 
-                    type="checkbox" 
-                    v-model="localDisplayConfig.team.showMemberCount"
-                  >
+                  <input type="checkbox" v-model="localDisplayConfig.team.showMemberCount">
                   <span class="text-gold">显示人数列</span>
                 </label>
               </div>
               <div class="config-item">
                 <label class="checkbox-label">
-                  <input 
-                    type="checkbox" 
-                    v-model="localDisplayConfig.team.showLeader"
-                  >
+                  <input type="checkbox" v-model="localDisplayConfig.team.showLeader">
                   <span class="text-gold">显示队长列</span>
                 </label>
               </div>
               <div class="config-item">
                 <label class="checkbox-label">
                   <span class="text-gold">业绩列显示名称：</span>
-                  <input type="text" v-model="localDisplayConfig.team.totalScoreColumn.displayName"
-                           placeholder="输入显示名称" class="text-input">
+                  <input type="text" v-model="localDisplayConfig.team.totalScoreColumn.displayName" placeholder="输入显示名称"
+                    class="text-input">
                 </label>
               </div>
               <div class="config-item">
@@ -209,12 +198,13 @@
                   </select>
                 </label>
               </div>
-              
+
               <div class="column-widths-section">
                 <h4 class="text-gold">列宽设置（单位：像素）</h4>
                 <div class="column-width-item">
                   <label class="text-gold">排名列：</label>
-                  <input type="number" v-model.number="localDisplayConfig.team.columnWidths.rank" min="40" max="200" class="width-input">
+                  <input type="number" v-model.number="localDisplayConfig.team.columnWidths.rank" min="40" max="200"
+                    class="width-input">
                 </div>
                 <div class="column-width-item">
                   <label class="text-gold">战区名列：</label>
@@ -228,11 +218,13 @@
                 </div>
                 <div class="column-width-item">
                   <label class="text-gold">业绩列：</label>
-                  <input type="number" v-model.number="localDisplayConfig.team.columnWidths.score" min="60" max="200" class="width-input">
+                  <input type="number" v-model.number="localDisplayConfig.team.columnWidths.score" min="60" max="200"
+                    class="width-input">
                 </div>
                 <div class="column-width-item" v-if="localDisplayConfig.team.showMemberCount">
                   <label class="text-gold">人数列：</label>
-                  <input type="number" v-model.number="localDisplayConfig.team.columnWidths.memberCount" min="60" max="100" class="width-input">
+                  <input type="number" v-model.number="localDisplayConfig.team.columnWidths.memberCount" min="60"
+                    max="100" class="width-input">
                 </div>
                 <div class="column-width-item" v-if="localDisplayConfig.team.showLeader">
                   <label class="text-gold">队长列：</label>
@@ -245,14 +237,16 @@
                 </div>
                 <div class="column-width-item">
                   <label class="text-gold">奖金列：</label>
-                  <input type="number" v-model.number="localDisplayConfig.team.columnWidths.bonus" min="60" max="200" class="width-input">
+                  <input type="number" v-model.number="localDisplayConfig.team.columnWidths.bonus" min="60" max="200"
+                    class="width-input">
                 </div>
               </div>
             </div>
           </div>
         </div>
-        
-        <!-- 个人排名管理 --><div v-if="currentTab === 'individual'" class="rank-content">
+
+        <!-- 个人排名管理 -->
+        <div v-if="currentTab === 'individual'" class="rank-content">
           <div class="management-header">
             <h2 class="game-subtitle">👤 个人排名管理</h2>
             <button @click="showAddIndividual = true" class="btn-game">➕ 添加人员</button>
@@ -268,20 +262,18 @@
               <span class="bonus-col">奖金</span>
               <span class="action-col">操作</span>
             </div>
-            <div
-              v-for="(item, index) in localIndividualRankings"
-              :key="item.id"
-              class="table-row"
-              :class="{ 'highlight': index === 0 }"
-            >
+            <div v-for="(item, index) in localIndividualRankings" :key="item.id" class="table-row"
+              :class="{ 'highlight': index === 0 }">
               <span class="rank-col">{{ index + 1 }}</span>
               <span class="avatar-col">
                 <img v-if="item.avatar && item.avatar.startsWith('/')" :src="item.avatar" alt="头像" class="table-avatar">
                 <span v-else>{{ item.avatar || '👤' }}</span>
               </span>
               <span class="name-col">{{ item.name }}</span>
-              <span class="score-col">{{ localDisplayConfig.individual.scoreColumn.displayStyle === 'amount' ? '¥' + item.score : item.score }}</span>
-              <span v-if="localDisplayConfig.individual.showLevel" class="level-col" :class="`level-${item.level}`">{{ item.level }}</span>
+              <span class="score-col">{{ localDisplayConfig.individual.scoreColumn.displayStyle === 'amount' ? '¥' +
+                item.score : item.score }}</span>
+              <span v-if="localDisplayConfig.individual.showLevel" class="level-col" :class="`level-${item.level}`">{{
+                item.level }}</span>
               <span v-if="localDisplayConfig.individual.showDepartment" class="dept-col">{{ item.department }}</span>
               <span class="bonus-col">¥{{ item.bonus }}</span>
               <span class="action-col">
@@ -292,7 +284,8 @@
           </div>
         </div>
 
-        <!-- 战区排名管理 --><div v-if="currentTab === 'team'" class="rank-content">
+        <!-- 战区排名管理 -->
+        <div v-if="currentTab === 'team'" class="rank-content">
           <div class="management-header">
             <h2 class="game-subtitle">👥 战区排名管理</h2>
             <button @click="showAddTeam = true" class="btn-game">➕ 添加战区</button>
@@ -307,37 +300,30 @@
               <span class="bonus-col">奖金</span>
               <span class="action-col">操作</span>
             </div>
-            <div
-              v-for="(item, index) in localTeamRankings"
-              :key="item.id"
-              class="table-row"
-              :class="{ 'highlight': index === 0 }"
-            >
+            <div v-for="(item, index) in localTeamRankings" :key="item.id" class="table-row"
+              :class="{ '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 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 class="bonus-col">¥{{ item.bonus }}</span>
               <span class="action-col">
                 <button @click="editTeam(item)" class="btn-game-secondary btn-edit">✏️</button>
-              <button @click="deleteTeam(item.id)" class="btn-game-secondary btn-delete">🗑️</button>
+                <button @click="deleteTeam(item.id)" class="btn-game-secondary btn-delete">🗑️</button>
               </span>
             </div>
           </div>
         </div>
-        
+
         <!-- 奖金设置 -->
         <div v-if="currentTab === 'bonus'" class="bonus-config-content">
           <h2 class="game-subtitle">🎯 奖金设置</h2>
           <div class="config-section">
             <h3 class="text-gold">🏆 奖金规则配置</h3>
             <div class="bonus-rules-list">
-              <div
-                v-for="(rule, index) in localBonusRules"
-                :key="index"
-                class="bonus-rule-item"
-              >
+              <div v-for="(rule, index) in localBonusRules" :key="index" class="bonus-rule-item">
                 <div class="rule-form">
                   <div class="form-group">
                     <label class="text-gold">名次范围:</label>
@@ -349,11 +335,13 @@
                   </div>
                   <div class="form-group">
                     <label class="text-gold">个人奖励:</label>
-                    <input v-model="rule.individualBonus" type="text" class="form-input" placeholder="如: ¥10000, ¥8000, ¥5000">
+                    <input v-model="rule.individualBonus" type="text" class="form-input"
+                      placeholder="如: ¥10000, ¥8000, ¥5000">
                   </div>
                   <div class="form-group">
                     <label class="text-gold">团队奖励:</label>
-                    <input v-model="rule.teamBonus" type="text" class="form-input" placeholder="如: ¥50000, ¥30000, ¥20000">
+                    <input v-model="rule.teamBonus" type="text" class="form-input"
+                      placeholder="如: ¥50000, ¥30000, ¥20000">
                   </div>
                   <div class="form-actions">
                     <button @click="deleteBonusRule(index)" class="btn-game-secondary">🗑️ 删除</button>
@@ -364,132 +352,102 @@
             </div>
           </div>
         </div>
-        
+
         <!-- 冠军Logo配置 -->
         <div v-if="currentTab === 'champion'" class="champion-config-content">
           <h2 class="game-subtitle">🏆 冠军Logo配置</h2>
-          
+
           <div class="config-section">
             <h3 class="text-gold">🎯 战区冠军Logo</h3>
             <div class="logo-upload-section">
               <div class="logo-preview">
                 <div v-if="championLogos.teamChampion" class="logo-image-container">
-              <img :src="championLogos.teamChampion" alt="战区冠军Logo" class="logo-preview-image">
-            </div>
+                  <img :src="championLogos.teamChampion" alt="战区冠军Logo" class="logo-preview-image">
+                </div>
                 <div v-else class="logo-placeholder">
                   <span>未上传Logo</span>
                 </div>
               </div>
               <div class="upload-controls">
-                <input type="file" accept="image/*" @change="(e) => handleChampionLogoUpload(e, 'teamChampion')" class="logo-input">
+                <input type="file" accept="image/*" @change="(e) => handleChampionLogoUpload(e, 'teamChampion')"
+                  class="logo-input">
                 <button v-if="championLogos.teamChampion" @click="clearChampionLogo('teamChampion')" class="btn-clear">
                   清除Logo
                 </button>
               </div>
               <div class="size-control">
                 <label class="text-gold">显示大小：</label>
-                <input 
-                  type="number" 
-                  v-model.number="championLogos.teamChampionSize" 
-                  min="30" 
-                  max="200" 
-                  class="width-input"
-                  placeholder="输入大小（像素）"
-                >
+                <input type="number" v-model.number="championLogos.teamChampionSize" min="30" max="200"
+                  class="width-input" placeholder="输入大小（像素）">
                 <span class="size-unit">px</span>
               </div>
               <p class="upload-hint">支持JPG、PNG、GIF格式，建议尺寸200x200像素，文件大小不超过5MB</p>
             </div>
           </div>
-          
+
           <div class="config-section">
             <h3 class="text-gold">👤 英雄冠军Logo</h3>
             <div class="logo-upload-section">
               <div class="logo-preview">
                 <div v-if="championLogos.individualChampion" class="logo-image-container">
-              <img :src="championLogos.individualChampion" alt="英雄冠军Logo" class="logo-preview-image">
-            </div>
+                  <img :src="championLogos.individualChampion" alt="英雄冠军Logo" class="logo-preview-image">
+                </div>
                 <div v-else class="logo-placeholder">
                   <span>未上传Logo</span>
                 </div>
               </div>
               <div class="upload-controls">
-                <input type="file" accept="image/*" @change="(e) => handleChampionLogoUpload(e, 'individualChampion')" class="logo-input">
-                <button v-if="championLogos.individualChampion" @click="clearChampionLogo('individualChampion')" class="btn-clear">
+                <input type="file" accept="image/*" @change="(e) => handleChampionLogoUpload(e, 'individualChampion')"
+                  class="logo-input">
+                <button v-if="championLogos.individualChampion" @click="clearChampionLogo('individualChampion')"
+                  class="btn-clear">
                   清除Logo
                 </button>
               </div>
               <div class="size-control">
                 <label class="text-gold">显示大小：</label>
-                <input 
-                  type="number" 
-                  v-model.number="championLogos.individualChampionSize" 
-                  min="30" 
-                  max="200" 
-                  class="width-input"
-                  placeholder="输入大小（像素）"
-                >
+                <input type="number" v-model.number="championLogos.individualChampionSize" min="30" max="200"
+                  class="width-input" placeholder="输入大小（像素）">
                 <span class="size-unit">px</span>
               </div>
               <p class="upload-hint">支持JPG、PNG、GIF格式，建议尺寸200x200像素，文件大小不超过5MB</p>
             </div>
           </div>
         </div>
-        
+
         <!-- 战鼓配置 -->
         <div v-if="currentTab === 'drum'" class="drum-config-content">
           <h2 class="game-subtitle">🥁 战鼓配置管理</h2>
-          
+
           <!-- 音效配置 -->
           <div class="config-section">
             <h3 class="text-gold">🔊 音效配置</h3>
             <div class="config-options">
               <div class="config-item">
                 <label class="checkbox-label">
-                  <input 
-                    type="checkbox" 
-                    v-model="localDrumConfig.sound.enabled"
-                  >
+                  <input type="checkbox" v-model="localDrumConfig.sound.enabled">
                   <span>启用音效</span>
                 </label>
               </div>
               <div class="config-item">
                 <label class="checkbox-label">
                   <span>音量 (0-1)：</span>
-                  <input 
-                    type="number" 
-                    v-model.number="localDrumConfig.sound.volume" 
-                    min="0" 
-                    max="1" 
-                    step="0.1" 
-                    class="width-input"
-                  >
+                  <input type="number" v-model.number="localDrumConfig.sound.volume" min="0" max="1" step="0.1"
+                    class="width-input">
                 </label>
               </div>
               <div class="config-item">
                 <label class="checkbox-label">
                   <span>起音时间 (s)：</span>
-                  <input 
-                    type="number" 
-                    v-model.number="localDrumConfig.sound.attackTime" 
-                    min="0.001" 
-                    max="0.5" 
-                    step="0.01" 
-                    class="width-input"
-                  >
+                  <input type="number" v-model.number="localDrumConfig.sound.attackTime" min="0.001" max="0.5"
+                    step="0.01" class="width-input">
                 </label>
               </div>
               <div class="config-item">
                 <label class="checkbox-label">
                   <span>衰减时间 (s)：</span>
-                  <input 
-                    type="number" 
-                    v-model.number="localDrumConfig.sound.decayTime" 
-                    min="0.05" 
-                    max="1" 
-                    step="0.05" 
-                    class="width-input"
-                  >
+                  <input type="number" v-model.number="localDrumConfig.sound.decayTime" min="0.05" max="1" step="0.05"
+                    class="width-input">
                 </label>
               </div>
               <h4 style="margin-top: 15px; color: #666;">🎵 第一个音调</h4>
@@ -507,13 +465,8 @@
               <div class="config-item">
                 <label class="checkbox-label">
                   <span>频率 (Hz)：</span>
-                  <input 
-                    type="number" 
-                    v-model.number="localDrumConfig.sound.frequency1" 
-                    min="50" 
-                    max="500" 
-                    class="width-input"
-                  >
+                  <input type="number" v-model.number="localDrumConfig.sound.frequency1" min="50" max="500"
+                    class="width-input">
                 </label>
               </div>
               <h4 style="margin-top: 15px; color: #666;">🎵 第二个音调</h4>
@@ -531,95 +484,61 @@
               <div class="config-item">
                 <label class="checkbox-label">
                   <span>频率 (Hz)：</span>
-                  <input 
-                    type="number" 
-                    v-model.number="localDrumConfig.sound.frequency2" 
-                    min="50" 
-                    max="500" 
-                    class="width-input"
-                  >
+                  <input type="number" v-model.number="localDrumConfig.sound.frequency2" min="50" max="500"
+                    class="width-input">
                 </label>
               </div>
             </div>
           </div>
-          
+
           <!-- 动画配置 -->
           <div class="config-section">
             <h3>🎬 动画配置</h3>
             <div class="config-options">
               <div class="config-item">
                 <label class="checkbox-label">
-                  <input 
-                    type="checkbox" 
-                    v-model="localDrumConfig.animation.enabled"
-                  >
+                  <input type="checkbox" v-model="localDrumConfig.animation.enabled">
                   <span>启用动画</span>
                 </label>
               </div>
               <div class="config-item">
                 <label class="checkbox-label">
                   <span>节拍间隔 (ms)：</span>
-                  <input 
-                    type="number" 
-                    v-model.number="localDrumConfig.animation.beatInterval" 
-                    min="50" 
-                    max="1000" 
-                    class="width-input"
-                  >
+                  <input type="number" v-model.number="localDrumConfig.animation.beatInterval" min="50" max="1000"
+                    class="width-input">
                 </label>
               </div>
               <div class="config-item">
                 <label class="checkbox-label">
                   <span>跳动缩放比例：</span>
-                  <input 
-                    type="number" 
-                    v-model.number="localDrumConfig.animation.beatScale" 
-                    min="1.0" 
-                    max="2.0" 
-                    step="0.1" 
-                    class="width-input"
-                  >
+                  <input type="number" v-model.number="localDrumConfig.animation.beatScale" min="1.0" max="2.0"
+                    step="0.1" class="width-input">
                 </label>
               </div>
               <div class="config-item">
                 <label class="checkbox-label">
                   <span>跳动上下位移 (px)：</span>
-                  <input 
-                    type="number" 
-                    v-model.number="localDrumConfig.animation.beatTranslateY" 
-                    min="-50" 
-                    max="50" 
-                    class="width-input"
-                  >
+                  <input type="number" v-model.number="localDrumConfig.animation.beatTranslateY" min="-50" max="50"
+                    class="width-input">
                 </label>
               </div>
               <div class="config-item">
                 <label class="checkbox-label">
                   <span>跳动旋转角度 (deg)：</span>
-                  <input 
-                    type="number" 
-                    v-model.number="localDrumConfig.animation.beatRotate" 
-                    min="0" 
-                    max="20" 
-                    class="width-input"
-                  >
+                  <input type="number" v-model.number="localDrumConfig.animation.beatRotate" min="0" max="20"
+                    class="width-input">
                 </label>
               </div>
               <div class="config-item">
                 <label class="checkbox-label">
                   <span>单次跳动持续时间 (ms)：</span>
-                  <input 
-                    type="number" 
-                    v-model.number="localDrumConfig.animation.beatDuration" 
-                    min="50" 
-                    max="500" 
-                    class="width-input"
-                  >
+                  <input type="number" v-model.number="localDrumConfig.animation.beatDuration" min="50" max="500"
+                    class="width-input">
                 </label>
               </div>
             </div>
           </div>
-          
+
           <!-- 节拍模式配置 -->
           <div class="config-section">
             <h3>🎵 节拍模式配置</h3>
@@ -627,62 +546,36 @@
               <div class="config-item">
                 <label class="checkbox-label">
                   <span>每小节总拍数：</span>
-                  <input 
-                    type="number" 
-                    v-model.number="localDrumConfig.pattern.totalBeats" 
-                    min="1" 
-                    max="8" 
-                    class="width-input"
-                  >
+                  <input type="number" v-model.number="localDrumConfig.pattern.totalBeats" min="1" max="8"
+                    class="width-input">
                 </label>
               </div>
               <div class="config-item">
                 <label class="checkbox-label">
                   <span>强拍位置 (1-4)：</span>
-                  <input 
-                    type="text" 
-                    v-model="localDrumConfig.pattern.strongBeatsStr" 
-                    placeholder="如: 1,4"
-                    class="text-input"
-                    @input="updateStrongBeats"
-                  >
+                  <input type="text" v-model="localDrumConfig.pattern.strongBeatsStr" placeholder="如: 1,4"
+                    class="text-input" @input="updateStrongBeats">
                 </label>
               </div>
               <div class="config-item">
                 <label class="checkbox-label">
                   <span>强拍音量倍数：</span>
-                  <input 
-                    type="number" 
-                    v-model.number="localDrumConfig.pattern.accentMultiplier" 
-                    min="1" 
-                    max="3" 
-                    step="0.1" 
-                    class="width-input"
-                  >
+                  <input type="number" v-model.number="localDrumConfig.pattern.accentMultiplier" min="1" max="3"
+                    step="0.1" class="width-input">
                 </label>
               </div>
               <div class="config-item">
                 <label class="checkbox-label">
                   <span>强拍频率偏移 (%)：</span>
-                  <input 
-                    type="number" 
-                    v-model.number="localDrumConfig.pattern.accentFrequencyOffset" 
-                    min="-50" 
-                    max="50" 
-                    class="width-input"
-                  >
+                  <input type="number" v-model.number="localDrumConfig.pattern.accentFrequencyOffset" min="-50" max="50"
+                    class="width-input">
                 </label>
               </div>
               <div class="config-item">
                 <label class="checkbox-label">
                   <span>强拍动画增强 (%)：</span>
-                  <input 
-                    type="number" 
-                    v-model.number="localDrumConfig.pattern.accentAnimation" 
-                    min="0" 
-                    max="100" 
-                    class="width-input"
-                  >
+                  <input type="number" v-model.number="localDrumConfig.pattern.accentAnimation" min="0" max="100"
+                    class="width-input">
                 </label>
               </div>
             </div>
@@ -690,13 +583,15 @@
         </div>
       </div>
 
-      <!-- 保存按钮 --><div class="save-section">
+      <!-- 保存按钮 -->
+      <div class="save-section">
         <button @click="saveData" class="save-btn">💾 保存所有数据</button>
         <button @click="goBack" class="back-btn">🏠 返回首页</button>
       </div>
     </div>
 
-    <!-- 添加/编辑个人对话框 --><div v-if="showAddIndividual || showEditIndividual" class="modal-overlay">
+    <!-- 添加/编辑个人对话框 -->
+    <div v-if="showAddIndividual || showEditIndividual" class="modal-overlay">
       <div class="modal">
         <h3 class="modal-title">{{ editingIndividual ? '编辑人员' : '添加人员' }}</h3>
         <form @submit.prevent="saveIndividual">
@@ -722,14 +617,16 @@
             <label>头像:</label>
             <div class="avatar-upload">
               <div v-if="individualForm.avatar && individualForm.avatar.startsWith('/')" class="avatar-preview">
-                <img :src="individualForm.avatar" alt="头像预览" style="width: 80px; height: 80px; object-fit: cover; border-radius: 50%;">
+                <img :src="individualForm.avatar" alt="头像预览"
+                  style="width: 80px; height: 80px; object-fit: cover; border-radius: 50%;">
               </div>
               <div v-else class="avatar-emoji-preview">
                 {{ individualForm.avatar }}
               </div>
               <input type="file" accept="image/*" @change="handleAvatarUpload" class="avatar-input">
               <label for="emoji-select">或选择表情:</label>
-              <select v-model="individualForm.avatar" id="emoji-select" class="form-input" v-if="!individualForm.avatar.startsWith('/')">
+              <select v-model="individualForm.avatar" id="emoji-select" class="form-input"
+                v-if="!individualForm.avatar.startsWith('/')">
                 <option value="👑">👑 皇冠</option>
                 <option value="🥇">🥇 金牌</option>
                 <option value="🥈">🥈 银牌</option>
@@ -767,7 +664,8 @@
       </div>
     </div>
 
-    <!-- 添加/编辑战区对话框 --><div v-if="showAddTeam || showEditTeam" class="modal-overlay">
+    <!-- 添加/编辑战区对话框 -->
+    <div v-if="showAddTeam || showEditTeam" class="modal-overlay">
       <div class="modal">
         <h3 class="modal-title">{{ editingTeam ? '编辑战区' : '添加战区' }}</h3>
         <form @submit.prevent="saveTeam">
@@ -865,18 +763,18 @@ onMounted(async () => {
     localIndividualRankings.value = [...individualRankings];
     localTeamRankings.value = [...teamRankings];
     localBonusRules.value = [...bonusRules];
-    localDisplayConfig.value = {...displayConfig};
-    localBattleEndTime.value = {...battleEndTime};
-    localDrumConfig.value = {...drumConfig};
-    
+    localDisplayConfig.value = { ...displayConfig };
+    localBattleEndTime.value = { ...battleEndTime };
+    localDrumConfig.value = { ...drumConfig };
+
     // 初始化冠军Logo配置
     if (displayConfig.championLogos) {
-      championLogos.value = {...displayConfig.championLogos};
+      championLogos.value = { ...displayConfig.championLogos };
     }
-    
+
     // 重新处理强拍位置
     if (localDrumConfig.value.pattern && localDrumConfig.value.pattern.strongBeats) {
-      localDrumConfig.value.pattern.strongBeatsStr = 
+      localDrumConfig.value.pattern.strongBeatsStr =
         localDrumConfig.value.pattern.strongBeats.join(',') || '1,4';
     }
   } catch (error) {
@@ -888,16 +786,16 @@ onMounted(async () => {
 const handleChampionLogoUpload = async (event, type) => {
   const file = event.target.files[0];
   if (!file) return;
-  
+
   const formData = new FormData();
   formData.append('image', file);
-  
+
   try {
     const response = await fetch('/api/upload', {
       method: 'POST',
       body: formData
     });
-    
+
     const result = await response.json();
     if (result.success) {
       // 删除旧的图片
@@ -909,7 +807,7 @@ const handleChampionLogoUpload = async (event, type) => {
           console.error('删除旧文件失败:', error);
         });
       }
-      
+
       championLogos.value[type] = result.filePath;
     } else {
       alert('上传失败: ' + result.error);
@@ -918,7 +816,7 @@ const handleChampionLogoUpload = async (event, type) => {
     console.error('上传失败:', error);
     alert('上传失败，请重试');
   }
-  
+
   // 清空文件输入
   event.target.value = '';
 };
@@ -944,16 +842,16 @@ const handleRefreshData = () => {
     localIndividualRankings.value = [...individualRankings];
     localTeamRankings.value = [...teamRankings];
     localBonusRules.value = [...bonusRules];
-    localDisplayConfig.value = {...displayConfig};
-    localBattleEndTime.value = {...battleEndTime};
-    localDrumConfig.value = {...drumConfig};
-    
+    localDisplayConfig.value = { ...displayConfig };
+    localBattleEndTime.value = { ...battleEndTime };
+    localDrumConfig.value = { ...drumConfig };
+
     // 重新处理强拍位置
     if (localDrumConfig.value.pattern && localDrumConfig.value.pattern.strongBeats) {
-      localDrumConfig.value.pattern.strongBeatsStr = 
+      localDrumConfig.value.pattern.strongBeatsStr =
         localDrumConfig.value.pattern.strongBeats.join(',') || '1,4';
     }
-    
+
     if (success) {
       alert('数据刷新成功！');
     } else {
@@ -970,10 +868,10 @@ const currentTab = ref('individual');
 const localIndividualRankings = ref([...individualRankings]);
 const localTeamRankings = ref([...teamRankings]);
 const localBonusRules = ref([...bonusRules]);
-const localDisplayConfig = ref({...displayConfig});
-const localBattleEndTime = ref({...battleEndTime});
+const localDisplayConfig = ref({ ...displayConfig });
+const localBattleEndTime = ref({ ...battleEndTime });
 // 初始化本地战鼓配置副本
-const localDrumConfig = ref({...drumConfig});
+const localDrumConfig = ref({ ...drumConfig });
 // 添加强拍位置的字符串表示，用于输入框
 if (localDrumConfig.value.pattern && localDrumConfig.value.pattern.strongBeats) {
   localDrumConfig.value.pattern.strongBeatsStr = localDrumConfig.value.pattern.strongBeats.join(',') || '1,4';
@@ -991,13 +889,13 @@ onMounted(async () => {
     localIndividualRankings.value = [...individualRankings];
     localTeamRankings.value = [...teamRankings];
     localBonusRules.value = [...bonusRules];
-    localDisplayConfig.value = {...displayConfig};
-    localBattleEndTime.value = {...battleEndTime};
-    localDrumConfig.value = {...drumConfig};
-    
+    localDisplayConfig.value = { ...displayConfig };
+    localBattleEndTime.value = { ...battleEndTime };
+    localDrumConfig.value = { ...drumConfig };
+
     // 重新处理强拍位置
     if (localDrumConfig.value.pattern && localDrumConfig.value.pattern.strongBeats) {
-      localDrumConfig.value.pattern.strongBeatsStr = 
+      localDrumConfig.value.pattern.strongBeatsStr =
         localDrumConfig.value.pattern.strongBeats.join(',') || '1,4';
     }
   } catch (error) {
@@ -1049,16 +947,16 @@ const individualForm = reactive({
 const handleAvatarUpload = async (event) => {
   const file = event.target.files[0];
   if (!file) return;
-  
+
   const formData = new FormData();
   formData.append('image', file);
-  
+
   try {
     const response = await fetch('/api/upload', {
       method: 'POST',
       body: formData
     });
-    
+
     const result = await response.json();
     if (result.success) {
       individualForm.avatar = result.filePath;
@@ -1069,7 +967,7 @@ const handleAvatarUpload = async (event) => {
     console.error('上传失败:', error);
     alert('上传失败，请重试');
   }
-  
+
   // 清空文件输入，允许重新选择相同文件
   event.target.value = '';
 };
@@ -1104,7 +1002,7 @@ const login = () => {
   const user = systemUsers.find(
     u => u.username === loginForm.username && u.password === loginForm.password
   );
-  
+
   if (user) {
     isLoggedIn.value = true;
     currentUser.value = user;
@@ -1133,19 +1031,19 @@ const saveData = async () => {
     // 按分数重新排序
     localIndividualRankings.value.sort((a, b) => b.score - a.score);
     localTeamRankings.value.sort((a, b) => b.totalScore - a.totalScore);
-    
+
     // 保存战鼓配置前，确保强拍位置数组是最新的
     updateStrongBeats();
     // 移除临时的字符串表示，避免保存到配置中
-    const configToSave = {...localDrumConfig.value};
+    const configToSave = { ...localDrumConfig.value };
     delete configToSave.pattern.strongBeatsStr;
-    
+
     // 导入必要的配置服务函数
     const { readConfig, writeConfig } = await import('../services/configService');
-    
+
     // 一次性读取、修改并保存所有配置，避免竞态条件
     const currentConfig = await readConfig();
-    
+
     // 更新所有配置项
     currentConfig.individualRankings = localIndividualRankings.value;
     currentConfig.teamRankings = localTeamRankings.value;
@@ -1155,10 +1053,10 @@ const saveData = async () => {
     currentConfig.displayConfig.championLogos = championLogos.value;
     currentConfig.battleEndTime = localBattleEndTime.value;
     currentConfig.drumConfig = configToSave;
-    
+
     // 一次性保存所有配置
     const result = await writeConfig(currentConfig);
-    
+
     // 检查保存是否成功
     if (result) {
       alert('数据保存成功！');
@@ -1293,8 +1191,8 @@ const deleteBonusRule = (index) => {
 </script>
 
 <style lang="scss" scoped>
-
-.btn-edit, .btn-delete {
+.btn-edit,
+.btn-delete {
   padding: 0;
   cursor: pointer;
   transition: background-color 0.3s;
@@ -1350,17 +1248,20 @@ const deleteBonusRule = (index) => {
   border-radius: 8px;
   font-size: 1rem;
   transition: border-color 0.3s, box-shadow 0.3s;
-  min-height: 44px; /* 增加最小高度，符合可访问性标准 */
+  min-height: 44px;
+  /* 增加最小高度，符合可访问性标准 */
 }
 
 .form-input:focus {
   outline: none;
   border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); /* 增加聚焦效果 */
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+  /* 增加聚焦效果 */
 }
 
 .form-input:hover {
-  border-color: #99a5f0; /* 悬停效果 */
+  border-color: #99a5f0;
+  /* 悬停效果 */
 }
 
 .login-btn {
@@ -1741,7 +1642,8 @@ const deleteBonusRule = (index) => {
   gap: 10px;
 }
 
-.avatar-preview, .avatar-emoji-preview {
+.avatar-preview,
+.avatar-emoji-preview {
   width: 80px;
   height: 80px;
   display: flex;
@@ -1969,16 +1871,16 @@ const deleteBonusRule = (index) => {
     flex-direction: column;
     gap: 15px;
   }
-  
+
   .table-header,
   .table-row {
     font-size: 0.8rem;
   }
-  
+
   .action-col {
     flex-direction: column;
   }
-  
+
   .modal {
     min-width: auto;
     margin: 20px;
diff --git a/src/views/BattleRanking.vue b/src/views/BattleRanking.vue
index bf8b8b4..db01102 100644
--- a/src/views/BattleRanking.vue
+++ b/src/views/BattleRanking.vue
@@ -6,38 +6,33 @@
         <img src="/banner0.png" alt="百日大战主题" class="banner-image bai-day-battle">
       </div>
     </section>
-    
+
     <!-- 第二部分：战鼓动画（浮动并支持拖放） -->
-    <section 
-      v-if="localDisplayConfig.showDrum"
-      class="drums-section card-game" 
-      @mousedown="startDrag"
-      @click="handleDrumClick"
-      :style="{ left: drumsPosition.x + 'px', top: drumsPosition.y + 'px' }"
-    >
+    <section v-if="localDisplayConfig.showDrum" class="drums-section card-game" @mousedown="startDrag"
+      @click="handleDrumClick" :style="{ left: drumsPosition.x + 'px', top: drumsPosition.y + 'px' }">
       <div class="drums-container">
         <!-- 战鼓动画在上面 -->
         <div class="drums-animation">
-            <div class="drum glow-border" :class="{ beating: isBeating }">🥁</div>
-            <div class="drum" :class="{ beating: isBeating }">🥁</div>
-            <div class="trophy" style="font-size: 2.5rem; filter: drop-shadow(0 0 10px var(--gold-primary));">🏆</div>
-            <div class="drum" :class="{ beating: isBeating }">🥁</div>
-            <div class="drum" :class="{ beating: isBeating }">🥁</div>
-          </div>
+          <div class="drum glow-border" :class="{ beating: isBeating }">🥁</div>
+          <div class="drum" :class="{ beating: isBeating }">🥁</div>
+          <div class="trophy" style="font-size: 2.5rem; filter: drop-shadow(0 0 10px var(--gold-primary));">🏆</div>
+          <div class="drum" :class="{ beating: isBeating }">🥁</div>
+          <div class="drum" :class="{ beating: isBeating }">🥁</div>
+        </div>
       </div>
     </section>
-    
+
     <!-- 任务设置模块 -->
     <section class="task-settings-section card-game">
       <div class="task-title-container">
-        <h1 class="game-title" v-if="taskSettings?.mainTitle">任务: <span class="game-title-highlight">{{ taskSettings.mainTitle }} </span> </h1>
+        <h1 class="game-title" v-if="taskSettings?.mainTitle">任务: <span class="game-title-highlight">{{
+          taskSettings.mainTitle }} </span> </h1>
         <p class="game-subtitle" v-if="taskSettings?.subtitle">{{ taskSettings.subtitle }}</p>
       </div>
     </section>
 
     <!-- 第三部分：奖金设置（图片形式） -->
-    <section v-if="localDisplayConfig.showBonusModule" class="bonus-section card-game"
-      @mousedown="startBonusDrag"
+    <section v-if="localDisplayConfig.showBonusModule" class="bonus-section card-game" @mousedown="startBonusDrag"
       @click.stop>
       <div class="bonus-awards-container">
         <div><img src="/award1.png" alt="一等奖" class="award-image"></div>
@@ -49,18 +44,17 @@
     <!-- 第四部分：排名明细 -->
     <section class="rankings-section card-game">
       <div class="rankings-container">
-      
+
         <!-- 战区排名 -->
         <div class="team-rankings">
           <!-- 战区冠军 -->
           <div class="team-champion">
             <div class="team-logo">
-              <img v-if="localDisplayConfig.championLogos?.teamChampion" 
-                   :src="localDisplayConfig.championLogos.teamChampion" 
-                   alt="战区冠军" 
-                   class="champion-logo"
-                   :style="{ width: localDisplayConfig.championLogos?.teamChampionSize + 'px', height: localDisplayConfig.championLogos?.teamChampionSize + 'px' }">
-              <span v-else :style="{ fontSize: localDisplayConfig.championLogos?.teamChampionSize ? (localDisplayConfig.championLogos.teamChampionSize * 0.8) + 'px' : '2rem' }">🏅</span>
+              <img v-if="localDisplayConfig.championLogos?.teamChampion"
+                :src="localDisplayConfig.championLogos.teamChampion" alt="战区冠军" class="champion-logo"
+                :style="{ width: localDisplayConfig.championLogos?.teamChampionSize + 'px', height: localDisplayConfig.championLogos?.teamChampionSize + 'px' }">
+              <span v-else
+                :style="{ fontSize: localDisplayConfig.championLogos?.teamChampionSize ? (localDisplayConfig.championLogos.teamChampionSize * 0.8) + 'px' : '2rem' }">🏅</span>
             </div>
             <div class="champion-name">
               {{ teamRankings[0]?.name || '暂无冠军' }}
@@ -77,24 +71,20 @@
                 <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="{
+              <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 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>
@@ -103,17 +93,14 @@
           <!-- 英雄冠军 -->
           <div class="individual-champion">
             <div class="individual-avatar">
-              <img v-if="individualRankings[0]?.avatar && individualRankings[0].avatar.startsWith('/')" 
-                   :src="individualRankings[0].avatar" 
-                   alt="冠军头像" 
-                   class="avatar-image avatar-image-champion"
-                   :style="{ width: localDisplayConfig.championLogos?.individualChampionSize + 'px', height: localDisplayConfig.championLogos?.individualChampionSize + 'px' }">
-              <img v-else-if="localDisplayConfig.championLogos?.individualChampion" 
-                   :src="localDisplayConfig.championLogos.individualChampion" 
-                   alt="英雄冠军" 
-                   class="champion-logo"
-                   :style="{ width: localDisplayConfig.championLogos?.individualChampionSize + 'px', height: localDisplayConfig.championLogos?.individualChampionSize + 'px' }">
-              <span v-else :style="{ fontSize: localDisplayConfig.championLogos?.individualChampionSize ? (localDisplayConfig.championLogos.individualChampionSize * 0.8) + 'px' : '2rem' }">
+              <img v-if="individualRankings[0]?.avatar && individualRankings[0].avatar.startsWith('/')"
+                :src="individualRankings[0].avatar" alt="冠军头像" class="avatar-image avatar-image-champion"
+                :style="{ width: localDisplayConfig.championLogos?.individualChampionSize + 'px', height: localDisplayConfig.championLogos?.individualChampionSize + 'px' }">
+              <img v-else-if="localDisplayConfig.championLogos?.individualChampion"
+                :src="localDisplayConfig.championLogos.individualChampion" alt="英雄冠军" class="champion-logo"
+                :style="{ width: localDisplayConfig.championLogos?.individualChampionSize + 'px', height: localDisplayConfig.championLogos?.individualChampionSize + 'px' }">
+              <span v-else
+                :style="{ fontSize: localDisplayConfig.championLogos?.individualChampionSize ? (localDisplayConfig.championLogos.individualChampionSize * 0.8) + 'px' : '2rem' }">
                 {{ individualRankings[0]?.avatar || '👤' }}
               </span>
             </div>
@@ -127,46 +114,43 @@
             <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>
-              <span v-if="localDisplayConfig.individual?.showDepartment" class="dept-col">部门</span>
-              <span v-if="localDisplayConfig.individual?.showBonus" class="bonus-col">奖金</span>
-            </div>
-            <div
-              v-for="(item, index) in individualRankings" 
-              :key="item.id"
-              class="table-row"
-              :style="{ 'grid-template-columns': individualGridTemplate }"
-              :class="{
+                <span v-if="localDisplayConfig.individual?.showAvatar" 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>
+                <span v-if="localDisplayConfig.individual?.showDepartment" class="dept-col">部门</span>
+                <span v-if="localDisplayConfig.individual?.showBonus" class="bonus-col">奖金</span>
+              </div>
+              <div v-for="(item, index) in individualRankings.slice(0, localDisplayConfig.individual.maxDisplayRows)" :key="item.id" class="table-row"
+                :style="{ 'grid-template-columns': individualGridTemplate }" :class="{
                 'top-three': index < 3,
                 'highlight': index === 0
-              }"
-            >
-              <span class="rank-col">{{ index + 1 }}</span>
-              <span class="avatar-col">
-                <img v-if="item.avatar && item.avatar.startsWith('/')" :src="item.avatar" alt="头像" class="avatar-image">
-                <span v-else>{{ item.avatar }}</span>
-              </span>
-              <span class="name-col">{{ item.name }}</span>
-              <span v-if="localDisplayConfig.individual?.showTeam" class="team-col">{{ item.team || '-' }}</span>
-              <span class="score-col">{{ localDisplayConfig.individual?.scoreColumn?.displayStyle === 'amount' ? '¥' + item.score : item.score }}</span>
-              <span v-if="localDisplayConfig.individual?.showLevel" class="level-col" :class="`level-${item.level}`">{{ item.level }}</span>
-              <span v-if="localDisplayConfig.individual?.showDepartment" class="dept-col">{{ item.department }}</span>
-              <span v-if="localDisplayConfig.individual?.showBonus" class="bonus-col">¥{{ item.bonus }}</span>
+              }">
+                <span class="rank-col">{{ index + 1 }}</span>
+                <span v-if="localDisplayConfig.individual?.showAvatar" class="avatar-col">
+                  <img v-if="item.avatar && item.avatar.startsWith('/')" :src="item.avatar" alt="头像"
+                    class="avatar-image">
+                  <span v-else>{{ item.avatar || '👤' }}</span>
+                </span>
+                <span class="name-col">{{ item.name }}</span>
+                <span v-if="localDisplayConfig.individual?.showTeam" class="team-col">{{ item.team || '-' }}</span>
+                <span class="score-col">{{ localDisplayConfig.individual?.scoreColumn?.displayStyle === 'amount' ? '¥' +
+                  item.score : item.score }}</span>
+                <span v-if="localDisplayConfig.individual?.showLevel" class="level-col"
+                  :class="`level-${item.level}`">{{ item.level }}</span>
+                <span v-if="localDisplayConfig.individual?.showDepartment" class="dept-col">{{ item.department }}</span>
+                <span v-if="localDisplayConfig.individual?.showBonus" class="bonus-col">¥{{ item.bonus }}</span>
+              </div>
             </div>
           </div>
-          </div>
         </div>
       </div>
     </section>
 
     <!-- 浮动倒计时组件 -->
-    <div class="timer-float glow-border"
-      :style="{ right: '20px', top: '10px' }"
-    >
+    <div class="timer-float glow-border" :style="{ right: '20px', top: '10px' }">
       <span class="label">距离结束还有：</span>
       <div class="countdown" style="display: flex; gap: 15px;">
         <span class="time-item timer-number">{{ days }}天</span>
@@ -175,7 +159,7 @@
         <span class="time-item timer-number">{{ seconds }}秒</span>
       </div>
     </div>
-    
+
     <!-- 浮动管理员入口 -->
     <div class="admin-entry-float">
       <button @click="goToAdmin" class="btn-game-secondary">
@@ -202,6 +186,12 @@ import { readConfig } from '../services/configService.js';
 // 创建默认显示配置的函数
 function createDefaultDisplayConfig() {
   return {
+    championLogos: {
+      teamChampion: '',
+      teamChampionSize: 60,
+      individualChampion: '',
+      individualChampionSize: 60
+    },
     individual: {
       scoreColumn: {
         displayName: '战绩',
@@ -215,6 +205,8 @@ function createDefaultDisplayConfig() {
       showDepartment: true,
       showBonus: false,
       showTeam: true, // 默认显示战区列
+      showAvatar: false, // 默认不显示头像列
+      maxDisplayRows: 10, // 默认最多显示10行
       columnWidths: {
         team: 120 // 默认战区列宽
       }
@@ -265,8 +257,8 @@ function mergeConfig(config1, config2) {
 const individualRankings = ref(importedIndividualRankings || []);
 const teamRankings = ref(importedTeamRankings || []);
 // 确保即使displayConfig存在，也要和默认配置合并，保证结构完整性
-const localDisplayConfig = ref(displayConfig 
-  ? mergeConfig(defaultDisplayConfig, JSON.parse(JSON.stringify(displayConfig))) 
+const localDisplayConfig = ref(displayConfig
+  ? mergeConfig(defaultDisplayConfig, JSON.parse(JSON.stringify(displayConfig)))
   : defaultDisplayConfig
 );
 const taskSettings = ref({
@@ -279,7 +271,7 @@ onMounted(async () => {
   try {
     // 首先初始化所有数据，确保从服务器获取最新配置
     await initializeData();
-    
+
     // 然后重新获取最新的数据
     const config = await readConfig();
     if (config) {
@@ -287,21 +279,21 @@ onMounted(async () => {
       if (config.taskSettings) {
         taskSettings.value = config.taskSettings;
       }
-      
+
       // 直接从config中更新排名数据，确保使用最新的服务器数据
       if (config.individualRankings && config.individualRankings.length > 0) {
         individualRankings.value = config.individualRankings;
       }
-      
+
       if (config.teamRankings && config.teamRankings.length > 0) {
         teamRankings.value = config.teamRankings;
       }
-      
+
       // 更新显示配置
       if (config.displayConfig) {
         localDisplayConfig.value = mergeConfig(defaultDisplayConfig, JSON.parse(JSON.stringify(config.displayConfig)));
       }
-      
+
       console.log('成功从服务器加载最新数据');
     }
   } catch (error) {
@@ -313,8 +305,8 @@ onMounted(async () => {
 
 // 确保奖金规则有默认值
 const displayBonusRules = computed(() => {
-  return Array.isArray(bonusRules) && bonusRules.length > 0 
-    ? bonusRules 
+  return Array.isArray(bonusRules) && bonusRules.length > 0
+    ? bonusRules
     : createDefaultBonusRules();
 });
 
@@ -324,43 +316,48 @@ const router = useRouter();
 const individualGridTemplate = computed(() => {
   try {
     const config = localDisplayConfig.value?.individual;
-    if (!config) return '60px 60px 1fr 120px 80px 80px';
-    
+    if (!config) return '60px 1fr 120px 80px 80px';
+
     // 确保showTeam默认为true
     if (config.showTeam === undefined) {
       config.showTeam = true;
     }
-    
+
     const widths = config.columnWidths || {};
     const cols = [];
-    
+
     cols.push((widths.rank || 60) + 'px'); // 排名
-    cols.push((widths.avatar || 60) + 'px'); // 头像
+
+    // 头像列 - 根据配置决定是否显示
+    if (config.showAvatar) {
+      cols.push((widths.avatar || 60) + 'px'); // 头像
+    }
+
     cols.push((widths.name === 1 || widths.name === '1') ? '1fr' : (widths.name || 120) + 'px'); // 姓名
-    
+
     // 战区列（在姓名列后面）
     if (config.showTeam) {
       cols.push((widths.team === 1 || widths.team === '1') ? '1fr' : (widths.team || 120) + 'px'); // 战区
     }
-    
+
     cols.push((widths.score || 80) + 'px'); // 分数
-    
+
     if (config.showLevel) {
       cols.push((widths.level || 80) + 'px'); // 等级
     }
-    
+
     if (config.showDepartment) {
       cols.push((widths.department === 1 || widths.department === '1') ? '1fr' : (widths.department || 100) + 'px'); // 部门
     }
-    
+
     if (config.showBonus) {
       cols.push((widths.bonus || 80) + 'px'); // 奖金
     }
-    
+
     return cols.join(' ');
   } catch (error) {
     console.error('计算英雄排名表格布局出错:', error);
-    return '60px 60px 1fr 120px 80px 80px'; // 兜底布局（包含战区列）
+    return '60px 1fr 120px 80px 80px'; // 兜底布局（不包含头像列）
   }
 });
 
@@ -369,26 +366,26 @@ const teamGridTemplate = computed(() => {
   try {
     const config = localDisplayConfig.value?.team;
     if (!config) return '60px 1fr 80px 80px';
-    
+
     const widths = config.columnWidths || {};
     const cols = [];
-    
+
     cols.push((widths.rank || 60) + 'px'); // 排名
     cols.push((widths.name === 1 || widths.name === '1') ? '1fr' : (widths.name || 150) + 'px'); // 战区名
     cols.push((widths.score || 80) + 'px'); // 分数
-    
+
     if (config.showMemberCount) {
       cols.push((widths.memberCount || 60) + 'px'); // 人数
     }
-    
+
     if (config.showLeader) {
       cols.push((widths.leader === 1 || widths.leader === '1') ? '1fr' : (widths.leader || 120) + 'px'); // 队长
     }
-    
+
     if (config.showBonus) {
       cols.push((widths.bonus || 80) + 'px'); // 奖金
     }
-    
+
     return cols.join(' ');
   } catch (error) {
     console.error('计算战区排名表格布局出错:', error);
@@ -425,7 +422,7 @@ let bonusDragOffset = { x: 0, y: 0 };
 // 节流函数
 function throttle(func, limit) {
   let inThrottle;
-  return function() {
+  return function () {
     const args = arguments;
     const context = this;
     if (!inThrottle) {
@@ -460,7 +457,7 @@ const startBonusDrag = (e) => {
 // 结束拖动
 const endDrag = (e) => {
   isDragging = false;
-  
+
   if (isBonusDragging) {
     // 恢复动画效果
     const bonusElement = document.querySelector('.bonus-section');
@@ -481,20 +478,20 @@ const drag = throttle((e) => {
     // 计算新的位置
     const newX = e.clientX - bonusDragOffset.x;
     const newY = e.clientY - bonusDragOffset.y;
-    
+
     // 确保元素不会被拖出视口
     const windowWidth = window.innerWidth;
     const windowHeight = window.innerHeight;
     const element = document.querySelector('.bonus-section');
-    
+
     if (element) {
       const elementWidth = element.offsetWidth;
       const elementHeight = element.offsetHeight;
-      
+
       // 限制在视口内，添加一些边距
       const limitedX = Math.max(10, Math.min(newX, windowWidth - elementWidth - 10));
       const limitedY = Math.max(10, Math.min(newY, windowHeight - elementHeight - 10));
-      
+
       // 使用优化的更新函数更新奖金模块位置
       requestAnimationFrame(() => {
         bonusPosition.x = limitedX;
@@ -547,7 +544,7 @@ const loadAudioFile = async (filePath) => {
     const response = await fetch(filePath);
     const arrayBuffer = await response.arrayBuffer();
     const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-    
+
     // 缓存音频缓冲区
     audioBufferCache.value[filePath] = audioBuffer;
     return audioBuffer;
@@ -561,100 +558,100 @@ const loadAudioFile = async (filePath) => {
 const playDrumSound = async (isStrongBeat = false) => {
   // 检查是否启用声音播放
   if (!audioContext || isPlayingSound.value || drumConfig?.sound?.enabled === false) return;
-  
+
   isPlayingSound.value = true;
-  
+
   try {
     // 使用配置的音效参数
     const soundConfig = drumConfig?.sound || {};
     const patternConfig = drumConfig?.pattern || {};
-    
+
     // 检查是否配置了MP3文件路径
     if (soundConfig.soundSrc && soundConfig.soundSrc.trim() !== '') {
       // 使用MP3文件播放
       const audioBuffer = await loadAudioFile(soundConfig.soundSrc);
-      
+
       if (audioBuffer) {
         // 创建音频源节点
         const source = audioContext.createBufferSource();
         const gainNode = audioContext.createGain();
-        
+
         // 连接节点
         source.buffer = audioBuffer;
         source.connect(gainNode);
         gainNode.connect(audioContext.destination);
-        
+
         // 设置音量，支持强拍音量增强
         const baseVolume = soundConfig.volume || 1.0;
         const accentMultiplier = patternConfig.accentMultiplier || 1.2;
         const volume = isStrongBeat ? baseVolume * accentMultiplier : baseVolume;
         gainNode.gain.value = volume;
-        
+
         // 播放声音
         source.start(0);
-        
+
         // 设置完成后重置播放状态
         setTimeout(() => {
           isPlayingSound.value = false;
         }, audioBuffer.duration * 1000 + 100);
-        
+
         return;
       }
     }
-    
+
     // 如果没有配置MP3文件或加载失败，回退到合成音效
     // 创建振荡器节点
     const oscillator = audioContext.createOscillator();
     const gainNode = audioContext.createGain();
-    
+
     // 连接节点
     oscillator.connect(gainNode);
     gainNode.connect(audioContext.destination);
-    
+
     // 设置战鼓音效参数，支持强拍
     const baseVolume = soundConfig.volume || 1.0;
     // 使用pattern配置中的强拍音量倍数
     const accentMultiplier = patternConfig.accentMultiplier || 1.2;
     const volume = isStrongBeat ? baseVolume * accentMultiplier : baseVolume;
-    
+
     // 使用soundConfig中的type1
     oscillator.type = soundConfig.type1 || 'sine';
-    
+
     // 基础频率，支持强拍频率偏移
     const baseFrequency = soundConfig.frequency1 || 150;
     const frequencyOffset = isStrongBeat ? (patternConfig.accentFrequencyOffset || 0) / 100 : 0;
     const actualFrequency = baseFrequency * (1 + frequencyOffset);
-    
+
     oscillator.frequency.setValueAtTime(actualFrequency, audioContext.currentTime);
     // 频率渐变
     oscillator.frequency.exponentialRampToValueAtTime(actualFrequency * 0.5, audioContext.currentTime + 0.1);
-    
+
     // 设置音量包络
     gainNode.gain.setValueAtTime(0, audioContext.currentTime);
     gainNode.gain.linearRampToValueAtTime(volume, audioContext.currentTime + (soundConfig.attackTime || 0.01));
     gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + (soundConfig.decayTime || 0.3));
-    
+
     // 播放声音
     oscillator.start();
     oscillator.stop(audioContext.currentTime + (soundConfig.decayTime || 0.3));
-    
+
     // 双音调效果 - 始终使用
     const oscillator2 = audioContext.createOscillator();
     const gainNode2 = audioContext.createGain();
-    
+
     oscillator2.connect(gainNode2);
     gainNode2.connect(audioContext.destination);
-    
+
     oscillator2.type = soundConfig.type2 || 'triangle';
     oscillator2.frequency.setValueAtTime(soundConfig.frequency2 || 100, audioContext.currentTime);
-    
+
     gainNode2.gain.setValueAtTime(0, audioContext.currentTime);
     gainNode2.gain.linearRampToValueAtTime(volume * 0.8, audioContext.currentTime + (soundConfig.attackTime || 0.01));
     gainNode2.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + (soundConfig.decayTime || 0.3) + 0.2);
-    
+
     oscillator2.start();
     oscillator2.stop(audioContext.currentTime + (soundConfig.decayTime || 0.3) + 0.2);
-    
+
     // 设置完成后重置播放状态
     setTimeout(() => {
       isPlayingSound.value = false;
@@ -671,17 +668,17 @@ const handleDrumClick = async () => {
   if (!audioContext) {
     initAudioContext();
   }
-  
+
   // 如果音频上下文被暂停，恢复它
   if (audioContext.state === 'suspended') {
     audioContext.resume();
   }
-  
+
   // 触发战鼓动画和音效，使用配置的点击效果
   const animationConfig = drumConfig?.animation || {};
   isBeating.value = true;
   await playDrumSound(true); // 点击总是强拍
-  
+
   setTimeout(() => {
     isBeating.value = false;
   }, animationConfig.clickBeatDuration || 250);
@@ -691,54 +688,54 @@ const handleDrumClick = async () => {
 const startDrumAnimation = () => {
   // 检查是否显示战鼓
   if (drumConfig?.showDrum === false) return;
-  
+
   // 使用配置的动画和节拍参数
   const animationConfig = drumConfig?.animation || {};
   const patternConfig = drumConfig?.pattern || {};
-  
+
   // 检查是否启用动画
   if (animationConfig.enabled === false) return;
-  
+
   let beatCount = 0;
   // 使用配置的节拍间隔
   const interval = animationConfig.beatInterval || 200;
-  
+
   beatInterval = setInterval(() => {
     beatCount++;
     // 使用配置的节拍模式和总拍数
     const totalBeats = patternConfig.totalBeats || 4;
     const currentBeat = ((beatCount - 1) % totalBeats) + 1;
-    
+
     // 根据节拍模式确定是否是强拍
     const strongBeats = patternConfig.strongBeats || [1, 4];
     const isStrongBeat = strongBeats.includes(currentBeat);
-    
+
     // 执行动画和音效
     isBeating.value = true;
-    
+
     // 根据是否是强拍播放音效
     playDrumSound(isStrongBeat);
-    
+
     // 设置CSS变量，支持强拍动画增强
     const drums = document.querySelectorAll('.drum');
     drums.forEach(drum => {
       // 使用配置的动画参数
-      drum.style.setProperty('--drum-scale', isStrongBeat ? 
-        (animationConfig.beatScale || 1.3) * (1 + (patternConfig.accentAnimation || 0) / 100) : 
+      drum.style.setProperty('--drum-scale', isStrongBeat ?
+        (animationConfig.beatScale || 1.3) * (1 + (patternConfig.accentAnimation || 0) / 100) :
         (animationConfig.beatScale || 1.3));
-      drum.style.setProperty('--drum-translate-y', isStrongBeat ? 
-        `${(animationConfig.beatTranslateY || -15) * (1 + (patternConfig.accentAnimation || 0) / 100)}px` : 
+      drum.style.setProperty('--drum-translate-y', isStrongBeat ?
+        `${(animationConfig.beatTranslateY || -15) * (1 + (patternConfig.accentAnimation || 0) / 100)}px` :
         `${animationConfig.beatTranslateY || -15}px`);
       drum.style.setProperty('--drum-rotate', `${animationConfig.beatRotate || 5}deg`);
       drum.style.setProperty('--drum-brightness', isStrongBeat ? '1.4' : '1.3');
       drum.style.setProperty('--drum-saturation', isStrongBeat ? '1.3' : '1.2');
     });
-    
+
     // 根据节拍类型设置持续时间
-    const beatDuration = isStrongBeat 
+    const beatDuration = isStrongBeat
       ? (animationConfig.beatDuration || 150)
       : (animationConfig.beatDuration || 100);
-    
+
     setTimeout(() => {
       isBeating.value = false;
     }, beatDuration);
@@ -780,14 +777,14 @@ onMounted(async () => {
     // 使用默认配置
     localDisplayConfig.value = createDefaultDisplayConfig();
   }
-  
+
   calculateCountdown();
   countdownInterval = setInterval(calculateCountdown, 10); // 改为10ms更新一次以显示毫秒
   startDrumAnimation();
   // 监听窗口大小变化，确保排名明细与底部对齐
   window.addEventListener('resize', handleResize);
   handleResize(); // 初始调整
-  
+
   // 添加拖放相关的事件监听
   document.addEventListener('mousemove', drag);
   document.addEventListener('mouseup', endDrag);
@@ -801,7 +798,7 @@ const handleBattleEndTimeChange = () => {
 // 监听显示配置变化（在真实环境中，可能需要通过props或store来监听）
 const handleDisplayConfigChange = () => {
   // 更新本地配置
-  localDisplayConfig.value = {...displayConfig};
+  localDisplayConfig.value = { ...displayConfig };
 };
 
 // 这里模拟监听配置变化
@@ -811,7 +808,7 @@ onUnmounted(() => {
   if (countdownInterval) clearInterval(countdownInterval);
   if (beatInterval) clearInterval(beatInterval);
   window.removeEventListener('resize', handleResize);
-  
+
   // 移除拖放相关的事件监听
   document.removeEventListener('mousemove', drag);
   document.removeEventListener('mouseup', endDrag);
@@ -825,7 +822,6 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-
 .avatar-image-champion {
   object-fit: contain;
 }
@@ -884,6 +880,7 @@ onUnmounted(() => {
   font-weight: bold;
   color: gold;
 }
+
 /* 基础样式 */
 :root {
   --gold-primary: #ffd700;
@@ -942,16 +939,17 @@ onUnmounted(() => {
 
 /* 响应式设计 */
 @media (max-width: 768px) {
+
   /* 隐藏倒计时模块 */
   .timer-float {
     display: none !important;
   }
-  
+
   /* 隐藏管理员入口 */
   .admin-entry-float {
     display: none !important;
   }
-  
+
   /* 奖金模块垂直居中显示，两侧20px间距 */
   .bonus-section {
     /* 背景全部取消设置 **/
@@ -966,19 +964,20 @@ onUnmounted(() => {
     top: 0 !important;
     bottom: 0 !important;
   }
+
   /* 保留响应式中的padding设置，但移除其他可能冲突的位置样式 */
   .bonus-section {
     padding: 10px;
   }
-  
+
   .bonus-awards-container {
     gap: 10px;
   }
-    
+
   .timer-float {
     font-size: 0.9rem;
   }
-  
+
   .timer-float .countdown {
     gap: 8px;
   }
@@ -988,11 +987,11 @@ onUnmounted(() => {
   .banner-image {
     margin-bottom: 15px;
   }
-  
+
   .award-image {
     max-width: 100%;
   }
-  
+
   .timer-float {
     font-size: 0.8rem;
   }
@@ -1008,7 +1007,7 @@ onUnmounted(() => {
   cursor: move;
   backdrop-filter: blur(10px);
   border: 1px solid #3a3f51;
-  box-shadow: 
+  box-shadow:
     0 0 15px rgba(0, 255, 255, 0.3),
     inset 0 0 10px rgba(0, 255, 255, 0.1);
   animation: borderPulse 3s infinite alternate;
@@ -1017,19 +1016,20 @@ onUnmounted(() => {
 
 .timer-float:hover {
   transform: scale(1.05);
-  box-shadow: 
+  box-shadow:
     0 0 25px rgba(0, 255, 255, 0.5),
     inset 0 0 15px rgba(0, 255, 255, 0.2);
 }
 
 @keyframes borderPulse {
   0% {
-    box-shadow: 
+    box-shadow:
       0 0 10px rgba(0, 255, 255, 0.2),
       inset 0 0 5px rgba(0, 255, 255, 0.1);
   }
+
   100% {
-    box-shadow: 
+    box-shadow:
       0 0 20px rgba(0, 255, 255, 0.5),
       inset 0 0 15px rgba(0, 255, 255, 0.3);
   }
@@ -1096,7 +1096,8 @@ onUnmounted(() => {
   padding: 12px 25px;
   border-radius: 50px;
   font-weight: bold;
-  margin-bottom: 14px; /* 下移4px */
+  margin-bottom: 14px;
+  /* 下移4px */
 }
 
 /* 科技感倒计时标签 */
@@ -1123,7 +1124,7 @@ onUnmounted(() => {
   color: #00e5ff;
   text-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
   border: 1px solid #00e5ff;
-  box-shadow: 
+  box-shadow:
     0 0 10px rgba(0, 229, 255, 0.3),
     inset 0 0 5px rgba(0, 229, 255, 0.2);
   transition: all 0.2s ease;
@@ -1146,7 +1147,7 @@ onUnmounted(() => {
 
 .time-item:hover {
   transform: translateY(-2px);
-  box-shadow: 
+  box-shadow:
     0 0 15px rgba(0, 229, 255, 0.5),
     inset 0 0 10px rgba(0, 229, 255, 0.3);
 }
@@ -1171,12 +1172,13 @@ onUnmounted(() => {
 
 @keyframes pulse {
   0% {
-    box-shadow: 
+    box-shadow:
       0 0 10px rgba(255, 61, 0, 0.3),
       inset 0 0 5px rgba(255, 61, 0, 0.2);
   }
+
   100% {
-    box-shadow: 
+    box-shadow:
       0 0 15px rgba(255, 61, 0, 0.6),
       inset 0 0 10px rgba(255, 61, 0, 0.4);
   }
@@ -1184,8 +1186,18 @@ onUnmounted(() => {
 
 /* 毫秒闪烁动画增强紧张感 */
 @keyframes blink {
-  0%, 50% { opacity: 1; transform: scale(1); }
-  51%, 100% { opacity: 0.7; transform: scale(0.95); }
+
+  0%,
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  51%,
+  100% {
+    opacity: 0.7;
+    transform: scale(0.95);
+  }
 }
 
 /* 战鼓部分 - 浮动并支持拖放 */
@@ -1234,7 +1246,7 @@ onUnmounted(() => {
   --drum-rotate: 5deg;
   --drum-brightness: 1.3;
   --drum-saturation: 1.2;
-  
+
   transform: scale(var(--drum-scale)) translateY(var(--drum-translate-y)) rotate(var(--drum-rotate));
   filter: brightness(var(--drum-brightness)) saturate(var(--drum-saturation));
   animation: drumBeat 0.1s ease-in-out;
@@ -1242,15 +1254,28 @@ onUnmounted(() => {
 
 /* 战鼓闲置时的轻微脉动动画 */
 @keyframes idlePulse {
-  0% { transform: scale(1); }
-  100% { transform: scale(1.05); }
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(1.05);
+  }
 }
 
 /* 增强跳动效果的关键帧动画 */
 @keyframes drumBeat {
-  0% { transform: scale(1); }
-  50% { transform: scale(var(--drum-scale, 1.3)) translateY(var(--drum-translate-y, -15px)) rotate(var(--drum-rotate, 5deg)); }
-  100% { transform: scale(1); }
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(var(--drum-scale, 1.3)) translateY(var(--drum-translate-y, -15px)) rotate(var(--drum-rotate, 5deg));
+  }
+
+  100% {
+    transform: scale(1);
+  }
 }
 
 .trophy {
@@ -1258,8 +1283,13 @@ onUnmounted(() => {
 }
 
 @keyframes bounce {
-  from { transform: translateY(0); }
-  to { transform: translateY(-10px); }
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(-10px);
+  }
 }
 
 /* 按钮样式 */
@@ -1355,6 +1385,7 @@ onUnmounted(() => {
   0% {
     text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
   }
+
   100% {
     text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.8);
   }
@@ -1425,20 +1456,23 @@ onUnmounted(() => {
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
 }
 
-/* 前三名特殊背景色，增强亮度和对比度 */
-.table-row:nth-child(1) {
+/* 前三名特殊背景色，增强亮度和对比度 - 确保英雄排名和战区排名样式一致 */
+.team-rankings-container .table-row:nth-child(1),
+.individual-rankings-container .table-row:nth-child(1) {
   background: linear-gradient(135deg, #ffd700, #ffed4a);
   color: #333;
   box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
 }
 
-.table-row:nth-child(2) {
+.team-rankings-container .table-row:nth-child(2),
+.individual-rankings-container .table-row:nth-child(2) {
   background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
   color: #333;
   box-shadow: 0 6px 20px rgba(192, 192, 192, 0.4);
 }
 
-.table-row:nth-child(3) {
+.team-rankings-container .table-row:nth-child(3),
+.individual-rankings-container .table-row:nth-child(3) {
   background: linear-gradient(135deg, #cd7f32, #d7ccc8);
   color: #333;
   box-shadow: 0 6px 20px rgba(205, 127, 50, 0.4);
@@ -1474,12 +1508,12 @@ onUnmounted(() => {
 }
 
 /* 浮动管理员入口 */
-  .admin-entry-float {
-    position: fixed;
-    bottom: 20px;
-    left: 20px;
-    z-index: 1000;
-  }
+.admin-entry-float {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  z-index: 1000;
+}
 
 /* 管理员按钮使用通用按钮样式 */
 .admin-entry-float .btn-game-secondary {
@@ -1491,6 +1525,7 @@ onUnmounted(() => {
 
 /* 针对高度大于1080分辨率的精确优化 */
 @media (min-height: 1080px) {
+
   /* 优化表格布局 - 设置高度确保只显示5行 */
   .rank-table {
     min-height: 280px !important;
@@ -1498,13 +1533,13 @@ onUnmounted(() => {
     margin: 0 auto;
     width: 100%;
   }
-  
+
   /* 优化表格行高，确保5行内容完美显示 */
   .table-row {
     min-height: 38px;
     padding: 10px;
   }
-  
+
   /* 优化前三名特殊样式 */
   .table-row:nth-child(1),
   .table-row:nth-child(2),
@@ -1514,7 +1549,29 @@ onUnmounted(() => {
 }
 
 /* 移动端背景图片设置 - 全局样式 */
-@media (max-width: 768px) {
+  @media (max-width: 768px) {
+    
+    /* 战区排名容器设置 - 禁止滚动 */
+    .team-rankings-container .rank-table {
+      overflow: hidden;
+      position: relative;
+      min-height: auto;
+    }
+    
+    /* 确保前三名特殊样式在移动端正确显示 */
+    .team-rankings-container .table-row.top-three {
+      transform: scale(1);
+      box-shadow: none;
+      position: static;
+    }
+    
+    .team-rankings-container .table-row:nth-child(1),
+    .team-rankings-container .table-row:nth-child(2),
+    .team-rankings-container .table-row:nth-child(3) {
+      box-shadow: none;
+      z-index: 1;
+    }
+
   /* 1. 背景图片全屏显示并固定 */
   .battle-ranking {
     padding: 0 !important;
@@ -1525,30 +1582,31 @@ onUnmounted(() => {
     background-attachment: fixed;
     min-height: 100vh;
   }
-  
+
   /* 移除原有卡片背景，让内容在背景图上显示 */
   .card-game {
     background: transparent;
     box-shadow: none;
   }
-  
+
   /* 主题部分调整 */
   .theme-section {
     width: 100%;
     margin: 0;
     padding: 0;
   }
-  
+
   .banner-image {
     width: 100%;
     height: auto;
   }
-  
+
   /* 战鼓部分调整 */
   .drums-section {
-    transform: scale(0.8); /* 缩小战鼓元素 */
+    transform: scale(0.8);
+    /* 缩小战鼓元素 */
   }
-  
+
   /* 2. 倒计时模块调整 - 移至冠军战区上方，缩小时间显示为一行 */
   .timer-float {
     position: relative;
@@ -1562,13 +1620,13 @@ onUnmounted(() => {
     color: white;
     text-align: center;
   }
-  
+
   .timer-float .label {
     font-size: 0.9rem;
     display: block;
     margin-bottom: 5px;
   }
-  
+
   .countdown {
     display: flex;
     justify-content: center;
@@ -1576,7 +1634,7 @@ onUnmounted(() => {
     gap: 8px;
     flex-wrap: nowrap;
   }
-  
+
   .time-item {
     font-size: 0.85rem;
     padding: 4px 6px;
@@ -1584,38 +1642,39 @@ onUnmounted(() => {
     border-radius: 4px;
     border: 1px solid rgba(255, 215, 0, 0.5);
   }
-  
+
   /* 任务设置调整 */
   .task-settings-section {
-    margin-top: -100px; /* 调整负边距 */
+    margin-top: -100px;
+    /* 调整负边距 */
   }
-  
+
   .task-title-container {
     padding: 15px;
   }
-  
+
   .task-title-container .game-title {
     font-size: 1.6rem;
   }
-  
+
   .task-title-container .game-title-highlight {
     font-size: 2rem;
   }
-  
+
   .task-title-container .game-subtitle {
     font-size: 1rem;
   }
-  
+
   /* 排名部分调整 */
   .rankings-section {
     margin: 0 10px 20px 10px;
   }
-  
+
   .rankings-container {
     flex-direction: column;
     gap: 10px;
   }
-  
+
   .individual-rankings,
   .team-rankings {
     min-width: auto;
@@ -1624,30 +1683,31 @@ onUnmounted(() => {
     display: flex;
     flex-direction: column;
   }
-  
+
   /* 将倒计时移动到冠军上方的位置 */
   .team-rankings {
     order: -1;
   }
-  
+
   .team-rankings-container,
   .individual-rankings-container {
     padding: 10px;
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.95);
   }
-    
+
   /* 表格调整 */
   .rank-table {
     min-height: 250px;
-    max-height: 250px;
-    overflow-x: auto; /* 允许横向滚动 */
+    /* 移除最大高度限制，允许显示所有行 */
+    overflow-x: auto;
+    /* 允许横向滚动 */
   }
-  
+
   .table-header {
     font-size: 1rem;
     padding: 8px 6px;
-    min-width: 500px;    
+    min-width: 500px;
   }
 
   .table-row {
@@ -1655,14 +1715,14 @@ onUnmounted(() => {
     padding: 8px 6px;
     min-width: 500px;
   }
-  
+
   /* 冠军部分调整 */
   .team-champion,
   .individual-champion {
     transform: scale(0.9);
     margin: 5px 0;
   }
-  
+
   /* 管理员入口调整 */
   .admin-entry-float {
     position: relative;
@@ -1671,12 +1731,12 @@ onUnmounted(() => {
     margin: 10px;
     text-align: center;
   }
-  
+
   .btn-game-secondary {
     padding: 10px 15px;
     font-size: 0.9rem;
   }
-  
+
   /* 3. 奖金模块调整 - 移至底部显示 */
   .bonus-section {
     position: fixed;
@@ -1691,30 +1751,30 @@ onUnmounted(() => {
     transition: transform 0.3s ease;
     box-shadow: none;
   }
-  
+
   .bonus-awards-container {
     display: flex;
     justify-content: space-around;
     align-items: center;
   }
-  
+
   .award-image {
     height: 120px;
     width: auto;
   }
-  
+
   /* 确保重要内容优先显示 */
   .rank-col,
   .name-col,
   .score-col {
     font-weight: bold;
   }
-  
+
   /* 为底部奖金模块留出空间 */
   .admin-entry-float {
     margin-bottom: 100px;
   }
-  
+
   /* 针对极小屏幕的特殊处理 */
   @media (max-width: 480px) {
     .table-header {
@@ -1728,23 +1788,23 @@ onUnmounted(() => {
       font-size: 0.75rem;
       padding: 6px 4px;
     }
-    
+
     .game-title {
       font-size: 1.4rem;
     }
-    
+
     .game-title-highlight {
       font-size: 1.7rem;
     }
-    
+
     .award-image {
       height: 120px;
     }
-    
+
     .countdown {
       gap: 6px;
     }
-    
+
     .time-item {
       font-size: 0.8rem;
       padding: 3px 5px;
@@ -1754,18 +1814,19 @@ onUnmounted(() => {
 
 /* 触摸设备优化 */
 @media (hover: none) and (pointer: coarse) {
+
   /* 增大点击区域 */
   .btn-game-secondary {
     padding: 12px 24px;
     font-size: 1rem;
   }
-  
+
   /* 移除hover效果，添加触摸反馈 */
   .table-row:active {
     background-color: rgba(255, 255, 255, 0.95);
     transform: scale(1.01);
   }
-  
+
   .btn-game-secondary:active {
     transform: scale(0.98);
   }
@@ -1788,7 +1849,6 @@ onUnmounted(() => {
     z-index: 100;
     cursor: move;
     transition: transform 0.2s ease;
-  }  
+  }
 }
-
 </style>
\ No newline at end of file