src/data/mockData.js

@@ -100,7 +100,6 @@ export const validateUser = (username, password) => {
 export const initializeData = async () => {
   try {
     await refreshData();
-    console.log('数据初始化成功');
   } catch (error) {
     console.error('数据初始化失败:', error);
   }

src/views/AdminPanel.vue

@@ -177,6 +177,104 @@
                 </div>
               </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">
+                </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">
+                </div>
+                <div class="column-width-item">
+                  <label class="text-gold">姓名：</label>
+                  <input type="number" v-model.number="localDisplayConfig.individual.columnWidths.name" min="40" max="300" class="width-input">
+                </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">
+                </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">
+                </div>
+                <div class="column-width-item" v-if="localDisplayConfig.individual.showDepartment">
+                  <label class="text-gold">部门：</label>
+                  <select v-model.number="localDisplayConfig.individual.columnWidths.department" class="width-select">
+                    <option :value="1">自动填充</option>
+                    <option value="100">100px</option>
+                    <option value="150">150px</option>
+                    <option value="200">200px</option>
+                  </select>
+                </div>
+                <div class="column-width-item">
+                  <label class="text-gold">战区：</label>
+                  <input type="number" v-model.number="localDisplayConfig.individual.columnWidths.team" min="10" max="300" class="width-input">
+                </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">
+                </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">
+                  <span class="text-gold">显示人数列</span>
+                </label>
+              </div>
+              <div class="config-item">
+                <label class="checkbox-label">
+                  <input type="checkbox" v-model="localDisplayConfig.team.showLeader">
+                  <span class="text-gold">显示队长列</span>
+                </label>
+              </div>
+              <div class="config-item">
+                <label class="checkbox-label">
+                  <input type="checkbox" v-model="localDisplayConfig.team.filterZeroScore">
+                  <span class="text-gold">过滤业绩为0的记录</span>
+                </label>
+              </div>
+              <div class="config-item">
+                <label class="checkbox-label">
+                  <span class="text-gold">移动端默认显示行数：</span>
+                  <input type="number" v-model.number="localDisplayConfig.team.defaultDisplayRows" min="0" max="50" class="number-input" placeholder="留空或0表示显示所有行">
+                </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">
+                </label>
+              </div>
+              <div class="config-item">
+                <label class="checkbox-label">
+                  <span class="text-gold">业绩显示样式：</span>
+                  <select v-model="localDisplayConfig.team.totalScoreColumn.displayStyle" class="select-input">
+                    <option value="amount">金额（带¥符号）</option>
+                    <option value="number">普通数字</option>
+                  </select>
+                </label>
+              </div>
               <div class="column-alignment-section">
                 <h4 style="color: #007bff;">战区排名列表-列对齐设置</h4>
                 <div class="column-alignment-item">
@@ -232,141 +330,30 @@
               <div class="column-widths-section">
                 <h4 class="text-gold">列宽设置（单位：像素）</h4>
                 <div class="column-width-item">
-                  <label class="text-gold">排名列：</label>
+                  <label class="text-gold">排名：</label>
-                  <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">
-                </div>
-                <div class="column-width-item">
-                  <label class="text-gold">姓名列：</label>
-                  <select v-model.number="localDisplayConfig.individual.columnWidths.name" class="width-select">
-                    <option :value="1">自动填充</option>
-                    <option value="100">100px</option>
-                    <option value="150">150px</option>
-                    <option value="200">200px</option>
-                    <option value="250">250px</option>
-                  </select>
-                </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">
-                </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">
-                </div>
-                <div class="column-width-item" v-if="localDisplayConfig.individual.showDepartment">
-                  <label class="text-gold">部门列：</label>
-                  <select v-model.number="localDisplayConfig.individual.columnWidths.department" class="width-select">
-                    <option :value="1">自动填充</option>
-                    <option value="100">100px</option>
-                    <option value="150">150px</option>
-                    <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">
-                </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">
-                  <span class="text-gold">显示人数列</span>
-                </label>
-              </div>
-              <div class="config-item">
-                <label class="checkbox-label">
-                  <input type="checkbox" v-model="localDisplayConfig.team.showLeader">
-                  <span class="text-gold">显示队长列</span>
-                </label>
-              </div>
-              <div class="config-item">
-                <label class="checkbox-label">
-                  <input type="checkbox" v-model="localDisplayConfig.team.filterZeroScore">
-                  <span class="text-gold">过滤业绩为0的记录</span>
-                </label>
-              </div>
-              <div class="config-item">
-                <label class="checkbox-label">
-                  <span class="text-gold">移动端默认显示行数：</span>
-                  <input type="number" v-model.number="localDisplayConfig.team.defaultDisplayRows" min="0" max="50" class="number-input" placeholder="留空或0表示显示所有行">
-                </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">
-                </label>
-              </div>
-              <div class="config-item">
-                <label class="checkbox-label">
-                  <span class="text-gold">业绩显示样式：</span>
-                  <select v-model="localDisplayConfig.team.totalScoreColumn.displayStyle" class="select-input">
-                    <option value="amount">金额（带¥符号）</option>
-                    <option value="number">普通数字</option>
-                  </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">
                 </div>
                 <div class="column-width-item">
-                  <label class="text-gold">战区名列：</label>
+                  <label class="text-gold">战区名：</label>
-                  <select v-model.number="localDisplayConfig.team.columnWidths.name" class="width-select">
+                  <input type="number" v-model.number="localDisplayConfig.team.columnWidths.name" min="100" max="400" class="width-input">
-                    <option :value="1">自动填充</option>
-                    <option value="150">150px</option>
-                    <option value="200">200px</option>
-                    <option value="250">250px</option>
-                    <option value="300">300px</option>
-                  </select>
                 </div>
                 <div class="column-width-item">
-                  <label class="text-gold">业绩列：</label>
+                  <label class="text-gold">业绩：</label>
                   <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>
+                  <label class="text-gold">人数：</label>
                   <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>
+                  <label class="text-gold">队长：</label>
-                  <select v-model.number="localDisplayConfig.team.columnWidths.leader" class="width-select">
+                  <input type="number" v-model.number="localDisplayConfig.team.columnWidths.leader" min="80" max="250" class="width-input">
-                    <option :value="1">自动填充</option>
-                    <option value="100">100px</option>
-                    <option value="150">150px</option>
-                    <option value="200">200px</option>
-                  </select>
                 </div>
                 <div class="column-width-item">
-                  <label class="text-gold">奖金列：</label>
+                  <label class="text-gold">奖金：</label>
                   <input type="number" v-model.number="localDisplayConfig.team.columnWidths.bonus" min="60" max="200"
                     class="width-input">
                 </div>

src/views/BattleRanking.vue

@@ -53,8 +53,7 @@
               <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
+              <img v-else src="/crown.png" alt="战区冠军" class="champion-logo" />
-                :style="{ fontSize: localDisplayConfig.championLogos?.teamChampionSize ? (localDisplayConfig.championLogos.teamChampionSize * 0.8) + 'px' : '2rem' }">🏅</span>
             </div>
             <div class="champion-name">
               {{ teamRankings[0]?.name || '暂无冠军' }}
@@ -105,10 +104,13 @@
                 <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
+                <div v-else class="champion-log">
+                  <span 
                   :style="{ fontSize: localDisplayConfig.championLogos?.individualChampionSize ? (localDisplayConfig.championLogos.individualChampionSize * 0.8) + 'px' : '2rem' }">
                   {{ filteredIndividualRankings[0]?.avatar || '👤' }}
                 </span>
+                </div>                 
+
               </div>
               <div class="champion-name">
                 {{ filteredIndividualRankings[0]?.name || '暂无冠军' }}
@@ -363,18 +365,15 @@ onBeforeMount(async () => {
       if (config.displayConfig) {
         const configCopy = JSON.parse(JSON.stringify(config.displayConfig));
         localDisplayConfig.value = mergeConfig(defaultDisplayConfig, configCopy);
-        
-        console.log('localDisplayConfig.value =', localDisplayConfig.value);
       }
-
-      console.log('成功从服务器加载最新数据');
     }
   } catch (error) {
     console.error('加载数据失败:', error);
   }
 });
 
-// 确保原有onMounted逻辑不被覆盖
+// 定义每行默认高度
+const tableRowHeight = 50;
 
 // 更新CSS变量，将默认显示行数传递给样式
 watch(
@@ -390,13 +389,13 @@ watch(
   () => localDisplayConfig.value?.team?.defaultDisplayRows,
   (newValue) => {
     if (newValue && newValue > 0) {
-      document.documentElement.style.setProperty('--team-default-height', `calc(60px * ${newValue})`);
+      document.documentElement.style.setProperty('--team-default-height', `calc(${tableRowHeight}px * ${newValue})`);
       document.documentElement.style.setProperty('--team-overflow-y', 'auto');
       document.documentElement.style.setProperty('--team-overflow-x', 'auto');
       document.documentElement.style.setProperty('--team-scroll-lock', '');
     } else {
-      // 根据实际数据条数计算高度，每行60px，加上一些额外空间（20px）
+      // 根据实际数据条数计算高度，每行tableRowHeight，加上一些额外空间（20px）
-      const actualHeight = teamRankings.value.length * 60 + 20;
+      const actualHeight = teamRankings.value.length * tableRowHeight + 20;
       document.documentElement.style.setProperty('--team-default-height', `${actualHeight}px`);
       document.documentElement.style.setProperty('--team-overflow-y', 'hidden');
       document.documentElement.style.setProperty('--team-overflow-x', 'hidden');
@@ -412,8 +411,8 @@ watch(
   () => {
     const displayRows = localDisplayConfig.value?.team?.defaultDisplayRows;
     if (!displayRows || displayRows === 0) {
-      // 根据实际数据条数计算高度，每行60px，加上一些额外空间（20px）
+      // 根据实际数据条数计算高度，每行tableRowHeight，加上一些额外空间（20px）
-      const actualHeight = teamRankings.value.length * 60 + 20;
+      const actualHeight = teamRankings.value.length * tableRowHeight + 20;
       document.documentElement.style.setProperty('--team-default-height', `${actualHeight}px`);
       document.documentElement.style.setProperty('--team-overflow-y', 'hidden');
       document.documentElement.style.setProperty('--team-overflow-x', 'hidden');
@@ -1014,7 +1013,6 @@ onUnmounted(() => {
 /* 皇冠动画效果 */
 .crown-animation {
   position: absolute;
-  top: -70px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 10;
@@ -1061,6 +1059,7 @@ onUnmounted(() => {
 
 .champion-logo {
   object-fit: contain;
+  max-width: 120px;
 }
 
 .avatar-image {
@@ -1140,6 +1139,10 @@ onUnmounted(() => {
 
 /* 响应式设计 */
 @media (max-width: 768px) {
+  /** 皇冠动画 */
+  .crown-animation {
+    top: -120px;
+  }  
 
   /* 隐藏倒计时模块 */
   .timer-float {
@@ -1759,6 +1762,10 @@ onUnmounted(() => {
       white-space: normal !important;
     }
       
+    .individual-rankings {
+      margin-top: 60px; /* 增加排名列表的顶部间距 */
+    }
+    
     /* 英雄排名容器设置 - 允许垂直滚动，设置默认高度显示多行 */
     .individual-rankings-container .rank-table {
       overflow-y: auto;