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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user