From 39bd9f81a33f17ad7b2ec8c02f22d484fc3f7eb6 Mon Sep 17 00:00:00 2001
From: jiangchen <1703935164@qq.com>
Date: Tue, 1 Sep 2026 20:56:35 +0800
Subject: [PATCH] feat: translateY-compensated scaleY squash (bottom-fixed, no
 reflow shake) + enlarge mascot/text

---
 src/pages/index/index.ux | 45 ++++++++++++++++------------------------
 1 file changed, 18 insertions(+), 27 deletions(-)

diff --git a/src/pages/index/index.ux b/src/pages/index/index.ux
index c7c17a5..de1fadc 100644
--- a/src/pages/index/index.ux
+++ b/src/pages/index/index.ux
@@ -23,9 +23,7 @@
             <text class="bubble-text">{{bubbleText}}</text>
           </div>
         </div>
-        <div class="mascot-wrap">
-          <image class="mascot mh{{animStep}}" src="/common/dsniang.png" onclick="onTap" />
-        </div>
+        <image class="mascot step{{animStep}}" src="/common/dsniang.png" onclick="onTap" />
         <text class="peak {{isPeak ? 'peak-red' : 'peak-green'}}">{{peakLabel}}</text>
         <text class="stats">余额 {{balance}}</text>
         <text class="stats">今日 {{todayTokens}} tokens · 预估 ¥{{todayCost}}</text>
@@ -225,7 +223,7 @@ export default {
 
 .bubble-zone {
   width: 100%;
-  height: 62px;
+  height: 54px;
   justify-content: center;
   align-items: center;
 }
@@ -270,30 +268,23 @@ export default {
   font-size: 16px;
 }
 
-/* 吉祥物：比之前大一点 + 敲击 Q 弹 */
-.mascot-wrap {
-  width: 420px;
-  height: 340px;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: center;
-}
-
+/* 吉祥物：放大 + 底部锚定的 scaleY+translateY 补偿 Q 弹 */
 .mascot {
-  width: 420px;
-  transition: height 0.14s cubic-bezier(0.33, 1.12, 0.68, 1);
+  width: 456px;
+  height: 403px;
+  transition: transform 0.12s cubic-bezier(0.33, 1.12, 0.68, 1);
 }
 
-.mh0 { height: 340px; }
-.mh1 { height: 314px; }
-.mh2 { height: 282px; }
-.mh3 { height: 322px; }
-.mh4 { height: 346px; }
+.step0 { transform: translateY(0px) scaleY(1); }
+.step1 { transform: translateY(16px) scaleY(0.92); }
+.step2 { transform: translateY(36px) scaleY(0.82); }
+.step3 { transform: translateY(10px) scaleY(0.95); }
+.step4 { transform: translateY(-10px) scaleY(1.05); }
 
 .peak {
-  font-size: 26px;
+  font-size: 28px;
   font-weight: bold;
-  margin-top: 6px;
+  margin-top: 4px;
 }
 
 .peak-green {
@@ -306,16 +297,16 @@ export default {
 
 .stats {
   color: #c4d2ea;
-  font-size: 18px;
-  margin-top: 4px;
+  font-size: 20px;
+  margin-top: 2px;
 }
 
 /* 气泡：头像正上方居中，稍微放大 */
 .bubble {
-  width: 284px;
+  width: 304px;
   flex-direction: column;
-  padding: 14px 16px;
-  border-radius: 18px;
+  padding: 16px 18px;
+  border-radius: 20px;
   background-color: #ffffff;
 }