fix: reserve space for conversion notices
This commit is contained in:
parent
ffc8fb0eee
commit
f860b78917
|
|
@ -755,7 +755,8 @@ input:focus-visible {
|
|||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.conversion-notice { min-height:38px; display:flex; align-items:center; border-bottom:1px solid #eadfca; padding:7px 12px; background:#fff9ed; color:#775b24; font-size:12px; }
|
||||
.ledger-notice-slot { height:38px; overflow:hidden; }
|
||||
.conversion-notice { height:38px; display:flex; align-items:center; border-bottom:1px solid #eadfca; padding:7px 12px; background:#fff9ed; color:#775b24; font-size:12px; }
|
||||
.conversion-notice span { display:flex; align-items:center; gap:6px; }
|
||||
|
||||
.amount-value {
|
||||
|
|
|
|||
|
|
@ -310,14 +310,16 @@ async function shareLedger() {
|
|||
</header>
|
||||
|
||||
<section ref="ledgerContent" class="ledger-content" aria-label="账本流水">
|
||||
<div v-if="pendingEntryCount" class="sync-notice" role="status">
|
||||
<span><CloudOff :size="16" />{{ pendingEntryCount }} 条账目未同步云端</span>
|
||||
<button type="button" :disabled="store.syncing" @click="store.syncEntries">
|
||||
<RefreshCw :size="15" :class="{ spinning: store.syncing }" />{{ store.syncing ? "同步中" : "立即同步" }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="pendingConversionCount" class="conversion-notice" role="status">
|
||||
<span><Clock3 :size="15" />{{ pendingConversionCount }} 条外币账目等待换算</span>
|
||||
<div class="ledger-notice-slot" aria-live="polite">
|
||||
<div v-if="pendingEntryCount" class="sync-notice" role="status">
|
||||
<span><CloudOff :size="16" />{{ pendingEntryCount }} 条账目未同步云端</span>
|
||||
<button type="button" :disabled="store.syncing" @click="store.syncEntries">
|
||||
<RefreshCw :size="15" :class="{ spinning: store.syncing }" />{{ store.syncing ? "同步中" : "立即同步" }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-else-if="pendingConversionCount" class="conversion-notice" role="status">
|
||||
<span><Clock3 :size="15" />{{ pendingConversionCount }} 条外币账目等待换算</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-toolbar">
|
||||
<div class="list-toolbar-copy">
|
||||
|
|
|
|||
|
|
@ -196,9 +196,11 @@ function dailyLabel(value: string) {
|
|||
<div class="income"><span><TrendingUp :size="17" />收入</span><strong>{{ money(totals.income) }}</strong></div>
|
||||
<div class="expense"><span><TrendingDown :size="17" />支出</span><strong>{{ money(totals.expense) }}</strong></div>
|
||||
</section>
|
||||
<p v-if="pendingConversionCount" class="stats-conversion-notice">
|
||||
{{ pendingConversionCount }} 条外币账目等待换算,暂未计入人民币统计
|
||||
</p>
|
||||
<div class="stats-conversion-slot" aria-live="polite">
|
||||
<p v-if="pendingConversionCount" class="stats-conversion-notice" role="status">
|
||||
{{ pendingConversionCount }} 条外币账目等待换算,暂未计入人民币统计
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="stats-tabs" role="tablist" aria-label="统计维度">
|
||||
<button type="button" :class="{ active: activeTab === 'flow' }" @click="activeTab = 'flow'">收支</button>
|
||||
|
|
@ -275,7 +277,8 @@ function dailyLabel(value: string) {
|
|||
.stats-summary .balance strong { font-size:24px; }
|
||||
.stats-summary .income { color: #0d8b67; }
|
||||
.stats-summary .expense { color: #d84c36; }
|
||||
.stats-conversion-notice { margin:8px 0 0; border-left:3px solid #d69a32; padding:7px 9px; background:#fff8e9; color:#755719; font-size:11px; }
|
||||
.stats-conversion-slot { height:34px; margin-top:8px; overflow:hidden; }
|
||||
.stats-conversion-notice { margin:0; border-left:3px solid #d69a32; padding:7px 9px; background:#fff8e9; color:#755719; font-size:11px; }
|
||||
.stats-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin: 14px 0 10px; border-radius: 8px; padding: 4px; background: #e7eeec; }
|
||||
.stats-tabs button { height: 38px; border: 0; border-radius: 6px; background: transparent; color: #71807c; font-size: 13px; font-weight: 680; }
|
||||
.stats-tabs button.active { background: #fff; color: #087f72; box-shadow: 0 2px 7px rgba(28,52,47,.12); }
|
||||
|
|
|
|||
Loading…
Reference in New Issue