feat: translateY-compensated scaleY squash (bottom-fixed, no reflow shake) + enlarge mascot/text
This commit is contained in:
+18
-27
@@ -23,9 +23,7 @@
|
|||||||
<text class="bubble-text">{{bubbleText}}</text>
|
<text class="bubble-text">{{bubbleText}}</text>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mascot-wrap">
|
<image class="mascot step{{animStep}}" src="/common/dsniang.png" onclick="onTap" />
|
||||||
<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>
|
||||||
@@ -225,7 +223,7 @@ export default {
|
|||||||
|
|
||||||
.bubble-zone {
|
.bubble-zone {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 62px;
|
height: 54px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
@@ -270,30 +268,23 @@ export default {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 吉祥物:比之前大一点 + 敲击 Q 弹 */
|
/* 吉祥物:放大 + 底部锚定的 scaleY+translateY 补偿 Q 弹 */
|
||||||
.mascot-wrap {
|
|
||||||
width: 420px;
|
|
||||||
height: 340px;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mascot {
|
.mascot {
|
||||||
width: 420px;
|
width: 456px;
|
||||||
transition: height 0.14s cubic-bezier(0.33, 1.12, 0.68, 1);
|
height: 403px;
|
||||||
|
transition: transform 0.12s cubic-bezier(0.33, 1.12, 0.68, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mh0 { height: 340px; }
|
.step0 { transform: translateY(0px) scaleY(1); }
|
||||||
.mh1 { height: 314px; }
|
.step1 { transform: translateY(16px) scaleY(0.92); }
|
||||||
.mh2 { height: 282px; }
|
.step2 { transform: translateY(36px) scaleY(0.82); }
|
||||||
.mh3 { height: 322px; }
|
.step3 { transform: translateY(10px) scaleY(0.95); }
|
||||||
.mh4 { height: 346px; }
|
.step4 { transform: translateY(-10px) scaleY(1.05); }
|
||||||
|
|
||||||
.peak {
|
.peak {
|
||||||
font-size: 26px;
|
font-size: 28px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-top: 6px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.peak-green {
|
.peak-green {
|
||||||
@@ -306,16 +297,16 @@ export default {
|
|||||||
|
|
||||||
.stats {
|
.stats {
|
||||||
color: #c4d2ea;
|
color: #c4d2ea;
|
||||||
font-size: 18px;
|
font-size: 20px;
|
||||||
margin-top: 4px;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 气泡:头像正上方居中,稍微放大 */
|
/* 气泡:头像正上方居中,稍微放大 */
|
||||||
.bubble {
|
.bubble {
|
||||||
width: 284px;
|
width: 304px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 14px 16px;
|
padding: 16px 18px;
|
||||||
border-radius: 18px;
|
border-radius: 20px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user