fix: bottom-anchored height squash (wrapper flex-end) so Q-bounce shrinks top-down reliably

This commit is contained in:
2026-09-01 20:52:32 +08:00
parent 571805b8c6
commit 5402722cea
+15 -21
View File
@@ -23,7 +23,9 @@
<text class="bubble-text">{{bubbleText}}</text> <text class="bubble-text">{{bubbleText}}</text>
</div> </div>
</div> </div>
<image class="mascot step{{animStep}}" src="/common/dsniang.png" onclick="onTap" /> <div class="mascot-wrap">
<image class="mascot mh{{animStep}}" src="/common/dsniang.png" onclick="onTap" />
</div>
<text class="peak {{isPeak ? 'peak-red' : 'peak-green'}}">{{peakLabel}}</text> <text class="peak {{isPeak ? 'peak-red' : 'peak-green'}}">{{peakLabel}}</text>
<text class="stats">余额 {{balance}}</text> <text class="stats">余额 {{balance}}</text>
<text class="stats">今日 {{todayTokens}} tokens · 预估 ¥{{todayCost}}</text> <text class="stats">今日 {{todayTokens}} tokens · 预估 ¥{{todayCost}}</text>
@@ -269,32 +271,24 @@ export default {
} }
/* 吉祥物:比之前大一点 + 敲击 Q 弹 */ /* 吉祥物:比之前大一点 + 敲击 Q 弹 */
.mascot { .mascot-wrap {
width: 360px; width: 360px;
height: 318px; height: 318px;
transform-origin: center bottom; flex-direction: column;
transition: transform 0.14s cubic-bezier(0.33, 1.12, 0.68, 1); justify-content: flex-end;
align-items: center;
} }
.step0 { .mascot {
transform: scaleY(1); width: 360px;
transition: height 0.14s cubic-bezier(0.33, 1.12, 0.68, 1);
} }
.step1 { .mh0 { height: 318px; }
transform: scaleY(0.92); .mh1 { height: 292px; }
} .mh2 { height: 262px; }
.mh3 { height: 302px; }
.step2 { .mh4 { height: 322px; }
transform: scaleY(0.82);
}
.step3 {
transform: scaleY(0.95);
}
.step4 {
transform: scaleY(1.05);
}
.peak { .peak {
font-size: 22px; font-size: 22px;