大乱斗详情UI调整

src/components/PlayerScore2.vue

@@ -0,0 +1,158 @@
+<script setup>
+defineProps({
+  avatar: {
+    type: String,
+    default: "",
+  },
+  name: {
+    type: String,
+    default: "",
+  },
+  scores: {
+    type: Array,
+    default: () => [],
+  },
+  rank: {
+    type: Number,
+    default: 0,
+  },
+  totalScore: {
+    type: Number,
+    default: 0,
+  },
+  totalRing: {
+    type: Number,
+    default: 0,
+  },
+});
+const rowCount = new Array(6).fill(0);
+const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];
+</script>
+
+<template>
+  <view class="container">
+    <view>
+      <image
+        v-if="rank === 1"
+        src="../static/champ1.png"
+        mode="widthFix"
+        class="avatar-rank"
+      />
+      <image
+        v-if="rank === 2"
+        src="../static/champ2.png"
+        mode="widthFix"
+        class="avatar-rank"
+      />
+      <image
+        v-if="rank === 3"
+        src="../static/champ3.png"
+        mode="widthFix"
+        class="avatar-rank"
+      />
+      <view v-if="rank > 3" class="rank-view">{{ rank }}</view>
+      <image
+        :src="avatar"
+        mode="widthFix"
+        :style="{ borderColor: topThreeColors[rank - 1] || '#fff' }"
+      />
+    </view>
+    <view>
+      <view>
+        <view v-for="(_, index) in rowCount" :key="index">
+          <text>{{ scores[index] ? `${scores[index].ring}环` : "-" }}</text>
+        </view>
+      </view>
+      <view>
+        <view v-for="(_, index) in rowCount" :key="index">
+          <text>{{
+            scores[index + 6] ? `${scores[index + 6].ring}环` : "-"
+          }}</text>
+        </view>
+      </view>
+    </view>
+    <view>
+      <text>{{ totalRing }}环</text>
+      <text>积分{{ totalScore }}</text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: calc(100% - 65px);
+  display: flex;
+  align-items: center;
+  border: 1px solid #fff3;
+  margin: 10px 0;
+  margin-left: 30px;
+  border-radius: 15px;
+  padding: 10px;
+  color: #fff9;
+  font-size: 28rpx;
+  position: relative;
+}
+.container > view:first-child {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  top: 30%;
+  left: -17px;
+}
+.container > view:first-child > image:last-child {
+  width: 30px;
+  max-height: 30px;
+  min-height: 30px;
+  border-radius: 50%;
+  border: 1px solid #fff;
+}
+.avatar-rank,
+.rank-view {
+  position: absolute;
+  width: 16px;
+  height: 17px;
+  top: -9px;
+  right: 5px;
+}
+.rank-view {
+  background-color: #6d6d6d;
+  text-align: center;
+  line-height: 15px;
+  font-size: 10px;
+  border-radius: 50%;
+  color: #fff;
+}
+.container > view:nth-child(2) {
+  display: flex;
+  flex-direction: column;
+  margin-left: 15px;
+  border-right: 1px solid #fff3;
+  padding-right: 10px;
+}
+.container > view:nth-child(2) > view {
+  display: flex;
+}
+.container > view:nth-child(2) > view text {
+  width: 32px;
+  text-align: center;
+  display: block;
+}
+.container > view:nth-child(2) > view:first-child {
+  border-bottom: 1px solid #fff3;
+  padding-bottom: 10px;
+}
+.container > view:nth-child(2) > view:last-child {
+  padding-top: 10px;
+}
+.container > view:nth-child(3) {
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+}
+.container > view:nth-child(3) > text:first-child {
+  width: 40px;
+}
+.container > view:nth-child(3) > text:last-child {
+  width: 60px;
+}
+</style>

src/pages/index.vue

@@ -74,7 +74,7 @@ const comingSoon = () => {
     icon: "none",
   });
 };
-const topThreeColors = ["#FFD947 ", "#D2D2D2", "#FFA515"];
+const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];
 </script>
 
 <template>
@@ -301,8 +301,8 @@ const topThreeColors = ["#FFD947 ", "#D2D2D2", "#FFA515"];
 
 .player-avatar,
 .more-players {
-  width: 40px;
+  width: 80rpx;
-  height: 40px;
+  height: 80rpx;
   border-radius: 50%;
   margin-right: -10px;
   border: 1px solid #000;
@@ -335,13 +335,13 @@ const topThreeColors = ["#FFD947 ", "#D2D2D2", "#FFA515"];
 .more-players {
   background: rgba(255, 255, 255, 0.2);
   font-size: 9px;
-  line-height: 40px;
+  line-height: 80rpx;
   text-align: center;
   z-index: -1;
 }
 
 .more-players > text {
-  margin-left: 4px;
+  margin-left: 2px;
 }
 
 .region-stats {
@@ -363,7 +363,7 @@ const topThreeColors = ["#FFD947 ", "#D2D2D2", "#FFA515"];
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: #b3b3b3;
+  color: #c5c5c5;
   font-size: 12px;
 }
 .region-item > text {

src/pages/match-detail.vue

@@ -6,7 +6,7 @@ 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 PlayerScore2 from "@/components/PlayerScore2.vue";
 import { getGameAPI } from "@/apis";
 
 const blueTeam = ref([]);
@@ -75,7 +75,6 @@ const checkBowData = () => {
         :blueTeam="blueTeam"
         :redTeam="redTeam"
         :players="data.players"
-        :showRank="true"
       />
       <!-- <view class="score-header">
         <text>决金箭轮（环数）</text>
@@ -112,14 +111,16 @@ const checkBowData = () => {
           <image src="../static/back.png" mode="widthFix" />
         </view>
       </view>
-      <PlayerScore
+      <PlayerScore2
         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"
-        :done="false"
+        :totalScore="player.totalScore"
+        :totalRing="player.totalRings"
+        :rank="index + 1"
       />
       <view
         v-for="(round, index) in roundsData"