feat: center bubble via flex (above head), bigger mascot/text, smoother tap bounce
This commit is contained in:
+19
-15
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user