fix: bottom-anchored height squash (wrapper flex-end) so Q-bounce shrinks top-down reliably
This commit is contained in:
+15
-21
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user