UI优化

src/pages/battle-result.vue

@@ -2,8 +2,6 @@
 import { ref, onMounted } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import { getGameAPI } from "@/apis";
-import TeamResult from "@/components/TeamResult.vue";
-import MeleeResult from "@/components/MeleeResult.vue";
 import Avatar from "@/components/Avatar.vue";
 import { getHomeData } from "@/apis";
 import useStore from "@/store";
@@ -16,13 +14,12 @@ const battleId = ref("");
 const ifWin = ref(false);
 const data = ref({});
 const totalPoints = ref(0);
-const show = ref(false);
 
 onLoad(async (options) => {
   battleId.value = options.battleId;
   const result = await getGameAPI(
-    // options.battleId || "BATTLE-1749386862250435325-854"
-    options.battleId || "BATTLE-1750142722977234017-746"
+    // options.battleId || "BATTLE-1750688685843436271-553"
+    options.battleId || "BATTLE-1750688536849458226-518"
   );
   data.value = result;
   if (result.mode === 1 && result.redPlayers[user.value.id]) {
@@ -45,6 +42,18 @@ onMounted(async () => {
   const result = await getHomeData();
   if (result.user) updateUser(result.user);
 });
+
+const checkBowData = () => {
+  if (data.value.mode === 1) {
+    uni.navigateTo({
+      url: `/pages/team-bow-data?battleId=${battleId.value}`,
+    });
+  } else if (data.value.mode === 2) {
+    uni.navigateTo({
+      url: `/pages/melee-bow-data?battleId=${battleId.value}`,
+    });
+  }
+};
 </script>
 
 <template>
@@ -56,7 +65,7 @@ onMounted(async () => {
       mode="widthFix"
     />
     <block v-if="data.mode === 1">
-      <view class="header-team">
+      <view class="header-team" :style="{ marginTop: '25%' }">
         <image src="../static/battle-result.png" mode="widthFix" />
       </view>
       <view class="battle-winner">
@@ -73,7 +82,13 @@ onMounted(async () => {
         <view />
       </view>
       <view class="players">
-        <view v-for="(player, index) in data.players" :key="index">
+        <view
+          v-for="(player, index) in data.players"
+          :key="index"
+          :style="{
+            border: player.playerId === user.id ? '1px solid #B04630' : 'none',
+          }"
+        >
           <image
             v-if="index === 0"
             class="player-bg"
@@ -111,7 +126,7 @@ onMounted(async () => {
             mode="widthFix"
           />
           <view v-if="index > 2" class="view-crown">{{ index + 1 }}</view>
-          <Avatar src="../static/avatar.png" :size="36" />
+          <Avatar :src="player.avatar" :size="36" />
           <view class="player-title">
             <text>{{ player.name }}</text>
             <text>钻石三级</text>
@@ -133,21 +148,9 @@ onMounted(async () => {
       >好成绩！全国排位赛等着你！</text
     >
     <view class="op-btn">
-      <view @click="() => (show = true)">查看靶纸</view>
+      <view @click="checkBowData">查看靶纸</view>
       <view @click="exit">退出</view>
     </view>
-    <TeamResult
-      v-if="data.mode === 1"
-      :show="show"
-      :onClose="() => (show = false)"
-      :data="data"
-    />
-    <MeleeResult
-      v-if="data.mode === 2"
-      :show="show"
-      :onClose="() => (show = false)"
-      :data="data"
-    />
   </view>
 </template>
 
@@ -155,12 +158,12 @@ onMounted(async () => {
 .container {
   width: 100vw;
   height: 100vh;
-  background-color: #000;
+  background-color: #292929;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
 }
 .tag {
   position: absolute;
@@ -199,14 +202,16 @@ onMounted(async () => {
 }
 .battle-winner > text:nth-child(3) {
   font-size: 30px;
-  margin: 10px;
+  margin-bottom: 5px;
   font-weight: bold;
   color: #fed847;
 }
+.battle-winner > text:nth-child(4) {
+  margin-bottom: 10px;
+}
 .battle-e {
   width: 100%;
   height: 60px;
-  margin: 20px 0;
 }
 .battle-e > image {
   position: absolute;
@@ -251,6 +256,7 @@ onMounted(async () => {
   justify-content: center;
   width: 100%;
   margin-bottom: 30px;
+  margin-top: 25%;
 }
 .header-melee > view {
   height: 1px;
@@ -280,6 +286,7 @@ onMounted(async () => {
   background-color: #ffffff1a;
   display: flex;
   align-items: center;
+  box-sizing: border-box;
 }
 .player-bg {
   position: absolute;