UI更新

src/components/BattleHeader.vue

@@ -22,16 +22,61 @@ defineProps({
     type: Number,
     default: 2,
   },
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
 });
 </script>
 
 <template>
-  <view class="container">
+  <view class="container" :style="{ paddingTop: showHeader ? '5px' : '0' }">
     <image
-      :src="`../static/battle-header${blueTeam.length ? '' : '-melee'}.png`"
+      v-if="showHeader"
+      :src="`../static/battle-header${players.length ? '-melee' : ''}.png`"
       mode="widthFix"
     />
-    <view v-if="players.length" class="players-melee">
+    <view
+      v-if="!players.length && blueTeam.length && redTeam.length"
+      class="players"
+      :style="{ paddingTop: showHeader ? '15px' : '0' }"
+    >
+      <view>
+        <view
+          v-for="(player, index) in blueTeam"
+          :key="index"
+          :style="{ margin: blueTeam.length === 2 ? '0 12px' : '0 6px' }"
+        >
+          <Avatar :src="player.avatar" :rankLvl="player.rankLvl" />
+          <text class="player-name">{{ player.name }}</text>
+        </view>
+        <image
+          v-if="winner === 1"
+          src="../static/winner-badge.png"
+          mode="widthFix"
+        />
+      </view>
+      <view>
+        <view
+          v-for="(player, index) in redTeam"
+          :key="index"
+          :style="{ margin: redTeam.length === 2 ? '0 12px' : '0 6px' }"
+        >
+          <Avatar :src="player.avatar" :rankLvl="player.rankLvl" />
+          <text class="player-name">{{ player.name }}</text>
+        </view>
+        <image
+          v-if="winner === 0"
+          src="../static/winner-badge.png"
+          mode="widthFix"
+        />
+      </view>
+    </view>
+    <view
+      v-if="players.length"
+      class="players-melee"
+      :style="{ paddingTop: showHeader ? '15px' : '0' }"
+    >
       <view
         v-for="(player, index) in players"
         :key="index"
@@ -49,30 +94,6 @@ defineProps({
         <text class="player-name">{{ player.name }}</text>
       </view>
     </view>
-    <view v-if="blueTeam.length && redTeam.length" class="players">
-      <view>
-        <Avatar :src="blueTeam[0].avatar" :rankLvl="blueTeam[0].rankLvl" />
-        <text class="player-name">{{ blueTeam[0].name }}</text>
-        <image
-          v-if="winner === 1"
-          src="../static/winner-badge.png"
-          mode="widthFix"
-        />
-      </view>
-      <view>
-        <Avatar
-          v-if="redTeam[0]"
-          :src="redTeam[0].avatar"
-          :rankLvl="redTeam[0].rankLvl"
-        />
-        <text class="player-name">{{ redTeam[0].name }}</text>
-        <image
-          v-if="winner === 0"
-          src="../static/winner-badge.png"
-          mode="widthFix"
-        />
-      </view>
-    </view>
   </view>
 </template>
 
@@ -81,7 +102,6 @@ defineProps({
   width: 100%;
   position: relative;
   margin-bottom: 10px;
-  padding-top: 5px;
 }
 .container > image:first-child {
   position: absolute;
@@ -92,24 +112,16 @@ defineProps({
 .players {
   display: flex;
 }
-.players::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  color: transparent;
-}
 .players > view {
   width: 50%;
-  height: 85px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  height: 80px;
   color: #fff9;
   font-size: 12px;
-  margin-top: 15px;
   overflow: hidden;
   position: relative;
-  padding-top: 5px;
+  padding-top: 7px;
+  display: flex;
+  justify-content: center;
 }
 .players > view:first-child {
   background-color: #364469;
@@ -119,17 +131,27 @@ defineProps({
 }
 .players > view > image:last-child {
   position: absolute;
-  width: 60px;
-  right: 0;
-  bottom: 0;
+  width: 40px;
+  top: 0;
+  left: 0;
+}
+.players > view > view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 .players-melee {
   display: flex;
-  height: 85px;
+  height: 80px;
   width: 100%;
-  margin-top: 15px;
   overflow-x: auto;
 }
+.players-melee::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
 .players-melee > view {
   display: flex;
   flex-direction: column;
@@ -137,7 +159,7 @@ defineProps({
   justify-content: center;
   color: #fff9;
   font-size: 12px;
-  padding-top: 5px;
+  padding-top: 7px;
   flex: 0 0 auto;
 }
 .player-name {

src/components/CreateRoom.vue

@@ -69,13 +69,19 @@ const setClipboardData = () => {
       >
         <text>乱斗模式（3-10人）</text>
       </view>
-      <view class="battle-btn battle-close">
+      <view
+        :class="{ 'battle-btn': true, 'battle-choosen': battleMode === 3 }"
+        @click="() => (battleMode = 3)"
+      >
         <text>对抗模式（2V2）</text>
-        <text>敬请期待</text>
+        <!-- <text>敬请期待</text> -->
       </view>
-      <view class="battle-btn battle-close">
+      <view
+        :class="{ 'battle-btn': true, 'battle-choosen': battleMode === 4 }"
+        @click="() => (battleMode = 4)"
+      >
         <text>对抗模式（3V3）</text>
-        <text>敬请期待</text>
+        <!-- <text>敬请期待</text> -->
       </view>
     </view>
     <SButton v-if="step === 1" :onClick="createRoom">下一步</SButton>
@@ -132,13 +138,13 @@ const setClipboardData = () => {
   border: 4rpx solid #fff3;
   border-color: #fed847;
 }
-.battle-close {
+/* .battle-close {
   background-color: #8889;
   color: #b3b3b3;
 }
 .battle-close > text:last-child {
   font-size: 12px;
-}
+} */
 .room-info {
   display: flex;
   flex-direction: column;
@@ -151,9 +157,6 @@ const setClipboardData = () => {
   color: #fff;
   margin-bottom: 20px;
 }
-.room-info > view:first-child > text:last-child {
-  /* color: #fed847; */
-}
 .room-info > text {
   color: #888686;
   font-size: 14px;