UI更新

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>