房间大乱斗调试

src/components/PlayerSeats.vue

@@ -1,22 +1,30 @@
 <script setup>
-defineProps({
+const props = defineProps({
+  total: {
+    type: Number,
+    default: 10,
+  },
   players: {
     type: Array,
     default: () => [],
   },
 });
-const seats = new Array(10).fill(1);
+const seats = new Array(props.total).fill(1);
 </script>
 
 <template>
   <view 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" />
+      <image
+        v-if="players[index]"
+        :src="players[index].avatar"
+        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-if="players[index]">{{ players[index].name }}</text>
       <text v-else :style="{ color: '#fff9' }">虚位以待</text>
       <view v-if="index === 0" class="founder">创建者</view>
       <image
@@ -32,19 +40,20 @@ const seats = new Array(10).fill(1);
 .players {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
-  column-gap: 15px;
-  row-gap: 10px;
+  justify-content: flex-start;
+  -moz-column-gap: 20px;
+  column-gap: 14px;
   margin-bottom: 20px;
   font-size: 14px;
+  padding: 0 14px;
 }
 .players > view {
-  width: 45%;
+  width: calc(50% - 7px);
   display: flex;
   align-items: center;
   position: relative;
   color: #fff;
-  height: 90px;
+  height: 100px;
   overflow: hidden;
 }
 .players > view > image:first-child {
@@ -54,16 +63,23 @@ const seats = new Array(10).fill(1);
 }
 .players > view > image:nth-child(2) {
   width: 40px;
+  height: 40px;
   margin: 0 10px;
   border: 1px solid #fff;
   border-radius: 50%;
 }
+.players > view > text:nth-child(3) {
+  width: 20vw;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .founder {
   position: absolute;
   background-color: #fed847;
   top: 0;
   color: #000;
-  font-size: 12px;
+  font-size: 10px;
   padding: 2px 5px;
   border-top-left-radius: 10px;
   border-bottom-right-radius: 10px;