diff --git a/client/src/components/AmountEditor/AmountEditor.vue b/client/src/components/AmountEditor/AmountEditor.vue index 805992a..c234653 100644 --- a/client/src/components/AmountEditor/AmountEditor.vue +++ b/client/src/components/AmountEditor/AmountEditor.vue @@ -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 { diff --git a/client/src/pages/admin/feedback.vue b/client/src/pages/admin/feedback.vue index 1b50c0a..be1d49d 100644 --- a/client/src/pages/admin/feedback.vue +++ b/client/src/pages/admin/feedback.vue @@ -607,4 +607,9 @@ function goBack() { uni.navigateBack() } .skip & { color: $text-sec; } .confirm & { color: $surface; } } + +.modal-mask { + @include modal-mask; +} + diff --git a/client/src/pages/admin/track.vue b/client/src/pages/admin/track.vue index b76eeca..a719f07 100644 --- a/client/src/pages/admin/track.vue +++ b/client/src/pages/admin/track.vue @@ -61,13 +61,19 @@ 事件记录 - - 全部 - 页面 - 操作 - 错误 - API错误 - 启动 + + + 全部 + + 页面 + 操作 + + 错误 + + API错误 + 启动 + @@ -95,7 +101,8 @@ {{ item.page }} {{ item.nickname }} - {{ JSON.stringify(item.data) }} + {{ JSON.stringify(item.data) + }} @@ -151,7 +158,7 @@ onPullDownRefresh(async () => { async function loadStats() { try { stats.value = await getTrackStats() - } catch {} + } catch { } } async function loadEvents(append = false) { @@ -274,7 +281,9 @@ function goBack() { @include sticky-header; } -.status-bar { @include status-bar; } +.status-bar { + @include status-bar; +} .nav-bar { display: flex; @@ -282,7 +291,9 @@ function goBack() { padding: $space-sm $space-xl $space-md; } -.nav-back { @include nav-back; } +.nav-back { + @include nav-back; +} .nav-title { flex: 1; @@ -292,7 +303,9 @@ function goBack() { color: $text; } -.nav-placeholder { width: 88rpx; } +.nav-placeholder { + width: 88rpx; +} .stats-card { margin: $space-md $space-xl; @@ -333,7 +346,9 @@ function goBack() { gap: $space-sm; padding: $space-xs 0; - &:active { opacity: 0.7; } + &:active { + opacity: 0.7; + } } .event-tag { @@ -341,18 +356,34 @@ function goBack() { border-radius: $radius-xs; flex-shrink: 0; - &.page { background: #E3F2FD; } - &.action { background: #E8F5E9; } - &.error { background: #FFEBEE; } + &.page { + background: #E3F2FD; + } + + &.action { + background: #E8F5E9; + } + + &.error { + background: #FFEBEE; + } } .event-tag-text { font-size: $font-sm; font-weight: 500; - .page & { color: #1976D2; } - .action & { color: #388E3C; } - .error & { color: #D32F2F; } + .page & { + color: #1976D2; + } + + .action & { + color: #388E3C; + } + + .error & { + color: #D32F2F; + } } .event-bar { @@ -472,7 +503,9 @@ function goBack() { align-items: center; justify-content: center; - &:active { opacity: 0.8; } + &:active { + opacity: 0.8; + } } .search-btn-text { @@ -491,7 +524,6 @@ function goBack() { display: flex; gap: $space-xs; white-space: nowrap; - width: 100%; } .filter-tab { @@ -520,7 +552,9 @@ function goBack() { padding: $space-md; border-bottom: 1rpx solid $border; - &:last-child { border-bottom: none; } + &:last-child { + border-bottom: none; + } } .record-header { @@ -534,18 +568,34 @@ function goBack() { padding: 2rpx 12rpx; border-radius: $radius-xs; - &.page { background: #E3F2FD; } - &.action { background: #E8F5E9; } - &.error { background: #FFEBEE; } + &.page { + background: #E3F2FD; + } + + &.action { + background: #E8F5E9; + } + + &.error { + background: #FFEBEE; + } } .record-event-text { font-size: $font-xs; font-weight: 500; - .page & { color: #1976D2; } - .action & { color: #388E3C; } - .error & { color: #D32F2F; } + .page & { + color: #1976D2; + } + + .action & { + color: #388E3C; + } + + .error & { + color: #D32F2F; + } } .record-time { @@ -578,7 +628,8 @@ function goBack() { border-radius: $radius-sm; } -.loading-box, .empty-box { +.loading-box, +.empty-box { display: flex; align-items: center; justify-content: center; @@ -601,6 +652,8 @@ function goBack() { } @media (prefers-reduced-motion: reduce) { - .bar-fill { transition: none; } + .bar-fill { + transition: none; + } } diff --git a/client/src/pages/budget/index.vue b/client/src/pages/budget/index.vue index beb7fc3..2607658 100644 --- a/client/src/pages/budget/index.vue +++ b/client/src/pages/budget/index.vue @@ -66,7 +66,7 @@ :fixed="true" size="large" unit="元" - :auto-focus="true" + :auto-focus="false" @confirm="onConfirm" /> @@ -197,7 +197,10 @@ function goBack() { .page { min-height: 100vh; background: $bg; - padding-bottom: 120rpx; + // AmountEditor fixed Numpad 占位: 4行×96rpx + 3间隙×16rpx + padding×2×16rpx = 464rpx + $numpad-h: 464rpx; + padding-bottom: calc(#{$numpad-h} + constant(safe-area-inset-bottom)); + padding-bottom: calc(#{$numpad-h} + env(safe-area-inset-bottom)); } .header-fixed {