UI完善

src/pages/battle-result.vue

@@ -18,8 +18,8 @@ const totalPoints = ref(0);
 onLoad(async (options) => {
   battleId.value = options.battleId;
   const result = await getGameAPI(
-    options.battleId || "BATTLE-1750867490990424058-718"
+    // options.battleId || "BATTLE-1750867490990424058-718"
-    // options.battleId || "BATTLE-1750688536849458226-518"
+    options.battleId || "BATTLE-1750688536849458226-518"
   );
   data.value = result;
   if (result.mode === 1 && result.redPlayers[user.value.id]) {
@@ -81,7 +81,12 @@ const checkBowData = () => {
         <image src="../static/battle-result.png" mode="widthFix" />
         <view />
       </view>
-      <view class="players">
+      <view
+        class="players"
+        :style="{
+          height: `${Math.max(data.players.length > 5 ? '330' : '300')}px`,
+        }"
+      >
         <view
           v-for="(player, index) in data.players"
           :key="index"
@@ -280,13 +285,11 @@ const checkBowData = () => {
   margin: 0 20px;
 }
 .players {
-  color: #fff6;
+  flex-wrap: wrap;
   display: flex;
-  flex-direction: column;
+  overflow: auto;
-  align-items: center;
-  justify-content: center;
   width: calc(100% - 60px);
-  height: 300px;
+  color: #fff6;
   margin: 0 30px;
 }
 .players > view {

src/pages/my-growth.vue

@@ -5,6 +5,7 @@ import Avatar from "@/components/Avatar.vue";
 import BowData from "@/components/BowData.vue";
 import ScrollList from "@/components/ScrollList.vue";
 import { getBattleListAPI, getPractiseResultListAPI } from "@/apis";
+import { meleeAvatarColors } from "@/constants";
 
 import { ref } from "vue";
 
@@ -105,11 +106,15 @@ const onPractiseLoading = async (page) => {
               </view>
             </block>
           </view>
-          <view v-if="item.mode === 2" class="contest-multi">
+          <view v-if="item.mode === 2" class="contest-melee">
             <view
               class="player"
               v-for="(p, index2) in item.players"
               :key="index2"
+              :style="{
+                width: `${Math.max(100 / item.players.length, 18)}vw`,
+                backgroundColor: meleeAvatarColors[index2],
+              }"
             >
               <Avatar :rank="index2 + 1" :src="p.avatar" />
               <text>{{ p.name }}</text>
@@ -143,11 +148,15 @@ const onPractiseLoading = async (page) => {
               />
             </view>
           </view>
-          <view v-if="item.mode === 2" class="contest-multi">
+          <view v-if="item.mode === 2" class="contest-melee">
             <view
               class="player"
               v-for="(p, index2) in item.players"
               :key="index2"
+              :style="{
+                width: `${Math.max(100 / item.players.length, 18)}vw`,
+                backgroundColor: meleeAvatarColors[index2],
+              }"
             >
               <Avatar :rank="index2 + 1" :src="p.avatar" />
               <text>{{ p.name }}</text>
@@ -238,6 +247,7 @@ const onPractiseLoading = async (page) => {
   padding-top: 10px;
   padding-bottom: 5px;
   position: relative;
+  flex: 0 0 auto;
 }
 .player > text {
   margin-top: 5px;
@@ -255,10 +265,11 @@ const onPractiseLoading = async (page) => {
   bottom: 0;
 }
 .contest-team,
-.contest-multi {
+.contest-melee {
+  width: 100%;
   display: flex;
-  justify-content: space-around;
   margin-bottom: 10px;
+  overflow-x: auto;
 }
 .contest-team > view {
   width: 50%;
@@ -269,24 +280,6 @@ const onPractiseLoading = async (page) => {
 .contest-team > view:last-child {
   background-color: #692735;
 }
-.contest-multi > view {
-  width: 20%;
-}
-.contest-multi > view:nth-child(1) {
-  background-color: #364469;
-}
-.contest-multi > view:nth-child(2) {
-  background-color: #692735;
-}
-.contest-multi > view:nth-child(3) {
-  background-color: #934b4b;
-}
-.contest-multi > view:nth-child(4) {
-  background-color: #a98b69;
-}
-.contest-multi > view:nth-child(5) {
-  background-color: #8268a2;
-}
 .practice-record {
   color: #fff9;
   border-bottom: 1px solid #fff9;