From deff79aa7bd3100b71c8d4d51bf9a0d8625dae86 Mon Sep 17 00:00:00 2001
From: kron <kai_hong@126.com>
Date: Sun, 8 Jun 2025 12:52:49 +0800
Subject: [PATCH] =?UTF-8?q?UI=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  30 +++
 src/components/Avatar.vue                     |  23 ++-
 src/components/BattleHeader.vue               |  26 ++-
 src/components/BowTarget.vue                  |  48 ++++-
 src/components/MeleeResult.vue                | 162 ++++++++++++++++
 src/components/TeamResult.vue                 | 134 +++++++++++++
 src/components/UserHeader.vue                 |  40 ++--
 src/pages.json                                |  14 +-
 src/pages/battle-result.vue                   |  20 +-
 src/pages/be-vip.vue                          |   1 +
 src/pages/match-detail.vue                    | 172 +++++++++++++++++
 src/pages/{match-room.vue => melee-match.vue} |   4 -
 src/pages/my-growth.vue                       | 182 +++++++++---------
 src/pages/ranking.vue                         |  16 +-
 src/pages/team-match.vue                      | 167 ++++++++++++++++
 15 files changed, 900 insertions(+), 139 deletions(-)
 create mode 100644 src/components/MeleeResult.vue
 create mode 100644 src/components/TeamResult.vue
 create mode 100644 src/pages/match-detail.vue
 rename src/pages/{match-room.vue => melee-match.vue} (97%)
 create mode 100644 src/pages/team-match.vue

diff --git a/src/App.vue b/src/App.vue
index c6b8680..baa5844 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -72,6 +72,36 @@ button.hover {
   color: #fed847;
 }
 
+@keyframes fadeIn {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.3s ease forwards;
+}
+
+@keyframes fadeOut {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+}
+
+.fade-out {
+  animation: fadeOut 0.3s ease forwards;
+}
+
 @keyframes scaleIn {
   from {
     transform: scale(0);
diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
index c69f52d..f21a8ef 100644
--- a/src/components/Avatar.vue
+++ b/src/components/Avatar.vue
@@ -20,7 +20,16 @@ defineProps({
     type: Number,
     default: 45,
   },
+  borderColor: {
+    type: Number,
+    default: 0,
+  },
 });
+const borderColors = {
+  0: "#fff",
+  1: "#64BAFF",
+  2: "#FF6767",
+};
 </script>
 
 <template>
@@ -29,7 +38,10 @@ defineProps({
       v-if="frame"
       src="../static/avatar-frame.png"
       mode="widthFix"
-      :style="{ width: Number(size) + 10 + 'px', height: Number(size) + 10 + 'px' }"
+      :style="{
+        width: Number(size) + 10 + 'px',
+        height: Number(size) + 10 + 'px',
+      }"
       class="avatar-frame"
     />
     <image
@@ -54,7 +66,12 @@ defineProps({
     <image
       :src="src"
       mode="widthFix"
-      :style="{ width: size + 'px', height: size + 'px' }"
+      :style="{
+        width: size + 'px',
+        height: size + 'px',
+        borderColor: borderColors[borderColor],
+      }"
+      class="avatar-image"
     />
   </view>
 </template>
@@ -85,7 +102,7 @@ defineProps({
   border-top-left-radius: 50%;
   border-bottom-right-radius: 50%;
 }
-.avatar > image:last-child {
+.avatar-image {
   border-radius: 50%;
   border: 1px solid #fff;
 }
diff --git a/src/components/BattleHeader.vue b/src/components/BattleHeader.vue
index d479966..75a9c5c 100644
--- a/src/components/BattleHeader.vue
+++ b/src/components/BattleHeader.vue
@@ -29,10 +29,20 @@ defineProps({
       <view>
         <Avatar v-if="blueTeam[0]" :src="blueTeam[0].avatar" frame />
         <text>{{ blueTeam[0].name }}</text>
+        <image
+          v-if="blueTeam[0].winner"
+          src="../static/winner-badge.png"
+          mode="widthFix"
+        />
       </view>
       <view>
         <Avatar v-if="redTeam[0]" :src="redTeam[0].avatar" frame />
         <text>{{ redTeam[0].name }}</text>
+        <image
+          v-if="redTeam[0].winner"
+          src="../static/winner-badge.png"
+          mode="widthFix"
+        />
       </view>
     </view>
   </view>
@@ -47,7 +57,8 @@ defineProps({
 .container > image:first-child {
   position: absolute;
   width: 100%;
-  top: -10px;
+  top: -5px;
+  z-index: 1;
 }
 .players {
   display: flex;
@@ -61,8 +72,10 @@ defineProps({
   justify-content: center;
   color: #fff9;
   font-size: 14px;
-  padding-top: 20px;
+  margin-top: 20px;
+  padding-top: 5px;
   overflow: hidden;
+  position: relative;
 }
 .players > view:first-child {
   background-color: #364469;
@@ -70,4 +83,13 @@ defineProps({
 .players > view:last-child {
   background-color: #692735;
 }
+.players > view > text {
+  margin-top: 5px;
+}
+.players > view > image:last-child {
+  position: absolute;
+  width: 60px;
+  right: 0;
+  bottom: 0;
+}
 </style>
diff --git a/src/components/BowTarget.vue b/src/components/BowTarget.vue
index d69b765..9ac4b0d 100644
--- a/src/components/BowTarget.vue
+++ b/src/components/BowTarget.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { ref, watch } from "vue";
 import BowPower from "@/components/BowPower.vue";
 const props = defineProps({
   totalRound: {
@@ -31,6 +32,23 @@ const props = defineProps({
   },
 });
 
+const showRoundTips = ref(false);
+
+watch(
+  () => props.scores,
+  (newVal) => {
+    if (newVal.length > 0) {
+      showRoundTips.value = true;
+      setTimeout(() => {
+        showRoundTips.value = false;
+      }, 2000);
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
 function calcRealX(num) {
   const len = 20 + num;
   return `calc(${(len / 40) * 100}% - 10px)`;
@@ -50,9 +68,15 @@ function calcRealY(num) {
         "/" +
         totalRound
       }}</text>
-      <BowPower :power="power" />
+      <BowPower v-if="power > 0" :power="power" />
     </view>
     <view class="target">
+      <view v-if="scores.length && showRoundTips" class="e-value fade-in"
+        >经验 +1</view
+      >
+      <view v-if="scores.length && showRoundTips" class="round-tip fade-in"
+        >{{ scores[scores.length - 1].ring }}<text>环</text></view
+      >
       <image
         v-for="(bow, index) in scores"
         :key="index"
@@ -81,6 +105,28 @@ function calcRealY(num) {
 .target {
   position: relative;
 }
+.e-value {
+  position: absolute;
+  top: 30%;
+  left: 60%;
+  background-color: #0006;
+  color: #fff;
+  font-size: 12px;
+  padding: 4px 7px;
+  border-radius: 5px;
+}
+.round-tip {
+  position: absolute;
+  top: 38%;
+  left: 60%;
+  color: #fff;
+  font-size: 30px;
+  font-weight: bold;
+}
+.round-tip > text {
+  font-size: 18px;
+  margin-left: 5px;
+}
 .target > image:last-child {
   width: 100%;
 }
diff --git a/src/components/MeleeResult.vue b/src/components/MeleeResult.vue
new file mode 100644
index 0000000..ef21608
--- /dev/null
+++ b/src/components/MeleeResult.vue
@@ -0,0 +1,162 @@
+<script setup>
+import { ref } from "vue";
+import BowTarget from "@/components/BowTarget.vue";
+import Avatar from "@/components/Avatar.vue";
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+});
+</script>
+
+<template>
+  <view class="container" :style="{ display: show ? 'flex' : 'none' }">
+    <view>
+      <text>5人大乱斗</text>
+      <view @click="onClose">
+        <image src="../static/close-white.png" mode="widthFix" />
+      </view>
+    </view>
+    <view class="rank-rows">
+      <view v-for="(item, index) in [1, 2, 3, 4, 5]" :key="index">
+        <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">{{ item }}</view>
+        <Avatar src="../static/avatar.png" :size="24" />
+        <text>积分 + 117分</text>
+        <text>117环</text>
+        <text v-for="(round, index2) in new Array(12).fill(9)" :key="index2">
+          {{ round }}环
+        </text>
+      </view>
+    </view>
+    <view :style="{ width: '95%', marginTop: '-5%' }">
+      <BowTarget />
+    </view>
+    <view class="score-text"
+      ><text :style="{ color: '#fed847' }">12</text>支箭，共<text
+        :style="{ color: '#fed847' }"
+        >100</text
+      >环</view
+    >
+    <view class="score-row">
+      <view
+        v-for="(score, index) in new Array(12).fill(9)"
+        :key="index"
+        class="score-item"
+        :style="{ width: '13vw', height: '13vw' }"
+      >
+        {{ score }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+}
+.container > view:first-child {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 0;
+  color: #fff;
+  position: relative;
+  font-size: 20px;
+}
+.container > view:first-child > view:last-child {
+  position: absolute;
+  left: 5px;
+  top: 25px;
+}
+.container > view:first-child > view:last-child > image {
+  width: 40px;
+}
+.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;
+}
+.rank-rows > view > text:nth-child(4) {
+  color: #fed847;
+  padding-right: 10px;
+  border-right: 1px solid #fff3;
+}
+</style>
diff --git a/src/components/TeamResult.vue b/src/components/TeamResult.vue
new file mode 100644
index 0000000..64df993
--- /dev/null
+++ b/src/components/TeamResult.vue
@@ -0,0 +1,134 @@
+<script setup>
+import { ref } from "vue";
+import BowTarget from "@/components/BowTarget.vue";
+import Avatar from "@/components/Avatar.vue";
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+});
+const selected = ref(0);
+const tabs = ["所有轮次", "决金箭", "第三轮", "第二轮", "第一轮"];
+</script>
+
+<template>
+  <view class="container" :style="{ display: show ? 'flex' : 'none' }">
+    <view>
+      <text>1v1排位赛</text>
+      <view @click="onClose">
+        <image src="../static/close-white.png" mode="widthFix" />
+      </view>
+    </view>
+    <view>
+      <view
+        v-for="(tab, index) in tabs"
+        :key="index"
+        @click="() => (selected = index)"
+        :class="selected === index ? 'selected-tab' : ''"
+      >
+        {{ tab }}
+      </view>
+    </view>
+    <view :style="{ width: '95%' }">
+      <BowTarget />
+    </view>
+    <view class="score-row">
+      <Avatar src="../static/avatar.png" :borderColor="1" />
+      <view
+        v-for="(score, index) in [7, 9, 7, 3, 8]"
+        :key="index"
+        class="score-item"
+        :style="{ width: '13vw', height: '13vw' }"
+      >
+        {{ score }}
+      </view>
+    </view>
+    <view class="score-row">
+      <Avatar src="../static/avatar.png" :borderColor="2" />
+      <view
+        v-for="(score, index) in [7, 9, 7, 3, 8]"
+        :key="index"
+        class="score-item"
+        :style="{ width: '13vw', height: '13vw' }"
+      >
+        {{ score }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+}
+.container > view:first-child {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+  color: #fff;
+  position: relative;
+  font-size: 20px;
+}
+.container > view:first-child > view:last-child {
+  position: absolute;
+  right: 5px;
+  top:32px;
+}
+.container > view:first-child > view:last-child > image {
+  width: 40px;
+}
+.container > view:nth-child(2) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  color: #fff9;
+  padding-left: 15px;
+}
+.container > view:nth-child(2) > view {
+  border: 1px solid #fff9;
+  border-radius: 20px;
+  padding: 7px 10px;
+  margin: 0 5px;
+  font-size: 14px;
+}
+.selected-tab {
+  background-color: #fed847;
+  border-color: #fed847 !important;
+  color: #000;
+}
+.score-row {
+  margin: 10px;
+  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/components/UserHeader.vue b/src/components/UserHeader.vue
index e231138..bed8788 100644
--- a/src/components/UserHeader.vue
+++ b/src/components/UserHeader.vue
@@ -39,25 +39,21 @@ const toUserPage = () => {
     <view class="user-details">
       <view class="user-name">
         <text>{{ user.nickName }}</text>
-        <image src="../static/vip1.png" mode="widthFix" />
+        <image class="user-name-image" src="../static/vip1.png" mode="widthFix" />
       </view>
       <view class="user-stats">
-        <text class="level-tag">钻石1级</text>
-        <text class="level-tag">{{ user.lvl }}</text>
+        <text class="level-tag level-tag-first">钻石1级</text>
+        <text class="level-tag level-tag-second">{{ user.lvl }}</text>
         <view class="rank-tag">
-          <view :style="{ width: '40%' }" />
-          <text>{{ user.lvl }}/{{ user.lvlPoints }}</text>
+          <view class="rank-tag-progress" :style="{ width: '40%' }" />
+          <text class="rank-tag-text">{{ user.lvl }}/{{ user.lvlPoints }}</text>
         </view>
       </view>
     </view>
     <view v-if="showRank === true" class="rank-info">
-      <image src="../static/global-rank.png" mode="widthFix" />
+      <image class="rank-info-image" src="../static/global-rank.png" mode="widthFix" />
       <text>本赛季全国</text>
-      <text class="rank-number"
-        >第<text :style="{ color: '#ffd700' }"
-          >{{ user.points }}/{{ user.rankLvl }}</text
-        >名</text
-      >
+      <text class="rank-number">第<text :style="{ color: '#ffd700' }">{{ user.points }}/{{ user.rankLvl }}</text>名</text>
     </view>
   </view>
 </template>
@@ -83,7 +79,7 @@ const toUserPage = () => {
   margin-bottom: 5px;
 }
 
-.user-name > image {
+.user-name-image {
   margin-left: 5px;
   width: 20px;
 }
@@ -97,11 +93,13 @@ const toUserPage = () => {
   text-align: center;
   line-height: 16px;
 }
-.level-tag:first-child {
+
+.level-tag-first {
   width: 45px;
   background: #5f51ff;
 }
-.level-tag:nth-child(2) {
+
+.level-tag-second {
   width: 30px;
   background: #09c504;
 }
@@ -115,17 +113,17 @@ const toUserPage = () => {
 .rank-tag {
   position: relative;
   background-color: #00000038;
-  width: 56px;
+  width: 55px;
   height: 16px;
 }
 
-.rank-tag > view:first-child {
+.rank-tag-progress {
   background: #ffa711;
   height: 100%;
   border-radius: 12px;
 }
 
-.rank-tag > text {
+.rank-tag-text {
   position: absolute;
   top: 0;
   left: 5px;
@@ -134,16 +132,16 @@ const toUserPage = () => {
 
 .rank-info {
   text-align: left;
-  font-size: 10px;
+  font-size: 12px;
   position: relative;
   color: #b3b3b3;
   padding-left: 8px;
 }
 
-.rank-info > image {
+.rank-info-image {
   position: absolute;
-  top: -8px;
-  left: -8px;
+  top: -6px;
+  left: -9px;
   width: 90px;
 }
 
diff --git a/src/pages.json b/src/pages.json
index d1cbb76..89dcf69 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -109,7 +109,19 @@
       }
     },
     {
-      "path": "pages/match-room",
+      "path": "pages/team-match",
+      "style": {
+        "navigationBarTitleText": "排位赛"
+      }
+    },
+    {
+      "path": "pages/melee-match",
+      "style": {
+        "navigationBarTitleText": "排位赛"
+      }
+    },
+    {
+      "path": "pages/match-detail",
       "style": {
         "navigationBarTitleText": "排位赛"
       }
diff --git a/src/pages/battle-result.vue b/src/pages/battle-result.vue
index bce569a..76c989b 100644
--- a/src/pages/battle-result.vue
+++ b/src/pages/battle-result.vue
@@ -2,19 +2,21 @@
 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";
 
 const battleId = ref("");
+const show = ref(true);
 
-onLoad((options) => {
-  battleId.value = options.battleId;
-});
+// onLoad(async (options) => {
+//   battleId.value = options.battleId;
+//   const result = await getGameAPI(options.battleId);
+//   console.log(1111, result);
+// });
 function exit() {
   uni.navigateBack();
 }
-onMounted(async () => {
-  const result = await getGameAPI("BATTLE-1749121128909437828-799");
-  conosle.log(1111, result);
-});
+onMounted(async () => {});
 </script>
 
 <template>
@@ -35,9 +37,11 @@ onMounted(async () => {
     </view>
     <text>你是朋友中的佼佼者哦</text>
     <view>
-      <view>查看靶纸</view>
+      <view @click="() => (show = true)">查看靶纸</view>
       <view @click="exit">退出</view>
     </view>
+    <!-- <TeamResult :show="show" :onClose="() => (show = false)" /> -->
+    <MeleeResult :show="show" :onClose="() => (show = false)" />
   </view>
 </template>
 
diff --git a/src/pages/be-vip.vue b/src/pages/be-vip.vue
index 986b382..9148a8a 100644
--- a/src/pages/be-vip.vue
+++ b/src/pages/be-vip.vue
@@ -75,6 +75,7 @@ const chooseVip = (index) => {
 
 <style scoped>
 .header {
+  width: calc(100% - 30px);
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/src/pages/match-detail.vue b/src/pages/match-detail.vue
new file mode 100644
index 0000000..fe26d70
--- /dev/null
+++ b/src/pages/match-detail.vue
@@ -0,0 +1,172 @@
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import Container from "@/components/Container.vue";
+import BattleHeader from "@/components/BattleHeader.vue";
+import Avatar from "@/components/Avatar.vue";
+
+const id = ref("");
+const type = ref("");
+const data = {
+  blueTeam: {
+    name: "选手1",
+    avatar: "../static/avatar.png",
+    arrows: [4, 6, 2],
+    score: 1,
+  },
+  redTeam: {
+    name: "选手2",
+    avatar: "../static/avatar.png",
+    arrows: [4, 6, 2],
+    score: 1,
+  },
+};
+const result = ref([
+  {
+    round: 1,
+    ...data,
+  },
+  {
+    round: 2,
+    ...data,
+  },
+  {
+    round: 3,
+    ...data,
+  },
+  {
+    round: 4,
+    ...data,
+  },
+  {
+    round: 5,
+    ...data,
+  },
+]);
+
+onLoad((options) => {
+  type.value = options.type;
+  id.value = options.id;
+});
+</script>
+
+<template>
+  <Container title="详情">
+    <view class="container">
+      <BattleHeader
+        :blueTeam="[
+          { name: '选手1', avatar: '../static/avatar.png', winner: true },
+        ]"
+        :redTeam="[{ name: '选手2', avatar: '../static/avatar.png' }]"
+      />
+      <view class="score-header">
+        <text>决金箭轮（环数）</text>
+        <view>
+          <text>查看靶纸</text>
+          <image src="../static/back.png" mode="widthFix" />
+        </view>
+      </view>
+      <view class="score-row">
+        <view>
+          <Avatar src="../static/avatar.png" :size="25" :borderColor="1" />
+          <text>9环</text>
+          <text>10环</text>
+          <text>7环</text>
+        </view>
+        <image src="../static/winner-badge.png" mode="widthFix" />
+      </view>
+      <view class="score-row" :style="{ marginBottom: '5px' }">
+        <view>
+          <Avatar src="../static/avatar.png" :size="25" :borderColor="2" />
+          <text>9环</text>
+          <text>10环</text>
+          <text>7环</text>
+        </view>
+      </view>
+      <view v-for="(item, index) in result" :key="index">
+        <view class="score-header">
+          <text>第{{ item.round }}轮</text>
+          <view>
+            <text>查看靶纸</text>
+            <image src="../static/back.png" mode="widthFix" />
+          </view>
+        </view>
+        <view class="score-row">
+          <view>
+            <Avatar src="../static/avatar.png" :size="25" :borderColor="1" />
+            <text>9环</text>
+            <text>10环</text>
+            <text>7环</text>
+          </view>
+          <view>
+            <text :style="{ color: '#64BAFF' }">18环</text>
+            <text>得分 +1</text>
+          </view>
+        </view>
+        <view class="score-row" :style="{ marginBottom: '5px' }">
+          <view>
+            <Avatar src="../static/avatar.png" :size="25" :borderColor="2" />
+            <text>9环</text>
+            <text>10环</text>
+            <text>7环</text>
+          </view>
+          <view>
+            <text :style="{ color: '#FF6767' }">18环</text>
+            <text>得分 +1</text>
+          </view>
+        </view>
+      </view>
+      <view :style="{ height: '20px' }"></view>
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+.score-header,
+.score-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  color: #fff9;
+  font-size: 15px;
+  border-bottom: 1px solid #fff3;
+}
+.score-header > text:first-child {
+  color: #fed847;
+}
+.score-header > view:last-child {
+  display: flex;
+  align-items: center;
+}
+.score-header > view:last-child > image {
+  margin-left: 5px;
+  width: 15px;
+  height: 15px;
+  transform: rotate(180deg);
+  margin-top: -2px;
+}
+.score-row > view {
+  display: flex;
+  align-items: center;
+}
+.score-row > view:first-child > text {
+  margin-left: 20px;
+  color: #fff;
+  display: block;
+  width: 30px;
+}
+.score-row > image:last-child {
+  width: 40px;
+}
+.score-row > view:last-child {
+  padding-right: 5px;
+}
+.score-row > view:last-child > text:last-child {
+  margin-left: 20px;
+}
+</style>
diff --git a/src/pages/match-room.vue b/src/pages/melee-match.vue
similarity index 97%
rename from src/pages/match-room.vue
rename to src/pages/melee-match.vue
index d09d847..d7ee6f6 100644
--- a/src/pages/match-room.vue
+++ b/src/pages/melee-match.vue
@@ -26,10 +26,6 @@ const tips = ref("即将开始...");
 const seq = ref(0);
 const timerSeq = ref(0);
 const roundResults = ref([
-  // {
-  //   blueArrows: [{ ring: 2 }, { ring: 2 }],
-  //   redArrows: [{ ring: 2 }, { ring: 3 }],
-  // },
 ]);
 
 onLoad((options) => {
diff --git a/src/pages/my-growth.vue b/src/pages/my-growth.vue
index de54820..f3e2506 100644
--- a/src/pages/my-growth.vue
+++ b/src/pages/my-growth.vue
@@ -15,107 +15,98 @@ const handleSelect = async (index) => {
   }
   selectedIndex.value = index;
 };
+
+const toMatchDetail = () => {
+  uni.navigateTo({
+    url: "/pages/match-detail",
+  });
+};
 </script>
 
 <template>
   <Container title="我的成长脚印">
-    <view class="tabs">
-      <view
-        v-for="(rankType, index) in ['排位赛', '好友约战', '射馆练习']"
-        :key="index"
-        :style="{
-          color: index === selectedIndex ? '#000' : '#fff',
-          backgroundColor: index === selectedIndex ? '#FFD947' : 'transparent',
-        }"
-        @tap="handleSelect(index)"
-      >
-        {{ rankType }}
-      </view>
-    </view>
-    <view class="contents">
-      <view
-        :style="{
-          display: selectedIndex !== 2 ? 'flex' : 'none',
-        }"
-      >
-        <view>
-          <view class="contest-header">
-            <text>1V1</text>
-            <text>2025.01.21 14:09:23</text>
-            <image src="../static/back.png" mode="widthFix" />
-          </view>
-          <view class="contest-1v1">
-            <view class="player">
-              <Avatar frame src="../static/avatar.png" />
-              <text>选手1</text>
-              <image src="../static/winner-badge.png" mode="widthFix" />
-            </view>
-            <view class="player">
-              <Avatar frame src="../static/avatar.png" />
-              <text>选手2</text>
-            </view>
-          </view>
-        </view>
-        <view>
-          <view class="contest-header">
-            <text>1V1</text>
-            <text>2025.01.21 14:09:23</text>
-            <image src="../static/back.png" mode="widthFix" />
-          </view>
-          <view class="contest-1v1">
-            <view class="player">
-              <Avatar frame src="../static/avatar.png" />
-              <text>选手1</text>
-              <image src="../static/winner-badge.png" mode="widthFix" />
-            </view>
-            <view class="player">
-              <Avatar frame src="../static/avatar.png" />
-              <text>选手2</text>
-            </view>
-          </view>
-        </view>
-        <view>
-          <view class="contest-header">
-            <text>5v5</text>
-            <text>2025.01.21 14:09:23</text>
-            <image src="../static/back.png" mode="widthFix" />
-          </view>
-          <view class="contest-multi">
-            <view class="player">
-              <Avatar :rank="1" src="../static/avatar.png" />
-              <text>选手1</text>
-            </view>
-            <view class="player">
-              <Avatar :rank="2" src="../static/avatar.png" />
-              <text>选手2</text>
-            </view>
-            <view class="player">
-              <Avatar :rank="3" src="../static/avatar.png" />
-              <text>选手3</text>
-            </view>
-            <view class="player">
-              <Avatar :rank="4" src="../static/avatar.png" />
-              <text>选手4</text>
-            </view>
-            <view class="player">
-              <Avatar :rank="5" src="../static/avatar.png" />
-              <text>选手5</text>
-            </view>
-          </view>
-        </view>
-      </view>
-      <view
-        :style="{
-          display: selectedIndex === 2 ? 'flex' : 'none',
-        }"
-      >
+    <view class="container">
+      <view class="tabs">
         <view
-          v-for="(item, index) in practiseList"
+          v-for="(rankType, index) in ['排位赛', '好友约战', '射馆练习']"
           :key="index"
-          class="practice-record"
+          :style="{
+            color: index === selectedIndex ? '#000' : '#fff',
+            backgroundColor:
+              index === selectedIndex ? '#FFD947' : 'transparent',
+          }"
+          @tap="handleSelect(index)"
         >
-          <text>单组练习 {{ item.createdAt }}</text>
-          <image src="../static/back.png" mode="widthFix" />
+          {{ rankType }}
+        </view>
+      </view>
+      <view class="contents">
+        <view
+          :style="{
+            display: selectedIndex !== 2 ? 'flex' : 'none',
+          }"
+        >
+          <view @click="toMatchDetail">
+            <view class="contest-header">
+              <text>1V1</text>
+              <text>2025.01.21 14:09:23</text>
+              <image src="../static/back.png" mode="widthFix" />
+            </view>
+            <view class="contest-1v1">
+              <view class="player">
+                <Avatar frame src="../static/avatar.png" />
+                <text>选手1</text>
+                <image src="../static/winner-badge.png" mode="widthFix" />
+              </view>
+              <view class="player">
+                <Avatar frame src="../static/avatar.png" />
+                <text>选手2</text>
+              </view>
+            </view>
+          </view>
+          <view @click="toMatchDetail">
+            <view class="contest-header">
+              <text>5v5</text>
+              <text>2025.01.21 14:09:23</text>
+              <image src="../static/back.png" mode="widthFix" />
+            </view>
+            <view class="contest-multi">
+              <view class="player">
+                <Avatar :rank="1" src="../static/avatar.png" />
+                <text>选手1</text>
+              </view>
+              <view class="player">
+                <Avatar :rank="2" src="../static/avatar.png" />
+                <text>选手2</text>
+              </view>
+              <view class="player">
+                <Avatar :rank="3" src="../static/avatar.png" />
+                <text>选手3</text>
+              </view>
+              <view class="player">
+                <Avatar :rank="4" src="../static/avatar.png" />
+                <text>选手4</text>
+              </view>
+              <view class="player">
+                <Avatar :rank="5" src="../static/avatar.png" />
+                <text>选手5</text>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view
+          :style="{
+            display: selectedIndex === 2 ? 'flex' : 'none',
+          }"
+        >
+          <view
+            v-for="(item, index) in practiseList"
+            :key="index"
+            class="practice-record"
+          >
+            <text>单组练习 {{ item.createdAt }}</text>
+            <image src="../static/back.png" mode="widthFix" />
+          </view>
         </view>
       </view>
     </view>
@@ -123,6 +114,9 @@ const handleSelect = async (index) => {
 </template>
 
 <style scoped>
+.container {
+  width: 100%;
+}
 .tabs {
   width: calc(100% - 30px);
   display: flex;
diff --git a/src/pages/ranking.vue b/src/pages/ranking.vue
index e009219..0476a2a 100644
--- a/src/pages/ranking.vue
+++ b/src/pages/ranking.vue
@@ -8,9 +8,15 @@ const handleSelect = (index) => {
   selectedIndex.value = index;
 };
 
-const toMatchPage = (gameType, teamSize) => {
+const toTeamMatchPage = (gameType, teamSize) => {
   uni.navigateTo({
-    url: `/pages/match-room?gameType=${gameType}&teamSize=${teamSize}`,
+    url: `/pages/team-match?gameType=${gameType}&teamSize=${teamSize}`,
+  });
+};
+
+const toMeleeMatchPage = (gameType, teamSize) => {
+  uni.navigateTo({
+    url: `/pages/team-match?gameType=${gameType}&teamSize=${teamSize}`,
   });
 };
 </script>
@@ -50,17 +56,17 @@ const toMatchPage = (gameType, teamSize) => {
           <image
             src="../static/battle1v1.png"
             mode="widthFix"
-            @click="() => toMatchPage(1, 2)"
+            @click="() => toTeamMatchPage(1, 2)"
           />
           <image
             src="../static/battle5.png"
             mode="widthFix"
-            @click="() => toMatchPage(2, 5)"
+            @click="() => toMeleeMatchPage(2, 5)"
           />
           <image
             src="../static/battle10.png"
             mode="widthFix"
-            @click="() => toMatchPage(2, 10)"
+            @click="() => toMeleeMatchPage(2, 10)"
           />
         </view>
         <view class="data-progress">
diff --git a/src/pages/team-match.vue b/src/pages/team-match.vue
new file mode 100644
index 0000000..a5e8460
--- /dev/null
+++ b/src/pages/team-match.vue
@@ -0,0 +1,167 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import Container from "@/components/Container.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 SButton from "@/components/SButton.vue";
+import { matchGameAPI, readyGameAPI } from "@/apis";
+import { MESSAGETYPES, roundsName } from "@/constants";
+const gameType = ref(0);
+const teamSize = ref(0);
+const matching = ref(false);
+const start = ref(false);
+const battleId = ref("");
+const currentRound = ref(1);
+const totalRounds = ref(0);
+const power = ref(0);
+const scores = ref([]);
+const redTeam = ref([]);
+const blueTeam = ref([]);
+const currentShooterId = ref(0);
+const tips = ref("即将开始...");
+const seq = ref(0);
+const timerSeq = ref(0);
+const roundResults = ref([
+  // {
+  //   blueArrows: [{ ring: 2 }, { ring: 2 }],
+  //   redArrows: [{ ring: 2 }, { ring: 3 }],
+  // },
+]);
+
+onLoad((options) => {
+  gameType.value = options.gameType;
+  teamSize.value = options.teamSize;
+});
+async function startMatch() {
+  if (gameType.value && teamSize.value) {
+    await matchGameAPI(true, gameType.value, teamSize.value);
+    startMatch.value = true;
+  }
+}
+async function stopMatch() {
+  if (gameType.value && teamSize.value) {
+    await matchGameAPI(false, gameType.value, teamSize.value);
+    startMatch.value = false;
+  }
+}
+async function readyToGo() {
+  if (battleId.value) {
+    await readyGameAPI(battleId.value);
+    start.value = true;
+    timerSeq.value = 0;
+  }
+}
+
+async function onReceiveMessage(content) {
+  const messages = JSON.parse(content).data.updates || [];
+  messages.forEach((msg) => {
+    if (
+      !msg.id ||
+      (battleId.value && msg.id === battleId.value) ||
+      msg.constructor === MESSAGETYPES.WaitForAllReady
+    ) {
+      console.log("收到消息：", msg);
+    }
+    if (!start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
+      scores.value.push(msg.target);
+      power.value = msg.target.battery;
+    }
+    if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
+      // 这里会掉多次;
+      timerSeq.value += 1;
+      battleId.value = msg.id;
+      redTeam.value = msg.groupUserStatus.redTeam;
+      blueTeam.value = msg.groupUserStatus.blueTeam;
+      totalRounds.value = msg.groupUserStatus.config.maxRounds;
+    }
+    if (msg.id !== battleId.value) return;
+    if (msg.constructor === MESSAGETYPES.AllReady) {
+      start.value = true;
+      timerSeq.value = 0;
+    }
+    if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
+      scores.value = [];
+      seq.value += 1;
+      currentShooterId.value = msg.userId;
+      if (redTeam.value[0].id === currentShooterId.value) {
+        tips.value = `请红队射箭-第${roundsName[currentRound.value]}轮`;
+      } else {
+        tips.value = `请蓝队射箭-第${roundsName[currentRound.value]}轮`;
+      }
+    }
+    if (msg.constructor === MESSAGETYPES.ShootResult) {
+      scores.value = [msg.target];
+    }
+    if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
+      const result = msg.preRoundResult;
+      scores.value = [];
+      currentShooterId.value = 0;
+      if (result.currentRound > 0 && result.currentRound < totalRounds.value) {
+        // 开始下一轮;
+        roundResults.value = result.roundResults;
+        currentRound.value = result.currentRound + 1;
+      }
+    }
+    if (msg.constructor === MESSAGETYPES.MatchOver) {
+      uni.redirectTo({
+        url: "/pages/battle-result?battleId=" + msg.id,
+      });
+    }
+  });
+}
+onMounted(() => {
+  uni.$on("socket-inbox", onReceiveMessage);
+});
+onUnmounted(() => {
+  uni.$off("socket-inbox", onReceiveMessage);
+  if (startMatch.value) {
+    matchGameAPI(false, gameType.value, teamSize.value);
+  }
+});
+</script>
+
+<template>
+  <Container title="排位赛" :bgType="1">
+    <view class="container">
+      <ShootProgress v-if="start" :tips="tips" :seq="seq" />
+      <PlayersRow
+        v-if="start"
+        :currentShooterId="currentShooterId"
+        :blueTeam="blueTeam"
+        :redTeam="redTeam"
+      />
+      <BowTarget
+        :power="power"
+        :currentRound="currentRound"
+        :totalRound="totalRounds"
+        :scores="scores"
+        :tips="
+          !start && scores.length > 0
+            ? `本次射程${scores[scores.length - 1].dst / 100}米，${
+                scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
+              }达到距离要求`
+            : ''
+        "
+      />
+      <BattleFooter
+        v-if="roundResults.length > 0"
+        :roundResults="roundResults"
+      />
+      <Timer :seq="timerSeq" :callBack="readyToGo" />
+    </view>
+    <SButton v-if="!battleId" :onClick="matching ? stopMatch : startMatch">{{
+      matching ? "取消匹配" : "开始匹配"
+    }}</SButton>
+    <SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
+  </Container>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+}
+</style>