1v1流程调试完成

src/components/BattleHeader.vue

@@ -1,9 +1,18 @@
 <script setup>
+import Avatar from "@/components/Avatar.vue";
 defineProps({
   isMelee: {
     type: Boolean,
     default: false,
   },
+  blueTeam: {
+    type: Array,
+    default: () => [],
+  },
+  redTeam: {
+    type: Array,
+    default: () => [],
+  },
 });
 </script>
 
@@ -18,18 +27,12 @@ defineProps({
     </view>
     <view v-if="!isMelee" class="players">
       <view>
-        <view class="avatar">
-          <image src="../static/avatar-frame.png" mode="widthFix" />
-          <image src="../static/avatar.png" mode="widthFix" />
-        </view>
-        <text>选手1</text>
+        <Avatar v-if="blueTeam[0]" :src="blueTeam[0].avatar" frame />
+        <text>{{ blueTeam[0].name }}</text>
       </view>
       <view>
-        <view class="avatar">
-          <image src="../static/avatar-frame.png" mode="widthFix" />
-          <image src="../static/avatar.png" mode="widthFix" />
-        </view>
-        <text>选手2</text>
+        <Avatar v-if="redTeam[0]" :src="redTeam[0].avatar" frame />
+        <text>{{ redTeam[0].name }}</text>
       </view>
     </view>
   </view>
@@ -59,6 +62,7 @@ defineProps({
   color: #fff9;
   font-size: 14px;
   padding-top: 20px;
+  overflow: hidden;
 }
 .players > view:first-child {
   background-color: #364469;
@@ -66,21 +70,4 @@ defineProps({
 .players > view:last-child {
   background-color: #692735;
 }
-.avatar {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 5px 0;
-}
-.avatar > image:first-child {
-  position: absolute;
-  width: 55px;
-  height: 55px;
-}
-.avatar > image {
-  width: 45px;
-  height: 45px;
-  border-radius: 50%;
-}
 </style>