BUG修复

src/pages/battle-result.vue

@@ -120,7 +120,11 @@ const checkBowData = () => {
           :src="`../static/${data.winner === 1 ? 'blue' : 'red'}-team-win.png`"
           mode="widthFix"
         />
-        <view>
+        <view
+          :style="{
+            transform: `translateY(50px) rotate(-${5 + data.mvps.length}deg)`,
+          }"
+        >
           <view v-if="data.mvps && data.mvps[0].totalRings">
             <image src="../static/title-mvp.png" mode="widthFix" />
             <text
@@ -132,7 +136,7 @@ const checkBowData = () => {
           </view>
           <view v-if="data.mvps && data.mvps.length">
             <view v-for="(player, index) in data.mvps" :key="index">
-              <view class="team-avatar">
+              <view class="team-avatar" :style="{ transform: 'rotate(10deg)' }">
                 <Avatar
                   :src="player.avatar"
                   :size="40"
@@ -495,13 +499,11 @@ const checkBowData = () => {
 .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;
@@ -509,24 +511,24 @@ const checkBowData = () => {
 .header-mvp > view > view:first-child > text {
   color: #fff;
   font-size: 14px;
-  transform: translateY(-4px) rotate(-5deg);
+  transform: skewX(-10deg);
 }
 .header-mvp > view > view:last-child {
   display: flex;
   align-items: center;
   color: #fff;
-  font-size: 8px;
+  font-size: 9px;
   text-align: center;
-  transform: translateY(-16px) rotate(-5deg);
-  min-width: 40%;
+  transform: translateY(-4px);
 }
 .header-mvp > view > view:last-child > view {
-  margin-right: 4vw;
+  margin-left: 4vw;
   display: flex;
   flex-direction: column;
 }
 .header-mvp > view > view:last-child > view > text {
   margin-top: 4px;
   width: 40px;
+  transform: skewX(-10deg) translateX(-3px);
 }
 </style>