UI优化

src/components/TeamResult.vue

@@ -22,6 +22,7 @@ const redScores = ref([]);
 const blueScores = ref([]);
 const tabs = ref(["所有轮次"]);
 const players = ref([]);
+const allRoundsScore = ref({});
 const onClickTab = (index) => {
   selected.value = index;
   redScores.value = [];
@@ -29,14 +30,22 @@ const onClickTab = (index) => {
   const { bluePlayers, redPlayers, roundsData } = props.data;
   if (index === 0) {
     Object.keys(bluePlayers).forEach((p) => {
+      allRoundsScore.value[p] = [];
       Object.values(roundsData).forEach((round) => {
+        allRoundsScore.value[p].push(
+          round[p].reduce((last, next) => last + next.ring, 0)
+        );
         round[p].forEach((arrow) => {
           blueScores.value.push(arrow);
         });
       });
     });
     Object.keys(redPlayers).forEach((p) => {
+      allRoundsScore.value[p] = [];
       Object.values(roundsData).forEach((round) => {
+        allRoundsScore.value[p].push(
+          round[p].reduce((last, next) => last + next.ring, 0)
+        );
         round[p].forEach((arrow) => {
           redScores.value.push(arrow);
         });
@@ -108,6 +117,15 @@ watch(
         :src="player.avatar"
         :borderColor="data.bluePlayers[player.playerId] ? 1 : 2"
       />
+      <view
+        v-if="selected === 0"
+        v-for="(ring, index) in allRoundsScore[player.playerId]"
+        :key="index"
+        class="score-item"
+        :style="{ width: '13vw', height: '13vw' }"
+      >
+        {{ ring }}
+      </view>
       <view
         v-if="selected > 0"
         v-for="(score, index) in data.roundsData[selected][player.playerId]"