/* ============================================ 会员卡记 — 全局样式 设计语言：浅蓝灰底 + 圆角白卡 + 青色主色 ============================================ */ :root { --bg-page: #E8F0F5; --bg-card: #FFFFFF; --bg-soft: #F0F7FB; --primary: #1FB6E5; --primary-dark: #1A9BC8; --primary-light: #B8E5F4; --text-1: #1A2733; --text-2: #5A6B7B; --text-3: #8B99A7; --border: #E2EAF0; --border-soft: #EEF3F7; --danger: #E74C3C; --warning: #F39C12; --success: #2ECC71; --purple: #8E44AD; --tint-success: #F0FBF4; --tint-danger: #FDF0EE; --shadow: 0 2px 8px rgba(31, 182, 229, 0.06); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(31, 182, 229, 0.05); --radius: 14px; --radius-sm: 8px; --radius-pill: 999px; } /* 深色模式：覆写主题变量（在 时生效） */ :root[data-theme="dark"] { --bg-page: #0E151B; --bg-card: #1A222B; --bg-soft: #141C24; --primary: #22C3E8; --primary-dark: #1A9BC8; --primary-light: #173542; --text-1: #E6EDF3; --text-2: #A9B7C4; --text-3: #6B7C8C; --border: #2A3540; --border-soft: #222C36; --danger: #F5655A; --warning: #F7B955; --success: #3DD97E; --purple: #B679D6; --tint-success: #15302A; --tint-danger: #3A2422; --shadow: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; background: var(--bg-page); color: var(--text-1); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; } button { font-family: inherit; border: none; background: none; cursor: pointer; padding: 0; color: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; outline: none; border: none; background: none; color: inherit; } /* ============================================ App Shell — 移动端容器 ============================================ */ #app { max-width: 480px; margin: 0 auto; min-height: 100vh; position: relative; background: var(--bg-page); padding-bottom: 80px; } /* ============================================ 顶部导航栏 ============================================ */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; position: sticky; top: 0; background: var(--bg-page); z-index: 10; } .topbar .icon-btn { width: 40px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border-radius: var(--radius-pill); font-size: 14px; color: var(--text-1); box-shadow: var(--shadow); } .topbar .icon-btn .arrow { color: var(--primary); font-size: 18px; } .topbar .icon-btn:disabled { opacity: 0.5; box-shadow: none; cursor: default; } .topbar .title { font-size: 17px; font-weight: 600; color: var(--text-1); } .topbar .title .brand { color: var(--primary); font-size: 20px; font-weight: 700; } .topbar .refresh-btn { width: auto; min-width: 64px; padding: 0 14px; gap: 4px; font-size: 13px; font-weight: 600; color: var(--primary); } .topbar .refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; } .toast { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); background: rgba(0, 0, 0, 0.78); color: #FFFFFF; font-size: 13px; padding: 8px 18px; border-radius: var(--radius-pill); z-index: 200; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); animation: toastIn 0.2s ease-out; } @keyframes toastIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } } .topbar .pill { background: var(--bg-card); color: var(--text-1); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 13px; box-shadow: var(--shadow); } .topbar .pill .crown { color: var(--warning); margin-right: 4px; } /* ============================================ 通用容器 ============================================ */ .section { padding: 0 16px; } .section-title { font-size: 15px; font-weight: 600; color: var(--text-1); margin: 16px 0 8px; display: flex; align-items: center; gap: 6px; } .section-title .count { color: var(--primary); font-weight: 500; margin-left: 4px; } /* ============================================ 卡片 ============================================ */ .card { background: var(--bg-card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-card); margin-bottom: 12px; } .card-soft { background: var(--bg-soft); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; } /* ============================================ 首页 — 问候条 ============================================ */ .greet-card { background: var(--bg-card); border-radius: var(--radius); padding: 14px 16px; margin: 0 16px 12px; box-shadow: var(--shadow-card); } .greet-card .greet-line { display: flex; align-items: center; justify-content: space-between; } .greet-card .greet-title { font-size: 15px; font-weight: 600; color: var(--text-1); } .greet-card .greet-sub { font-size: 13px; color: var(--text-2); margin-top: 2px; } .greet-card .arrow-toggle { color: var(--primary); font-size: 14px; } .week-stats { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); } .week-stats .label { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--primary); } .week-stats .info { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--text-3); color: var(--text-3); font-size: 10px; display: flex; align-items: center; justify-content: center; line-height: 1; cursor: pointer; font-style: italic; transition: all 0.15s; } .week-stats .info:hover { background: var(--primary); border-color: var(--primary); color: #FFFFFF; } .week-dots { display: flex; gap: 8px; align-items: center; } .week-dots .day { font-size: 11px; color: var(--text-3); text-align: center; } .week-dots .day .dot { width: 10px; height: 10px; border-radius: 50%; background: #E2EAF0; margin: 4px auto 0; display: block; } .week-dots .day .dot.filled-red { background: var(--danger); } .week-dots .day .dot.filled-green { background: var(--success); } .week-dots .day .dot.filled-purple { background: var(--purple); } .week-dots .day .dot.outline { background: transparent; border: 2px solid var(--text-3); } /* ============================================ 首页 — 排序/搜索栏 ============================================ */ .toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; overflow-x: auto; } .toolbar .tab { font-size: 13px; color: var(--text-2); padding: 6px 10px; white-space: nowrap; } .toolbar .tab.active { color: var(--primary); font-weight: 600; } .toolbar .spacer { flex: 1; } .toolbar .search-btn, .toolbar .filter-btn { background: var(--bg-card); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 13px; color: var(--primary); display: flex; align-items: center; gap: 4px; box-shadow: var(--shadow); } .toolbar .mini-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-card); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-2); box-shadow: var(--shadow); } .toolbar .mini-btn.active { background: var(--primary); color: #FFFFFF; } .toolbar-extra { padding: 8px 16px 0; } .search-input { width: 100%; background: var(--bg-card); border-radius: var(--radius-pill); padding: 9px 16px; font-size: 14px; box-shadow: var(--shadow); } /* ============================================ 筛选底部弹层 ============================================ */ .filter-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 100; display: flex; align-items: flex-end; } .filter-sheet { width: 100%; background: #F1F7FB; border-radius: 20px 20px 0 0; padding: 8px 16px 24px; max-height: 85vh; overflow-y: auto; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12); animation: sheetUp 0.25s ease-out; } @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .sheet-handle { width: 40px; height: 4px; background: #CCD3DA; border-radius: 2px; margin: 8px auto 14px; } .sheet-title { font-size: 18px; font-weight: 700; color: var(--text-1); padding: 0 0 16px; } .filter-section { background: var(--bg-card); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow); } .filter-label { font-size: 14px; color: var(--text-2); margin-bottom: 10px; font-weight: 600; } .filter-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .add-tag-btn { background: none; border: 1px solid var(--primary); color: var(--primary); border-radius: var(--radius-pill); padding: 4px 12px; font-size: 13px; font-weight: 500; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .chip { background: #F1F7FB; color: var(--text-2); border: none; border-radius: var(--radius-pill); padding: 6px 14px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; } .chip.active { background: var(--primary); color: #FFFFFF; } .chip.static { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 14px; background: var(--primary); color: #FFFFFF; } .chip-x { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); align-items: center; justify-content: center; font-size: 13px; cursor: pointer; line-height: 1; } .filter-empty { font-size: 13px; color: var(--text-3); text-align: center; padding: 18px 0 6px; } .tag-input { width: 100%; padding: 8px 12px; border: 1px solid var(--primary); border-radius: 10px; font-size: 14px; margin-top: 10px; outline: none; background: var(--bg-card); } .sheet-actions { display: flex; gap: 12px; padding: 16px 0 4px; } .btn-text { flex: 1; padding: 12px; border: none; background: var(--bg-card); color: var(--text-2); font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: var(--shadow); } .btn-primary { flex: 2; padding: 12px; border: none; background: var(--primary); color: #FFFFFF; font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: 0 4px 14px rgba(31, 182, 229, 0.4); } /* 本周统计图例弹层（复用 .filter-overlay / .filter-sheet） */ .legend-sheet { padding-bottom: 36px; } .legend-row { display: flex; flex-wrap: wrap; gap: 16px 24px; padding: 4px 0 8px; background: var(--bg-card); border-radius: 14px; padding: 18px 16px; box-shadow: var(--shadow); } .legend-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-1); } .legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .legend-dot.purple { background: var(--purple); } .legend-dot.red { background: var(--danger); } .legend-dot.green { background: var(--success); } .legend-dot.gray { background: transparent; border: 2px solid var(--text-3); } /* ============================================ 首页 — 会员卡列表项 ============================================ */ .card-list { padding: 0 16px; } .card-item { background: var(--bg-card); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow-card); } .card-item .merchant { font-size: 15px; font-weight: 600; color: var(--text-1); display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .card-item .merchant .chev { color: var(--primary); margin-left: 4px; font-weight: 400; } .card-item .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-item .row .left { display: flex; align-items: center; gap: 10px; } .card-item .icon-box { width: 32px; height: 32px; border-radius: 8px; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 16px; flex-shrink: 0; } .card-item .name { font-size: 14px; color: var(--text-1); font-weight: 500; } .card-item .ci-info { display: flex; flex-direction: column; min-width: 0; } .card-item .ci-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; } .card-item .balance { font-size: 16px; font-weight: 600; color: var(--primary); } .card-item .balance .unit { font-size: 13px; margin-left: 2px; font-weight: 400; } .card-item .meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--text-3); } .badge { display: inline-flex; align-items: center; font-size: 11px; color: var(--success); border: 1px solid var(--success); background: #F0FBF4; padding: 1px 6px; border-radius: 4px; } .badge.gray { color: var(--text-2); border-color: var(--border); background: var(--bg-card); } .badge.purple { color: var(--purple); border-color: var(--purple); background: #F8F0FA; } .card-item .more { color: var(--text-3); font-size: 18px; line-height: 1; padding: 0 4px; } .rec-del { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-3); font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s ease; } .rec-del:hover { color: var(--danger); border-color: var(--danger); background: var(--tint-danger); } /* 同商家合并为一个框 */ .merchant-group { background: var(--bg-card); border-radius: var(--radius); margin: 0 0 12px; box-shadow: var(--shadow-card); overflow: hidden; } .mg-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--bg-soft); border-bottom: 1px solid var(--border-soft); } .mg-name { font-size: 15px; font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: 8px; } .mg-name::before { content: ''; width: 4px; height: 14px; border-radius: 2px; background: var(--primary); display: inline-block; } .mg-count { font-size: 12px; color: var(--text-3); } .mg-body { padding: 4px 12px 10px; } .mg-body .card-item { background: transparent; box-shadow: none; padding: 10px 4px; margin-bottom: 0; border-bottom: 1px solid var(--border-soft); } .mg-body .card-item:last-child { border-bottom: none; } .mg-body .card-item .more { margin-left: auto; } /* ============================================ 悬浮 + 按钮 ============================================ */ .fab { position: fixed; right: max(20px, calc(50vw - 220px)); bottom: 80px; width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: #FFFFFF; font-size: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(31, 182, 229, 0.4); z-index: 50; } /* ============================================ 底部 Tab ============================================ */ .tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; background: var(--bg-card); border-top: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-around; padding: 8px 0 12px; z-index: 40; } .tabbar .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-3); font-size: 11px; padding: 4px 0; } .tabbar .tab.active { color: var(--primary); } .tabbar .tab .ic { font-size: 20px; line-height: 1; } /* ============================================ 详情页 ============================================ */ .detail-name { color: var(--primary); font-size: 14px; padding: 4px 16px 12px; } .balance-card { background: linear-gradient(180deg, #F0F8FC 0%, #E4F1F8 100%); border-radius: var(--radius); padding: 14px 16px; margin: 0 16px 12px; display: flex; align-items: center; justify-content: space-between; } .balance-card .name { font-size: 14px; color: var(--text-1); display: flex; align-items: center; gap: 6px; } .balance-card .name .ic { color: var(--primary); } .balance-card .val { font-size: 20px; color: var(--primary); font-weight: 600; } .balance-card .val .unit { font-size: 14px; margin-left: 2px; font-weight: 400; } .balance-card .val .per-use-note { font-size: 12px; margin-left: 8px; font-weight: 500; color: var(--text-3); } .tag-line { padding: 0 16px 12px; font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 8px; } .tag-line.clickable { cursor: pointer; transition: background 0.15s; padding: 8px 16px; border-radius: 8px; margin: 0 8px; } .tag-line.clickable:active { background: var(--bg-soft); } .tag-line .tag { color: var(--primary); border: 1px dashed var(--primary); background: #F0F8FC; padding: 2px 8px; border-radius: 4px; font-size: 12px; } .kv-list { background: var(--bg-card); border-radius: var(--radius); margin: 0 16px 12px; padding: 4px 16px; box-shadow: var(--shadow-card); } .kv-list .row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; } .kv-list .row:last-child { border-bottom: none; } .kv-list .k { color: var(--text-2); } .kv-list .v { color: var(--text-1); display: flex; align-items: center; gap: 4px; } .kv-list .v.muted { color: var(--text-3); } .kv-list .v.primary { color: var(--primary); font-weight: 600; } .kv-list .row.clickable { cursor: pointer; transition: background 0.15s; } .kv-list .row.clickable:active { background: var(--bg-soft); } .kv-list .v .chev { color: var(--text-3); font-weight: 400; margin-left: 2px; } .kv-list .v .ic { color: var(--text-3); font-size: 12px; } .quick-row { background: var(--bg-soft); border-radius: var(--radius-sm); padding: 8px 12px; margin: 8px 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); } .quick-row .pill { background: var(--bg-card); color: var(--text-1); padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--primary-light); font-size: 13px; } .quick-row .lbl { color: var(--primary); font-weight: 500; } .quick-row .ic { color: var(--primary); font-size: 14px; } /* ============================================ 热力图 ============================================ */ .heatmap { background: var(--bg-card); border-radius: var(--radius); margin: 0 16px 12px; padding: 14px 16px; box-shadow: var(--shadow-card); } .heatmap h4 { margin: 0 0 10px; font-size: 14px; color: var(--text-1); font-weight: 500; } .heatmap-grid { display: grid; grid-template-columns: repeat(7, 16px); gap: 2px; position: relative; } .heatmap-months { display: grid; grid-template-columns: repeat(7, 16px); margin-bottom: 4px; font-size: 10px; color: var(--text-3); } .heatmap-months .month { grid-row: 1; } .heatmap-cell { aspect-ratio: 1; border-radius: 2px; background: #F4F7F9; border: 1px solid #E8EEF2; } .heatmap-cell.l1 { background: #FBE4E1; } .heatmap-cell.l2 { background: #F4A8A0; } .heatmap-cell.l3 { background: #E74C3C; } .heatmap-cell.lp { background: var(--purple); } .heatmap-weekday { position: absolute; right: -14px; font-size: 10px; color: var(--text-3); line-height: 1.6; } .legend { display: flex; justify-content: center; gap: 14px; margin-top: 12px; font-size: 11px; color: var(--text-2); } .legend .item { display: flex; align-items: center; gap: 4px; } .legend .dot { width: 9px; height: 9px; border-radius: 50%; } .legend .dot.red { border: 2px solid var(--danger); } .legend .dot.green { border: 2px solid var(--success); } .legend .dot.purple { border: 2px solid var(--purple); } .legend .dot.gray { border: 2px solid var(--text-3); } .month-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-soft); color: var(--primary); font-size: 13px; padding: 4px 10px; border-radius: var(--radius-pill); font-weight: 500; cursor: pointer; user-select: none; } .month-pill:active { transform: scale(0.97); } .calendar { background: var(--bg-card); border-radius: var(--radius); margin: 0 16px 12px; padding: 14px 16px; box-shadow: var(--shadow-card); } .calendar .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .calendar .cal-nav { width: 30px; height: 30px; border: none; background: var(--bg-soft); color: var(--primary); border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .calendar .cal-nav:active { background: var(--primary); color: #fff; } .calendar .weekday-row { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 12px; color: var(--text-2); text-align: center; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .calendar .weekday-row .wd.active { color: var(--primary); font-weight: 600; } .calendar .day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 8px; } .calendar .day { aspect-ratio: 1; border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-1); position: relative; } .calendar .day.outside { visibility: hidden; } .calendar .day .day-dots { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; align-items: center; } .calendar .day .dot { display: block; border-radius: 50%; } .calendar .day .dot-charge { background: var(--success); } .calendar .day .dot-consume { background: var(--danger); } .calendar .cal-legend { display: flex; justify-content: center; gap: 16px; padding: 4px 0 6px; font-size: 12px; color: var(--text-2); } .calendar .cal-legend-item { display: inline-flex; align-items: center; gap: 5px; } .calendar .cal-legend-item .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .calendar .day .dot.sz-sm { width: 4px; height: 4px; } .calendar .day .dot.sz-md { width: 6px; height: 6px; } .calendar .day .dot.sz-lg { width: 9px; height: 9px; } .calendar .day.today { border-color: var(--danger); color: var(--danger); font-weight: 600; } /* ============================================ 底部动作条（详情/记录按钮） ============================================ */ .action-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; background: rgba(232, 240, 245, 0.95); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px 12px; z-index: 30; } .action-bar .btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; } .action-bar .btn.outline { background: var(--bg-card); color: var(--primary); border: 1px solid var(--primary); } .action-bar .btn.solid { background: var(--primary); color: #FFFFFF; } .danger-bar { padding: 16px; margin-bottom: 84px; } .btn-danger { width: 100%; padding: 12px; border: none; border-radius: 12px; background: var(--danger); color: #FFFFFF; font-size: 15px; font-weight: 600; box-shadow: 0 4px 14px rgba(229, 72, 77, 0.35); } .btn-danger:active { opacity: 0.85; } .edit-danger-zone { padding: 8px 16px 20px; margin: 0 16px 0; border-top: 1px solid var(--border-soft); } .btn-danger-block { width: 100%; padding: 11px; border: 1px solid var(--danger); border-radius: 12px; background: transparent; color: var(--danger); font-size: 14px; font-weight: 600; background: var(--tint-danger); } .btn-danger-block:hover { background: var(--danger); color: #FFFFFF; } .btn-danger-block:active { opacity: 0.85; } .verify-code-input { text-align: center; letter-spacing: 6px; font-size: 18px; font-weight: 600; } .verify-error { padding: 4px 16px 0; color: var(--danger); font-size: 13px; text-align: center; } .confirm-text { padding: 8px 16px 16px; font-size: 14px; color: var(--text-2); line-height: 1.6; } /* ============================================ 添加会员卡 — 表单 ============================================ */ .form-page { padding: 0 16px 100px; } .form-card { background: var(--bg-card); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-card); } .form-field { margin-bottom: 14px; } .form-field:last-child { margin-bottom: 0; } .form-label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; } .form-label .req { color: var(--danger); } .switch-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--text-1); } .switch { position: relative; width: 46px; height: 26px; border-radius: var(--radius-pill); border: none; background: var(--border); cursor: pointer; transition: background 0.2s; padding: 0; flex-shrink: 0; } .switch .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .switch.on { background: var(--primary); } .switch.on .knob { transform: translateX(20px); } .form-input, .form-textarea { width: 100%; font-size: 15px; color: var(--text-1); padding: 6px 0; border-bottom: 1px solid transparent; } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-3); } .form-textarea { min-height: 60px; resize: none; font-family: inherit; } .form-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); margin-top: 4px; } .form-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-1); margin-bottom: 8px; } .checkbox .box { width: 20px; height: 20px; border-radius: 4px; background: var(--primary); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } .checkbox .box.empty { background: var(--bg-card); border: 1px solid var(--border); } .date-display { display: inline-block; background: var(--bg-soft); color: var(--text-1); padding: 6px 14px; border-radius: var(--radius-pill); font-size: 14px; margin-top: 4px; } .scan-line { height: 1px; background: var(--border); margin: 12px 0; } .scan-hint { font-size: 12px; color: var(--text-3); margin: 6px 0 10px; } .scan-btn { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0 auto; color: var(--primary); font-size: 13px; } .scan-btn .badge-mini { background: var(--primary); color: #FFFFFF; font-size: 9px; padding: 1px 4px; border-radius: 8px; margin-left: 2px; } .merchant-link { color: var(--primary); font-size: 14px; margin-right: 12px; } .merchant-link.active { font-weight: 600; } .divider-text { display: flex; align-items: center; justify-content: center; color: var(--text-3); margin: 14px 0; font-size: 12px; } .divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); } .divider-text::before { margin-right: 8px; } .divider-text::after { margin-left: 8px; } /* ============================================ 统计页 ============================================ */ .stats-card { background: var(--bg-card); border-radius: var(--radius); margin: 0 16px 12px; padding: 16px; box-shadow: var(--shadow-card); } .stats-overview { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; margin-bottom: 12px; } .stats-overview .item { text-align: center; } .stats-overview .item .num { font-size: 24px; font-weight: 600; color: var(--text-1); } .stats-overview .item .num.zero { color: var(--text-3); } .stats-overview .item .lbl { font-size: 12px; color: var(--text-2); margin-top: 2px; } .stats-overview .sep { width: 1px; height: 36px; background: var(--border-soft); } .stats-overview .merchant-link { display: block; text-align: center; margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--border-soft); } .unit-card { background: var(--bg-card); border-radius: var(--radius); margin: 0 16px 12px; padding: 14px 16px; box-shadow: var(--shadow-card); position: relative; } .unit-card .unit-title { font-size: 15px; font-weight: 600; color: var(--text-1); margin-bottom: 12px; } .unit-card .unit-grid { display: flex; align-items: center; justify-content: space-between; } .unit-card .unit-grid .col { text-align: center; flex: 1; } .unit-card .unit-grid .col.right { text-align: right; padding-right: 28px; } .unit-card .unit-grid .col .big { font-size: 22px; color: var(--primary); font-weight: 600; } .unit-card .unit-grid .col .small { font-size: 13px; color: var(--text-2); margin-top: 2px; } .unit-card .unit-grid .sep { width: 1px; height: 36px; background: var(--border-soft); } .unit-card .chev-right { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--primary); font-size: 16px; } .pie-card { padding: 16px; } .pie-wrap { display: flex; justify-content: center; align-items: center; margin: 4px 0 18px; } .pie-svg { display: block; max-width: 100%; height: auto; } .pie-legend { display: flex; flex-direction: column; gap: 8px; } .pie-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-1); line-height: 1.4; } .pie-legend-item .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; } .pie-legend-item .legend-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pie-legend-item .legend-val { font-weight: 600; color: var(--text-2); flex-shrink: 0; } .import-mode { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 4px; } .import-mode .mode-btn { text-align: left; border: 1px solid var(--border); background: var(--bg-card); border-radius: 10px; padding: 12px 14px; cursor: pointer; } .import-mode .mode-btn.active { border-color: var(--primary); background: var(--bg-soft); } .import-mode .mode-btn .mt { font-size: 14px; font-weight: 600; color: var(--text-1); } .import-mode .mode-btn .ms { font-size: 12px; color: var(--text-3); margin-top: 2px; } .unit-card .unit-sub { margin-top: 10px; font-size: 12px; color: var(--text-3); text-align: center; } .consume-log { margin: 0 16px 12px; background: var(--bg-card); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 6px 14px; max-height: 320px; overflow-y: auto; } .consume-log .cl-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; } .consume-log .cl-row:last-child { border-bottom: none; } .consume-log .cl-time { color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 92px; } .consume-log .cl-name { flex: 1; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .consume-log .cl-amt { color: var(--danger); font-weight: 600; white-space: nowrap; } /* ============================================ 通用辅助 ============================================ */ .text-primary { color: var(--primary); } .text-danger { color: var(--danger); } .text-muted { color: var(--text-3); } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mb-12 { margin-bottom: 12px; } .spacer-block { height: 16px; } /* ============================================ 商家管理（MerchantsView） ============================================ */ .merchant-summary { background: var(--bg-card); border-radius: 12px; padding: 12px 16px; margin: 8px 16px 12px; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: space-between; } .merchant-summary .ms-label { font-size: 13px; color: var(--text-2); font-weight: 600; } .merchant-summary .ms-num { font-size: 20px; font-weight: 700; color: var(--primary); line-height: 1; } .merchant-list { padding: 0 16px; } .merchant-card { background: var(--bg-card); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow); cursor: pointer; transition: transform 0.1s; } .merchant-card:active { transform: scale(0.99); } .merchant-card .name-row { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; color: var(--text-1); padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; } .merchant-card .name-row .chev { color: var(--primary); font-size: 18px; } .merchant-card .stats-row { display: flex; justify-content: space-between; text-align: center; } .merchant-card .stat { flex: 1; } .merchant-card .stat .num { font-size: 18px; font-weight: 700; line-height: 1.2; } .merchant-card .stat .num.blue { color: var(--primary); } .merchant-card .stat .num.green { color: var(--success); } .merchant-card .stat .num.gray { color: var(--text-3); } .merchant-card .stat .lbl { font-size: 11px; color: var(--text-3); margin-top: 2px; } .merchant-card .phone-row { font-size: 12px; color: var(--text-3); margin: 4px 0 2px; } .merchant-card .addr-row { font-size: 12px; color: var(--text-3); margin: 2px 0 2px; } .sheet-body { max-height: 62vh; overflow-y: auto; } .edit-card-list { margin-top: 4px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .edit-card-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); cursor: pointer; } .edit-card-row:last-child { border-bottom: none; } .edit-card-row:active { background: var(--bg-soft); } .ec-name { flex: 1; font-size: 14px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ec-bal { font-size: 13px; color: var(--text-2); } .ec-chev { color: var(--text-3); font-size: 16px; } .merchant-card .mc-actions { display: flex; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); } .merchant-card .mc-btn { flex: 1; padding: 9px 0; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-1); font-size: 13px; border-radius: 8px; cursor: pointer; } .merchant-card .mc-btn:active { transform: scale(0.98); } .merchant-card .mc-btn.danger { color: var(--danger); border-color: var(--danger); } /* 滚动条美化 */ ::-webkit-scrollbar { width: 0; height: 0; }