排位房间内容完善

src/components/BattleFooter.vue

@@ -1,21 +1,10 @@
 <script setup>
-import { ref } from "vue";
-import CoachComment from "@/components/CoachComment.vue";
 defineProps({
-  blueTeam: {
-    type: Array,
-    default: () => [],
-  },
-  redTeam: {
+  roundResults: {
     type: Array,
     default: () => [],
   },
 });
-
-const showComment = ref(false);
-setTimeout(() => {
-  showComment.value = true;
-}, 2000);
 </script>
 
 <template>
@@ -23,27 +12,30 @@ setTimeout(() => {
     <image src="../static/battle-header.png" mode="widthFix" />
     <view class="players">
       <view>
-        <view v-for="(score, index) in blueTeam" :key="index">
+        <view v-for="(result, index) in roundResults" :key="index">
           <text>Round {{ index + 1 }}</text>
           <view>
-            <text>{{ score }}</text>
+            <text>{{
+              result.blueArrows
+                .map((item) => item.ring)
+                .reduce((last, next) => last + next, 0)
+            }}</text>
             <text>环</text>
           </view>
         </view>
       </view>
       <view>
-        <view v-for="(score, index) in redTeam" :key="index">
+        <view v-for="(result, index) in roundResults" :key="index">
           <text>Round {{ index + 1 }}</text>
           <view>
-            <text>{{ score }}</text>
+            <text>{{ result.redArrows
+                .map((item) => item.ring)
+                .reduce((last, next) => last + next, 0) }}</text>
             <text>环</text>
           </view>
         </view>
       </view>
     </view>
-    <CoachComment :show="showComment" :onClose="() => (showComment = false)">
-      第三轮射击结束
-    </CoachComment>
   </view>
 </template>
 
@@ -92,6 +84,7 @@ setTimeout(() => {
   font-size: 14px;
 }
 .players > view > view > view:last-child {
+  font-size: 14px;
   padding-right: 20px;
 }
 .players > view > view > view:last-child > text:first-child {

src/components/Container.vue

@@ -25,9 +25,10 @@ defineProps({
 
 <style scoped>
 .content {
-  width: 100%;
+  width: 100vw;
   height: calc(100vh - 116px);
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   align-items: center;

src/components/PlayersRow.vue

@@ -114,6 +114,7 @@ defineProps({
   margin: 0 10px;
   overflow: hidden;
   width: 100px;
+  transition: all 0.3s linear;
 }
 .avatar {
   width: 40px;