chore: 根据新的需求，加入虎狼之师，英雄榜条幅

src/views/BattleRanking.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="battle-ranking">
+  <div>
     <!-- 第一部分：百日大战主题 - 使用banner0.png图片 -->
     <section class="theme-section card-game">
       <div class="theme-container">
@@ -61,6 +61,10 @@
 
         <!-- 战区排名 -->
         <div class="team-rankings">
+          <!-- 战区排名宣传语 -->
+          <div class="team-rankings-propagation">
+            <img src="/team-propagation.png" alt="虎狼之师" class="team-rankings-propagation-image">
+          </div>
           <!-- 战区冠军 -->
           <div class="team-champion">
             <div class="team-logo" :class="{ 'photo-container': localDisplayConfig.championLogos?.teamChampionType === 'photo' }">
@@ -113,6 +117,10 @@
         </div>
 
         <div class="individual-rankings">
+          <!-- 英雄排名宣传语 -->
+          <div class="individual-rankings-propagation">
+            <img src="/individual-propagation.png" alt="虎狼之师" class="individual-rankings-propagation-image">
+          </div>          
           <!-- 英雄冠军 -->
           <div class="individual-champion">
               <div class="champion-content">
@@ -226,6 +234,12 @@ function createDefaultDisplayConfig() {
       individualChampion: '',
       individualChampionSize: 60
     },
+    crownPosition: {
+      top: -100, // 皇冠位置的top值，默认-100px
+      left: null, // 皇冠位置的left值，默认null（使用居中）
+      right: null, // 皇冠位置的right值，默认null
+      bottom: null // 皇冠位置的bottom值，默认null
+    },
     subtitleImage: {
       src: '/completed_performance.png',
       width: 200,
@@ -430,9 +444,7 @@ onBeforeMount(async () => {
 // 定义英雄排名表中每行默认高度
 const tableIndividualTopThreeHeight = 3 * 47.5; // 前三名高度px
 const tableIndividualRowHeight = 34.5; // 其他行高度px
-const tableIndividualReserveHeight = 20; // 保留空间高度px
-
-
+const tableIndividualReserveHeight = 10; // 保留空间高度px
 
 // 更新CSS变量，将默认显示行数传递给样式
 watch(
@@ -540,6 +552,43 @@ watch(
   { immediate: true, deep: true }
 );
 
+// 监听皇冠位置配置变化，更新皇冠位置
+watch(
+  () => localDisplayConfig.value?.crownPosition,
+  (newConfig) => {
+    if (newConfig) {
+      // 更新top值
+      if (newConfig.top !== null && newConfig.top !== undefined) {
+        document.documentElement.style.setProperty('--crown-top', newConfig.top + 'px');
+      } else {
+        document.documentElement.style.removeProperty('--crown-top');
+      }
+      
+      // 更新left值
+      if (newConfig.left !== null && newConfig.left !== undefined) {
+        document.documentElement.style.setProperty('--crown-left', newConfig.left + 'px');
+      } else {
+        document.documentElement.style.removeProperty('--crown-left');
+      }
+      
+      // 更新right值
+      if (newConfig.right !== null && newConfig.right !== undefined) {
+        document.documentElement.style.setProperty('--crown-right', newConfig.right + 'px');
+      } else {
+        document.documentElement.style.removeProperty('--crown-right');
+      }
+      
+      // 更新bottom值
+      if (newConfig.bottom !== null && newConfig.bottom !== undefined) {
+        document.documentElement.style.setProperty('--crown-bottom', newConfig.bottom + 'px');
+      } else {
+        document.documentElement.style.removeProperty('--crown-bottom');
+      }
+    }
+  },
+  { deep: true, immediate: true }
+);
+
 // 确保奖金规则有默认值
 const displayBonusRules = computed(() => {
   return Array.isArray(bonusRules) && bonusRules.length > 0
@@ -1133,11 +1182,13 @@ onUnmounted(() => {
 /* 皇冠动画效果 */
 .crown-animation {
   position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
+  left: var(--crown-left, 50%);
+  right: var(--crown-right, auto);
+  top: var(--crown-top, -100px);
+  bottom: var(--crown-bottom, auto);
+  transform: var(--crown-left, translateX(-50%));
   z-index: 10;
   text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
-
 }
 
 .crown-animation-run {
@@ -1272,15 +1323,18 @@ onUnmounted(() => {
 
 /* 响应式设计 */
 @media (max-width: 768px) {
+
   .total-score-total-image {
     width: 320px;
   }
 
+  .team-rankings-propagation-image {
+    width: 320px;
+  }
 
-  /** 皇冠动画 */
-  .crown-animation {
-    top: -120px;
-  }  
+  .individual-rankings-propagation-image {
+    width: 320px;
+  }
 
   /* 隐藏倒计时模块 */
   .timer-float {
@@ -1387,23 +1441,7 @@ onUnmounted(() => {
   border: 0;
 }
 
-/* 主容器 */
-.battle-ranking {
-  min-height: 100vh;
-  position: relative;
-}
 
-/* 背景覆盖层，确保文本可读性 */
-.battle-ranking::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: transparent;
-  z-index: -1;
-}
 
 /* 主题部分 */
 .theme-section {
@@ -1922,6 +1960,7 @@ onUnmounted(() => {
 /* 照片容器样式 */
 .team-logo.photo-container {
   overflow: hidden;
+  margin-top: -40px;
 }
 
 .individual-champion {
@@ -1933,6 +1972,18 @@ onUnmounted(() => {
   gap: 30px;
 }
 
+.team-rankings-propagation {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.individual-rankings-propagation {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
 @media (max-width: 768px) {
 
     .total-score-total-title {
@@ -1968,6 +2019,11 @@ onUnmounted(() => {
       overflow-x: visible !important;
       white-space: normal !important;
     }
+
+    .individual-rankings-propagation {
+      margin-top: -40px;
+      padding-bottom: 40px;
+    }
       
     .individual-rankings {
       margin-top: 60px; /* 增加排名列表的顶部间距 */
@@ -2067,17 +2123,6 @@ onUnmounted(() => {
     height: 0; /* 隐藏水平滚动条 */
   }
 
-  /* 1. 背景图片全屏显示并固定 */
-  .battle-ranking {
-    padding: 0 !important;
-    margin-top: 50px;
-    background-image: url('/battle-background.jpg');
-    background-size: cover;
-    background-position: center;
-    background-attachment: fixed;
-    min-height: 100vh;
-  }
-
   /* 移除原有卡片背景，让内容在背景图上显示 */
   .card-game {
     background: transparent;