大乱斗详情UI更新

src/components/BattleHeader.vue

@@ -1,5 +1,6 @@
 <script setup>
 import Avatar from "@/components/Avatar.vue";
+import { meleeAvatarColors } from "@/constants";
 defineProps({
   players: {
     type: Array,
@@ -22,7 +23,6 @@ defineProps({
     default: 2,
   },
 });
-const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2"];
 </script>
 
 <template>
@@ -35,7 +35,10 @@ const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2"];
       <view
         v-for="(player, index) in players"
         :key="index"
-        :style="{ backgroundColor: bgColors[index] }"
+        :style="{
+          backgroundColor: meleeAvatarColors[index],
+          width: `${Math.max(100 / players.length, 18)}vw`,
+        }"
       >
         <Avatar
           :src="player.avatar"
@@ -114,11 +117,10 @@ const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2"];
   display: flex;
   height: 85px;
   width: 100%;
-  background-color: #364469;
   margin-top: 15px;
+  overflow-x: auto;
 }
 .players-melee > view {
-  width: 20%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -126,6 +128,7 @@ const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2"];
   color: #fff9;
   font-size: 12px;
   padding-top: 5px;
+  flex: 0 0 auto;
 }
 .player-name {
   margin-top: 5px;