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

src/components/ImageShare.vue

@@ -67,7 +67,7 @@ const saveImage = () => {
     <view class="content">
       <image src="../static/share-bg.png" mode="widthFix" />
       <view>
-        <Avatar :src="user.avatarUrl" size="40" frame />
+        <Avatar :src="user.avatarUrl" :size="40" frame />
         <view>
           <text>{{ user.nickName }}</text>
           <text>砖石1级</text>

src/components/PlayerSeats.vue

@@ -0,0 +1,90 @@
+<script setup>
+defineProps({
+  players: {
+    type: Array,
+    default: () => [],
+  },
+});
+const seats = new Array(10).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" />
+      <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>
+</template>
+
+<style scoped>
+.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;
+  top: 0;
+  color: #000;
+  font-size: 12px;
+  padding: 2px 5px;
+  border-top-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+.player-bg {
+  position: absolute;
+  width: 52px;
+  right: 0;
+}
+.player-unknow {
+  width: 40px;
+  height: 40px;
+  margin: 0 10px;
+  border: 1px solid #fff3;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #69686866;
+}
+.player-unknow > image {
+  width: 40%;
+}
+</style>