UI更新

src/components/Container.vue

@@ -80,29 +80,29 @@ const goBack = () => {
           >完成进行中的对局才能开启新的。您有正在进行中的对局，是否进入?</text
         >
         <view>
-          <button hover-class="none" @click="backToGame">进入</button>
           <button hover-class="none" @click="() => (showHint = false)">
             不进入
           </button>
+          <button hover-class="none" @click="backToGame">进入</button>
         </view>
       </view>
       <view v-if="hintType === 2" class="tip-content">
         <text>离开比赛可能会导致比赛失败，</text>
         <text>确认离开吗？</text>
         <view>
+          <button hover-class="none" @click="goBack">离开比赛</button>
           <button hover-class="none" @click="() => (showHint = false)">
             继续比赛
           </button>
-          <button hover-class="none" @click="goBack">离开比赛</button>
         </view>
       </view>
       <view v-if="hintType === 3" class="tip-content">
         <text>今天不玩了吗？</text>
         <view>
-          <button hover-class="none" @click="goBack">确认</button>
           <button hover-class="none" @click="() => (showHint = false)">
             取消
           </button>
+          <button hover-class="none" @click="goBack">确认</button>
         </view>
       </view>
     </ScreenHint>
@@ -147,7 +147,7 @@ const goBack = () => {
   width: 45%;
   font-size: 16px;
 }
-.tip-content > view > button:first-child {
+.tip-content > view > button:last-child {
   background-color: #fed847;
   color: #000;
 }

src/components/UserUpgrade.vue

@@ -28,9 +28,25 @@ onMounted(() => {
 
 <template>
   <view class="content" :style="{ display: show ? 'flex' : 'none' }">
-    <image src="../static/user-upgrade.png" mode="widthFix" />
-    <image class="" src="../static/shining-bg.png" mode="widthFix" />
     <view>
+      <image
+        class="scale-in"
+        src="../static/user-upgrade.png"
+        mode="widthFix"
+      />
+      <image
+        class="scale-in bg-effect"
+        src="../static/shining-bg.png"
+        mode="widthFix"
+      />
+      <image
+        class="scale-in bg-effect"
+        src="../static/gold-shining.png"
+        mode="widthFix"
+      />
+    </view>
+    <view class="text-content">
+      <image src="../static/update-text-bg.png" />
       <text>恭喜你升级到</text>
       <text>射灵{{ lvl }}级</text>
     </view>
@@ -52,22 +68,41 @@ onMounted(() => {
   z-index: 10;
   color: red;
 }
-.content > image:first-child {
+.content > view:first-child {
+  position: relative;
+}
+
+.content > view:first-child > image:first-child {
+  animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+.content > view:first-child > image:first-child {
   width: 50vw;
+  margin: 20vw;
+}
+.bg-effect {
   position: absolute;
-  top: calc(50% - 30vw);
-}
-.content > image:nth-child(2) {
   width: 80vw;
+  left: calc(50% - 40vw);
+  z-index: -1;
+  transform: scale(0);
+  opacity: 0;
 }
-.content > view:nth-child(3) {
+.text-content {
   color: #fff;
   display: flex;
   font-size: 20px;
   font-weight: bold;
   margin-top: -6vw;
+  position: relative;
+  line-height: 60px;
 }
-.content > view:nth-child(3) > text:last-child {
+.text-content > image:first-child {
+  position: absolute;
+  width: 80vw;
+  left: calc(50% - 40vw);
+  height: 60px;
+}
+.text-content > text:last-child {
   color: #fed847;
 }
 .content > button:last-child {

src/pages/friend-battle.vue

@@ -55,7 +55,7 @@ const onCreateRoom = async () => {
 </script>
 
 <template>
-  <Container title="好友约战">
+  <Container title="好友约战" :showBackToGame="true">
     <view :style="{ width: '100%' }">
       <Guide>
         <view class="guide-tips">