完成获胜页面UI和一些优化

src/pages/battle-room.vue

@@ -2,8 +2,7 @@
 import { ref, onUnmounted } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
-import AppBackground from "@/components/AppBackground.vue";
-import Header from "@/components/Header.vue";
+import PlayerSeats from "@/components/PlayerSeats.vue";
 import Guide from "@/components/Guide.vue";
 import SButton from "@/components/SButton.vue";
 import BowTarget from "@/components/BowTarget.vue";
@@ -19,10 +18,9 @@ import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
-const step = ref(1);
+const step = ref(3);
 const room = ref({});
 const roomNumber = ref("");
-const seats = new Array(10).fill(1);
 const players = new Array(7).fill(1);
 const teams = [{ name: "选手1", avatar: "../static/avatar.png" }];
 onLoad(async (options) => {
@@ -80,27 +78,10 @@ const startGame = async () => {
           </view>
         </view>
       </view>
-      <view v-if="room.battleType === 2 && room.count === 10" class="players">
-        <view v-for="(_, index) in seats" :key="index">
-          <image src="../static/player-bg.png" mode="widthFix" />
-          <image
-            v-if="players[index]"
-            src="../static/avatar.png"
-            mode="widthFix"
-          />
-          <view v-else class="player-unknow">
-            <image src="../static/question-mark.png" mode="widthFix" />
-          </view>
-          <text v-if="players[index]">选手{{ index + 1 }}</text>
-          <text v-else :style="{ color: '#fff9' }">虚位以待</text>
-          <view v-if="index === 0" class="founder">创建者</view>
-          <image
-            :src="`../static/player-${index + 1}.png`"
-            mode="widthFix"
-            class="player-bg"
-          />
-        </view>
-      </view>
+      <PlayerSeats
+        v-if="room.battleType === 2 && room.count === 10"
+        :players="players"
+      />
       <view>
         <SButton
           v-if="room.battleType === 1 && room.count === 2"
@@ -132,7 +113,7 @@ const startGame = async () => {
     <view v-if="step === 3">
       <ShootProgress tips="请红队射箭-第一轮" />
       <PlayersRow :blueTeam="teams" :redTeam="teams" />
-      <BowTarget :power="45" currentRound="1" :totalRound="3" debug />
+      <BowTarget :power="45" :currentRound="1" :totalRound="3" debug />
       <BattleFooter :blueTeam="[6, 2, 3]" :redTeam="[4, 5, 2]" />
     </view>
   </Container>
@@ -144,35 +125,6 @@ const startGame = async () => {
   height: calc(100% - 40px);
   overflow-x: hidden;
 }
-.players {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  column-gap: 15px;
-  row-gap: 10px;
-  margin-bottom: 20px;
-  font-size: 14px;
-}
-.players > view {
-  width: 45%;
-  display: flex;
-  align-items: center;
-  position: relative;
-  color: #fff;
-  height: 90px;
-  overflow: hidden;
-}
-.players > view > image:first-child {
-  width: 100%;
-  position: absolute;
-  z-index: -1;
-}
-.players > view > image:nth-child(2) {
-  width: 40px;
-  margin: 0 10px;
-  border: 1px solid #fff;
-  border-radius: 50%;
-}
 .founder {
   position: absolute;
   background-color: #fed847;