排位赛内容完善

src/components/BattleHeader.vue

@@ -1,9 +1,9 @@
 <script setup>
 import Avatar from "@/components/Avatar.vue";
 defineProps({
-  isMelee: {
-    type: Boolean,
-    default: false,
+  players: {
+    type: Array,
+    default: () => [],
   },
   blueTeam: {
     type: Array,
@@ -14,22 +14,30 @@ defineProps({
     default: () => [],
   },
 });
+const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2 "];
 </script>
 
 <template>
   <view class="container">
     <image
-      :src="`../static/battle-header${isMelee ? '-melee' : ''}.png`"
+      :src="`../static/battle-header${blueTeam.length ? '' : '-melee'}.png`"
       mode="widthFix"
     />
-    <view v-if="isMelee" class="players-melee">
-      <view></view>
+    <view v-if="!blueTeam.length" class="players-melee">
+      <view
+        v-for="(player, index) in players"
+        :key="index"
+        :style="{ backgroundColor: bgColors[index] }"
+      >
+        <Avatar :src="player.avatar" :size="40" />
+        <text class="player-name">{{ player.name }}</text>
+      </view>
     </view>
-    <view v-if="!isMelee" class="players">
+    <view v-if="blueTeam.length" class="players">
       <view>
         <block v-if="blueTeam[0]">
           <Avatar :src="blueTeam[0].avatar" frame />
-          <text>{{ blueTeam[0].name }}</text>
+          <text class="player-name">{{ blueTeam[0].name }}</text>
           <image
             v-if="blueTeam[0].winner"
             src="../static/winner-badge.png"
@@ -57,6 +65,7 @@ defineProps({
   width: 100%;
   position: relative;
   margin-bottom: 10px;
+  padding-top: 5px;
 }
 .container > image:first-child {
   position: absolute;
@@ -69,17 +78,17 @@ defineProps({
 }
 .players > view {
   width: 50%;
-  height: 80px;
+  height: 85px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: #fff9;
   font-size: 14px;
-  margin-top: 20px;
-  padding-top: 5px;
+  margin-top: 15px;
   overflow: hidden;
   position: relative;
+  padding-top: 5px;
 }
 .players > view:first-child {
   background-color: #364469;
@@ -87,13 +96,35 @@ defineProps({
 .players > view:last-child {
   background-color: #692735;
 }
-.players > view > text {
-  margin-top: 5px;
-}
 .players > view > image:last-child {
   position: absolute;
   width: 60px;
   right: 0;
   bottom: 0;
 }
+.players-melee {
+  display: flex;
+  height: 85px;
+  width: 100%;
+  background-color: #364469;
+  margin-top: 15px;
+}
+.players-melee > view {
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #fff9;
+  font-size: 14px;
+  padding-top: 5px;
+}
+.player-name {
+  margin-top: 5px;
+  width: 80%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
 </style>