UI更新

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 {