UI优化

src/components/BowTarget.vue

@@ -77,7 +77,7 @@ function calcRealY(num) {
 
 <template>
   <view class="container">
-    <view class="header">
+    <view class="header" v-if="debug || totalRound > 0 || power">
       <text v-if="debug" class="header-tips">大人，请射箭</text>
       <text v-if="totalRound > 0" class="round-count">{{
         (currentRound > totalRound ? totalRound : currentRound) +
@@ -127,7 +127,6 @@ function calcRealY(num) {
           }"
         />
       </block>
-
       <image src="../static/bow-target.png" mode="widthFix" />
     </view>
     <view v-if="avatar" class="footer">
@@ -206,7 +205,7 @@ function calcRealY(num) {
 }
 .footer > image {
   width: 40px;
-  height: 40px;
+  min-height: 40px;
   border-radius: 50%;
 }
 .container > text {

src/components/MeleeResult.vue

@@ -7,6 +7,7 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
 const scores = ref([]);
+const currentUser = ref({});
 const props = defineProps({
   show: {
     type: Boolean,
@@ -25,12 +26,20 @@ watch(
   () => props.data,
   (value) => {
     const mine = value.players.find((p) => p.playerId === user.value.id);
+    currentUser.value = mine;
     if (mine && mine.arrowHistory) {
       scores.value = mine.arrowHistory;
     }
   },
   { deep: true, immediate: true }
 );
+const onSelect = (userId) => {
+  const user = props.data.players.find((p) => p.playerId === userId);
+  currentUser.value = user;
+  if (user && user.arrowHistory) {
+    scores.value = user.arrowHistory;
+  }
+};
 </script>
 
 <template>
@@ -42,7 +51,11 @@ watch(
       </view>
     </view>
     <view class="rank-rows">
-      <view v-for="(player, index) in data.players" :key="index">
+      <view
+        v-for="(player, index) in data.players"
+        :key="index"
+        @click="() => onSelect(player.playerId)"
+      >
         <image v-if="index === 0" src="../static/champ1.png" mode="widthFix" />
         <image v-if="index === 1" src="../static/champ2.png" mode="widthFix" />
         <image v-if="index === 2" src="../static/champ3.png" mode="widthFix" />
@@ -61,7 +74,11 @@ watch(
       </view>
     </view>
     <view :style="{ width: '95%' }">
-      <BowTarget :scores="scores" :showLatestArrow="false" />
+      <BowTarget
+        :scores="scores"
+        :showLatestArrow="false"
+        :avatar="currentUser.avatar"
+      />
     </view>
     <view class="score-text"
       ><text :style="{ color: '#fed847' }">12</text>支箭，共<text

src/components/Signin.vue

@@ -96,7 +96,7 @@ const handleLogin = () => {
         type="nickname"
         class="nickname-input"
         placeholder="请输入昵称"
-        placeholder-style="color: #ccc"
+        placeholder-style="color: #fff9"
         @change="onNicknameChange"
         @blur="onNicknameBlur"
       />
@@ -136,7 +136,9 @@ const handleLogin = () => {
   width: 80%;
   display: flex;
   align-items: center;
-  margin: 20px 0;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #fff3;
+  padding: 20px 2px;
 }
 .avatar {
   margin: 0;
@@ -144,14 +146,15 @@ const handleLogin = () => {
 .avatar > text,
 .nickname > text {
   width: 20%;
-  margin-right: 10px;
   color: #fff9;
+  font-size: 14px;
+}
+.avatar > button > text {
+  color: #fff9;
+  font-size: 14px;
 }
 .nickname > input {
   flex: 1;
-  background-color: #fff;
-  border-radius: 20px;
-  padding: 7px 15px;
   font-size: 14px;
   color: #000;
 }
@@ -169,13 +172,13 @@ const handleLogin = () => {
   color: #8a8a8a;
 }
 .protocol > image {
-  width: 18px;
+  width: 16px;
-  height: 18px;
+  height: 16px;
   margin-right: 10px;
 }
 .protocol > view:first-child {
-  width: 16px;
+  width: 14px;
-  height: 16px;
+  height: 14px;
   border-radius: 50%;
   margin-right: 10px;
   border: 1px solid #fff;

src/pages/match-detail.vue

@@ -6,13 +6,15 @@ import BattleHeader from "@/components/BattleHeader.vue";
 import Avatar from "@/components/Avatar.vue";
 import TeamResult from "@/components/TeamResult.vue";
 import MeleeResult from "@/components/MeleeResult.vue";
+import PlayerScore from "@/components/PlayerScore.vue";
 import { getGameAPI } from "@/apis";
 
 const blueTeam = ref([]);
 const redTeam = ref([]);
-const players = ref([]);
 const roundsData = ref([]);
-const data = ref({});
+const data = ref({
+  players: [],
+});
 const show = ref(false);
 
 onLoad(async (options) => {
@@ -46,8 +48,6 @@ onLoad(async (options) => {
           },
         });
       });
-    } else if (result.mode === 2) {
-      players.value = result.players;
     }
   }
 });
@@ -60,7 +60,7 @@ onLoad(async (options) => {
         :winner="data.winner"
         :blueTeam="blueTeam"
         :redTeam="redTeam"
-        :players="players"
+        :players="data.players"
         :showRank="true"
       />
       <!-- <view class="score-header">
@@ -87,7 +87,25 @@ onLoad(async (options) => {
           <text>7环</text>
         </view>
       </view> -->
-      <view v-if="players.length" @click="() => (show = true)">查看靶纸</view>
+      <view
+        v-if="data.players && data.players.length"
+        class="score-header"
+        :style="{ border: 'none', padding: '5px 15px' }"
+      >
+        <text>大乱斗</text>
+        <view @click="() => (show = true)">
+          <text>查看靶纸</text>
+          <image src="../static/back.png" mode="widthFix" />
+        </view>
+      </view>
+      <PlayerScore
+        v-if="data.players && data.players.length"
+        v-for="(player, index) in data.players"
+        :key="index"
+        :name="player.name"
+        :avatar="player.avatar"
+        :scores="player.arrowHistory"
+      />
       <view
         v-for="(round, index) in roundsData"
         :key="index"