From bcd3a0bbb15497ddb6069586bd54bc42267d3f6a Mon Sep 17 00:00:00 2001 From: wangjia <809946525@qq.com> Date: Sun, 12 Jul 2026 06:54:18 +0800 Subject: [PATCH] =?UTF-8?q?design:=20=E8=AE=A2=E5=8D=95=E8=AF=A6=E6=83=85?= =?UTF-8?q?=E6=94=B6=E6=8D=AE=E5=BC=8F=E5=B8=83=E5=B1=80=E9=87=8D=E6=9E=84?= =?UTF-8?q?(=E4=B8=89=E5=B1=8F=E4=B8=80=E8=87=B4)=E2=80=94=20=E5=8D=95?= =?UTF-8?q?=E5=8D=A1+=E7=B2=98=E5=9C=9F=E6=9D=A1+=E6=92=95=E8=A3=82?= =?UTF-8?q?=E7=BA=BF+=E5=8E=BB=E5=86=97=E4=BD=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_013nMthbVEmQquxBRKb9Fj8u --- design/prototype/screens/orders.html | 37 ++++++++++++++---------- design/prototype/screens/ui-desktop.html | 37 ++++++++++++++---------- design/prototype/screens/ui-mobile.html | 33 +++++++++++++-------- 3 files changed, 63 insertions(+), 44 deletions(-) diff --git a/design/prototype/screens/orders.html b/design/prototype/screens/orders.html index 5293bac..687a939 100644 --- a/design/prototype/screens/orders.html +++ b/design/prototype/screens/orders.html @@ -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 @@
-
+
-
-
+
+
+
+
-
- -
-
Details
-
+
+
@@ -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) - + '
' + esc(t('kStatus')) + '' - + '' + statusPill(o.status) + '
' + kvRow('kCreated', esc(o.created), false) + kvRow(endKey, esc(o.ended), false) + kvRow('kTrade', esc(o.trade), o.trade !== '—'); diff --git a/design/prototype/screens/ui-desktop.html b/design/prototype/screens/ui-desktop.html index 5fe1340..7c138fe 100644 --- a/design/prototype/screens/ui-desktop.html +++ b/design/prototype/screens/ui-desktop.html @@ -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 @@
-
+
-
-
+
+
+
+
-
-
-
明细
-
+
+
@@ -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) - + '
'+ordEsc(I18N['ord.kStatus'][S.lang])+''+ordStatusPill(o.status)+'
' + ordKvRow('ord.kCreated', ordEsc(o.created), false) + ordKvRow(endKey, ordEsc(o.ended), false) + ordKvRow('ord.kTrade', ordEsc(o.trade), o.trade!=='—'); diff --git a/design/prototype/screens/ui-mobile.html b/design/prototype/screens/ui-mobile.html index f35584f..c5789c5 100644 --- a/design/prototype/screens/ui-mobile.html +++ b/design/prototype/screens/ui-mobile.html @@ -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 @@
-
+
-
-
+
+
+
+
-
-
-
Details
-
+
+
@@ -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) - + '
'+ordEsc(D().kStatus)+''+ordStatusPill(o.status)+'
' + ordKvRow('kCreated', ordEsc(o.created), false) + ordKvRow(endKey, ordEsc(o.ended), false) + ordKvRow('kTrade', ordEsc(o.trade), o.trade!=='—');