UI更新

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">
-            <block v-if="item.bluePlayers[0]">
-              <view class="player">
-                <Avatar
-                  :rankLvl="item.bluePlayers[0].rankLvl"
-                  :src="item.bluePlayers[0].avatar"
-                />
-                <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>
+          <BattleHeader
+            :players="item.mode === 1 ? [] : item.players"
+            :blueTeam="item.bluePlayers"
+            :redTeam="item.redPlayers"
+            :winner="item.winner"
+            :showHeader="false"
+          />
         </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;