UI优化

src/pages/match-detail.vue

@@ -6,13 +6,15 @@ import BattleHeader from "@/components/BattleHeader.vue";
 import Avatar from "@/components/Avatar.vue";
 import TeamResult from "@/components/TeamResult.vue";
 import MeleeResult from "@/components/MeleeResult.vue";
+import PlayerScore from "@/components/PlayerScore.vue";
 import { getGameAPI } from "@/apis";
 
 const blueTeam = ref([]);
 const redTeam = ref([]);
-const players = ref([]);
 const roundsData = ref([]);
-const data = ref({});
+const data = ref({
+  players: [],
+});
 const show = ref(false);
 
 onLoad(async (options) => {
@@ -46,8 +48,6 @@ onLoad(async (options) => {
           },
         });
       });
-    } else if (result.mode === 2) {
-      players.value = result.players;
     }
   }
 });
@@ -60,7 +60,7 @@ onLoad(async (options) => {
         :winner="data.winner"
         :blueTeam="blueTeam"
         :redTeam="redTeam"
-        :players="players"
+        :players="data.players"
         :showRank="true"
       />
       <!-- <view class="score-header">
@@ -87,7 +87,25 @@ onLoad(async (options) => {
           <text>7环</text>
         </view>
       </view> -->
-      <view v-if="players.length" @click="() => (show = true)">查看靶纸</view>
+      <view
+        v-if="data.players && data.players.length"
+        class="score-header"
+        :style="{ border: 'none', padding: '5px 15px' }"
+      >
+        <text>大乱斗</text>
+        <view @click="() => (show = true)">
+          <text>查看靶纸</text>
+          <image src="../static/back.png" mode="widthFix" />
+        </view>
+      </view>
+      <PlayerScore
+        v-if="data.players && data.players.length"
+        v-for="(player, index) in data.players"
+        :key="index"
+        :name="player.name"
+        :avatar="player.avatar"
+        :scores="player.arrowHistory"
+      />
       <view
         v-for="(round, index) in roundsData"
         :key="index"