UI调整

src/components/BattleHeader.vue

@@ -46,17 +46,18 @@ defineProps({
           v-for="(player, index) in blueTeam"
           :key="index"
           :style="{
-            margin: blueTeam.length === 2 ? '0 12px' : '0 6px',
+            margin: blueTeam.length === 2 ? '0 -5px' : '0 6px',
             width: `${100 / blueTeam.length - blueTeam.length * 3}%`,
           }"
         >
-          <Avatar :src="player.avatar" :rankLvl="player.rankLvl" />
+          <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
           <text class="player-name">{{ player.name }}</text>
         </view>
         <image
           v-if="winner === 1"
           src="../static/winner-badge.png"
           mode="widthFix"
+          class="left-winner-badge"
         />
       </view>
       <view>
@@ -64,17 +65,18 @@ defineProps({
           v-for="(player, index) in redTeam"
           :key="index"
           :style="{
-            margin: redTeam.length === 2 ? '0 12px' : '0 6px',
+            margin: redTeam.length === 2 ? '0 -5px' : '0 6px',
             width: `${100 / redTeam.length - redTeam.length * 3}%`,
           }"
         >
-          <Avatar :src="player.avatar" :rankLvl="player.rankLvl" />
+          <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
           <text class="player-name">{{ player.name }}</text>
         </view>
         <image
           v-if="winner === 0"
           src="../static/winner-badge.png"
           mode="widthFix"
+          class="right-winner-badge"
         />
       </view>
     </view>
@@ -93,7 +95,7 @@ defineProps({
       >
         <Avatar
           :src="player.avatar"
-          :rankLvl="player.rankLvl"
+          :rankLvl="showRank ? undefined : player.rankLvl"
           :size="40"
           :rank="showRank ? index + 1 : 0"
         />
@@ -120,12 +122,12 @@ defineProps({
 }
 .players > view {
   width: 50%;
-  height: 80px;
+  height: 75px;
   color: #fff9;
   font-size: 12px;
   overflow: hidden;
   position: relative;
-  padding-top: 7px;
+  padding-top: 5px;
   display: flex;
   justify-content: center;
 }
@@ -135,13 +137,6 @@ defineProps({
 .players > view:last-child {
   background-color: #692735;
 }
-.players > view > image:last-child {
-  position: absolute;
-  width: 50px;
-  top: -10%;
-  left: -5%;
-  transform: rotate(-12deg);
-}
 .players > view > view {
   display: flex;
   flex-direction: column;
@@ -170,11 +165,25 @@ defineProps({
   flex: 0 0 auto;
 }
 .player-name {
-  margin-top: 5px;
+  margin-top: 3px;
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: center;
 }
+.left-winner-badge {
+  position: absolute;
+  width: 50px;
+  top: -12%;
+  left: -5%;
+  transform: rotate(-12deg);
+}
+.right-winner-badge {
+  position: absolute;
+  width: 50px;
+  top: -12%;
+  right: -5%;
+  transform: rotate(36deg);
+}
 </style>