|
@@ -0,0 +1,577 @@
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="zh-CN">
|
|
|
|
|
+<head>
|
|
|
|
|
+ <meta charset="UTF-8" />
|
|
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
|
|
|
|
+ <title>缴费明细 · 应缴批次转账展示 Demo</title>
|
|
|
|
|
+ <style>
|
|
|
|
|
+ :root {
|
|
|
|
|
+ --primary: #0a9f6d;
|
|
|
|
|
+ --primary-dark: #087f57;
|
|
|
|
|
+ --primary-soft: #e9f9f2;
|
|
|
|
|
+ --text: #18332a;
|
|
|
|
|
+ --muted: #6b7c74;
|
|
|
|
|
+ --border: #dce8e2;
|
|
|
|
|
+ --surface: #fff;
|
|
|
|
|
+ --page: #f3f6f5;
|
|
|
|
|
+ --money: #c98312;
|
|
|
|
|
+ --warn-bg: #fff7e8;
|
|
|
|
|
+ --warn: #b45309;
|
|
|
|
|
+ --ok-bg: #e9f9f2;
|
|
|
|
|
+ --ok: #087f57;
|
|
|
|
|
+ --info-bg: #eef2ff;
|
|
|
|
|
+ --info: #4338ca;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ * { box-sizing: border-box; }
|
|
|
|
|
+ body {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ color: var(--text);
|
|
|
|
|
+ background: var(--page);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .page {
|
|
|
|
|
+ max-width: 420px;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ padding: 20px 14px 56px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .hero { margin-bottom: 16px; }
|
|
|
|
|
+ .hero h1 {
|
|
|
|
|
+ margin: 0 0 6px;
|
|
|
|
|
+ font-size: 20px;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ }
|
|
|
|
|
+ .hero p {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ color: var(--muted);
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .section-label {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ margin: 20px 0 8px;
|
|
|
|
|
+ color: var(--muted);
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ }
|
|
|
|
|
+ .section-label em {
|
|
|
|
|
+ font-style: normal;
|
|
|
|
|
+ padding: 2px 8px;
|
|
|
|
|
+ border-radius: 999px;
|
|
|
|
|
+ background: var(--primary-soft);
|
|
|
|
|
+ color: var(--primary-dark);
|
|
|
|
|
+ }
|
|
|
|
|
+ .section-label .bad {
|
|
|
|
|
+ background: var(--warn-bg);
|
|
|
|
|
+ color: var(--warn);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* —— 弹窗壳 —— */
|
|
|
|
|
+ .sheet {
|
|
|
|
|
+ border: 1px solid var(--border);
|
|
|
|
|
+ border-radius: 16px;
|
|
|
|
|
+ background: var(--surface);
|
|
|
|
|
+ box-shadow: 0 6px 20px rgb(8 127 87 / 7%);
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+ .sheet__bar {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ padding: 14px 16px;
|
|
|
|
|
+ border-bottom: 1px solid #eef4f1;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ }
|
|
|
|
|
+ .sheet__bar span { color: var(--muted); font-weight: 500; font-size: 13px; }
|
|
|
|
|
+ .sheet__body { padding: 12px; }
|
|
|
|
|
+
|
|
|
|
|
+ .block {
|
|
|
|
|
+ margin-bottom: 12px;
|
|
|
|
|
+ padding: 14px;
|
|
|
|
|
+ border: 1px solid var(--border);
|
|
|
|
|
+ border-radius: 14px;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+ .block h3 {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ padding-left: 10px;
|
|
|
|
|
+ border-left: 3px solid var(--primary);
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tag {
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ max-width: 120px;
|
|
|
|
|
+ padding: 3px 10px;
|
|
|
|
|
+ border-radius: 999px;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ line-height: 1.3;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ }
|
|
|
|
|
+ .tag.warn { background: var(--warn-bg); color: var(--warn); }
|
|
|
|
|
+ .tag.ok { background: var(--ok-bg); color: var(--ok); }
|
|
|
|
|
+ .tag.info { background: var(--info-bg); color: var(--info); }
|
|
|
|
|
+
|
|
|
|
|
+ /* ========== 改前:现有嵌套卡片 ========== */
|
|
|
|
|
+ .before-period {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: 1fr auto;
|
|
|
|
|
+ gap: 8px 12px;
|
|
|
|
|
+ margin-top: 12px;
|
|
|
|
|
+ padding: 12px;
|
|
|
|
|
+ border-radius: 12px;
|
|
|
|
|
+ background: var(--primary-soft);
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .before-period > strong { font-size: 14px; }
|
|
|
|
|
+ .before-row {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ grid-column: 1 / -1;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ gap: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .before-row small { color: var(--muted); }
|
|
|
|
|
+ .before-transfers {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-column: 1 / -1;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .before-transfer {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: 1fr auto;
|
|
|
|
|
+ gap: 8px 12px;
|
|
|
|
|
+ padding: 12px;
|
|
|
|
|
+ border-radius: 12px;
|
|
|
|
|
+ background: var(--primary-soft);
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .before-note {
|
|
|
|
|
+ margin: 8px 0 0;
|
|
|
|
|
+ color: var(--warn);
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* ========== 方案 A:期次卡 + 白底转账单 ========== */
|
|
|
|
|
+ .period {
|
|
|
|
|
+ margin-top: 12px;
|
|
|
|
|
+ border: 1px solid #eef4f1;
|
|
|
|
|
+ border-radius: 12px;
|
|
|
|
|
+ background: #fafcfb;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+ .period__head {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ padding: 12px;
|
|
|
|
|
+ background: var(--primary-soft);
|
|
|
|
|
+ }
|
|
|
|
|
+ .period__head strong { flex: 1; font-size: 14px; }
|
|
|
|
|
+ .period__metrics {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
|
|
+ gap: 10px 14px;
|
|
|
|
|
+ padding: 12px;
|
|
|
|
|
+ border-bottom: 1px dashed #eef4f1;
|
|
|
|
|
+ }
|
|
|
|
|
+ .metric {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ gap: 2px;
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ .metric span { color: var(--muted); font-size: 11px; }
|
|
|
|
|
+ .metric b { font-weight: 600; overflow-wrap: anywhere; }
|
|
|
|
|
+ .metric b.money { color: var(--money); font-weight: 700; }
|
|
|
|
|
+
|
|
|
|
|
+ .xfer-list {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .xfer-list__label {
|
|
|
|
|
+ color: var(--muted);
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ padding: 0 2px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* A: 白底独立转账卡 */
|
|
|
|
|
+ .xfer-a {
|
|
|
|
|
+ padding: 12px;
|
|
|
|
|
+ border: 1px solid var(--border);
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ box-shadow: 0 1px 0 rgb(8 127 87 / 4%);
|
|
|
|
|
+ }
|
|
|
|
|
+ .xfer-a__head {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: flex-start;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ padding-bottom: 10px;
|
|
|
|
|
+ border-bottom: 1px solid #eef4f1;
|
|
|
|
|
+ }
|
|
|
|
|
+ .xfer-a__index {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ width: 22px;
|
|
|
|
|
+ height: 22px;
|
|
|
|
|
+ flex: 0 0 22px;
|
|
|
|
|
+ place-items: center;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ background: var(--primary-soft);
|
|
|
|
|
+ color: var(--primary-dark);
|
|
|
|
|
+ font-size: 11px;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ }
|
|
|
|
|
+ .xfer-a__main { flex: 1; min-width: 0; }
|
|
|
|
|
+ .xfer-a__amount {
|
|
|
|
|
+ color: var(--money);
|
|
|
|
|
+ font-size: 17px;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ line-height: 1.2;
|
|
|
|
|
+ }
|
|
|
|
|
+ .xfer-a__meta {
|
|
|
|
|
+ margin-top: 4px;
|
|
|
|
|
+ color: var(--muted);
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .xfer-a__grid {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
|
|
+ gap: 8px 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .xfer-a__grid .metric span { font-size: 11px; }
|
|
|
|
|
+ .xfer-a__grid .metric.wide { grid-column: 1 / -1; }
|
|
|
|
|
+ .xfer-a__voucher {
|
|
|
|
|
+ margin-top: 8px;
|
|
|
|
|
+ padding-top: 8px;
|
|
|
|
|
+ border-top: 1px dashed #eef4f1;
|
|
|
|
|
+ color: var(--muted);
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .voucher-chip {
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ margin-top: 6px;
|
|
|
|
|
+ margin-right: 6px;
|
|
|
|
|
+ padding: 6px 10px;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ border: 1px dashed #a7f3d0;
|
|
|
|
|
+ background: #f6fffb;
|
|
|
|
|
+ color: var(--primary-dark);
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* ========== 方案 B:时间线摘要行 ========== */
|
|
|
|
|
+ .xfer-b {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: 14px 1fr;
|
|
|
|
|
+ gap: 0 10px;
|
|
|
|
|
+ padding: 4px 2px 4px 4px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .xfer-b__rail {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ width: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .xfer-b__dot {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 14px;
|
|
|
|
|
+ left: 3px;
|
|
|
|
|
+ width: 8px;
|
|
|
|
|
+ height: 8px;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ background: var(--primary);
|
|
|
|
|
+ box-shadow: 0 0 0 3px var(--primary-soft);
|
|
|
|
|
+ }
|
|
|
|
|
+ .xfer-b + .xfer-b .xfer-b__rail::before {
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: -12px;
|
|
|
|
|
+ bottom: 50%;
|
|
|
|
|
+ left: 6px;
|
|
|
|
|
+ width: 2px;
|
|
|
|
|
+ background: #d7ebe1;
|
|
|
|
|
+ }
|
|
|
|
|
+ .xfer-b__body {
|
|
|
|
|
+ padding: 10px 12px;
|
|
|
|
|
+ border: 1px solid var(--border);
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+ .xfer-b__top {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .xfer-b__top .xfer-a__amount { flex: 1; font-size: 16px; }
|
|
|
|
|
+ .xfer-b__line {
|
|
|
|
|
+ margin-top: 6px;
|
|
|
|
|
+ color: var(--muted);
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .xfer-b__extra {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+ padding-top: 10px;
|
|
|
|
|
+ border-top: 1px dashed #eef4f1;
|
|
|
|
|
+ }
|
|
|
|
|
+ .xfer-b.is-open .xfer-b__extra { display: block; }
|
|
|
|
|
+ .xfer-b__toggle {
|
|
|
|
|
+ margin-top: 8px;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ border: 0;
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+ color: var(--primary-dark);
|
|
|
|
|
+ font: inherit;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .hint {
|
|
|
|
|
+ margin-top: 18px;
|
|
|
|
|
+ padding: 12px 14px;
|
|
|
|
|
+ border-radius: 12px;
|
|
|
|
|
+ border: 1px dashed var(--border);
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ color: var(--muted);
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .hint strong { color: var(--text); }
|
|
|
|
|
+ .hint code {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin-top: 6px;
|
|
|
|
|
+ font-size: 11px;
|
|
|
|
|
+ word-break: break-all;
|
|
|
|
|
+ }
|
|
|
|
|
+ </style>
|
|
|
|
|
+</head>
|
|
|
|
|
+<body>
|
|
|
|
|
+ <div class="page">
|
|
|
|
|
+ <header class="hero">
|
|
|
|
|
+ <h1>缴费明细 · 转账记录展示</h1>
|
|
|
|
|
+ <p>应缴批次内的转账记录:对比改前样式与两种改后方案,确认后再改代码。</p>
|
|
|
|
|
+ </header>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ========== 改前 ========== -->
|
|
|
|
|
+ <div class="section-label">
|
|
|
|
|
+ <span>改前(当前)</span>
|
|
|
|
|
+ <em class="bad">层级不清</em>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="sheet">
|
|
|
|
|
+ <div class="sheet__bar">缴费明细 <span>关闭</span></div>
|
|
|
|
|
+ <div class="sheet__body">
|
|
|
|
|
+ <div class="block">
|
|
|
|
|
+ <h3>应缴批次</h3>
|
|
|
|
|
+ <div class="before-period">
|
|
|
|
|
+ <strong>第 1 期</strong>
|
|
|
|
|
+ <span class="tag ok">已缴清</span>
|
|
|
|
|
+ <div class="before-row"><small>应缴金额</small><span>¥3,000.00</span></div>
|
|
|
|
|
+ <div class="before-row"><small>应缴日</small><span>2026-10-10</span></div>
|
|
|
|
|
+ <div class="before-row"><small>已缴金额</small><span>¥3,000.00</span></div>
|
|
|
|
|
+ <div class="before-row"><small>欠缴金额</small><span>¥0.00</span></div>
|
|
|
|
|
+ <div class="before-transfers">
|
|
|
|
|
+ <div class="before-transfer">
|
|
|
|
|
+ <strong>转账笔 1</strong>
|
|
|
|
|
+ <span class="tag ok">付款完成</span>
|
|
|
|
|
+ <div class="before-row"><small>转账方式</small><span>微信转账</span></div>
|
|
|
|
|
+ <div class="before-row"><small>转账金额</small><span>¥2,000.00</span></div>
|
|
|
|
|
+ <div class="before-row"><small>转账时间</small><span>2026-10-11 09:20</span></div>
|
|
|
|
|
+ <div class="before-row"><small>转账凭证</small><span>凭证.jpg</span></div>
|
|
|
|
|
+ <div class="before-row"><small>备注</small><span>首期部分</span></div>
|
|
|
|
|
+ <div class="before-row"><small>财务备注</small><span>已核对</span></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="before-transfer">
|
|
|
|
|
+ <strong>转账笔 2</strong>
|
|
|
|
|
+ <span class="tag info">已付款</span>
|
|
|
|
|
+ <div class="before-row"><small>转账方式</small><span>银行卡转账</span></div>
|
|
|
|
|
+ <div class="before-row"><small>转账金额</small><span>¥1,000.00</span></div>
|
|
|
|
|
+ <div class="before-row"><small>转账时间</small><span>2026-10-12 14:08</span></div>
|
|
|
|
|
+ <div class="before-row"><small>转账凭证</small><span>—</span></div>
|
|
|
|
|
+ <div class="before-row"><small>备注</small><span>—</span></div>
|
|
|
|
|
+ <div class="before-row"><small>财务备注</small><span>—</span></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <p class="before-note">问题:期次与转账同为浅绿底嵌套卡片,「转账笔 N」信息弱,字段全是左右两列堆叠,扫读吃力。</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ========== 方案 A(推荐) ========== -->
|
|
|
|
|
+ <div class="section-label">
|
|
|
|
|
+ <span>方案 A · 白底转账卡(金额突出)</span>
|
|
|
|
|
+ <em>推荐</em>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="sheet">
|
|
|
|
|
+ <div class="sheet__bar">缴费明细 <span>关闭</span></div>
|
|
|
|
|
+ <div class="sheet__body">
|
|
|
|
|
+ <div class="block">
|
|
|
|
|
+ <h3>应缴批次</h3>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="period">
|
|
|
|
|
+ <div class="period__head">
|
|
|
|
|
+ <strong>第 1 期</strong>
|
|
|
|
|
+ <span class="tag ok">已缴清</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="period__metrics">
|
|
|
|
|
+ <div class="metric"><span>应缴金额</span><b class="money">¥3,000.00</b></div>
|
|
|
|
|
+ <div class="metric"><span>应缴日</span><b>2026-10-10</b></div>
|
|
|
|
|
+ <div class="metric"><span>已缴金额</span><b class="money">¥3,000.00</b></div>
|
|
|
|
|
+ <div class="metric"><span>欠缴金额</span><b class="money">¥0.00</b></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="xfer-list">
|
|
|
|
|
+ <div class="xfer-list__label">转账记录(2)</div>
|
|
|
|
|
+
|
|
|
|
|
+ <article class="xfer-a">
|
|
|
|
|
+ <div class="xfer-a__head">
|
|
|
|
|
+ <span class="xfer-a__index">1</span>
|
|
|
|
|
+ <div class="xfer-a__main">
|
|
|
|
|
+ <div class="xfer-a__amount">¥2,000.00</div>
|
|
|
|
|
+ <div class="xfer-a__meta">微信转账 · 2026-10-11 09:20</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <span class="tag ok">付款完成</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="xfer-a__grid">
|
|
|
|
|
+ <div class="metric"><span>备注</span><b>首期部分</b></div>
|
|
|
|
|
+ <div class="metric"><span>财务备注</span><b>已核对</b></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="xfer-a__voucher">
|
|
|
|
|
+ 转账凭证
|
|
|
|
|
+ <div><span class="voucher-chip">凭证.jpg</span></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </article>
|
|
|
|
|
+
|
|
|
|
|
+ <article class="xfer-a">
|
|
|
|
|
+ <div class="xfer-a__head">
|
|
|
|
|
+ <span class="xfer-a__index">2</span>
|
|
|
|
|
+ <div class="xfer-a__main">
|
|
|
|
|
+ <div class="xfer-a__amount">¥1,000.00</div>
|
|
|
|
|
+ <div class="xfer-a__meta">银行卡转账 · 2026-10-12 14:08</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <span class="tag info">已付款</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="xfer-a__grid">
|
|
|
|
|
+ <div class="metric"><span>备注</span><b>—</b></div>
|
|
|
|
|
+ <div class="metric"><span>财务备注</span><b>—</b></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </article>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="period">
|
|
|
|
|
+ <div class="period__head">
|
|
|
|
|
+ <strong>第 2 期</strong>
|
|
|
|
|
+ <span class="tag warn">待缴清</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="period__metrics">
|
|
|
|
|
+ <div class="metric"><span>应缴金额</span><b class="money">¥2,000.00</b></div>
|
|
|
|
|
+ <div class="metric"><span>应缴日</span><b>2027-04-10</b></div>
|
|
|
|
|
+ <div class="metric"><span>已缴金额</span><b class="money">¥0.00</b></div>
|
|
|
|
|
+ <div class="metric"><span>欠缴金额</span><b class="money">¥2,000.00</b></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="xfer-list">
|
|
|
|
|
+ <div class="xfer-list__label">转账记录(0)</div>
|
|
|
|
|
+ <div style="padding: 8px 2px 4px; color: var(--muted); font-size: 12px;">暂无转账记录</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- ========== 方案 B ========== -->
|
|
|
|
|
+ <div class="section-label">
|
|
|
|
|
+ <span>方案 B · 时间线 + 默认折叠明细</span>
|
|
|
|
|
+ <em>备选</em>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="sheet">
|
|
|
|
|
+ <div class="sheet__bar">缴费明细 <span>关闭</span></div>
|
|
|
|
|
+ <div class="sheet__body">
|
|
|
|
|
+ <div class="block">
|
|
|
|
|
+ <h3>应缴批次</h3>
|
|
|
|
|
+ <div class="period">
|
|
|
|
|
+ <div class="period__head">
|
|
|
|
|
+ <strong>第 1 期</strong>
|
|
|
|
|
+ <span class="tag ok">已缴清</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="period__metrics">
|
|
|
|
|
+ <div class="metric"><span>应缴金额</span><b class="money">¥3,000.00</b></div>
|
|
|
|
|
+ <div class="metric"><span>应缴日</span><b>2026-10-10</b></div>
|
|
|
|
|
+ <div class="metric"><span>已缴金额</span><b class="money">¥3,000.00</b></div>
|
|
|
|
|
+ <div class="metric"><span>欠缴金额</span><b class="money">¥0.00</b></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="xfer-list">
|
|
|
|
|
+ <div class="xfer-list__label">转账记录(2)· 点击可展开备注/凭证</div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="xfer-b is-open" data-xfer>
|
|
|
|
|
+ <div class="xfer-b__rail"><span class="xfer-b__dot"></span></div>
|
|
|
|
|
+ <div class="xfer-b__body">
|
|
|
|
|
+ <div class="xfer-b__top">
|
|
|
|
|
+ <div class="xfer-a__amount">¥2,000.00</div>
|
|
|
|
|
+ <span class="tag ok">付款完成</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="xfer-b__line">微信转账 · 2026-10-11 09:20</div>
|
|
|
|
|
+ <button type="button" class="xfer-b__toggle" data-toggle>收起明细</button>
|
|
|
|
|
+ <div class="xfer-b__extra">
|
|
|
|
|
+ <div class="xfer-a__grid">
|
|
|
|
|
+ <div class="metric"><span>备注</span><b>首期部分</b></div>
|
|
|
|
|
+ <div class="metric"><span>财务备注</span><b>已核对</b></div>
|
|
|
|
|
+ <div class="metric wide"><span>转账凭证</span><b>凭证.jpg</b></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="xfer-b" data-xfer>
|
|
|
|
|
+ <div class="xfer-b__rail"><span class="xfer-b__dot"></span></div>
|
|
|
|
|
+ <div class="xfer-b__body">
|
|
|
|
|
+ <div class="xfer-b__top">
|
|
|
|
|
+ <div class="xfer-a__amount">¥1,000.00</div>
|
|
|
|
|
+ <span class="tag info">已付款</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="xfer-b__line">银行卡转账 · 2026-10-12 14:08</div>
|
|
|
|
|
+ <button type="button" class="xfer-b__toggle" data-toggle>展开明细</button>
|
|
|
|
|
+ <div class="xfer-b__extra">
|
|
|
|
|
+ <div class="xfer-a__grid">
|
|
|
|
|
+ <div class="metric"><span>备注</span><b>—</b></div>
|
|
|
|
|
+ <div class="metric"><span>财务备注</span><b>—</b></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="hint">
|
|
|
|
|
+ <strong>怎么选:</strong>
|
|
|
|
|
+ 方案 A 信息一次看全、金额最醒目,改动也最贴近现有详情组件结构;
|
|
|
|
|
+ 方案 B 默认更短,适合转账笔数多时扫读,但多一步展开。
|
|
|
|
|
+ <br /><br />
|
|
|
|
|
+ 请回复选 <strong>A</strong> 或 <strong>B</strong>(也可说要微调),确认后再改 `mobile-oa-h5` 代码。
|
|
|
|
|
+ <code>docs/demos/2026-10-14-payment-detail-transfer-display-demo.html</code>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <script>
|
|
|
|
|
+ document.querySelectorAll('[data-xfer]').forEach((row) => {
|
|
|
|
|
+ const btn = row.querySelector('[data-toggle]')
|
|
|
|
|
+ if (!btn) return
|
|
|
|
|
+ btn.addEventListener('click', () => {
|
|
|
|
|
+ const open = row.classList.toggle('is-open')
|
|
|
|
|
+ btn.textContent = open ? '收起明细' : '展开明细'
|
|
|
|
|
+ })
|
|
|
|
|
+ })
|
|
|
|
|
+ </script>
|
|
|
|
|
+</body>
|
|
|
|
|
+</html>
|