From c507a40aad1b65ea98edcd198945b717753129da Mon Sep 17 00:00:00 2001
From: kron <kai_hong@126.com>
Date: Tue, 24 Jun 2025 13:18:03 +0800
Subject: [PATCH] =?UTF-8?q?UI=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                       |   6 +
 src/components/AppFooter.vue      |   2 +-
 src/components/BowData.vue        |   2 +
 src/components/BowTarget.vue      |  30 ++++-
 src/components/Guide.vue          |  19 +--
 src/components/Header.vue         |  16 ---
 src/components/MeleeResult.vue    |   9 +-
 src/components/PlayerScore.vue    |   5 +-
 src/components/ScorePanel.vue     |  16 ++-
 src/components/ScoreResult.vue    |   6 +-
 src/components/ShootProgress.vue  |   1 +
 src/components/Signin.vue         |   2 +-
 src/components/TeamResult.vue     |  18 +++
 src/components/UserHeader.vue     | 124 ++++++++++++++------
 src/pages.json                    |   9 ++
 src/pages/battle-result.vue       |  57 +++++----
 src/pages/be-vip.vue              |  16 ++-
 src/pages/first-try.vue           |   8 +-
 src/pages/index.vue               |  33 ++----
 src/pages/match-detail.vue        |  28 +++--
 src/pages/melee-bow-data.vue      | 187 ++++++++++++++++++++++++++++++
 src/pages/mine-bow-data.vue       | 102 ++++++++++++++++
 src/pages/my-growth.vue           |  20 ++--
 src/pages/rank-list.vue           |   2 +-
 src/pages/ranking.vue             |  23 +++-
 src/pages/team-bow-data.vue       | 180 ++++++++++++++++++++++++++++
 src/pages/team-match.vue          |   6 +-
 src/static/long-bubble-middle.png | Bin 0 -> 2175 bytes
 src/static/user-icon.png          | Bin 0 -> 981 bytes
 src/util.js                       |  16 +--
 src/websocket.js                  |   4 +-
 31 files changed, 780 insertions(+), 167 deletions(-)
 create mode 100644 src/pages/melee-bow-data.vue
 create mode 100644 src/pages/mine-bow-data.vue
 create mode 100644 src/pages/team-bow-data.vue
 create mode 100644 src/static/long-bubble-middle.png
 create mode 100644 src/static/user-icon.png

diff --git a/src/App.vue b/src/App.vue
index c9158ea..cfc3a90 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -194,4 +194,10 @@ button::after {
   font-size: 14px;
   margin-bottom: 10px;
 }
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
 </style>
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index deddac7..7557b61 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -18,7 +18,7 @@ const tabs = [
 ];
 
 function handleTabClick(index) {
-  if (index !== 0 && !user.value.id) return props.signin();
+  if (index === 1 && !user.value.id) return props.signin();
   if (index === 0) {
     uni.navigateTo({
       url: "/pages/be-vip",
diff --git a/src/components/BowData.vue b/src/components/BowData.vue
index 1b25aff..d8d15bd 100644
--- a/src/components/BowData.vue
+++ b/src/components/BowData.vue
@@ -52,6 +52,8 @@ const props = defineProps({
       :rowCount="arrows.length === 12 ? 6 : 9"
       :total="arrows.length"
       :scores="arrows.map((a) => a.ring)"
+      :margin="arrows.length === 12 ? 4 : 1"
+      :fontSize="arrows.length === 12 ? 25 : 22"
     />
   </view>
 </template>
diff --git a/src/components/BowTarget.vue b/src/components/BowTarget.vue
index 7cea6de..33e8d50 100644
--- a/src/components/BowTarget.vue
+++ b/src/components/BowTarget.vue
@@ -1,6 +1,12 @@
 <script setup>
 import { ref, watch } from "vue";
 import BowPower from "@/components/BowPower.vue";
+import { simulShootAPI } from "@/apis";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { device } = storeToRefs(store);
+
 const props = defineProps({
   totalRound: {
     type: Number,
@@ -38,6 +44,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  start: {
+    type: Boolean,
+    default: false,
+  },
   showE: {
     type: Boolean,
     default: true,
@@ -73,6 +83,9 @@ function calcRealY(num) {
   const len = num < 0 ? Math.abs(num) + 20 : 20 - num;
   return `calc(${(len / 40) * 100}% - 10px)`;
 }
+const simulShoot = async () => {
+  if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
+};
 </script>
 
 <template>
@@ -90,8 +103,9 @@ function calcRealY(num) {
       <view
         v-if="scores.length && showRoundTips && showLatestArrow && showE"
         class="e-value fade-in"
-        >经验 +1</view
       >
+        经验 +1
+      </view>
       <view
         v-if="scores.length && showRoundTips && showLatestArrow"
         class="round-tip fade-in"
@@ -133,6 +147,9 @@ function calcRealY(num) {
       <image :src="avatar" mode="widthFix" />
     </view>
     <text v-if="tips">{{ tips }}</text>
+    <view class="simul" @click="simulShoot" :style="{ color: '#fff' }">
+      模拟射箭
+    </view>
   </view>
 </template>
 
@@ -141,9 +158,11 @@ function calcRealY(num) {
   width: calc(100% - 30px);
   padding: 15px;
   /* overflow: hidden; */
+  position: relative;
 }
 .target {
   position: relative;
+  padding: 5px;
 }
 .e-value {
   position: absolute;
@@ -166,7 +185,7 @@ function calcRealY(num) {
   z-index: 2;
 }
 .round-tip > text {
-  font-size: 18px;
+  font-size: 24px;
   margin-left: 5px;
 }
 .target > image:last-child {
@@ -217,4 +236,11 @@ function calcRealY(num) {
   display: block;
   margin-top: 20px;
 }
+.simul {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  color: #fff;
+  margin-left: 20px;
+}
 </style>
diff --git a/src/components/Guide.vue b/src/components/Guide.vue
index ac9eb93..88bb49b 100644
--- a/src/components/Guide.vue
+++ b/src/components/Guide.vue
@@ -1,14 +1,19 @@
 <script setup>
 defineProps({
-  tall: {
-    type: Boolean,
-    default: false,
-  },
   noBg: {
     type: Boolean,
     default: false,
   },
+  type: {
+    type: Number,
+    default: 0,
+  },
 });
+const bubbleTypes = [
+  "../static/long-bubble.png",
+  "../static/long-bubble-middle.png",
+  "../static/long-bubble-tall.png",
+];
 </script>
 
 <template>
@@ -17,10 +22,8 @@ defineProps({
     <view>
       <image
         v-if="!noBg"
-        :src="
-          tall ? '../static/long-bubble-tall.png' : '../static/long-bubble.png'
-        "
-        :style="{ top: tall ? '-6%' : '-12%' }"
+        :src="bubbleTypes[type]"
+        :style="{ top: type === 2 ? '-5%' : '-12%' }"
         mode="widthFix"
       />
       <slot />
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 38d63aa..d14ae6d 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,10 +1,5 @@
 <script setup>
 import { ref, onMounted } from "vue";
-import useStore from "@/store";
-import { simulShootAPI } from "@/apis";
-import { storeToRefs } from "pinia";
-const store = useStore();
-const { device } = storeToRefs(store);
 const isIos = ref(true);
 
 const props = defineProps({
@@ -18,12 +13,6 @@ const props = defineProps({
   },
 });
 
-const simulShoot = async () => {
-  if (device.value.deviceId) {
-    await simulShootAPI(device.value.deviceId);
-  }
-};
-
 const onClick = () => {
   if (props.onBack) props.onBack();
   else uni.navigateBack();
@@ -41,7 +30,6 @@ onMounted(() => {
       <image src="../static/back.png" mode="widthFix" />
     </view>
     <text>{{ title }}</text>
-    <view class="simul" @click="simulShoot">模拟射箭</view>
   </view>
 </template>
 
@@ -67,8 +55,4 @@ onMounted(() => {
 .container > text {
   color: #fff;
 }
-.simul {
-  color: #fff;
-  margin-left: 20px;
-}
 </style>
diff --git a/src/components/MeleeResult.vue b/src/components/MeleeResult.vue
index 403d2e4..83b133d 100644
--- a/src/components/MeleeResult.vue
+++ b/src/components/MeleeResult.vue
@@ -77,13 +77,14 @@ const onSelect = (userId) => {
       <BowTarget
         :scores="scores"
         :showLatestArrow="false"
-        :avatar="currentUser.avatar"
+        :avatar="currentUser ? currentUser.avatar : ''"
       />
     </view>
     <view class="score-text"
-      ><text :style="{ color: '#fed847' }">12</text>支箭，共<text
-        :style="{ color: '#fed847' }"
-        >100</text
+      ><text :style="{ color: '#fed847' }">{{ scores.length }}</text
+      >支箭，共<text :style="{ color: '#fed847' }">{{
+        scores.reduce((last, next) => last + next.ring, 0)
+      }}</text
       >环</view
     >
     <view class="score-row">
diff --git a/src/components/PlayerScore.vue b/src/components/PlayerScore.vue
index 475a7a1..28a5866 100644
--- a/src/components/PlayerScore.vue
+++ b/src/components/PlayerScore.vue
@@ -53,16 +53,15 @@ const rowCount = new Array(6).fill(0);
 
 <style scoped>
 .container {
-  width: calc(100% - 75px);
+  width: calc(100% - 70px);
   display: flex;
   align-items: center;
   border: 1px solid #fff3;
   margin: 10px 0;
-  margin-left: 40px;
+  margin-left: 35px;
   border-radius: 15px;
   padding: 10px;
   color: #fff9;
-  margin-right: 20px;
   font-size: 14px;
   position: relative;
 }
diff --git a/src/components/ScorePanel.vue b/src/components/ScorePanel.vue
index 8fb418d..c03a55c 100644
--- a/src/components/ScorePanel.vue
+++ b/src/components/ScorePanel.vue
@@ -44,7 +44,8 @@ watch(
         margin: margin + 'px',
       }"
     >
-      {{ scores[index] }}
+      <image src="../static/score-bg.png" mode="widthFix" />
+      <text>{{ scores[index] }}</text>
     </view>
   </view>
 </template>
@@ -58,13 +59,22 @@ watch(
   margin: 0 5vw;
 }
 .score-item {
-  background-image: url("../static/score-bg.png");
+  /* background-image: url("../static/score-bg.png");
   background-size: cover;
   background-repeat: no-repeat;
-  background-position: center;
+  background-position: center; */
   color: #fed847;
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
+}
+.score-item > image {
+  position: absolute;
+  width: 100%;
+  top: 5%;
+}
+.score-item > text {
+  position: relative;
 }
 </style>
diff --git a/src/components/ScoreResult.vue b/src/components/ScoreResult.vue
index b8dc21f..b9e3dd3 100644
--- a/src/components/ScoreResult.vue
+++ b/src/components/ScoreResult.vue
@@ -52,11 +52,7 @@ setTimeout(() => {
       <image src="../static/finish-frame.png" mode="widthFix" />
       <text
         >完成<text class="gold-text">{{ total }}</text
-        >箭，获得<text class="gold-text">{{
-          result.arrows
-            .map((a) => a.ring)
-            .reduce((last, next) => last + next, 0)
-        }}</text
+        >箭，获得<text class="gold-text">{{ total }}</text
         >点经验</text
       >
     </view>
diff --git a/src/components/ShootProgress.vue b/src/components/ShootProgress.vue
index 5e7aea1..f9dc2e8 100644
--- a/src/components/ShootProgress.vue
+++ b/src/components/ShootProgress.vue
@@ -118,6 +118,7 @@ onUnmounted(() => {
 }
 .container > view:first-child > button:last-child > image {
   width: 50px;
+  transform: translateX(10px);
 }
 .container > view:last-child {
   z-index: -1;
diff --git a/src/components/Signin.vue b/src/components/Signin.vue
index 25d85aa..e6c3811 100644
--- a/src/components/Signin.vue
+++ b/src/components/Signin.vue
@@ -137,7 +137,7 @@ const handleLogin = () => {
   align-items: center;
   margin-bottom: 20px;
   border-bottom: 1px solid #fff3;
-  padding: 20px 2px;
+  line-height: 55px;
 }
 .avatar {
   margin: 0;
diff --git a/src/components/TeamResult.vue b/src/components/TeamResult.vue
index 3883bd7..9df7f0e 100644
--- a/src/components/TeamResult.vue
+++ b/src/components/TeamResult.vue
@@ -22,6 +22,7 @@ const redScores = ref([]);
 const blueScores = ref([]);
 const tabs = ref(["所有轮次"]);
 const players = ref([]);
+const allRoundsScore = ref({});
 const onClickTab = (index) => {
   selected.value = index;
   redScores.value = [];
@@ -29,14 +30,22 @@ const onClickTab = (index) => {
   const { bluePlayers, redPlayers, roundsData } = props.data;
   if (index === 0) {
     Object.keys(bluePlayers).forEach((p) => {
+      allRoundsScore.value[p] = [];
       Object.values(roundsData).forEach((round) => {
+        allRoundsScore.value[p].push(
+          round[p].reduce((last, next) => last + next.ring, 0)
+        );
         round[p].forEach((arrow) => {
           blueScores.value.push(arrow);
         });
       });
     });
     Object.keys(redPlayers).forEach((p) => {
+      allRoundsScore.value[p] = [];
       Object.values(roundsData).forEach((round) => {
+        allRoundsScore.value[p].push(
+          round[p].reduce((last, next) => last + next.ring, 0)
+        );
         round[p].forEach((arrow) => {
           redScores.value.push(arrow);
         });
@@ -108,6 +117,15 @@ watch(
         :src="player.avatar"
         :borderColor="data.bluePlayers[player.playerId] ? 1 : 2"
       />
+      <view
+        v-if="selected === 0"
+        v-for="(ring, index) in allRoundsScore[player.playerId]"
+        :key="index"
+        class="score-item"
+        :style="{ width: '13vw', height: '13vw' }"
+      >
+        {{ ring }}
+      </view>
       <view
         v-if="selected > 0"
         v-for="(score, index) in data.roundsData[selected][player.playerId]"
diff --git a/src/components/UserHeader.vue b/src/components/UserHeader.vue
index d6edef7..b9680b1 100644
--- a/src/components/UserHeader.vue
+++ b/src/components/UserHeader.vue
@@ -10,6 +10,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  onSignin: {
+    type: Function,
+    default: () => {},
+  },
 });
 const nextLvlPoints = ref("");
 const containerWidth = computed(() => (props.showRank ? "72vw" : "100vw"));
@@ -39,46 +43,65 @@ onMounted(() => {
 
 <template>
   <view class="container" :style="{ width: containerWidth }">
-    <Avatar :frame="true" :src="user.avatar" :onClick="toUserPage" :size="42" />
-    <view class="user-details">
-      <view class="user-name">
-        <text>{{ user.nickName }}</text>
-        <image
-          class="user-name-image"
-          src="../static/vip1.png"
-          mode="widthFix"
-        />
-      </view>
-      <view class="user-stats">
-        <text class="level-tag level-tag-first">{{ user.lvlName }}</text>
-        <text class="level-tag level-tag-second">L{{ user.lvl }}</text>
-        <view class="rank-tag">
-          <view
-            class="rank-tag-progress"
-            :style="{
-              width: `${(Math.max(user.scores, 0) / nextLvlPoints) * 100}%`,
-            }"
+    <block v-if="user.id"
+      ><Avatar
+        :frame="true"
+        :src="user.avatar"
+        :onClick="toUserPage"
+        :size="42"
+      />
+      <view class="user-details">
+        <view class="user-name">
+          <text>{{ user.nickName }}</text>
+          <image
+            class="user-name-image"
+            src="../static/vip1.png"
+            mode="widthFix"
           />
-          <text class="rank-tag-text">
-            {{ Math.max(user.scores, 0) }}/{{ nextLvlPoints }}
-          </text>
+        </view>
+        <view class="user-stats">
+          <text class="level-tag level-tag-first">{{ user.lvlName }}</text>
+          <text class="level-tag level-tag-second">L{{ user.lvl }}</text>
+          <view class="rank-tag">
+            <view
+              class="rank-tag-progress"
+              :style="{
+                width: `${(Math.max(user.scores, 0) / nextLvlPoints) * 100}%`,
+              }"
+            />
+            <text class="rank-tag-text">
+              {{ Math.max(user.scores, 0) }}/{{ nextLvlPoints }}
+            </text>
+          </view>
         </view>
       </view>
-    </view>
-    <view v-if="showRank === true" class="rank-info">
-      <image
-        class="rank-info-image"
-        src="../static/global-rank.png"
-        mode="widthFix"
-      />
-      <text>本赛季</text>
-      <text>暂未上榜</text>
-      <!-- <text class="rank-number"
+      <view v-if="showRank === true" class="rank-info">
+        <image
+          class="rank-info-image"
+          src="../static/global-rank.png"
+          mode="widthFix"
+        />
+        <text>本赛季</text>
+        <text>暂未上榜</text>
+        <!-- <text class="rank-number"
         >第<text :style="{ color: '#ffd700' }"
           >{{ user.points }}/{{ user.rankLvl }}</text
         >名</text
       > -->
-    </view>
+      </view>
+    </block>
+    <block v-else>
+      <view class="signin">
+        <image src="../static/user-icon.png" mode="widthFix" />
+        <view @click="() => (showModal = true)">
+          <text>新来的弓箭手你好呀~</text>
+          <view @click="onSignin">
+            <text>微信登录</text>
+            <image src="../static/enter-arrow-blue.png" mode="widthFix" />
+          </view>
+        </view>
+      </view>
+    </block>
   </view>
 </template>
 
@@ -163,23 +186,54 @@ onMounted(() => {
 }
 
 .rank-info {
+  width: 68px;
   text-align: left;
   font-size: 12px;
   position: relative;
   color: #b3b3b3;
   padding-left: 8px;
+  margin-left: 8px;
   display: flex;
   flex-direction: column;
 }
-
 .rank-info-image {
   position: absolute;
   top: -6px;
   left: -9px;
   width: 90px;
 }
-
+.rank-info > text {
+  text-align: center;
+}
 .rank-number {
   display: block;
 }
+.signin {
+  display: flex;
+  align-items: center;
+}
+.signin > image {
+  width: 40px;
+  height: 40px;
+}
+.signin > view {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  margin-left: 12px;
+  font-size: 14px;
+}
+.signin > view > view:last-child {
+  display: flex;
+  align-items: center;
+}
+.signin > view > view:last-child > text {
+  color: #39a8ff;
+  margin-top: 2px;
+}
+.signin > view > view:last-child > image {
+  width: 15px;
+  margin-top: 2px;
+}
 </style>
diff --git a/src/pages.json b/src/pages.json
index 91a4cb3..82d910a 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -68,6 +68,15 @@
     },
     {
       "path": "pages/battle-result"
+    },
+    {
+      "path": "pages/team-bow-data"
+    },
+    {
+      "path": "pages/melee-bow-data"
+    },
+    {
+      "path": "pages/mine-bow-data"
     }
   ],
   "globalStyle": {
diff --git a/src/pages/battle-result.vue b/src/pages/battle-result.vue
index 0129e31..5bcc940 100644
--- a/src/pages/battle-result.vue
+++ b/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;
diff --git a/src/pages/be-vip.vue b/src/pages/be-vip.vue
index b91e3cc..123f513 100644
--- a/src/pages/be-vip.vue
+++ b/src/pages/be-vip.vue
@@ -3,12 +3,15 @@ import { ref } from "vue";
 import Container from "@/components/Container.vue";
 import Avatar from "@/components/Avatar.vue";
 import SButton from "@/components/SButton.vue";
+import SModal from "@/components/SModal.vue";
+import Signin from "@/components/Signin.vue";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user, config } = storeToRefs(store);
 
 const selectedVIP = ref(0);
+const showModal = ref(false);
 
 const chooseVip = (index) => {
   selectedVIP.value = index;
@@ -16,10 +19,8 @@ const chooseVip = (index) => {
 
 const onPay = () => {
   if (!user.value.id) {
-    return uni.showToast({
-      title: "请先登录",
-      icon: "none",
-    });
+    showModal.value = true;
+  } else {
   }
 };
 </script>
@@ -29,7 +30,7 @@ const onPay = () => {
     <view v-if="user.id" class="header">
       <view>
         <Avatar :src="user.avatar" :size="35" :border="true" />
-        <text>{{ user.nickName }}</text>
+        <text class="truncate">{{ user.nickName }}</text>
       </view>
       <text>5月5号到期</text>
     </view>
@@ -76,6 +77,9 @@ const onPay = () => {
         </view>
       </view>
       <SButton :onClick="onPay">支付</SButton>
+      <SModal :show="showModal" :onClose="() => (showModal = false)">
+        <Signin :onClose="() => (showModal = false)" />
+      </SModal>
     </view>
   </Container>
 </template>
@@ -97,6 +101,8 @@ const onPay = () => {
 }
 .header > view > text:last-child {
   margin-left: 10px;
+  width: 120px;
+  text-align: left;
 }
 .header > text:nth-child(2) {
   color: #fed847;
diff --git a/src/pages/first-try.vue b/src/pages/first-try.vue
index 9035666..1b90180 100644
--- a/src/pages/first-try.vue
+++ b/src/pages/first-try.vue
@@ -118,8 +118,12 @@ const onClose = () => {
     <view class="container">
       <Guide
         v-if="step !== 4"
-        :tall="
-          (step === 1 && user.nickName.length > 6) || step === 2 || step === 5
+        :type="
+          step === 2
+            ? 2
+            : step === 5 || (step === 1 && user.nickName.length > 6)
+            ? 1
+            : 0
         "
       >
         <text v-if="step === 0">
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 79dca27..a68f874 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -67,21 +67,19 @@ onMounted(async () => {
     console.error("获取配置失败：", error);
   }
 });
+
+const comingSoon = () => {
+  uni.showToast({
+    title: "敬请期待",
+    icon: "none",
+  });
+};
 </script>
 
 <template>
   <view class="root-container" :style="{ paddingTop: isIos ? '45px' : '40px' }">
     <AppBackground />
-    <!-- 根据登录状态显示用户信息或登录按钮 -->
-    <block v-if="user.id">
-      <UserHeader showRank />
-    </block>
-    <block v-else>
-      <view class="signin-btn" @click="() => (showModal = true)">
-        <text>新来的弓箭手你好呀~</text>
-        <text>微信登录 &gt;</text>
-      </view>
-    </block>
+    <UserHeader showRank :onSignin="() => (showModal = true)" />
     <view class="container">
       <view class="feature-grid">
         <view class="bow-card">
@@ -141,6 +139,7 @@ onMounted(async () => {
             v-for="(region, index) in ['广东', '湖南', '内蒙', '海南', '四川']"
             :key="index"
             class="region-item"
+            @click="comingSoon"
           >
             <image src="../static/region-bg.png" mode="widthFix" />
             <image
@@ -174,7 +173,7 @@ onMounted(async () => {
               <text>分</text>
             </view>
           </view>
-          <view class="region-more">
+          <view class="region-more" @click="comingSoon">
             <image src="../static/region-more.png" mode="widthFix" />
             <text>...</text>
             <text>更多</text>
@@ -385,16 +384,4 @@ onMounted(async () => {
   line-height: 20px;
   margin-bottom: 5px;
 }
-.signin-btn {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  margin-left: 10px;
-  font-size: 14px;
-}
-.signin-btn > text:last-child {
-  color: #39a8ff;
-  margin-top: 2px;
-}
 </style>
diff --git a/src/pages/match-detail.vue b/src/pages/match-detail.vue
index a39dac5..5aad2ba 100644
--- a/src/pages/match-detail.vue
+++ b/src/pages/match-detail.vue
@@ -4,21 +4,23 @@ import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 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 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 roundsData = ref([]);
+const battleId = ref("");
 const data = ref({
   players: [],
 });
-const show = ref(false);
+// const show = ref(false);
 
 onLoad(async (options) => {
   if (options.id) {
+    battleId.value = options.id;
     const result = await getGameAPI(options.id);
     data.value = result;
     if (result.mode === 1) {
@@ -51,6 +53,18 @@ onLoad(async (options) => {
     }
   }
 });
+
+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>
@@ -93,7 +107,7 @@ onLoad(async (options) => {
         :style="{ border: 'none', padding: '5px 15px' }"
       >
         <text>大乱斗</text>
-        <view @click="() => (show = true)">
+        <view @click="checkBowData">
           <text>查看靶纸</text>
           <image src="../static/back.png" mode="widthFix" />
         </view>
@@ -114,7 +128,7 @@ onLoad(async (options) => {
       >
         <view class="score-header">
           <text>第{{ index + 1 }}轮</text>
-          <view @click="() => (show = true)">
+          <view @click="checkBowData">
             <text>查看靶纸</text>
             <image src="../static/back.png" mode="widthFix" />
           </view>
@@ -150,7 +164,7 @@ onLoad(async (options) => {
       </view>
       <view :style="{ height: '20px' }"></view>
     </view>
-    <TeamResult
+    <!-- <TeamResult
       v-if="data.mode === 1"
       :show="show"
       :onClose="() => (show = false)"
@@ -161,7 +175,7 @@ onLoad(async (options) => {
       :show="show"
       :onClose="() => (show = false)"
       :data="data"
-    />
+    /> -->
   </Container>
 </template>
 
diff --git a/src/pages/melee-bow-data.vue b/src/pages/melee-bow-data.vue
new file mode 100644
index 0000000..8ab4062
--- /dev/null
+++ b/src/pages/melee-bow-data.vue
@@ -0,0 +1,187 @@
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import Container from "@/components/Container.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import Avatar from "@/components/Avatar.vue";
+import { roundsName } from "@/constants";
+import { getGameAPI } from "@/apis";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+const scores = ref([]);
+const currentUser = ref({});
+const data = ref({});
+onLoad(async (options) => {
+  if (options.battleId) {
+    const result = await getGameAPI(options.battleId);
+    data.value = result;
+    const mine = result.players.find((p) => p.playerId === user.value.id);
+    currentUser.value = mine;
+    if (mine && mine.arrowHistory) {
+      scores.value = mine.arrowHistory;
+    }
+  }
+});
+const onSelect = (userId) => {
+  const user = data.value.players.find((p) => p.playerId === userId);
+  currentUser.value = user;
+  if (user && user.arrowHistory) {
+    scores.value = user.arrowHistory;
+  }
+};
+</script>
+
+<template>
+  <Container title="5人大乱斗 - 靶纸">
+    <view class="container">
+      <view class="rank-rows">
+        <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"
+          />
+          <view v-if="index > 2" class="rank-view">{{ index + 1 }}</view>
+          <Avatar :src="player.avatar" :size="24" />
+          <text
+            >积分
+            {{
+              player.totalScore > 0
+                ? "+" + player.totalScore
+                : player.totalScore
+            }}分</text
+          >
+          <text>{{ player.totalRings }}环</text>
+          <text v-for="(arrow, index2) in player.arrowHistory" :key="index2">
+            {{ arrow.ring }}环
+          </text>
+        </view>
+      </view>
+      <view :style="{ margin: '20px 0' }">
+        <BowTarget
+          :scores="scores"
+          :showLatestArrow="false"
+          :avatar="currentUser ? currentUser.avatar : ''"
+        />
+      </view>
+      <view class="score-text"
+        ><text :style="{ color: '#fed847' }">{{ scores.length }}</text
+        >支箭，共<text :style="{ color: '#fed847' }">{{
+          scores.reduce((last, next) => last + next.ring, 0)
+        }}</text
+        >环</view
+      >
+      <view class="score-row">
+        <view
+          v-for="(score, index) in scores"
+          :key="index"
+          class="score-item"
+          :style="{ width: '13vw', height: '13vw' }"
+        >
+          {{ score.ring }}
+        </view>
+      </view>
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.score-text {
+  width: 100%;
+  color: #fff;
+  text-align: center;
+  font-size: 16px;
+  margin-bottom: 6px;
+}
+.score-row {
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.score-item {
+  background-image: url("../static/score-bg.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  color: #fed847;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  margin: 3px;
+}
+.rank-rows {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-top: 1px solid #fff3;
+}
+.rank-rows > view {
+  width: clac(100% - 20px);
+  color: #fff9;
+  border-bottom: 1px solid #fff3;
+  padding: 7px 10px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  overflow-x: auto;
+}
+.rank-rows > view::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+.rank-rows > view > image:first-child,
+.rank-rows > view > view:first-child {
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  font-size: 12px;
+  margin-right: 10px;
+  flex: 0 0 auto;
+}
+.rank-rows > view > view:first-child {
+  background-color: #6d6d6d;
+  border-radius: 50%;
+}
+.rank-rows > view > text {
+  margin-left: 10px;
+  flex: 0 0 auto;
+  display: block;
+  width: 25px;
+}
+.rank-rows > view > text:nth-child(3) {
+  width: 80px;
+}
+.rank-rows > view > text:nth-child(4) {
+  color: #fed847;
+  padding-right: 10px;
+  border-right: 1px solid #fff3;
+  width: 32px;
+}
+</style>
diff --git a/src/pages/mine-bow-data.vue b/src/pages/mine-bow-data.vue
new file mode 100644
index 0000000..166bec8
--- /dev/null
+++ b/src/pages/mine-bow-data.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import Container from "@/components/Container.vue";
+import Avatar from "@/components/Avatar.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import ScorePanel from "@/components/ScorePanel.vue";
+import { getPractiseAPI } from "@/apis";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+const arrows = ref([]);
+
+onLoad(async (options) => {
+  if (options.id) {
+    const result = await getPractiseAPI(options.id);
+    arrows.value = result.arrows;
+  }
+});
+</script>
+
+<template>
+  <Container title="个人练习 - 靶纸">
+    <view class="container">
+      <!-- <view class="header">
+        <view>
+          <Avatar :src="user.avatar" frame />
+          <view>
+            <text>{{ user.nickName }}</text>
+            <text>{{ user.lvlName }}</text>
+          </view>
+        </view>
+      </view> -->
+      <view :style="{ marginBottom: '20px' }">
+        <BowTarget :scores="arrows" :showLatestArrow="false" />
+      </view>
+      <view class="desc">
+        <text>{{ arrows.length }}</text>
+        <text>支箭，共</text>
+        <text>{{ arrows.reduce((a, b) => a + b.ring, 0) }}</text>
+        <text>环</text>
+      </view>
+      <ScorePanel
+        :rowCount="arrows.length === 12 ? 6 : 9"
+        :total="arrows.length"
+        :scores="arrows.map((a) => a.ring)"
+        :margin="arrows.length === 12 ? 4 : 1"
+        :fontSize="arrows.length === 12 ? 25 : 22"
+      />
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: calc(100% - 20px);
+  padding: 10px;
+}
+.header > view:first-child {
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+}
+.header > view:first-child > view:last-child {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-left: 10px;
+  color: #fff;
+}
+.header > view:first-child > view:last-child > text:last-child {
+  font-size: 10px;
+  color: #fff9;
+  background-color: #5f51ff;
+  padding: 2px 5px;
+  border-radius: 10px;
+  margin-top: 5px;
+}
+.header > view:last-child > image {
+  width: 40px;
+}
+.desc {
+  color: #fff;
+  margin-bottom: 40px;
+  width: 100%;
+  text-align: center;
+}
+.desc > text:nth-child(2),
+.desc > text:nth-child(4) {
+  color: #fed847;
+}
+</style>
diff --git a/src/pages/my-growth.vue b/src/pages/my-growth.vue
index 784a0b9..86aeadf 100644
--- a/src/pages/my-growth.vue
+++ b/src/pages/my-growth.vue
@@ -4,11 +4,7 @@ import Container from "@/components/Container.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowData from "@/components/BowData.vue";
 import ScrollList from "@/components/ScrollList.vue";
-import {
-  getBattleListAPI,
-  getPractiseResultListAPI,
-  getPractiseAPI,
-} from "@/apis";
+import { getBattleListAPI, getPractiseResultListAPI } from "@/apis";
 
 import { ref } from "vue";
 
@@ -16,8 +12,8 @@ const selectedIndex = ref(0);
 const matchList = ref([]);
 const battleList = ref([]);
 const practiseList = ref([]);
-const showBowData = ref(false);
-const arrows = ref([]);
+// const showBowData = ref(false);
+// const arrows = ref([]);
 
 const toMatchDetail = (id) => {
   uni.navigateTo({
@@ -25,9 +21,9 @@ const toMatchDetail = (id) => {
   });
 };
 const getPractiseDetail = async (id) => {
-  const result = await getPractiseAPI(id);
-  arrows.value = result.arrows;
-  showBowData.value = true;
+  uni.navigateTo({
+    url: `/pages/mine-bow-data?id=${id}`,
+  });
 };
 const onMatchLoading = async (page) => {
   const result = await getBattleListAPI(page, 2);
@@ -175,11 +171,11 @@ const onPractiseLoading = async (page) => {
         </view>
       </ScrollList>
     </view>
-    <BowData
+    <!-- <BowData
       :arrows="arrows"
       :show="showBowData"
       :onClose="() => (showBowData = false)"
-    />
+    /> -->
   </Container>
 </template>
 
diff --git a/src/pages/rank-list.vue b/src/pages/rank-list.vue
index 0aa10a9..1d0cc38 100644
--- a/src/pages/rank-list.vue
+++ b/src/pages/rank-list.vue
@@ -48,7 +48,7 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
         <text>{{ subTitles[selectedIndex] }}</text>
       </view>
       <view
-        v-for="(_, index) in new Array(10).fill(1)"
+        v-for="(_, index) in new Array(100).fill(1)"
         :key="index"
         class="rank-list-item"
         :style="{
diff --git a/src/pages/ranking.vue b/src/pages/ranking.vue
index 1750b45..259a756 100644
--- a/src/pages/ranking.vue
+++ b/src/pages/ranking.vue
@@ -36,6 +36,16 @@ const toMeleeMatchPage = (gameType, teamSize) => {
     url: `/pages/melee-match?gameType=${gameType}&teamSize=${teamSize}`,
   });
 };
+const toMyGrowthPage = () => {
+  uni.navigateTo({
+    url: "/pages/my-growth",
+  });
+};
+const toRankListPage = () => {
+  uni.navigateTo({
+    url: "/pages/rank-list",
+  });
+};
 </script>
 
 <template>
@@ -101,7 +111,7 @@ const toMeleeMatchPage = (gameType, teamSize) => {
             <view :style="{ width: '45%', backgroundColor: '#FFD947' }" />
           </view>
         </view>
-        <view>查看我的比赛记录</view>
+        <view @click="toMyGrowthPage">查看我的比赛记录</view>
       </view>
       <view class="ranking-data">
         <view>
@@ -143,6 +153,7 @@ const toMeleeMatchPage = (gameType, teamSize) => {
           <text>8850<text>分</text></text>
         </view>
       </view>
+      <view class="see-more" @click="toRankListPage">点击查看更多</view>
     </view>
   </Container>
 </template>
@@ -160,6 +171,8 @@ const toMeleeMatchPage = (gameType, teamSize) => {
   border: 1px solid #54431d;
   border-radius: 10px;
   margin: 0 15px;
+}
+.ranking-my-data {
   margin-bottom: 15px;
 }
 .ranking-my-data {
@@ -318,4 +331,12 @@ const toMeleeMatchPage = (gameType, teamSize) => {
   font-size: 13px;
   margin-left: 3px;
 }
+.see-more {
+  color: #39a8ff;
+  font-size: 14px;
+  text-align: center;
+  width: 100%;
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
 </style>
diff --git a/src/pages/team-bow-data.vue b/src/pages/team-bow-data.vue
new file mode 100644
index 0000000..a1cfed0
--- /dev/null
+++ b/src/pages/team-bow-data.vue
@@ -0,0 +1,180 @@
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import Container from "@/components/Container.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import Avatar from "@/components/Avatar.vue";
+import { roundsName } from "@/constants";
+import { getGameAPI } from "@/apis";
+const selected = ref(0);
+const redScores = ref([]);
+const blueScores = ref([]);
+const tabs = ref(["所有轮次"]);
+const players = ref([]);
+const allRoundsScore = ref({});
+const data = ref({});
+onLoad(async (options) => {
+  if (options.battleId) {
+    const result = await getGameAPI(options.battleId);
+    data.value = result;
+    if (result.winner === 0) {
+      players.value = [
+        ...Object.values(result.redPlayers),
+        ...Object.values(result.bluePlayers),
+      ];
+    } else if (result.winner === 1) {
+      players.value = [
+        ...Object.values(result.bluePlayers),
+        ...Object.values(result.redPlayers),
+      ];
+    }
+    Object.keys(result.roundsData).forEach((key) => {
+      tabs.value.push(`第${roundsName[key]}轮`);
+    });
+    onClickTab(0);
+  }
+});
+const onClickTab = (index) => {
+  selected.value = index;
+  redScores.value = [];
+  blueScores.value = [];
+  const { bluePlayers, redPlayers, roundsData } = data.value;
+  if (index === 0) {
+    Object.keys(bluePlayers).forEach((p) => {
+      allRoundsScore.value[p] = [];
+      Object.values(roundsData).forEach((round) => {
+        allRoundsScore.value[p].push(
+          round[p].reduce((last, next) => last + next.ring, 0)
+        );
+        round[p].forEach((arrow) => {
+          blueScores.value.push(arrow);
+        });
+      });
+    });
+    Object.keys(redPlayers).forEach((p) => {
+      allRoundsScore.value[p] = [];
+      Object.values(roundsData).forEach((round) => {
+        allRoundsScore.value[p].push(
+          round[p].reduce((last, next) => last + next.ring, 0)
+        );
+        round[p].forEach((arrow) => {
+          redScores.value.push(arrow);
+        });
+      });
+    });
+  } else {
+    Object.keys(bluePlayers).forEach((p) => {
+      roundsData[index][p].forEach((arrow) => {
+        blueScores.value.push(arrow);
+      });
+    });
+    Object.keys(redPlayers).forEach((p) => {
+      roundsData[index][p].forEach((arrow) => {
+        redScores.value.push(arrow);
+      });
+    });
+  }
+};
+</script>
+
+<template>
+  <Container title="1v1排位赛 - 靶纸">
+    <view class="container">
+      <view>
+        <view
+          v-for="(tab, index) in tabs"
+          :key="index"
+          @click="() => onClickTab(index)"
+          :class="selected === index ? 'selected-tab' : ''"
+        >
+          {{ tab }}
+        </view>
+      </view>
+      <view :style="{ margin: '20px 0' }">
+        <BowTarget
+          :scores="redScores"
+          :blueScores="blueScores"
+          :showLatestArrow="false"
+        />
+      </view>
+      <view class="score-row" v-for="(player, index) in players" :key="index">
+        <Avatar
+          :src="player.avatar"
+          :borderColor="data.bluePlayers[player.playerId] ? 1 : 2"
+        />
+        <view
+          v-if="selected === 0"
+          v-for="(ring, index) in allRoundsScore[player.playerId]"
+          :key="index"
+          class="score-item"
+          :style="{ width: '13vw', height: '13vw' }"
+        >
+          {{ ring }}
+        </view>
+        <view
+          v-if="selected > 0"
+          v-for="(score, index) in data.roundsData[selected][player.playerId]"
+          :key="index"
+          class="score-item"
+          :style="{ width: '13vw', height: '13vw' }"
+        >
+          {{ score.ring }}
+        </view>
+      </view>
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.container > view:nth-child(1) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: calc(100% - 20px);
+  color: #fff9;
+  padding: 10px;
+  overflow-x: auto;
+}
+.container > view:nth-child(1)::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+.container > view:nth-child(1) > view {
+  border: 1px solid #fff9;
+  border-radius: 20px;
+  padding: 7px 10px;
+  margin: 0 5px;
+  font-size: 14px;
+  flex: 0 0 auto;
+}
+.selected-tab {
+  background-color: #fed847;
+  border-color: #fed847 !important;
+  color: #000;
+}
+.score-row {
+  margin: 10px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.score-item {
+  background-image: url("../static/score-bg.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  color: #fed847;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  margin-left: 10px;
+}
+</style>
diff --git a/src/pages/team-match.vue b/src/pages/team-match.vue
index 89a5b68..74ddf96 100644
--- a/src/pages/team-match.vue
+++ b/src/pages/team-match.vue
@@ -150,7 +150,7 @@ onUnmounted(() => {
         :redTeam="redTeam"
         :blueTeam="blueTeam"
       />
-      <Guide noBg v-if="!start && matching">
+      <Guide noBg v-if="!start && battleId">
         <view :style="{ display: 'flex', justifyContent: 'space-between' }">
           <view :style="{ display: 'flex', flexDirection: 'column' }">
             <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
@@ -159,7 +159,7 @@ onUnmounted(() => {
           <BowPower :power="45" />
         </view>
       </Guide>
-      <ShootProgress v-if="start" :tips="tips" :seq="seq" :total="30" />
+      <ShootProgress v-if="start" :tips="tips" :seq="seq" :total="15" />
       <PlayersRow
         v-if="start"
         :currentShooterId="currentShooterId"
@@ -167,7 +167,7 @@ onUnmounted(() => {
         :redTeam="redTeam"
       />
       <BowTarget
-        v-if="matching"
+        v-if="battleId"
         :showE="start && user.id === currentShooterId"
         :power="start ? power : 0"
         :currentRound="currentRound"
diff --git a/src/static/long-bubble-middle.png b/src/static/long-bubble-middle.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d5e3769186edcc2a7be3269a1f1aaab854f5d77
GIT binary patch
literal 2175
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
R8t|h4VeOsms%_6D{s*_`5_bRq

literal 0
HcmV?d00001

diff --git a/src/static/user-icon.png b/src/static/user-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..489292d66fe2c3ae6ad0192271a0e452d1fcbaf0
GIT binary patch
literal 981
zcmV;`11kK9P)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700001b5ch_0Itp)
z=>Px&k4Z#9R9HvNnLTXNP!NFcT=&PR9jOhiic+MgsRRoX2zFK$1`tAGV*!eoDFXuo
z-4O*AHY9{#U}0rPf&~^(OBFSWP)pJuKg%Yq<%6^0$j(n~zowOMjNjdTzIX5L{DL4M
zM5H*5bKZ5`ONe+508SIpNklZ*91#gb{0#s<iRi1Us-HAX`+|sGT6dU6!M5$9=Xnc6
zbd!iqrO`#iDk8pC6lFP=%hi(VCIU1~vw(<?iRcypj3zbSXI&E!UlGxxd_LcZvlR;{
zgt$&b&j8>=oUxS8>xg*IFpRec>GcI9BGt02r$lrc0AgPxC0wwa5b>q1>-Q1S?Pa5<
zV<OUo5bprsvZUj*Y99^5xQ2*Mr(zc%M@|Uw;TYipCWgGy8Obg{A;fbcx|22pgIJG<
zFAT%D8@3ezY#oR<N0@VQ@4-2FBYbe$fLuxd;Kvc1);Orn=XC%$6O^Dfpb%o2h$7)l
zV|j0H4;;q<L<CLKV0d^qje2A)B0e_^V}XD40l7oCuKP=-2on)(Zf?Tv?ry|Mp-_Oy
z$w?nrLYk_ombv5j+LmQK@jP!)!jKQQy}jK9!r;@>(=ahHA!8O4MOo5y{ULJWw=AoY
zwzslZ&+}k)b+s?R(9jUf&CN+gk$bnU>m{^p`-1DbpJiT?b8dZoy)OVqaejUt7*s}7
zRlSI&X+HR$drL9~Y}<xvwR&WL0I-PM(unA476B3QJp+CtqO&r9`}_N_wzk$cf_#F@
z<uWI{jCr>EowxXpY;oost5hn$puHrQ%famItQ1^Jsm>AnOGMH`=+4d#Y;0`wjAF4^
zgz@olX+T759vYCNSgX~z*hfI}`8>?b%t*ueU4#J-v&Dh;X0z#Ub+~JA?#Y&y&|CRi
zEPY7W5JzxpYYXc2dIXT8$5A|t_=iNc%rKZ`S<q-SfFs!1bNM+B4cwDu^UyCdX$v(w
z7DD)7Ji){b1H680Y^)6$x4t9di-}tuJ2Fkv-_9gpom(4#@`R)7dhCm_zTfJS4hvjL
zxTK_vKvxPf=+xAdKZ+eB?O`G5xV5sf;va}X$jHbDluD%oO|{1@UX^5E<*|y#t3gNt
z!05orPUA*?9<BJa4np{JkB;_lUR@(UJI(w@Q!9#m50lN$&S2{@{o&qfUD>|+XhCN8
z@+jEqOkcl+OG#!gFvF0Uz5)(|X7&=j$7FJBe?$BO?F259kMp>k00000NkvXXu0mjf
DtYFM<

literal 0
HcmV?d00001

diff --git a/src/util.js b/src/util.js
index 7641238..1e21d74 100644
--- a/src/util.js
+++ b/src/util.js
@@ -33,7 +33,7 @@ export function renderScores(ctx, arrows = []) {
         item.ring,
         18,
         "#fed847",
-        30 + (i % 9) * 30,
+        29.5 + (i % 9) * 30,
         310 + Math.ceil((i + 1) / 9) * 30,
         "center"
       );
@@ -171,22 +171,22 @@ export function generateCanvasImage(canvasId, type, user, data) {
   } else if (type == 3) {
     titleImage = "../static/practise-two-title.png";
   }
-  ctx.drawImage(titleImage, (width - 160) / 2 - 5, 160, 160, 40);
+  ctx.drawImage(titleImage, (width - 160) / 2, 160, 160, 40);
   const subTitleWidth = ctx.measureText(subTitle).width;
   renderText(
     ctx,
     subTitle,
     18,
     "#fff",
-    width / 2 - subTitleWidth - (type > 1 ? 15 : 13),
+    width / 2 - subTitleWidth - (type > 1 ? 15 : 9),
     220
   );
-  renderText(ctx, "共", 14, "#fff", 124, 300);
+  renderText(ctx, "共", 14, "#fff", 122, 300);
   const totalRing = data.arrows.reduce((last, next) => last + next.ring, 0);
-  renderText(ctx, totalRing, 14, "#fed847", 150, 300, "center");
-  renderText(ctx, "环", 14, "#fff", 163, 300);
-  renderLine(ctx, 80);
-  renderLine(ctx, 187);
+  renderText(ctx, totalRing, 14, "#fed847", 148, 300, "center");
+  renderText(ctx, "环", 14, "#fff", 161, 300);
+  renderLine(ctx, 77);
+  renderLine(ctx, 185);
   renderScores(ctx, data.arrows);
   ctx.drawImage(
     "../static/device-icon.png",
diff --git a/src/websocket.js b/src/websocket.js
index d7d2afc..284d1fa 100644
--- a/src/websocket.js
+++ b/src/websocket.js
@@ -5,9 +5,9 @@ let reconnectTimer = null;
 
 // 重连配置
 const RECONNECT_CONFIG = {
-  MAX_COUNT: 10, // 最大重连次数
+  MAX_COUNT: 999, // 最大重连次数
   INITIAL_DELAY: 2000, // 初始重连延迟（2秒）
-  MAX_DELAY: 60000, // 最大重连延迟（1分钟）
+  MAX_DELAY: 5000, // 最大重连延迟（5秒）
 };
 
 /**