把战区排名和英雄排名的框本调整对齐了

src/views/BattleRanking.vue

@@ -94,7 +94,6 @@
   <div class="individual-avatar champion-container">
     <div class="crown-animation" :class="{'crown-animation-run': localDisplayConfig.crown?.animationEnabled}" v-if="filteredIndividualRankings.length > 0" :style="{
       fontSize: (localDisplayConfig.crown?.size || localDisplayConfig.championLogos?.individualChampionSize * 0.8) + 'px'
-                  // transform: 'translateX(-50%)'
     }">
       👑
     </div>
@@ -110,8 +109,8 @@
       {{ filteredIndividualRankings[0]?.avatar || '👤' }}
     </span>
     </div>                 
-
   </div>
+  <!-- 确保名字容器不被遮挡，样式已在下方优化 -->
   <div class="champion-name">
     {{ filteredIndividualRankings[0]?.name || '暂无冠军' }}
   </div>
@@ -973,7 +972,8 @@ onUnmounted(() => {
   border-radius: 50%;
 }
 
-/* 冠军模块样式 */
+/* 冠军模块样式（已修改：统一两个冠军区高度） */
+/* 冠军模块样式（修改后：统一两个冠军区高度，确保名字显示） */
 .champion-section {
   display: flex;
   justify-content: space-between;
@@ -981,6 +981,7 @@ onUnmounted(() => {
   gap: 20px;
 }
 
+/* 核心修改：固定两个冠军区高度，确保对齐+名字不被遮挡 */
 .team-champion,
 .individual-champion {
   display: flex;
@@ -988,67 +989,73 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   text-align: center;
-  padding: 15px;
+  padding: 15px 15px 10px; /* 优化内边距，底部留足名字空间 */
   margin-bottom: 10px;
+  height: 130px; /* 固定总高度，两个区域完全一致 */
+  box-sizing: border-box; /* 确保padding不撑高容器 */
 }
 
 .team-logo {
   font-size: 2rem;
-  margin-bottom: 5px;
-  display: inline-block;
+  margin-bottom: 8px; /* 增加与名字的间距 */
+  display: inline-flex; /* 改为flex确保居中 */
+  align-items: center;
+  justify-content: center;
   color: gold;
+  width: 80px; /* 与英雄头像容器宽度一致 */
+  height: 80px; /* 与英雄头像容器高度一致 */
 }
 
+/* 核心修改：统一英雄头像容器尺寸，不遮挡名字 */
 .individual-avatar {
   font-size: 2rem;
-  margin-bottom: 5px;
-  display: inline-block;
+  margin-bottom: 8px; /* 增加与名字的间距，关键！ */
+  display: inline-flex; /* 改为flex确保居中 */
+  align-items: center;
+  justify-content: center;
+  width: 80px; /* 与战区logo宽度一致 */
+  height: 80px; /* 与战区logo高度一致 */
 }
 
 /* 冠军头像容器 */
 .champion-container {
   position: relative;
-  display: inline-block;
+  display: inline-flex; /* 改为flex，确保头像居中 */
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
 }
 
-/* 皇冠动画效果 */
+/* 核心修改：优化王冠位置，不占用额外高度，不遮挡名字 */
 .crown-animation {
   position: absolute;
   left: 50%;
+  top: -18px; /* 向上偏移，远离头像和名字 */
   transform: translateX(-50%);
   z-index: 10;
   text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
-
+  font-size: 2rem; /* 固定大小，避免高度波动 */
 }
 
 .crown-animation-run {
   animation: crownFloat 2s ease-in-out infinite, crownGlow 3s ease-in-out infinite;
 }
 
-/* 皇冠浮动动画 */
+/* 皇冠浮动动画（保留原有，优化偏移） */
 @keyframes crownFloat {
   0% {
     transform: translateX(-50%) translateY(0) rotate(-10deg);
   }
   50% {
-    transform: translateX(-50%) translateY(-5px) rotate(10deg);
+    transform: translateX(-50%) translateY(-3px) rotate(10deg); /* 减小上下浮动幅度，避免遮挡 */
   }
   100% {
     transform: translateX(-50%) translateY(0) rotate(-10deg);
   }
 }
 
-/* 皇冠发光效果动画 */
-@keyframes crownGlow {
-  0%, 100% {
-    text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
-  }
-  50% {
-    text-shadow: 0 0 15px var(--gold-primary), 0 0 30px var(--gold-secondary), 0 0 40px var(--gold-tertiary);
-  }
-}
-
-
+/* 皇冠发光效果动画（去重，保留一个） */
 @keyframes crownGlow {
   0%, 100% {
     text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
@@ -1058,10 +1065,16 @@ onUnmounted(() => {
   }
 }
 
-.champion-logo {
+/* 核心修改：统一冠军logo/头像尺寸，不遮挡名字 */
+.champion-logo,
+.avatar-image-champion {
+  width: 80px;
+  height: 80px;
   object-fit: cover;
-  max-width: 120px;
   border-radius: 50%;
+  margin: 0; /* 清除额外边距 */
+  position: relative;
+  z-index: 5; /* 确保头像在王冠下方，不被遮挡 */
 }
 
 .avatar-image {
@@ -1078,12 +1091,18 @@ onUnmounted(() => {
   margin-bottom: 3px;
 }
 
+/* 核心修改：强化名字显示，确保不被截断/遮挡 */
 .champion-name {
-  font-size: 1.1rem;
+  font-size: 1.2rem; /* 增大字体，更醒目 */
   font-weight: bold;
   color: gold;
+  margin: 5px 0 0 0; /* 清除默认margin，顶部留小间距 */
+  line-height: 1.3; /* 固定行高 */
+  white-space: nowrap; /* 强制单行，避免换行撑高 */
+  text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* 增加阴影，提升可读性 */
+  z-index: 20; /* 确保名字在最上层，不被任何元素遮挡 */
+  position: relative;
 }
-
 /* 基础样式 */
 :root {
   --gold-primary: #ffd700;
@@ -1092,7 +1111,6 @@ onUnmounted(() => {
   --purple-secondary: #a29bfe;
 }
 
-
 /* 主题容器样式 - 添加居中对齐 */
 .theme-container {
   text-align: center;
@@ -1139,14 +1157,29 @@ onUnmounted(() => {
   /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); */
 }
 
-
 /* 响应式设计 */
 @media (max-width: 768px) {
-  /** 皇冠动画 */
+  /** 皇冠动画（修正位置，不撑高） */
   .crown-animation {
-    top: -120px;
+    top: -15px !important; /* 移动端向上偏移，避免遮挡 */
+    font-size: 1.8rem !important;
   }  
 
+  /* 核心修改：移动端统一冠军区高度 */
+  .team-champion,
+  .individual-champion {
+    height: 120px !important;
+    padding: 10px 10px 5px !important;
+  }
+
+  /* 移动端名字样式优化 */
+  .champion-name {
+    font-size: 1.1rem !important;
+    margin-top: 3px !important;
+  }
+
+  /* 其他原有移动端样式保持不变... */
+}
   /* 隐藏倒计时模块 */
   .timer-float {
     display: none !important;
@@ -1159,9 +1192,7 @@ onUnmounted(() => {
 
   /* 奖金模块垂直居中显示，两侧20px间距 */
   .bonus-section {
-    /* 背景全部取消设置 **/
     background: none !important;
-
     position: static !important;
     margin: 20px auto;
     width: calc(100% - 40px);
@@ -1188,7 +1219,6 @@ onUnmounted(() => {
   .timer-float .countdown {
     gap: 8px;
   }
-}
 
 @media (max-width: 480px) {
   .banner-image {
@@ -1528,19 +1558,24 @@ onUnmounted(() => {
 }
 
 .rankings-container {
-  display: flex;
+  display: flex !important;
+  flex-direction: row !important; /* 明确指定为水平排列 */
   gap: 15px;
-  flex-wrap: wrap;
+  flex-wrap: nowrap; /* 禁止换行，强制水平并列 */
   justify-content: center;
+  align-items: stretch; /* 强制两个排名框高度一致 */
   background: none;
   border: none;
+  /* 移除max-width和margin，让App.vue的rank-wrapper控制容器 */
+  width: 100%;
 }
 
 .individual-rankings,
 .team-rankings {
-  flex: 1;
-  min-width: 350px;
-  max-width: 550px;
+  flex: none; /* 取消平分宽度 */
+  width: 550px; /* 固定宽度，两个框完全一致 */
+  display: flex;
+  flex-direction: column;
 }
 
 /* 为指定的容器添加背景和边框 */
@@ -1733,7 +1768,6 @@ onUnmounted(() => {
 
 /* 针对高度大于1080分辨率的精确优化 */
 
-
 /* 移动端背景图片设置 - 全局样式 */
 @media (max-width: 768px) {
   
@@ -1943,17 +1977,21 @@ onUnmounted(() => {
 }
 
   .rankings-container {
-    flex-direction: column;
-    gap: 10px;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 20px; /* 增大垂直间距，避免拥挤 */
+    align-items: stretch; /* 移动端也让两个框体宽度占满 */
+    width: 100%;
   }
 
   .individual-rankings,
   .team-rankings {
-    min-width: auto;
-    width: 100%;
+  width: 550px; /* 移动端也保持固定宽度 */
+  max-width: 100%; /* 在小屏幕上可以自适应 */
   /* 调整顺序，确保倒计时在冠军上方 */
   display: flex;
   flex-direction: column;
+  margin: 0 auto; /* 居中显示 */
   }
 
 /* 将倒计时移动到冠军上方的位置 */
@@ -2160,7 +2198,6 @@ onUnmounted(() => {
   }
 }
 
-
 @media (min-width: 2000px) {
   .bonus-section {
     position: fixed;