UI更新

src/pages/battle-room.vue

@@ -6,6 +6,7 @@ import PlayerSeats from "@/components/PlayerSeats.vue";
 import Guide from "@/components/Guide.vue";
 import SButton from "@/components/SButton.vue";
 import SModal from "@/components/SModal.vue";
+import Avatar from "@/components/Avatar.vue";
 import { getRoomAPI, destroyRoomAPI, exitRoomAPI, startRoomAPI } from "@/apis";
 import { MESSAGETYPES } from "@/constants";
 import useStore from "@/store";
@@ -236,11 +237,9 @@ onHide(() => {});
         />
         <view>
           <view class="player" :style="{ transform: 'translateY(-60px)' }">
-            <image
-              :src="owner.avatar || '../static/user-icon.png'"
-              mode="widthFix"
-            />
+            <Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="60" />
             <text>{{ owner.name }}</text>
+            <text>创建者</text>
           </view>
           <image src="../static/versus.png" mode="widthFix" />
           <block v-if="opponent.id">
@@ -348,7 +347,7 @@ onHide(() => {});
   justify-content: center;
   align-items: center;
   transform: translateY(-60px);
-  color: #fff9;
+  color: #fff;
   font-size: 14px;
 }
 .player > image {
@@ -359,12 +358,19 @@ onHide(() => {});
   margin-bottom: 5px;
 }
 .player > text {
-  width: 100px;
+  max-width: 100px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: center;
 }
+.player > text:last-child {
+  color: #000;
+  background-color: #fed847;
+  font-size: 8px;
+  border-radius: 10px;
+  padding: 2px 5px;
+}
 .team-mode > view > image:nth-child(2) {
   width: 120px;
 }