UI更新

src/components/BattleHeader.vue

@@ -22,16 +22,61 @@ defineProps({
     type: Number,
     default: 2,
   },
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
 });
 </script>
 
 <template>
-  <view class="container">
+  <view class="container" :style="{ paddingTop: showHeader ? '5px' : '0' }">
     <image
-      :src="`../static/battle-header${blueTeam.length ? '' : '-melee'}.png`"
+      v-if="showHeader"
+      :src="`../static/battle-header${players.length ? '-melee' : ''}.png`"
       mode="widthFix"
     />
-    <view v-if="players.length" class="players-melee">
+    <view
+      v-if="!players.length && blueTeam.length && redTeam.length"
+      class="players"
+      :style="{ paddingTop: showHeader ? '15px' : '0' }"
+    >
+      <view>
+        <view
+          v-for="(player, index) in blueTeam"
+          :key="index"
+          :style="{ margin: blueTeam.length === 2 ? '0 12px' : '0 6px' }"
+        >
+          <Avatar :src="player.avatar" :rankLvl="player.rankLvl" />
+          <text class="player-name">{{ player.name }}</text>
+        </view>
+        <image
+          v-if="winner === 1"
+          src="../static/winner-badge.png"
+          mode="widthFix"
+        />
+      </view>
+      <view>
+        <view
+          v-for="(player, index) in redTeam"
+          :key="index"
+          :style="{ margin: redTeam.length === 2 ? '0 12px' : '0 6px' }"
+        >
+          <Avatar :src="player.avatar" :rankLvl="player.rankLvl" />
+          <text class="player-name">{{ player.name }}</text>
+        </view>
+        <image
+          v-if="winner === 0"
+          src="../static/winner-badge.png"
+          mode="widthFix"
+        />
+      </view>
+    </view>
+    <view
+      v-if="players.length"
+      class="players-melee"
+      :style="{ paddingTop: showHeader ? '15px' : '0' }"
+    >
       <view
         v-for="(player, index) in players"
         :key="index"
@@ -49,30 +94,6 @@ defineProps({
         <text class="player-name">{{ player.name }}</text>
       </view>
     </view>
-    <view v-if="blueTeam.length && redTeam.length" class="players">
-      <view>
-        <Avatar :src="blueTeam[0].avatar" :rankLvl="blueTeam[0].rankLvl" />
-        <text class="player-name">{{ blueTeam[0].name }}</text>
-        <image
-          v-if="winner === 1"
-          src="../static/winner-badge.png"
-          mode="widthFix"
-        />
-      </view>
-      <view>
-        <Avatar
-          v-if="redTeam[0]"
-          :src="redTeam[0].avatar"
-          :rankLvl="redTeam[0].rankLvl"
-        />
-        <text class="player-name">{{ redTeam[0].name }}</text>
-        <image
-          v-if="winner === 0"
-          src="../static/winner-badge.png"
-          mode="widthFix"
-        />
-      </view>
-    </view>
   </view>
 </template>
 
@@ -81,7 +102,6 @@ defineProps({
   width: 100%;
   position: relative;
   margin-bottom: 10px;
-  padding-top: 5px;
 }
 .container > image:first-child {
   position: absolute;
@@ -92,24 +112,16 @@ defineProps({
 .players {
   display: flex;
 }
-.players::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  color: transparent;
-}
 .players > view {
   width: 50%;
-  height: 85px;
+  height: 80px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
   color: #fff9;
   font-size: 12px;
-  margin-top: 15px;
   overflow: hidden;
   position: relative;
-  padding-top: 5px;
+  padding-top: 7px;
+  display: flex;
+  justify-content: center;
 }
 .players > view:first-child {
   background-color: #364469;
@@ -119,17 +131,27 @@ defineProps({
 }
 .players > view > image:last-child {
   position: absolute;
-  width: 60px;
+  width: 40px;
-  right: 0;
+  top: 0;
-  bottom: 0;
+  left: 0;
+}
+.players > view > view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 .players-melee {
   display: flex;
-  height: 85px;
+  height: 80px;
   width: 100%;
-  margin-top: 15px;
   overflow-x: auto;
 }
+.players-melee::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
 .players-melee > view {
   display: flex;
   flex-direction: column;
@@ -137,7 +159,7 @@ defineProps({
   justify-content: center;
   color: #fff9;
   font-size: 12px;
-  padding-top: 5px;
+  padding-top: 7px;
   flex: 0 0 auto;
 }
 .player-name {

src/components/CreateRoom.vue

@@ -69,13 +69,19 @@ const setClipboardData = () => {
       >
         <text>乱斗模式（3-10人）</text>
       </view>
-      <view class="battle-btn battle-close">
+      <view
+        :class="{ 'battle-btn': true, 'battle-choosen': battleMode === 3 }"
+        @click="() => (battleMode = 3)"
+      >
         <text>对抗模式（2V2）</text>
-        <text>敬请期待</text>
+        <!-- <text>敬请期待</text> -->
       </view>
-      <view class="battle-btn battle-close">
+      <view
+        :class="{ 'battle-btn': true, 'battle-choosen': battleMode === 4 }"
+        @click="() => (battleMode = 4)"
+      >
         <text>对抗模式（3V3）</text>
-        <text>敬请期待</text>
+        <!-- <text>敬请期待</text> -->
       </view>
     </view>
     <SButton v-if="step === 1" :onClick="createRoom">下一步</SButton>
@@ -132,13 +138,13 @@ const setClipboardData = () => {
   border: 4rpx solid #fff3;
   border-color: #fed847;
 }
-.battle-close {
+/* .battle-close {
   background-color: #8889;
   color: #b3b3b3;
 }
 .battle-close > text:last-child {
   font-size: 12px;
-}
+} */
 .room-info {
   display: flex;
   flex-direction: column;
@@ -151,9 +157,6 @@ const setClipboardData = () => {
   color: #fff;
   margin-bottom: 20px;
 }
-.room-info > view:first-child > text:last-child {
-  /* color: #fed847; */
-}
 .room-info > text {
   color: #888686;
   font-size: 14px;

src/pages/battle-result.vue

@@ -21,7 +21,8 @@ function exit() {
 }
 
 onLoad(async (options) => {
-  const myId = user.value.id;
+  // const myId = user.value.id;
+  const myId = 39;
   if (options.battleId) {
     const result = await getGameAPI(
       options.battleId || "BATTLE-1754302650041171466-546"
@@ -86,16 +87,10 @@ const checkBowData = () => {
 
 <template>
   <view class="container">
-    <!-- <image
-      :style="{ opacity: ifWin ? '1' : '0' }"
-      class="tag"
-      src="../static/winner-yellow.png"
-      mode="widthFix"
-    /> -->
     <block v-if="data.mode === 1">
       <view class="header-team" :style="{ marginTop: '25%' }">
         <image src="../static/battle-result.png" mode="widthFix" />
-        <view>
+        <!-- <view class="header-solo">
           <text
             :style="{
               background:
@@ -115,6 +110,49 @@ const checkBowData = () => {
             :borderColor="data.winner === 1 ? '#5FADFF' : '#FF5656'"
             mode="widthFix"
           />
+        </view> -->
+      </view>
+      <view class="header-mvp">
+        <image src="../static/red-team-win.png" mode="widthFix" />
+        <view>
+          <view>
+            <image src="../static/title-mvp.png" mode="widthFix" />
+            <text
+              >斩获<text
+                :style="{ color: '#fed847', fontSize: '18px', margin: '0 2px' }"
+                >60</text
+              >环</text
+            >
+          </view>
+          <view>
+            <view>
+              <view class="team-avatar">
+                <Avatar
+                  :src="user.avatar"
+                  :size="40"
+                  :borderColor="data.myTeam === 1 ? '#5fadff' : '#ff6060'"
+                />
+                <text :style="{ backgroundColor: '#ff6060' }">自己</text>
+              </view>
+              <text>某某某</text>
+            </view>
+            <view>
+              <Avatar
+                :src="user.avatar"
+                :size="40"
+                :borderColor="data.myTeam === 1 ? '#5fadff' : '#ff6060'"
+              />
+              <text>某某某</text>
+            </view>
+            <view>
+              <Avatar
+                :src="user.avatar"
+                :size="40"
+                :borderColor="data.myTeam === 1 ? '#5fadff' : '#ff6060'"
+              />
+              <text>某某某</text>
+            </view>
+          </view>
         </view>
       </view>
       <view class="battle-winner">
@@ -133,8 +171,6 @@ const checkBowData = () => {
           class="scale-in"
           mode="widthFix"
         />
-        <!-- <text>{{ data.winner === 1 ? "蓝队" : "红队" }}获胜</text> -->
-        <!-- <text>强势登顶，荣耀加冕</text> -->
       </view>
     </block>
     <block v-if="data.mode === 2">
@@ -214,7 +250,7 @@ const checkBowData = () => {
       :style="{ marginTop: data.mode === 2 ? '20px' : '20vw' }"
     >
       <image src="../static/row-yellow-bg.png" mode="widthFix" />
-      <view>
+      <view class="team-avatar">
         <Avatar
           :src="user.avatar"
           :size="40"
@@ -282,12 +318,12 @@ const checkBowData = () => {
 .header-team > image {
   width: 20vw;
 }
-.header-team > view {
+.header-solo {
   font-size: 14px;
   display: flex;
   align-items: flex-end;
 }
-.header-team > view > text {
+.header-solo > text {
   padding: 5px 20px;
   padding-left: 24px;
   transform: translateX(15px);
@@ -317,18 +353,6 @@ const checkBowData = () => {
 .battle-winner > image:nth-child(3) {
   top: 75%;
 }
-/* .battle-winner > image:nth-child(2) {
-  top: 6vw;
-}
-.battle-winner > text:nth-child(3) {
-  font-size: 30px;
-  margin-bottom: 5px;
-  font-weight: bold;
-  color: #fed847;
-}
-.battle-winner > text:nth-child(4) {
-  margin-bottom: 10px;
-} */
 .battle-e {
   width: 100%;
   height: 60px;
@@ -340,23 +364,6 @@ const checkBowData = () => {
   position: absolute;
   width: 100vw;
 }
-.battle-e > view:nth-child(2) {
-  position: relative;
-  overflow: hidden;
-  width: 40px;
-  height: 40px;
-  box-sizing: border-box;
-  border-radius: 50%;
-}
-.battle-e > view:nth-child(2) > text {
-  font-size: 7px;
-  text-align: center;
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  color: #fff;
-  padding-bottom: 1px;
-}
 .battle-e > text {
   position: relative;
   font-size: 30px;
@@ -463,4 +470,65 @@ const checkBowData = () => {
 .player-title > text:last-child {
   font-size: 13px;
 }
+.team-avatar {
+  position: relative;
+  overflow: hidden;
+  width: 40px;
+  height: 40px;
+  box-sizing: border-box;
+  border-radius: 50%;
+}
+.team-avatar > text {
+  font-size: 7px;
+  text-align: center;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  color: #fff;
+  padding-bottom: 1px;
+}
+.header-mvp {
+  position: relative;
+  width: 100%;
+}
+.header-mvp > image:first-child {
+  position: absolute;
+  width: 100%;
+}
+.header-mvp > view {
+  display: flex;
+  justify-content: center;
+  transform: translateY(55px);
+}
+.header-mvp > view > view:first-child {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 5vw;
+}
+.header-mvp > view > view:first-child > image {
+  width: 24vw;
+}
+.header-mvp > view > view:first-child > text {
+  color: #fff;
+  font-size: 14px;
+  transform:  translateY(-4px) skewY(-6deg);
+}
+.header-mvp > view > view:last-child {
+  display: flex;
+  align-items: center;
+  color: #fff;
+  font-size: 8px;
+  text-align: center;
+  transform: translateY(-16px) skewY(-6deg);
+}
+.header-mvp > view > view:last-child > view {
+  margin-right: 4vw;
+  display: flex;
+  flex-direction: column;
+}
+.header-mvp > view > view:last-child > view > text {
+  margin-top: 4px;
+}
 </style>

src/pages/battle-room.vue

@@ -6,6 +6,7 @@ import PlayerSeats from "@/components/PlayerSeats.vue";
 import Guide from "@/components/Guide.vue";
 import SButton from "@/components/SButton.vue";
 import SModal from "@/components/SModal.vue";
+import Avatar from "@/components/Avatar.vue";
 import { getRoomAPI, destroyRoomAPI, exitRoomAPI, startRoomAPI } from "@/apis";
 import { MESSAGETYPES } from "@/constants";
 import useStore from "@/store";
@@ -236,11 +237,9 @@ onHide(() => {});
         />
         <view>
           <view class="player" :style="{ transform: 'translateY(-60px)' }">
-            <image
+            <Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="60" />
-              :src="owner.avatar || '../static/user-icon.png'"
-              mode="widthFix"
-            />
             <text>{{ owner.name }}</text>
+            <text>创建者</text>
           </view>
           <image src="../static/versus.png" mode="widthFix" />
           <block v-if="opponent.id">
@@ -348,7 +347,7 @@ onHide(() => {});
   justify-content: center;
   align-items: center;
   transform: translateY(-60px);
-  color: #fff9;
+  color: #fff;
   font-size: 14px;
 }
 .player > image {
@@ -359,12 +358,19 @@ onHide(() => {});
   margin-bottom: 5px;
 }
 .player > text {
-  width: 100px;
+  max-width: 100px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: center;
 }
+.player > text:last-child {
+  color: #000;
+  background-color: #fed847;
+  font-size: 8px;
+  border-radius: 10px;
+  padding: 2px 5px;
+}
 .team-mode > view > image:nth-child(2) {
   width: 120px;
 }

src/pages/friend-battle.vue

@@ -5,6 +5,7 @@ import Guide from "@/components/Guide.vue";
 import SButton from "@/components/SButton.vue";
 import SModal from "@/components/SModal.vue";
 import CreateRoom from "@/components/CreateRoom.vue";
+import Avatar from "@/components/Avatar.vue";
 import { getRoomAPI, joinRoomAPI, isGamingAPI } from "@/apis";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -70,6 +71,36 @@ const onCreateRoom = async () => {
           <text>一起练升级更快，早日加入全国排位赛！</text>
         </view>
       </Guide>
+      <view class="my-data">
+        <view>
+          <Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" />
+          <text>{{ user.nickName }}</text>
+        </view>
+        <view>
+          <view>
+            <view>
+              <text>1111</text>
+              <text>局</text>
+            </view>
+            <text>约战数量</text>
+          </view>
+          <view>
+            <view>
+              <text>1111</text>
+              <text>箭</text>
+            </view>
+            <text>射箭量</text>
+          </view>
+          <view>
+            <view class="stars">
+              <image src="../static/star-full.png" mode="widthFix" />
+              <image src="../static/star-full.png" mode="widthFix" />
+              <image src="../static/star-half.png" mode="widthFix" />
+            </view>
+            <text>挑战难度</text>
+          </view>
+        </view>
+      </view>
       <view class="founded-room">
         <image src="../static/founded-room.png" mode="widthFix" />
         <view>
@@ -114,10 +145,9 @@ const onCreateRoom = async () => {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 20px 0;
   background-color: #54431d33;
   border: 1px solid #54431d;
-  margin: 25px 15px;
+  margin: 15px;
   border-radius: 10px;
   padding: 15px;
 }
@@ -128,7 +158,7 @@ const onCreateRoom = async () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin: 25px 0;
+  margin-top: 15px;
   background-color: #fff;
   border-radius: 30px;
   width: 100%;
@@ -153,7 +183,8 @@ const onCreateRoom = async () => {
 }
 .create-room {
   position: relative;
-  margin: 25px 15px;
+  margin: 15px;
+  height: 50vw;
 }
 .create-room > image:first-of-type {
   position: absolute;
@@ -200,4 +231,64 @@ const onCreateRoom = async () => {
   align-items: center;
   color: #fff9;
 }
+.my-data {
+  width: calc(100% - 30px);
+  margin: 15px;
+  margin-top: 0;
+  border-radius: 10px;
+  border: 1px solid #54431d;
+  overflow: hidden;
+  background-color: #54431d33;
+}
+.my-data > view {
+  width: 100%;
+  display: flex;
+  color: #fff9;
+}
+.my-data > view:first-child {
+  width: calc(100% - 30px);
+  align-items: flex-end;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #48494e;
+  margin: 15px;
+  margin-bottom: 0;
+}
+.my-data > view:first-child > text {
+  color: #fff;
+  font-size: 17px;
+  margin-left: 10px;
+}
+.my-data > view:last-child {
+  margin-bottom: 15px;
+}
+.my-data > view:last-child > view {
+  width: 33%;
+  margin-top: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 11px;
+}
+.my-data > view:last-child > view > view {
+  margin-bottom: 5px;
+}
+.my-data > view:last-child > view > view > text:first-child {
+  color: #fff;
+  font-size: 17px;
+  margin-right: 5px;
+  transform: translateY(3px);
+}
+.my-data > view:last-child > view:nth-child(2) {
+  border-left: 1px solid #48494e;
+  border-right: 1px solid #48494e;
+}
+.my-data > view:last-child > view > view {
+  display: flex;
+  align-items: flex-end;
+  height: 20px;
+}
+.stars > image {
+  width: 5vw;
+  margin: 0 1px;
+}
 </style>

src/pages/my-growth.vue

@@ -3,6 +3,7 @@ import { onMounted } from "vue";
 import Container from "@/components/Container.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowData from "@/components/BowData.vue";
+import BattleHeader from "@/components/BattleHeader.vue";
 import ScrollList from "@/components/ScrollList.vue";
 import { getBattleListAPI, getPractiseResultListAPI } from "@/apis";
 import { meleeAvatarColors } from "@/constants";
@@ -13,8 +14,6 @@ const selectedIndex = ref(0);
 const matchList = ref([]);
 const battleList = ref([]);
 const practiseList = ref([]);
-// const showBowData = ref(false);
-// const arrows = ref([]);
 
 const toMatchDetail = (id) => {
   uni.navigateTo({
@@ -82,50 +81,13 @@ const onPractiseLoading = async (page) => {
             <text>{{ item.createdAt }}</text>
             <image src="../static/back.png" mode="widthFix" />
           </view>
-          <view v-if="item.mode === 1" class="contest-team">
+          <BattleHeader
-            <block v-if="item.bluePlayers[0]">
+            :players="item.mode === 1 ? [] : item.players"
-              <view class="player">
+            :blueTeam="item.bluePlayers"
-                <Avatar
+            :redTeam="item.redPlayers"
-                  :rankLvl="item.bluePlayers[0].rankLvl"
+            :winner="item.winner"
-                  :src="item.bluePlayers[0].avatar"
+            :showHeader="false"
           />
-                <text>{{ item.bluePlayers[0].name }}</text>
-                <image
-                  v-if="item.winner === 1"
-                  src="../static/winner-badge.png"
-                  mode="widthFix"
-                />
-              </view>
-            </block>
-            <block v-if="item.redPlayers[0]">
-              <view class="player">
-                <Avatar
-                  :rankLvl="item.redPlayers[0].rankLvl"
-                  :src="item.redPlayers[0].avatar"
-                />
-                <text>{{ item.redPlayers[0].name }}</text>
-                <image
-                  v-if="item.winner === 0"
-                  src="../static/winner-badge.png"
-                  mode="widthFix"
-                />
-              </view>
-            </block>
-          </view>
-          <view v-if="item.mode === 2" class="contest-melee">
-            <view
-              class="player"
-              v-for="(p, index2) in item.players"
-              :key="index2"
-              :style="{
-                width: `${Math.max(100 / item.players.length, 18)}vw`,
-                backgroundColor: meleeAvatarColors[index2],
-              }"
-            >
-              <Avatar :rank="index2 + 1" :src="p.avatar" />
-              <text>{{ p.name }}</text>
-            </view>
-          </view>
         </view>
       </ScrollList>
       <ScrollList :show="selectedIndex === 1" :onLoading="onBattleLoading">
@@ -204,11 +166,6 @@ const onPractiseLoading = async (page) => {
         </view>
       </ScrollList>
     </view>
-    <!-- <BowData
-      :arrows="arrows"
-      :show="showBowData"
-      :onClose="() => (showBowData = false)"
-    /> -->
   </Container>
 </template>
 
@@ -263,52 +220,6 @@ const onPractiseLoading = async (page) => {
   width: 15px;
   transform: rotate(180deg);
 }
-.player {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #fff9;
-  padding-top: 10px;
-  padding-bottom: 5px;
-  position: relative;
-  flex: 0 0 auto;
-}
-.player > text {
-  margin-top: 5px;
-  font-size: 12px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 90%;
-  text-align: center;
-}
-.player > image:last-child {
-  position: absolute;
-  width: 60px;
-  right: 0;
-  bottom: 0;
-}
-.contest-team,
-.contest-melee {
-  width: 100%;
-  display: flex;
-  margin-bottom: 10px;
-  overflow-x: auto;
-}
-.contest-melee::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  color: transparent;
-}
-.contest-team > view {
-  width: 50%;
-}
-.contest-team > view:first-child {
-  background-color: #364469;
-}
-.contest-team > view:last-child {
-  background-color: #692735;
-}
 .practice-record {
   color: #fff9;
   border-bottom: 1px solid #fff9;

src/pages/practise.vue

@@ -1,6 +1,12 @@
 <script setup>
 import Container from "@/components/Container.vue";
 import Guide from "@/components/Guide.vue";
+import Avatar from "@/components/Avatar.vue";
+
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
 
 const toPractiseOne = () => {
   uni.navigateTo({
@@ -26,12 +32,37 @@ const toPractiseTwo = () => {
           >坚持练习就能你快速升级，早日加入全国排位赛！</text
         >
       </Guide>
-      <image
+      <view class="practise-data">
-        src="../static/practise-bg.png"
+        <view>
-        class="practise-bg"
+          <view>
-        mode="widthFix"
+            <Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" />
-        :style="{ marginTop: 0 }"
+            <text>{{ user.nickName }}</text>
-      />
+          </view>
+          <view>
+            <text>已练习打卡</text>
+            <text>12121</text>
+            <text>天</text>
+          </view>
+        </view>
+        <view>
+          <view>
+            <view><text>1111</text><text>组</text></view>
+            <text>个人练习量</text>
+          </view>
+          <view>
+            <view><text>1111</text><text>箭</text></view>
+            <text>射箭量</text>
+          </view>
+          <view>
+            <view>
+              <text>射灵</text>
+              <text>{{ user.lvl }}</text>
+              <text>级</text>
+            </view>
+            <text>当前等级</text>
+          </view>
+        </view>
+      </view>
       <view class="practise-btn" @click="toPractiseOne">
         <image
           src="https://static.shelingxingqiu.com/attachment/2025-07-12/db9x668e2vdtqh0otq.png"
@@ -39,11 +70,6 @@ const toPractiseTwo = () => {
           mode="widthFix"
         />
       </view>
-      <image
-        src="../static/practise-bg.png"
-        class="practise-bg"
-        mode="widthFix"
-      />
       <view class="practise-btn" @click="toPractiseTwo">
         <image
           src="https://static.shelingxingqiu.com/attachment/2025-07-12/db9x668eehkvyicc08.png"
@@ -51,25 +77,78 @@ const toPractiseTwo = () => {
           mode="widthFix"
         />
       </view>
-      <image
-        src="../static/practise-bg.png"
-        class="practise-bg"
-        mode="widthFix"
-      />
     </view>
   </Container>
 </template>
 
 <style scoped>
+.practise-data,
 .practise-btn {
-  width: 100%;
+  width: calc(100% - 30px);
-  margin-top: -6px;
+  margin: 15px;
+  margin-top: 0;
+  border-radius: 20px;
+  border: 1px solid #473f25;
+  overflow: hidden;
+}
+.practise-data > view {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #fff9;
+  font-size: 11px;
+}
+.practise-data > view:first-child {
+  padding-bottom: 15px;
+  border-bottom: 1px solid #48494e;
+  margin: 15px;
+  margin-bottom: 0;
+}
+.practise-data > view:first-child > view {
+  display: flex;
+  align-items: flex-end;
+}
+.practise-data > view:first-child > view:first-child > text {
+  color: #fff;
+  margin-left: 10px;
+  font-size: 16px;
+}
+.practise-data > view:first-child > view:last-child > text:nth-child(2) {
+  color: #f7d247;
+  margin: 0 3px;
+  font-size: 18px;
+  font-weight: 600;
+  transform: translateY(3px);
+}
+.practise-data > view:last-child {
+  margin-bottom: 15px;
+}
+.practise-data > view:last-child > view {
+  width: 33%;
+  margin-top: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.practise-data > view:last-child > view:nth-child(2) {
+  border-left: 1px solid #48494e;
+  border-right: 1px solid #48494e;
+}
+.practise-data > view:last-child > view > view {
+  display: flex;
+  align-items: flex-end;
+}
+.practise-data > view:last-child > view > view > text:nth-last-child(2) {
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+  margin: 0 3px;
+  transform: translateY(3px);
+}
+.practise-data > view:last-child > view > text {
+  margin-top: 5px;
 }
 .practise-btn > image {
   width: 100%;
 }
-.practise-bg {
-  width: 100%;
-  margin-top: -6px;
-}
 </style>

src/pages/ranking.vue

@@ -188,12 +188,23 @@ onShow(async () => {
             <text>积分：{{ rankData.user.scores }}</text>
           </view>
         </view>
-        <view class="rank-type">
+        <view class="battle-types">
+          <image src="../static/battle-choose.png" mode="widthFix" />
           <image
             src="../static/battle1v1.png"
             mode="widthFix"
             @click.stop="() => toMatchPage(1, 2)"
           />
+          <image
+            src="../static/battle2v2.png"
+            mode="widthFix"
+            @click.stop="() => toMatchPage(1, 4)"
+          />
+          <image
+            src="../static/battle3v3.png"
+            mode="widthFix"
+            @click.stop="() => toMatchPage(1, 6)"
+          />
           <image
             src="../static/battle5.png"
             mode="widthFix"
@@ -215,7 +226,7 @@ onShow(async () => {
             <view
               :style="{
                 width: `${currentSeasonData['1v1'].winRate}%`,
-                backgroundColor: '#FF507E',
+                backgroundColor: '#9479FF',
               }"
             />
           </view>
@@ -223,7 +234,37 @@ onShow(async () => {
         <view class="data-progress">
           <text>
             {{
-              `【5人大乱斗】${currentSeasonData["5m"].totalGames}场 胜率 ${currentSeasonData["5m"].winRate}%`
+              `【2 V 2】${currentSeasonData["1v1"].totalGames}场 胜率 ${currentSeasonData["1v1"].winRate}%`
+            }}
+          </text>
+          <view>
+            <view
+              :style="{
+                width: `${currentSeasonData['1v1'].winRate}%`,
+                backgroundColor: '#69B5FF',
+              }"
+            />
+          </view>
+        </view>
+        <view class="data-progress">
+          <text>
+            {{
+              `【3 V 3】${currentSeasonData["1v1"].totalGames}场 胜率 ${currentSeasonData["1v1"].winRate}%`
+            }}
+          </text>
+          <view>
+            <view
+              :style="{
+                width: `${currentSeasonData['1v1'].winRate}%`,
+                backgroundColor: '#FF8C8C',
+              }"
+            />
+          </view>
+        </view>
+        <view class="data-progress">
+          <text>
+            {{
+              `【5人大乱斗】${currentSeasonData["5m"].totalGames}场 得分率 ${currentSeasonData["5m"].winRate}%`
             }}
           </text>
           <view>
@@ -238,14 +279,14 @@ onShow(async () => {
         <view class="data-progress">
           <text>
             {{
-              `【10人大乱斗】${currentSeasonData["10m"].totalGames}场 胜率 ${currentSeasonData["10m"].winRate}%`
+              `【10人大乱斗】${currentSeasonData["10m"].totalGames}场 得分率 ${currentSeasonData["10m"].winRate}%`
             }}
           </text>
           <view>
             <view
               :style="{
                 width: `${currentSeasonData['10m'].winRate}%`,
-                backgroundColor: '#FFD947',
+                backgroundColor: '#F27ADF',
               }"
             />
           </view>
@@ -408,15 +449,16 @@ onShow(async () => {
 .my-data > view > text:last-child {
   font-size: 18px;
 }
-.rank-type {
+.battle-types {
-  display: flex;
+  display: grid;
-  justify-content: space-between;
+  grid-template-columns: repeat(3, 1fr);
-  align-items: center;
   width: 100%;
   margin-top: 15px;
+  row-gap: 8px;
+  column-gap: 8px;
 }
-.rank-type > image {
+.battle-types > image {
-  width: 32%;
+  width: 100%;
 }
 .data-progress {
   width: 100%;
@@ -425,6 +467,7 @@ onShow(async () => {
   flex-direction: column;
   align-items: flex-start;
   margin-top: 15px;
+  font-size: 14px;
 }
 .data-progress > view {
   width: 100%;

src/pages/team-bow-data.vue

@@ -14,8 +14,10 @@ const players = ref([]);
 const allRoundsScore = ref({});
 const data = ref({});
 onLoad(async (options) => {
-  if (options.battleId) {
+  if (!options.battleId) {
-    const result = await getGameAPI(options.battleId);
+    const result = await getGameAPI(
+      options.battleId || "BATTLE-1754988051086075885-926"
+    );
     data.value = result;
     if (result.winner === 0) {
       players.value = [
@@ -100,19 +102,28 @@ const onClickTab = (index) => {
       <view :style="{ margin: '20px 0' }">
         <BowTarget :scores="redScores" :blueScores="blueScores" />
       </view>
-      <view class="score-row" v-for="(player, index) in players" :key="index">
+      <view class="score-container">
+        <view
+          class="score-row"
+          v-for="(player, index) in players"
+          :key="index"
+          :style="{
+            justifyContent: index % 2 === 0 ? 'flex-end' : 'flex-start',
+          }"
+        >
           <Avatar
             :src="player.avatar"
             :borderColor="
               data.bluePlayers[player.playerId] ? '#64BAFF' : '#FF6767'
             "
+            :size="36"
           />
+          <view>
             <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>
@@ -127,7 +138,6 @@ const onClickTab = (index) => {
               v-for="(score, index) in data.goldenRound.arrowHistory"
               :key="index"
               class="score-item"
-          :style="{ width: '13vw', height: '13vw' }"
             >
               {{ score.ring }}
             </view>
@@ -141,12 +151,13 @@ const onClickTab = (index) => {
               ][player.playerId]"
               :key="index"
               class="score-item"
-          :style="{ width: '13vw', height: '13vw' }"
             >
               {{ score.ring }}
             </view>
           </view>
         </view>
+      </view>
+    </view>
   </Container>
 </template>
 
@@ -185,10 +196,15 @@ const onClickTab = (index) => {
   color: #000;
 }
 .score-row {
-  margin: 10px 20px;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
-  justify-content: flex-start;
+  margin-left: 15px;
+}
+.score-row > view:last-child {
+  margin-left: 10px;
+  display: grid;
+  grid-template-columns: repeat(3, auto);
+  gap: 5px;
 }
 .score-item {
   background-image: url("../static/score-bg.png");
@@ -199,7 +215,13 @@ const onClickTab = (index) => {
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 24px;
+  font-size: 20px;
-  margin-left: 10px;
+  width: 10vw;
+  height: 10vw;
+}
+.score-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 15px;
 }
 </style>