fix: 金额输入框样式优化 + 预算页键盘遮挡修复 + admin 样式修复

- AmountEditor: 未聚焦时透明,聚焦时粘土卡片浮起;¥/单位 baseline 对齐
- budget: 补充 Numpad 占位高度,auto-focus 改为 false 缩短页面
- admin/feedback: 补充 modal-mask mixin
- admin/track: filter-tabs 与 scroll-view 分离 + 格式化
This commit is contained in:
2026-06-09 14:44:25 +08:00
parent 768c72d7b7
commit 6b26951b1b
4 changed files with 140 additions and 70 deletions

View File

@@ -128,60 +128,54 @@ defineExpose({ focus, blur })
width: 100%;
}
// 金额显示区 — 未聚焦时低调,聚焦时粘土卡片浮起
.amount-display {
min-height: 156rpx;
padding: $space-lg $space-xl;
background: $surface;
border: 2rpx solid $border;
border-radius: $radius-2xl;
box-shadow: $shadow-clay;
display: flex;
align-items: center;
align-items: baseline;
justify-content: center;
gap: $space-xs;
gap: 8rpx;
padding: $space-lg $space-xl $space-md;
border-radius: $radius-xl;
border: 2rpx solid transparent;
background: transparent;
transition: background $transition-normal, border-color $transition-normal, box-shadow $transition-normal;
-webkit-tap-highlight-color: transparent;
transition: border-color $transition-normal, box-shadow $transition-normal, transform $transition-fast;
&:active {
transform: scale(0.99);
}
}
.amount-editor--focused .amount-display {
border-color: $primary-light;
box-shadow: $shadow-clay, 0 8rpx 24rpx rgba(255, 140, 105, 0.16);
background: $surface;
border-color: $border;
box-shadow: $shadow-clay;
}
.currency,
// ¥ 符号
.currency {
flex-shrink: 0;
font-family: 'Fredoka', sans-serif;
font-weight: 500;
color: $text-muted;
line-height: 1.2;
}
// 单位(元)
.unit {
flex-shrink: 0;
color: $text-sec;
font-weight: 600;
color: $text-sec;
line-height: 1.2;
}
.currency {
align-self: flex-start;
margin-top: 12rpx;
font-family: 'Fredoka', sans-serif;
font-size: 40rpx;
}
.unit {
align-self: flex-end;
margin-bottom: 14rpx;
font-size: $font-md;
}
// 金额字符容器
.amount-value {
min-width: 0;
display: flex;
align-items: center;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
font-family: 'Fredoka', sans-serif;
font-weight: 700;
color: $text;
line-height: 1.1;
line-height: 1.2;
word-break: break-all;
}
@@ -189,7 +183,6 @@ defineExpose({ focus, blur })
.placeholder {
display: inline-flex;
align-items: center;
min-height: 1.1em;
}
.amount-char {
@@ -197,9 +190,10 @@ defineExpose({ focus, blur })
}
.placeholder {
color: $text-muted;
color: #D0C4C4;
}
// 光标
.cursor {
width: 4rpx;
height: 1em;
@@ -209,11 +203,11 @@ defineExpose({ focus, blur })
animation: cursor-blink 1s steps(2, start) infinite;
}
// ===== 尺寸变体 =====
.amount-editor--small {
.amount-display {
min-height: 112rpx;
padding: $space-md $space-lg;
border-radius: $radius-xl;
}
.amount-value {
@@ -221,14 +215,17 @@ defineExpose({ focus, blur })
}
.currency {
margin-top: 6rpx;
font-size: 28rpx;
}
.unit {
font-size: $font-sm;
}
}
.amount-editor--medium {
.amount-display {
min-height: 132rpx;
padding: $space-md $space-xl;
}
.amount-value {
@@ -238,12 +235,24 @@ defineExpose({ focus, blur })
.currency {
font-size: 34rpx;
}
.unit {
font-size: $font-md;
}
}
.amount-editor--large {
.amount-value {
font-size: 88rpx;
}
.currency {
font-size: 40rpx;
}
.unit {
font-size: $font-lg;
}
}
@keyframes cursor-blink {