feat: tap bubble shows balance/today usage + peak mode + witty line

This commit is contained in:
2026-09-01 20:15:46 +08:00
parent 8667a47c20
commit 8bd31f9006
+47 -5
View File
@@ -12,7 +12,11 @@
<!-- 点击吉祥物弹出的“对话小框”(类 DSH 挂件气泡) --> <!-- 点击吉祥物弹出的“对话小框”(类 DSH 挂件气泡) -->
<div class="bubble" if="{{bubbleVisible}}"> <div class="bubble" if="{{bubbleVisible}}">
<text class="bubble-text">{{bubbleText}}</text> <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>
</div> </div>
</template> </template>
@@ -49,6 +53,8 @@ export default {
todayCost: '--', todayCost: '--',
bubbleVisible: false, bubbleVisible: false,
bubbleText: '', bubbleText: '',
bubbleBalance: '--',
bubbleUsage: '--',
tapAnim: false, tapAnim: false,
lines: [ lines: [
'我算得比你快,但没你可爱。', '我算得比你快,但没你可爱。',
@@ -90,7 +96,9 @@ export default {
// 对话小框:显示一句幽默文案 + 峰谷信息 // 对话小框:显示一句幽默文案 + 峰谷信息
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 ? '当前是峰时,钱包瑟瑟发抖' : '当前是谷时,薅羊毛好时机'
this.bubbleText = this.lines[idx] + ' | ' + mode this.bubbleText = this.lines[idx]
this.bubbleBalance = this.balance
this.bubbleUsage = this.todayCost
this.bubbleVisible = !this.bubbleVisible this.bubbleVisible = !this.bubbleVisible
} }
} }
@@ -146,9 +154,43 @@ export default {
background-color: #ffffff; background-color: #ffffff;
} }
.bubble-text { .bubble-title {
color: #0b1220; color: #5b6b8c;
font-size: 14px; font-size: 13px;
text-align: center; text-align: center;
} }
.bubble-balance {
color: #1c2c47;
font-size: 26px;
font-weight: bold;
text-align: center;
}
.bubble-usage {
color: #5b6b8c;
font-size: 12px;
text-align: center;
}
.bubble-mode {
font-size: 13px;
font-weight: bold;
text-align: center;
}
.bubble-mode-peak {
color: #ff5b5b;
}
.bubble-mode-off {
color: #1f9e5a;
}
.bubble-fun {
color: #1c2c47;
font-size: 12px;
text-align: center;
margin-top: 4px;
}
</style> </style>