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>

src/components/BowTarget.vue

@@ -205,13 +205,14 @@ onMounted(() => {
 
 <style scoped>
 .container {
-  width: calc(100% - 30px);
+  width: calc(100vw - 30px);
+  height: calc(100vw - 30px);
   padding: 0px 15px;
   position: relative;
 }
 .target {
   position: relative;
-  margin: 10px;
+  padding: 10px;
 }
 .e-value {
   position: absolute;
@@ -254,7 +255,7 @@ onMounted(() => {
   border: 1px solid #fff;
   z-index: 1;
   color: #fff;
-  font-size: 2.2vw;
+  font-size: 2.1vw;
   box-sizing: border-box;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   display: flex;

src/components/PlayerSeats.vue

@@ -65,6 +65,7 @@ const seats = new Array(props.total).fill(1);
 }
 .players > view > image:nth-child(2) {
   width: 40px;
+  height: 40px;
   min-height: 40px;
   margin: 0 10px;
   border: 1px solid #fff;

src/components/TestDistance.vue

@@ -15,12 +15,33 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  isBattle: {
+    type: Boolean,
+    default: false,
+  },
 });
 const arrow = ref({});
 const power = ref(0);
 const distance = ref(0);
 const debugInfo = ref("");
 const showsimul = ref(false);
+const count = ref(15);
+const timer = ref(null);
+
+const updateTimer = (value) => {
+  count.value = Math.round(value);
+};
+onMounted(() => {
+  timer.value = setInterval(() => {
+    if (count.value > 0) count.value -= 1;
+    else clearInterval(timer.value);
+  }, 1000);
+  uni.$on("update-timer", updateTimer);
+});
+onUnmounted(() => {
+  if (timer.value) clearInterval(timer.value);
+  uni.$off("update-timer", updateTimer);
+});
 
 async function onReceiveMessage(messages = []) {
   messages.forEach((msg) => {
@@ -52,7 +73,7 @@ onUnmounted(() => {
 
 <template>
   <view class="container">
-    <Guide v-if="guide">
+    <Guide v-show="guide">
       <view
         :style="{
           display: 'flex',
@@ -67,34 +88,41 @@ onUnmounted(() => {
         </view>
       </view>
     </Guide>
-    <view class="user-row">
+    <view class="test-area">
-      <Avatar :src="user.avatar" :size="35" />
+      <image
-      <BowPower :power="power" />
+        class="text-bg"
-    </view>
+        src="https://static.shelingxingqiu.com/attachment/2025-07-05/db3skuq1n9rj4fmld4.png"
-    <image
+        mode="widthFix"
-      class="text-bg"
+      />
-      src="https://static.shelingxingqiu.com/attachment/2025-07-05/db3skuq1n9rj4fmld4.png"
+      <button
-      mode="widthFix"
-    />
-    <view class="warnning-text">
-      <block v-if="distance > 0">
-        <text>当前距离{{ distance }}米</text>
-        <text v-if="distance >= 5">已达到距离要求</text>
-        <text v-else>请调整站位</text>
-      </block>
-      <block v-else>
-        <text>请射箭，测试站距</text>
-      </block>
-    </view>
-    <!-- <view class="debug-text">{{ debugInfo }}</view> -->
-    <view>
-      <view
         class="simul"
         @click="simulShoot"
-        :style="{ color: '#fff' }"
+        hover-class="none"
         v-if="showsimul"
       >
         模拟射箭
+      </button>
+      <view class="warnning-text">
+        <block v-if="distance > 0">
+          <text>当前距离{{ distance }}米</text>
+          <text v-if="distance >= 5">已达到距离要求</text>
+          <text v-else>请调整站位</text>
+        </block>
+        <block v-else>
+          <text>请射箭，测试站距</text>
+        </block>
+      </view>
+      <view class="user-row">
+        <Avatar :src="user.avatar" :size="35" />
+        <BowPower :power="power" />
+      </view>
+    </view>
+    <view v-if="isBattle" class="ready-timer">
+      <image src="../static/test-tip.png" mode="widthFix" />
+      <view>
+        <text>具体正式比赛还有</text>
+        <text>{{ count }}</text>
+        <text>秒</text>
       </view>
     </view>
   </view>
@@ -103,41 +131,69 @@ onUnmounted(() => {
 <style scoped>
 .container {
   width: 100vw;
-  display: flex;
+  max-height: 70vh;
-  flex-direction: column;
 }
-.text-bg {
+.ready-timer {
-  width: 100%;
-  transform: translateY(-50px);
-}
-.warnning-text {
-  position: absolute;
-  color: #fed847;
-  font-size: 30px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 54vw;
+  transform: translateY(-10vw);
-  left: calc(50% - 27vw);
+}
-  top: 34%;
+.ready-timer > image:first-child {
+  width: 40%;
+}
+.ready-timer > view {
+  width: 80%;
+  height: 45px;
+  background-color: #545454;
+  border-radius: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translateY(-8vw);
+  color: #bebebe;
+  font-size: 15px;
+}
+.ready-timer > view > text:nth-child(2) {
+  color: #fed847;
+  font-size: 20px;
+  width: 22px;
+  text-align: center;
+}
+.test-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 112vw;
+  position: relative;
+}
+.test-area > view:last-child {
+  padding: 15px;
+  width: calc(100% - 30px);
+}
+.text-bg {
+  width: 100%;
+  position: absolute;
+  top: -14.4%;
+  left: 0;
+}
+.warnning-text {
+  color: #fed847;
+  font-size: 27px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 40%;
 }
 .warnning-text > text {
   width: 70vw;
   text-align: center;
 }
-.container > view:last-child {
+.simul {
-  display: flex;
+  position: absolute;
-  justify-content: space-between;
-  align-items: center;
-  padding: 15px;
-  margin-top: -40vw;
-  position: relative;
-}
-.debug-text {
-  position: fixed;
-  left: calc(50% - 45vw);
-  top: 66%;
   color: #fff;
-  font-size: 14px;
+  right: 10px;
 }
 </style>

src/pages/melee-match.vue

@@ -5,7 +5,6 @@ import Container from "@/components/Container.vue";
 import BowTarget from "@/components/BowTarget.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import BattleHeader from "@/components/BattleHeader.vue";
-import Timer from "@/components/Timer.vue";
 import PlayerScore from "@/components/PlayerScore.vue";
 import SButton from "@/components/SButton.vue";
 import Avatar from "@/components/Avatar.vue";
@@ -193,7 +192,7 @@ onHide(() => {
   <Container :title="title" :bgType="1" :onBack="onBack">
     <view class="container">
       <BattleHeader v-if="!start" :players="players" />
-      <TestDistance v-if="!start" :guide="false" />
+      <TestDistance v-if="!start" :guide="false" :isBattle="true" />
       <ShootProgress
         :show="start"
         :start="start && startCount"
@@ -223,7 +222,6 @@ onHide(() => {
           :scores="playersScores[player.id] || []"
         />
       </view>
-      <Timer v-if="!start" />
       <ScreenHint
         :show="halfTimeTip"
         mode="small"

src/pages/my-growth.vue

@@ -86,6 +86,7 @@ const onPractiseLoading = async (page) => {
             :blueTeam="item.bluePlayers"
             :redTeam="item.redPlayers"
             :winner="item.winner"
+            :showRank="item.mode === 2"
             :showHeader="false"
           />
         </view>
@@ -106,6 +107,7 @@ const onPractiseLoading = async (page) => {
             :blueTeam="item.bluePlayers"
             :redTeam="item.redPlayers"
             :winner="item.winner"
+            :showRank="item.mode === 2"
             :showHeader="false"
           />
         </view>

src/pages/team-battle.vue

@@ -6,7 +6,6 @@ import BattleHeader from "@/components/BattleHeader.vue";
 import BowTarget from "@/components/BowTarget.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import PlayersRow from "@/components/PlayersRow.vue";
-import Timer from "@/components/Timer.vue";
 import BattleFooter from "@/components/BattleFooter.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import SButton from "@/components/SButton.vue";
@@ -301,10 +300,10 @@ onHide(() => {
 </script>
 
 <template>
-  <Container :bgType="3" :onBack="onBack">
+  <Container :bgType="start ? 3 : 1" :onBack="onBack">
     <view class="container">
       <BattleHeader v-if="!start" :redTeam="redTeam" :blueTeam="blueTeam" />
-      <TestDistance v-if="!start" :guide="false" />
+      <TestDistance v-if="!start" :guide="false" :isBattle="true" />
       <view v-if="start" class="players-row">
         <TeamAvatars
           :team="blueTeam"
@@ -334,7 +333,6 @@ onHide(() => {
         :goldenRound="goldenRound"
         :power="power"
       />
-      <Timer v-if="!start" />
       <ScreenHint
         :show="showRoundTip"
         :onClose="() => (showRoundTip = false)"