feat: center bubble via flex (above head), bigger mascot/text, smoother tap bounce

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