From a99a80dd761672ee2564655c19b0873263ad7dc7 Mon Sep 17 00:00:00 2001
From: jiangchen <1703935164@qq.com>
Date: Tue, 1 Sep 2026 20:20:32 +0800
Subject: [PATCH] feat: center bubble via flex (above head), bigger
 mascot/text, smoother tap bounce

---
 src/pages/index/index.ux | 46 ++++++++++++++++++++++------------------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/pages/index/index.ux b/src/pages/index/index.ux
index fa7530f..46c205d 100644
--- a/src/pages/index/index.ux
+++ b/src/pages/index/index.ux
@@ -17,12 +17,15 @@
 
       <!-- 中页：主页 / 吉祥物（无按钮，点击互动） -->
       <div class="page-item center-page">
-        <div class="bubble" if="{{bubbleVisible}}">
-          <text class="bubble-title">DeepSeek 余额</text>
-          <text class="bubble-balance">¥{{bubbleBalance}}</text>
-          <text class="bubble-usage">今日已用 ¥{{bubbleUsage}}</text>
-          <text class="bubble-mode {{isPeak ? 'bubble-mode-peak' : 'bubble-mode-off'}}">{{peakLabel}}</text>
-          <text class="bubble-fun">{{bubbleText}}</text>
+        <!-- 气泡区：始终占位，让气泡在头像正上方居中 -->
+        <div class="bubble-zone">
+          <div class="bubble" if="{{bubbleVisible}}">
+            <text class="bubble-title">DeepSeek 余额</text>
+            <text class="bubble-balance">¥{{bubbleBalance}}</text>
+            <text class="bubble-usage">今日已用 ¥{{bubbleUsage}}</text>
+            <text class="bubble-mode {{isPeak ? 'bubble-mode-peak' : 'bubble-mode-off'}}">{{peakLabel}}</text>
+            <text class="bubble-fun">{{bubbleText}}</text>
+          </div>
         </div>
         <image class="mascot {{tapAnim ? 'mascot-tap' : ''}}" src="/common/dsniang.png" onclick="onTap" />
         <text class="peak {{isPeak ? 'peak-red' : 'peak-green'}}">{{peakLabel}}</text>
@@ -153,7 +156,7 @@ export default {
     // 敲击一下 Q 弹
     this.tapAnim = true
     const self = this
-    setTimeout(() => { self.tapAnim = false }, 280)
+    setTimeout(() => { self.tapAnim = false }, 130)
 
     const idx = Math.floor(Math.random() * this.lines.length)
     const mode = this.isPeak ? '当前是峰时，钱包瑟瑟发抖' : '当前是谷时，薅羊毛好时机'
@@ -208,8 +211,13 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  /* 给气泡留顶部空间 */
-  padding-top: 40px;
+}
+
+.bubble-zone {
+  width: 100%;
+  height: 132px;
+  justify-content: center;
+  align-items: center;
 }
 
 .page-title {
@@ -254,17 +262,17 @@ export default {
 
 /* 吉祥物：比之前大一点 + 敲击 Q 弹 */
 .mascot {
-  width: 250px;
-  height: 250px;
-  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
+  width: 280px;
+  height: 280px;
+  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .mascot-tap {
-  transform: scale(0.9) translateY(3px);
+  transform: scale(0.88);
 }
 
 .peak {
-  font-size: 18px;
+  font-size: 20px;
   font-weight: bold;
   margin-top: 10px;
 }
@@ -278,17 +286,13 @@ export default {
 }
 
 .stats {
-  color: #9fb0d0;
-  font-size: 14px;
-  margin-top: 6px;
+  color: #b8c7e6;
+  font-size: 15px;
+  margin-top: 7px;
 }
 
 /* 气泡：头像正上方居中，稍微放大 */
 .bubble {
-  position: absolute;
-  top: 64px;
-  left: 50%;
-  margin-left: -120px;
   width: 240px;
   padding: 12px 14px;
   border-radius: 16px;