design: 订单详情收据式布局重构(三屏一致)— 单卡+粘土条+撕裂线+去冗余
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013nMthbVEmQquxBRKb9Fj8u
This commit is contained in:
wangjia
@@ -60,12 +60,21 @@
|
||||
.setting-row .st-trail > svg{ width:18px; height:18px; }
|
||||
.pill-accent .dot{ background:var(--fg-on-accent); }
|
||||
|
||||
/* 订单详情 · 顶部概要 */
|
||||
.od-summary{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3);
|
||||
padding:var(--space-5); }
|
||||
.od-plan{ font-family:var(--font-sans); font-size:var(--text-sm); font-weight:600; color:var(--fg2); }
|
||||
/* 订单详情 = 一张「收据」卡：顶部渐变条 + 摘要头(金额左/状态右) + 虚线撕裂线 + 明细 */
|
||||
.od-receipt{ position:relative; overflow:hidden; padding:0; }
|
||||
.od-receipt::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px;
|
||||
background:linear-gradient(90deg,var(--clay-500),var(--clay-800)); }
|
||||
.od-summary{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3);
|
||||
padding:calc(var(--space-5) + 3px) var(--space-5) var(--space-4); }
|
||||
.od-sum-main{ display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
|
||||
.od-plan{ font-family:var(--font-sans); font-size:var(--text-caption); font-weight:700; color:var(--fg3);
|
||||
letter-spacing:var(--tracking-caps); text-transform:uppercase; }
|
||||
.od-amount{ font-family:var(--font-display); font-size:var(--text-h1); font-weight:700; color:var(--fg1);
|
||||
letter-spacing:var(--tracking-tight); font-feature-settings:'tnum' 1; line-height:1; }
|
||||
.od-perf-line{ border-top:1.5px dashed var(--border-strong); margin:0 var(--space-5); }
|
||||
.od-kv{ padding:var(--space-3) var(--space-5) var(--space-5); }
|
||||
.od-kv .kv-row{ border-top:1px solid var(--border); }
|
||||
.od-kv .kv-row:first-child{ border-top:none; }
|
||||
|
||||
.sec-label{ font-size:var(--text-caption); color:var(--fg3); font-weight:700;
|
||||
letter-spacing:var(--tracking-caps); text-transform:uppercase;
|
||||
@@ -119,17 +128,16 @@
|
||||
<!-- 页面 2：订单详情 -->
|
||||
<section class="screen" data-screen="detail">
|
||||
<div class="scr stack">
|
||||
<div class="card">
|
||||
<div class="card od-receipt">
|
||||
<div class="od-summary">
|
||||
<div class="od-plan" id="odPlan"></div>
|
||||
<div class="od-amount" id="odAmount"></div>
|
||||
<div class="od-sum-main">
|
||||
<div class="od-plan" id="odPlan"></div>
|
||||
<div class="od-amount" id="odAmount"></div>
|
||||
</div>
|
||||
<div id="odStatus"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="sec-label" data-i18n="secDetail">Details</div>
|
||||
<div class="card" id="odKv"></div>
|
||||
<div class="od-perf-line"></div>
|
||||
<div class="od-kv" id="odKv"></div>
|
||||
</div>
|
||||
|
||||
<div class="od-actions" id="odActions"></div>
|
||||
@@ -263,13 +271,10 @@ function openDetail(id){
|
||||
document.getElementById('odStatus').innerHTML = statusPill(o.status);
|
||||
|
||||
const endKey = o.endKind === 'valid' ? 'kValid' : 'kDeadline';
|
||||
// 摘要头已显套餐/金额/状态,明细只留细粒度字段,去重
|
||||
const kv = ''
|
||||
+ kvRow('kOrderNo', esc(o.id), true)
|
||||
+ kvRow('kPlan', esc(planLabel(o.plan)), false)
|
||||
+ kvRow('kAmount', esc(o.amount), false)
|
||||
+ kvRow('kMethod', esc(methodLabel(o.method)), false)
|
||||
+ '<div class="kv-row"><span class="kv-label">' + esc(t('kStatus')) + '</span>'
|
||||
+ '<span class="kv-val kv-status">' + statusPill(o.status) + '</span></div>'
|
||||
+ kvRow('kCreated', esc(o.created), false)
|
||||
+ kvRow(endKey, esc(o.ended), false)
|
||||
+ kvRow('kTrade', esc(o.trade), o.trade !== '—');
|
||||
|
||||
@@ -238,14 +238,21 @@
|
||||
.orders-view{ padding:var(--space-5) var(--space-6) var(--space-8); max-width:600px; margin:0 auto; }
|
||||
.od-screen{ display:none; }
|
||||
.od-screen.is-active{ display:block; }
|
||||
.orders-view .od-summary{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3); padding:var(--space-5); }
|
||||
.orders-view .od-plan{ font-family:var(--font-sans); font-size:var(--text-sm); font-weight:600; color:var(--fg2); }
|
||||
/* 订单详情 = 一张「收据」卡：顶部渐变条 + 摘要头(金额左/状态右) + 虚线撕裂线 + 明细 */
|
||||
.od-receipt{ position:relative; overflow:hidden; margin-bottom:var(--space-5); padding:0; }
|
||||
.od-receipt::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px;
|
||||
background:linear-gradient(90deg,var(--clay-500),var(--clay-800)); }
|
||||
.orders-view .od-summary{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4);
|
||||
padding:calc(var(--space-5) + 3px) var(--space-5) var(--space-4); }
|
||||
.orders-view .od-sum-main{ display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
|
||||
.orders-view .od-plan{ font-family:var(--font-sans); font-size:var(--text-caption); font-weight:700; color:var(--fg3);
|
||||
letter-spacing:var(--tracking-caps); text-transform:uppercase; }
|
||||
.orders-view .od-amount{ font-family:var(--font-display); font-size:var(--text-h1); font-weight:700; color:var(--fg1);
|
||||
letter-spacing:var(--tracking-tight); font-feature-settings:'tnum' 1; line-height:1; }
|
||||
.od-sumcard{ margin-bottom:var(--space-5); }
|
||||
.od-detail-sec{ margin-bottom:var(--space-5); }
|
||||
.od-sec{ font-size:var(--text-caption); color:var(--fg3); font-weight:700; letter-spacing:var(--tracking-caps);
|
||||
text-transform:uppercase; padding:0 var(--space-2) var(--space-2); }
|
||||
.od-perf-line{ border-top:1.5px dashed var(--border-strong); margin:0 var(--space-5); }
|
||||
.orders-view .od-kv{ padding:var(--space-3) var(--space-5) var(--space-5); }
|
||||
.orders-view .od-kv .kv-row{ border-top:1px solid var(--border); }
|
||||
.orders-view .od-kv .kv-row:first-child{ border-top:none; }
|
||||
.orders-view .od-actions{ display:flex; flex-direction:column; gap:var(--space-3); }
|
||||
.orders-view .setting-row .st-trail .pill{ padding:3px var(--space-2); font-size:11px; }
|
||||
.orders-view .setting-row .st-trail > svg{ width:18px; height:18px; }
|
||||
@@ -783,16 +790,16 @@
|
||||
|
||||
<!-- 详情 -->
|
||||
<div class="od-screen" data-oscreen="detail">
|
||||
<div class="card od-sumcard">
|
||||
<div class="card od-receipt">
|
||||
<div class="od-summary">
|
||||
<div class="od-plan" id="odPlan"></div>
|
||||
<div class="od-amount" id="odAmount"></div>
|
||||
<div class="od-sum-main">
|
||||
<div class="od-plan" id="odPlan"></div>
|
||||
<div class="od-amount" id="odAmount"></div>
|
||||
</div>
|
||||
<div id="odStatus"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="od-detail-sec">
|
||||
<div class="od-sec" data-i18n="ord.details">明细</div>
|
||||
<div class="card card-flush" id="odKv"></div>
|
||||
<div class="od-perf-line"></div>
|
||||
<div class="od-kv" id="odKv"></div>
|
||||
</div>
|
||||
<div class="od-actions" id="odActions"></div>
|
||||
</div>
|
||||
@@ -1441,12 +1448,10 @@ function openOrderDetail(id){
|
||||
document.getElementById('odAmount').textContent=o.amount;
|
||||
document.getElementById('odStatus').innerHTML=ordStatusPill(o.status);
|
||||
var endKey = o.endKind==='valid' ? 'ord.kValid' : 'ord.kDeadline';
|
||||
// 摘要头已显套餐/金额/状态,明细只留细粒度字段,去重
|
||||
var kv=''
|
||||
+ ordKvRow('ord.kOrderNo', ordEsc(o.id), true)
|
||||
+ ordKvRow('ord.kPlan', ordEsc(ordPlanLabel(o.plan)), false)
|
||||
+ ordKvRow('ord.kAmount', ordEsc(o.amount), false)
|
||||
+ ordKvRow('ord.kMethod', ordEsc(ordMethodLabel(o.method)), false)
|
||||
+ '<div class="kv-row"><span class="kv-label">'+ordEsc(I18N['ord.kStatus'][S.lang])+'</span><span class="kv-val kv-status">'+ordStatusPill(o.status)+'</span></div>'
|
||||
+ ordKvRow('ord.kCreated', ordEsc(o.created), false)
|
||||
+ ordKvRow(endKey, ordEsc(o.ended), false)
|
||||
+ ordKvRow('ord.kTrade', ordEsc(o.trade), o.trade!=='—');
|
||||
|
||||
@@ -276,10 +276,21 @@
|
||||
#ordersOverlay .setting-row .st-trail .pill{ padding:3px var(--space-2); font-size:11px; }
|
||||
#ordersOverlay .setting-row .st-trail > svg{ width:18px; height:18px; }
|
||||
#ordersOverlay .pill-accent .dot{ background:var(--fg-on-accent); }
|
||||
.ord-summary{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3); padding:var(--space-5); }
|
||||
.ord-plan{ font-family:var(--font-sans); font-size:var(--text-sm); font-weight:600; color:var(--fg2); }
|
||||
/* 订单详情 = 一张「收据」卡：顶部渐变条 + 摘要头(金额左/状态右) + 虚线撕裂线 + 明细 */
|
||||
.ord-receipt{ position:relative; overflow:hidden; padding:0; }
|
||||
.ord-receipt::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px;
|
||||
background:linear-gradient(90deg,var(--clay-500),var(--clay-800)); }
|
||||
.ord-summary{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3);
|
||||
padding:calc(var(--space-5) + 3px) var(--space-5) var(--space-4); }
|
||||
.ord-sum-main{ display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
|
||||
.ord-plan{ font-family:var(--font-sans); font-size:var(--text-caption); font-weight:700; color:var(--fg3);
|
||||
letter-spacing:var(--tracking-caps); text-transform:uppercase; }
|
||||
.ord-amount{ font-family:var(--font-display); font-size:var(--text-h1); font-weight:700; color:var(--fg1);
|
||||
letter-spacing:var(--tracking-tight); font-feature-settings:'tnum' 1; line-height:1; }
|
||||
.ord-perf-line{ border-top:1.5px dashed var(--border-strong); margin:0 var(--space-5); }
|
||||
.ord-kv{ padding:var(--space-3) var(--space-5) var(--space-5); }
|
||||
.ord-kv .kv-row{ border-top:1px solid var(--border); }
|
||||
.ord-kv .kv-row:first-child{ border-top:none; }
|
||||
.ord-sec{ font-size:var(--text-caption); color:var(--fg3); font-weight:700;
|
||||
letter-spacing:var(--tracking-caps); text-transform:uppercase; padding:0 var(--space-2) var(--space-2); }
|
||||
.ord-kv-status{ padding-top:2px; }
|
||||
@@ -754,16 +765,16 @@
|
||||
<!-- 订单详情 -->
|
||||
<section class="ord-screen" data-screen="detail">
|
||||
<div class="ord-scr ord-stack">
|
||||
<div class="card">
|
||||
<div class="card ord-receipt">
|
||||
<div class="ord-summary">
|
||||
<div class="ord-plan" id="ordDetPlan"></div>
|
||||
<div class="ord-amount" id="ordDetAmount"></div>
|
||||
<div class="ord-sum-main">
|
||||
<div class="ord-plan" id="ordDetPlan"></div>
|
||||
<div class="ord-amount" id="ordDetAmount"></div>
|
||||
</div>
|
||||
<div id="ordDetStatus"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="ord-sec" data-i18n="ordSecDetail">Details</div>
|
||||
<div class="card" id="ordDetKv"></div>
|
||||
<div class="ord-perf-line"></div>
|
||||
<div class="ord-kv" id="ordDetKv"></div>
|
||||
</div>
|
||||
<div class="ord-actions" id="ordDetActions"></div>
|
||||
</div>
|
||||
@@ -1551,12 +1562,10 @@ function ordOpenDetail(id){
|
||||
$('#ordDetAmount').textContent=o.amount;
|
||||
$('#ordDetStatus').innerHTML=ordStatusPill(o.status);
|
||||
const endKey=o.endKind==='valid'?'kValid':'kDeadline';
|
||||
// 摘要头已显套餐/金额/状态,明细只留细粒度字段,去重
|
||||
const kv = ''
|
||||
+ ordKvRow('kOrderNo', ordEsc(o.id), true)
|
||||
+ ordKvRow('kPlan', ordEsc(ordPlanLabel(o.plan)), false)
|
||||
+ ordKvRow('kAmount', ordEsc(o.amount), false)
|
||||
+ ordKvRow('kMethod', ordEsc(ordMethodLabel(o.method)), false)
|
||||
+ '<div class="kv-row"><span class="kv-label">'+ordEsc(D().kStatus)+'</span><span class="kv-val ord-kv-status">'+ordStatusPill(o.status)+'</span></div>'
|
||||
+ ordKvRow('kCreated', ordEsc(o.created), false)
|
||||
+ ordKvRow(endKey, ordEsc(o.ended), false)
|
||||
+ ordKvRow('kTrade', ordEsc(o.trade), o.trade!=='—');
|
||||
|
||||
Reference in New Issue
Block a user