From ae9acce2009dc2dfa2e044a43bf659eb261b2c6c Mon Sep 17 00:00:00 2001 From: fengpu <18691763612@163.com> Date: Mon, 10 Aug 2026 15:19:37 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=96=E9=A4=90=E6=98=8E=E7=BB=86?= =?UTF-8?q?=E9=A1=B5=E5=90=88=E5=B9=B6=E6=94=AF=E4=BB=98=E5=BC=95=E5=AF=BC?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=20+=20=E5=88=A0=E9=99=A4=20user-03-paying=20?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - user-02-checkout-sync 重构: - 左侧订单列表压缩: 删除「类别」列改为按餐线/档口分组展示, 单位(元/100g、g、kcal、元)挪至表头小字, 数字列去掉胶囊背景, 去掉循环滚动动画(13 件餐品静态展示) - 右侧支付区重构: 营养卡压缩, 应付金额大数字联动支付方式与代金券构成 chips, 右上角下拉切换器(6 形态 + 代金券开关), 三种含扫码卡片形态(在线/余额+在线/ 现金+在线)共用 renderScanCards() 函数, 左右两卡片完全对称(同尺寸/样式/3 渠道) - 混合支付弱化第一步: 已完成步骤改为细长横条, 第二步扫码区放大强调(蓝色脉冲发光边框) - 删除 user-03-paying.html: 功能已合并到 user-02-checkout-sync - index.html 同步删除 U03 入口卡片 - user-02/04 清理对 user-03-paying 的过时注释引用 Co-Authored-By: Claude Opus 4.7 --- .../canteen-device/checkout-device/index.html | 8 - .../user-02-checkout-sync.html | 1681 ++++++++++++----- .../checkout-device/user-03-paying.html | 1146 ----------- .../checkout-device/user-04-success.html | 2 +- 4 files changed, 1225 insertions(+), 1612 deletions(-) delete mode 100644 other-module/canteen-device/checkout-device/user-03-paying.html diff --git a/other-module/canteen-device/checkout-device/index.html b/other-module/canteen-device/checkout-device/index.html index e93d052..1389623 100644 --- a/other-module/canteen-device/checkout-device/index.html +++ b/other-module/canteen-device/checkout-device/index.html @@ -217,14 +217,6 @@
同步商品列表 + 营养摘要
- - U03 -
📱
-
-
支付引导
-
4 种支付方式引导切换
-
- U04
✅
diff --git a/other-module/canteen-device/checkout-device/user-02-checkout-sync.html b/other-module/canteen-device/checkout-device/user-02-checkout-sync.html index fcde89f..974d2b2 100644 --- a/other-module/canteen-device/checkout-device/user-02-checkout-sync.html +++ b/other-module/canteen-device/checkout-device/user-02-checkout-sync.html @@ -29,9 +29,9 @@ flex-direction: column; } - /* 顶部用户信息条(全宽) */ + /* 顶部用户信息条 */ .header { - padding: 14px 28px; + padding: 12px 24px; background: linear-gradient(90deg, rgba(74, 144, 217, 0.18), rgba(10, 196, 168, 0.08)); border-bottom: 1px solid rgba(74, 144, 217, 0.3); display: flex; @@ -47,8 +47,8 @@ min-width: 0; } .user-card__avatar { - width: 44px; - height: 44px; + width: 42px; + height: 42px; border-radius: 50%; background: linear-gradient(135deg, #4a90d9, #0AC4A8); display: flex; @@ -86,16 +86,11 @@ gap: 8px; flex-shrink: 0; } - /* 用户身份标签:类型 + 会员等级(单一渐变标签) - - 会员用户:蓝→金渐变,后跟等级 - - 临时用户:灰色单色 - - 内部员工:蓝色单色 */ .user-card__type { padding: 5px 12px; border-radius: 14px; font-size: 12px; font-weight: 700; - text-align: center; line-height: 1.3; letter-spacing: 0.5px; } @@ -110,16 +105,6 @@ font-weight: 800; margin-left: 4px; } - .user-card__type--temp { - background: rgba(148, 163, 184, 0.18); - border: 1px solid rgba(148, 163, 184, 0.45); - color: #cbd5e1; - } - .user-card__type--staff { - background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(74, 144, 217, 0.14)); - border: 1px solid rgba(96, 165, 250, 0.5); - color: #60a5fa; - } .header__time { font-size: 13px; color: rgba(255, 255, 255, 0.55); @@ -129,17 +114,17 @@ border-left: 1px solid rgba(255, 255, 255, 0.1); } - /* 主体:左右两列 */ + /* 主体:左右两列(右侧拓宽至 440px) */ .body { flex: 1; display: grid; - grid-template-columns: 1fr 360px; + grid-template-columns: 1fr 440px; overflow: hidden; } - /* 左:餐品明细表格区 */ + /* ============ 左:餐品明细表格区 ============ */ .items-area { - padding: 12px 24px 14px; + padding: 10px 18px 12px; display: flex; flex-direction: column; overflow: hidden; @@ -149,10 +134,11 @@ color: rgba(255, 255, 255, 0.7); font-weight: 600; letter-spacing: 0.5px; - padding: 4px 0 8px; + padding: 2px 0 6px; display: flex; align-items: center; gap: 8px; + flex-shrink: 0; } .items-area__title-count { padding: 1px 8px; @@ -163,7 +149,8 @@ font-weight: 500; } - /* 餐品明细表格 */ + /* 表格:列宽优化(去掉类别列,餐品名拓宽,数字列收窄) + 列:# / 餐品名 / 单价 / 取餐量 / 热量 / 金额 */ .items-table { width: 100%; border-collapse: collapse; @@ -171,18 +158,16 @@ } .items-table th, .items-table td { - padding: 9px 8px; + padding: 6px 6px; text-align: left; vertical-align: middle; } - /* 列宽:序号 / 类别 / 餐品名称 / 单价 / 取餐量 / 热量 / 金额 */ - .items-table col.col-seq { width: 40px; } - .items-table col.col-cat { width: 64px; } - .items-table col.col-name { width: 180px; } - .items-table col.col-unit { width: 100px; } - .items-table col.col-weight { width: 90px; } - .items-table col.col-cal { width: 100px; } - .items-table col.col-price { width: 92px; } + .items-table col.col-seq { width: 32px; } + .items-table col.col-name { width: auto; } + .items-table col.col-unit { width: 110px; } + .items-table col.col-weight { width: 78px; } + .items-table col.col-cal { width: 78px; } + .items-table col.col-price { width: 78px; } .items-table thead th { position: sticky; @@ -190,22 +175,80 @@ z-index: 2; background: rgba(14, 19, 38, 0.95); font-size: 11px; - color: rgba(255, 255, 255, 0.5); - letter-spacing: 1px; + color: rgba(255, 255, 255, 0.55); + letter-spacing: 0.5px; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } - .items-table thead th.col-weight-h, - .items-table thead th.col-cal-h { text-align: center; } .items-table thead th.col-unit-h, .items-table thead th.col-price-h { text-align: right; } + .items-table thead th.col-weight-h, + .items-table thead th.col-cal-h { text-align: right; } + .items-table thead th small { + color: rgba(255, 255, 255, 0.35); + font-size: 9px; + font-weight: 400; + margin-left: 2px; + } - .items-table tbody td { border-bottom: 1px dashed rgba(255, 255, 255, 0.05); } + /* 分组标题条(餐线/档口) */ + .group-bar { + display: flex; + align-items: center; + gap: 8px; + padding: 4px 6px; + margin: 4px 0 0; + font-size: 11px; + color: rgba(255, 255, 255, 0.55); + font-weight: 600; + letter-spacing: 0.5px; + } + .group-bar__tag { + padding: 1px 7px; + border-radius: 3px; + font-size: 10px; + font-weight: 700; + letter-spacing: 1px; + } + .group-bar__tag--line { + background: rgba(96, 165, 250, 0.18); + border: 1px solid rgba(96, 165, 250, 0.45); + color: #60a5fa; + } + .group-bar__tag--booth { + background: rgba(251, 146, 60, 0.18); + border: 1px solid rgba(251, 146, 60, 0.45); + color: #fb923c; + } + .group-bar__line { + flex: 1; + height: 1px; + background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent); + } + .group-bar__count { + font-family: Menlo, Consolas, monospace; + color: rgba(255, 255, 255, 0.5); + } + + /* 列表容器(静态展示,不滚动) */ + .items-scroll { + flex: 1; + overflow: hidden; + position: relative; + } + .items-scroll__inner { + position: absolute; + inset: 0; + overflow: hidden; + } + + /* 行样式 */ + .items-table tbody tr td { border-bottom: 1px dashed rgba(255, 255, 255, 0.05); } .items-table tbody tr:hover td { background: rgba(74, 144, 217, 0.08); } .cell-seq { - width: 24px; - height: 24px; + width: 22px; + height: 22px; border-radius: 50%; background: rgba(74, 144, 217, 0.18); border: 1px solid rgba(74, 144, 217, 0.35); @@ -218,97 +261,34 @@ justify-content: center; } .cell-name { - font-size: 15px; + font-size: 14px; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - /* 类别徽标:餐线 / 档口 */ - .cell-cat { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 2px 0; - width: 48px; - border-radius: 4px; - font-size: 11px; - font-weight: 700; - letter-spacing: 1px; - line-height: 1.4; - } - .cell-cat--line { - background: rgba(96, 165, 250, 0.18); - border: 1px solid rgba(96, 165, 250, 0.45); - color: #60a5fa; - } - .cell-cat--booth { - background: rgba(251, 146, 60, 0.18); - border: 1px solid rgba(251, 146, 60, 0.45); - color: #fb923c; - } .cell-unit { text-align: right; - font-size: 12px; + font-size: 11px; color: rgba(255, 255, 255, 0.55); font-family: Menlo, Consolas, monospace; white-space: nowrap; } - .cell-weight, .cell-cal { - text-align: center; + /* 数字列:纯文本,不带胶囊背景,右对齐整洁 */ + .cell-weight, + .cell-cal, + .cell-price { + text-align: right; font-family: Menlo, Consolas, monospace; font-size: 13px; white-space: nowrap; } .cell-weight { color: #0AC4A8; } .cell-cal { color: #fbbf24; } - .cell-weight__pill { - display: inline-block; - padding: 2px 10px; - background: rgba(10, 196, 168, 0.12); - border-radius: 10px; - min-width: 70px; - } - .cell-cal__pill { - display: inline-block; - padding: 2px 10px; - background: rgba(251, 191, 36, 0.1); - border-radius: 10px; - min-width: 70px; - } - .cell-price { - text-align: right; - font-size: 16px; - color: #0AC4A8; - font-weight: 700; - font-family: Menlo, Consolas, monospace; - white-space: nowrap; - } + .cell-price { color: #0AC4A8; font-weight: 700; font-size: 14px; } - /* 表格滚动容器 */ - .items-scroll { - flex: 1; - overflow: hidden; - position: relative; - } - .items-scroll__inner { - position: absolute; - inset: 0; - overflow: hidden; - } - .items-scroll__track { - animation: scrollUp 18s linear infinite; - } - .items-scroll:hover .items-scroll__track { - animation-play-state: paused; - } - @keyframes scrollUp { - 0% { transform: translateY(0); } - 100% { transform: translateY(-50%); } - } - - /* 合计行(固定在列表底部,与表头列对齐) */ + /* 合计行 */ .items-footer { margin-top: 8px; border-top: 1.5px solid rgba(10, 196, 168, 0.4); @@ -322,18 +302,17 @@ table-layout: fixed; } .items-footer td { - padding: 12px 8px; + padding: 10px 6px; font-size: 13px; color: rgba(255, 255, 255, 0.75); vertical-align: middle; } - .items-footer td.col-seq-f { width: 40px; text-align: left; font-size: 12px; color: rgba(255,255,255,0.55); } - .items-footer td.col-cat-f { width: 64px; } - .items-footer td.col-name-f { width: 180px; } - .items-footer td.col-unit-f { width: 100px; } - .items-footer td.col-weight-f { width: 90px; text-align: center; } - .items-footer td.col-cal-f { width: 100px; text-align: center; } - .items-footer td.col-price-f { width: 92px; text-align: right; } + .items-footer td.col-seq-f { width: 32px; } + .items-footer td.col-name-f { width: auto; text-align: left; font-size: 12px; color: rgba(255,255,255,0.55); } + .items-footer td.col-unit-f { width: 110px; } + .items-footer td.col-weight-f { width: 78px; text-align: right; } + .items-footer td.col-cal-f { width: 78px; text-align: right; } + .items-footer td.col-price-f { width: 78px; text-align: right; } .footer-label { font-size: 13px; color: rgba(255, 255, 255, 0.7); @@ -341,7 +320,7 @@ font-weight: 600; } .footer-value { - font-size: 15px; + font-size: 14px; color: #fff; font-weight: 700; font-family: Menlo, Consolas, monospace; @@ -354,23 +333,24 @@ font-family: Menlo, Consolas, monospace; } - /* 右:营养 + 金额 + 二维码 */ + /* ============ 右:营养 + 金额 + 支付区 ============ */ .side-area { - padding: 12px 14px; + padding: 10px 14px; background: rgba(26, 43, 74, 0.3); border-left: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; - gap: 10px; + gap: 8px; overflow: hidden; + position: relative; } /* 营养摄入卡(压缩版) */ .nutrition-card { background: linear-gradient(135deg, rgba(10, 196, 168, 0.12), rgba(74, 144, 217, 0.06)); border: 1px solid rgba(10, 196, 168, 0.25); - border-radius: 12px; - padding: 12px 14px; + border-radius: 10px; + padding: 8px 12px 10px; display: flex; flex-direction: column; flex-shrink: 0; @@ -379,49 +359,49 @@ display: flex; justify-content: space-between; align-items: center; - margin-bottom: 10px; + margin-bottom: 6px; } .nutrition-head__title { - font-size: 13px; + font-size: 12px; color: #fff; font-weight: 600; display: flex; - flex-direction: column; - gap: 2px; + align-items: baseline; + gap: 6px; } .nutrition-head__title small { - font-size: 10px; + font-size: 9px; color: rgba(255, 255, 255, 0.5); font-weight: 400; } .nutrition-score { - padding: 3px 10px; + padding: 2px 8px; background: rgba(251, 191, 36, 0.2); border: 1px solid rgba(251, 191, 36, 0.4); - border-radius: 12px; - font-size: 12px; + border-radius: 10px; + font-size: 11px; color: #fbbf24; font-weight: 700; - text-align: right; + display: inline-flex; + align-items: baseline; + gap: 4px; } .nutrition-score small { - display: block; - font-size: 10px; + font-size: 9px; color: rgba(251, 191, 36, 0.85); font-weight: 500; - margin-top: 1px; } .nutrition-main { display: grid; - grid-template-columns: 84px 1fr; + grid-template-columns: 64px 1fr; gap: 12px; align-items: center; } .calorie-ring { position: relative; - width: 84px; - height: 84px; + width: 64px; + height: 64px; } .calorie-ring__svg { width: 100%; @@ -438,36 +418,29 @@ text-align: center; } .calorie-ring__value { - font-size: 18px; + font-size: 15px; font-weight: 800; color: #fff; font-family: Menlo, Consolas, monospace; line-height: 1; } .calorie-ring__unit { - font-size: 9px; + font-size: 8px; color: rgba(255, 255, 255, 0.5); margin-top: 1px; } - .calorie-ring__hint { - font-size: 9px; - color: #fbbf24; - margin-top: 3px; - font-weight: 600; - } - /* 三大营养素 NRV% 横条(不显示克数,只显示 NRV%) */ .macro-list { display: flex; flex-direction: column; - gap: 7px; + gap: 5px; } .macro-row__head { display: flex; justify-content: space-between; align-items: baseline; - font-size: 11px; - margin-bottom: 3px; + font-size: 10px; + margin-bottom: 2px; } .macro-row__label { color: rgba(255, 255, 255, 0.7); @@ -476,8 +449,8 @@ gap: 4px; } .macro-row__dot { - width: 6px; - height: 6px; + width: 5px; + height: 5px; border-radius: 50%; } .macro-row__value { @@ -493,7 +466,7 @@ } .macro-bar { position: relative; - height: 6px; + height: 5px; background: rgba(0, 0, 0, 0.3); border-radius: 3px; } @@ -513,31 +486,38 @@ border-radius: 3px; } - /* 订单金额(中间,非常醒目) */ + /* 应付金额(大数字,按支付方式联动金额与构成) */ .amount-card { background: linear-gradient(135deg, rgba(10, 196, 168, 0.28), rgba(0, 0, 0, 0.4)); border: 2px solid rgba(10, 196, 168, 0.7); - border-radius: 14px; - padding: 14px 16px 12px; - text-align: center; + border-radius: 12px; + padding: 10px 14px 8px; + display: grid; + grid-template-columns: auto 1fr; + gap: 14px; + align-items: center; box-shadow: 0 8px 28px rgba(10, 196, 168, 0.32), inset 0 0 0 1px rgba(10, 196, 168, 0.2); flex-shrink: 0; position: relative; } + .amount-card__main { + display: flex; + flex-direction: column; + gap: 1px; + } .amount-card__label { - font-size: 15px; - color: #fff; + font-size: 11px; + color: rgba(255, 255, 255, 0.85); font-weight: 700; - letter-spacing: 4px; - margin-bottom: 2px; + letter-spacing: 2px; text-shadow: 0 0 8px rgba(10, 196, 168, 0.4); } .amount-card__value { - font-size: 64px; + font-size: 40px; font-weight: 900; color: #0AC4A8; font-family: Menlo, Consolas, monospace; - line-height: 1.05; + line-height: 1; text-shadow: 0 0 8px rgba(10, 196, 168, 0.9), 0 0 24px rgba(10, 196, 168, 0.7), @@ -545,65 +525,596 @@ letter-spacing: 1px; } .amount-card__sub { - font-size: 12px; + font-size: 10px; color: rgba(255, 255, 255, 0.6); - margin-top: 4px; + margin-top: 2px; } .amount-card__sub strong { color: #4ade80; } - - /* 二维码支付区 */ - .qr-card { - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 12px; - padding: 10px 12px; - display: flex; - align-items: center; - gap: 12px; - flex: 1; - min-height: 0; - } - .qr-card__code { - width: 104px; - height: 104px; - background: #fff; - border-radius: 8px; - padding: 5px; - flex-shrink: 0; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); - } - .qr-card__code svg { width: 100%; height: 100%; display: block; } - .qr-card__info { - flex: 1; - min-width: 0; + /* 金额构成 chips */ + .amount-card__breakdown { display: flex; flex-direction: column; + gap: 4px; + align-items: flex-end; + } + .amt-chip { + padding: 2px 8px; + border-radius: 8px; + font-size: 10px; + font-weight: 600; + font-family: Menlo, Consolas, monospace; + letter-spacing: 0.5px; + white-space: nowrap; + display: inline-flex; + align-items: center; + gap: 4px; + } + .amt-chip--coupon { background: rgba(251, 191, 36, 0.15); border: 1px solid rgba(251, 191, 36, 0.4); color: #fbbf24; } + .amt-chip--balance { background: rgba(10, 196, 168, 0.12); border: 1px solid rgba(10, 196, 168, 0.35); color: #0AC4A8; } + .amt-chip--cash { background: rgba(82, 196, 26, 0.12); border: 1px solid rgba(82, 196, 26, 0.35); color: #4ade80; } + .amt-chip--online { background: rgba(74, 144, 217, 0.12); border: 1px solid rgba(74, 144, 217, 0.35); color: #60a5fa; } + .amt-chip--diff { background: rgba(251, 146, 60, 0.15); border: 1px solid rgba(251, 146, 60, 0.4); color: #fb923c; } + .amt-chip--change { background: rgba(10, 196, 168, 0.12); border: 1px solid rgba(10, 196, 168, 0.4); color: #0AC4A8; } + + /* ============ 支付方式容器(下拉切换 + 多形态差异化渲染) ============ */ + .pay-area { + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; + background: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 10px; + position: relative; + overflow: visible; + } + /* 右上角下拉切换器(原型演示用) */ + .method-selector { + position: absolute; + top: 6px; + right: 6px; + z-index: 20; + } + .method-selector__trigger { + display: flex; + align-items: center; + gap: 6px; + padding: 5px 10px 5px 12px; + background: rgba(74, 144, 217, 0.22); + border: 1px solid rgba(74, 144, 217, 0.5); + border-radius: 14px; + font-size: 11px; + color: #fff; + font-weight: 600; + cursor: pointer; + font-family: inherit; + letter-spacing: 0.3px; + transition: all 0.2s; + } + .method-selector__trigger:hover { + background: rgba(74, 144, 217, 0.35); + } + .method-selector__trigger .caret { + font-size: 9px; + color: rgba(255, 255, 255, 0.7); + transition: transform 0.2s; + } + .method-selector.open .method-selector__trigger .caret { + transform: rotate(180deg); + } + .method-selector__panel { + position: absolute; + top: calc(100% + 4px); + right: 0; + min-width: 160px; + background: rgba(14, 19, 38, 0.98); + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 10px; + padding: 5px; + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); + display: none; + flex-direction: column; + gap: 1px; + } + .method-selector.open .method-selector__panel { display: flex; } + .method-selector__item { + padding: 6px 10px; + background: transparent; + border: none; + border-radius: 6px; + font-size: 11px; + color: rgba(255, 255, 255, 0.75); + cursor: pointer; + font-family: inherit; + text-align: left; + display: flex; + align-items: center; + gap: 6px; + transition: all 0.15s; + } + .method-selector__item:hover { + background: rgba(74, 144, 217, 0.18); + color: #fff; + } + .method-selector__item.active { + background: rgba(74, 144, 217, 0.32); + color: #fff; + font-weight: 600; + } + .method-selector__item-icon { + font-size: 13px; + width: 18px; + text-align: center; + } + .method-selector__divider { + height: 1px; + background: rgba(255, 255, 255, 0.1); + margin: 3px 0; + } + .method-selector__coupon { + display: flex; + align-items: center; + justify-content: space-between; + padding: 6px 10px; + border-radius: 6px; + font-size: 11px; + color: #fbbf24; + cursor: pointer; + transition: all 0.15s; + } + .method-selector__coupon:hover { background: rgba(251, 191, 36, 0.1); } + .method-selector__coupon .toggle-pill { + width: 28px; + height: 14px; + border-radius: 7px; + background: rgba(255, 255, 255, 0.15); + position: relative; + transition: all 0.2s; + } + .method-selector__coupon .toggle-pill::after { + content: ''; + position: absolute; + top: 1px; + left: 1px; + width: 12px; + height: 12px; + border-radius: 50%; + background: #fff; + transition: all 0.2s; + } + .method-selector__coupon.on .toggle-pill { + background: rgba(251, 191, 36, 0.55); + } + .method-selector__coupon.on .toggle-pill::after { + left: 15px; + background: #fbbf24; + } + + /* 支付渲染容器 */ + .pay-area__body { + flex: 1; + padding: 8px 10px 10px; + display: flex; + flex-direction: column; + overflow: hidden; + } + .pay-area__hint { + font-size: 10px; + color: rgba(255, 255, 255, 0.4); + letter-spacing: 0.3px; + margin-bottom: 6px; + padding-left: 2px; + } + + /* ============ 在线支付:双途径(B扫C / C扫B 二维码) ============ */ + .pay-online { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; + flex: 1; + } + .pay-online__card { + padding: 10px 8px 8px; + border-radius: 10px; + display: flex; + flex-direction: column; + align-items: center; + gap: 5px; + text-align: center; + position: relative; + } + .pay-online__card--recommend { + background: linear-gradient(135deg, rgba(74, 144, 217, 0.2), rgba(10, 196, 168, 0.12)); + border: 2px solid rgba(74, 144, 217, 0.55); + box-shadow: 0 4px 14px rgba(74, 144, 217, 0.22); + } + .pay-online__card--qr { + background: rgba(0, 0, 0, 0.25); + border: 1px solid rgba(255, 255, 255, 0.1); + } + .pay-online__head { + display: flex; + align-items: center; gap: 5px; } - .qr-card__title { + .pay-online__title { + font-size: 12px; + font-weight: 700; + color: #fff; + } + .pay-online__title--muted { color: rgba(255, 255, 255, 0.75); font-weight: 600; } + .pay-online__badge { + padding: 1px 6px; + background: linear-gradient(135deg, #fbbf24, #fb923c); + color: #1a1a1a; + font-size: 9px; + font-weight: 800; + border-radius: 6px; + } + .pay-online__icon-wrap { + width: 70px; + height: 70px; + border-radius: 50%; + background: radial-gradient(circle, rgba(74, 144, 217, 0.3), rgba(74, 144, 217, 0.08) 70%); + border: 2px solid rgba(74, 144, 217, 0.5); + box-shadow: 0 0 24px rgba(74, 144, 217, 0.3); + display: flex; + align-items: center; + justify-content: center; + margin: 4px 0; + } + .pay-online__icon { + font-size: 38px; + } + .pay-online__qr-wrap { + width: 70px; + height: 70px; + background: #fff; + border-radius: 8px; + padding: 4px; + margin: 4px 0; + } + .pay-online__qr-wrap svg { width: 100%; height: 100%; display: block; } + .pay-online__channels { + display: flex; + gap: 4px; + flex-wrap: wrap; + justify-content: center; + margin-top: 2px; + } + .pay-online__channel { + padding: 2px 6px; + border-radius: 4px; + font-size: 10px; + font-weight: 600; + background: rgba(255, 255, 255, 0.06); + color: rgba(255, 255, 255, 0.75); + border: 1px solid rgba(255, 255, 255, 0.1); + } + .pay-online__channel--wechat { color: #4ade80; border-color: rgba(82, 196, 26, 0.35); background: rgba(82, 196, 26, 0.1); } + .pay-online__channel--alipay { color: #60a5fa; border-color: rgba(74, 144, 217, 0.35); background: rgba(74, 144, 217, 0.1); } + .pay-online__channel--unionpay { color: #fb923c; border-color: rgba(251, 146, 60, 0.35); background: rgba(251, 146, 60, 0.1); } + .pay-online__tip { + font-size: 10px; + color: rgba(255, 255, 255, 0.6); + line-height: 1.4; + margin-top: 2px; + } + + /* ============ 余额支付:单列卡片(图标 + 状态 + 会员信息条) ============ */ + .pay-balance { + flex: 1; + display: flex; + flex-direction: column; + gap: 8px; + align-items: center; + justify-content: center; + } + .pay-balance__icon-area { + width: 80px; + height: 80px; + border-radius: 50%; + background: radial-gradient(circle at 50% 50%, rgba(10, 196, 168, 0.3), rgba(10, 196, 168, 0.06) 70%); + border: 2px solid rgba(10, 196, 168, 0.5); + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 0 32px rgba(10, 196, 168, 0.3); + position: relative; + } + .pay-balance__icon-area::before { + content: ''; + position: absolute; + inset: -10px; + border-radius: 50%; + border: 1px solid rgba(10, 196, 168, 0.22); + animation: rippleBal 2s ease-out infinite; + } + @keyframes rippleBal { + 0% { opacity: 1; transform: scale(0.8); } + 100% { opacity: 0; transform: scale(1.2); } + } + .pay-balance__icon { font-size: 42px; } + .pay-balance__status { + text-align: center; + } + .pay-balance__title { + font-size: 16px; + font-weight: 700; + color: #fff; + letter-spacing: 1px; + margin-bottom: 3px; + } + .pay-balance__hint { + font-size: 11px; + color: rgba(255, 255, 255, 0.6); + } + /* 余额信息条(紧凑横排) */ + .balance-info { + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 1px; + background: linear-gradient(135deg, rgba(10, 196, 168, 0.15), rgba(74, 144, 217, 0.08)); + border: 1px solid rgba(10, 196, 168, 0.4); + border-radius: 8px; + overflow: hidden; + } + .balance-info__cell { + padding: 7px 6px; + text-align: center; + background: rgba(14, 19, 38, 0.4); + display: flex; + flex-direction: column; + gap: 2px; + } + .balance-info__label { + font-size: 10px; + color: rgba(255, 255, 255, 0.55); + } + .balance-info__value { font-size: 14px; color: #fff; font-weight: 700; + font-family: Menlo, Consolas, monospace; } - .qr-card__methods { + .balance-info__value--highlight { color: #0AC4A8; font-weight: 800; font-size: 16px; } + .balance-info__value--expense { color: #fb923c; } + + /* ============ 混合支付:细条(已完成第一步) + 强调(待操作第二步) ============ */ + .pay-mixed { + flex: 1; display: flex; + flex-direction: column; gap: 6px; - flex-wrap: wrap; } - .qr-card__method { - padding: 3px 8px; - border-radius: 4px; + /* 第一步:细长横条(弱化但仍可见) */ + .mixed-donestrip { + display: flex; + align-items: center; + gap: 8px; + padding: 5px 10px; + background: linear-gradient(90deg, rgba(82, 196, 26, 0.18), rgba(10, 196, 168, 0.1)); + border: 1px solid rgba(82, 196, 26, 0.4); + border-radius: 8px; + flex-shrink: 0; + opacity: 0.85; + } + .mixed-donestrip__icon { + width: 22px; + height: 22px; + border-radius: 50%; + background: rgba(82, 196, 26, 0.25); + border: 1px solid rgba(82, 196, 26, 0.5); + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + flex-shrink: 0; + } + .mixed-donestrip__label { font-size: 11px; + color: rgba(255, 255, 255, 0.75); font-weight: 600; } - .qr-card__method--wechat { background: rgba(7, 193, 96, 0.18); color: #07c160; border: 1px solid rgba(7, 193, 96, 0.4); } - .qr-card__method--alipay { background: rgba(22, 119, 255, 0.18); color: #1677ff; border: 1px solid rgba(22, 119, 255, 0.4); } - .qr-card__hint { - font-size: 11px; - color: rgba(255, 255, 255, 0.55); - line-height: 1.5; + .mixed-donestrip__amount { + margin-left: auto; + font-size: 13px; + color: #4ade80; + font-weight: 700; + font-family: Menlo, Consolas, monospace; } - .qr-card__hint strong { color: #fbbf24; } + .mixed-donestrip__status { + padding: 1px 6px; + background: rgba(82, 196, 26, 0.2); + color: #4ade80; + font-size: 9px; + font-weight: 700; + border-radius: 6px; + letter-spacing: 0.3px; + } + + /* 第二步:强调卡片(扫码/现金补差) */ + .mixed-pending { + flex: 1; + display: flex; + flex-direction: column; + gap: 5px; + padding: 8px; + background: linear-gradient(135deg, rgba(74, 144, 217, 0.15), rgba(10, 196, 168, 0.08)); + border: 1px solid rgba(74, 144, 217, 0.45); + border-radius: 10px; + position: relative; + } + .mixed-pending::before { + content: ''; + position: absolute; + inset: -2px; + border-radius: 10px; + border: 2px solid rgba(74, 144, 217, 0.45); + animation: mixedGlow 1.8s ease-in-out infinite; + pointer-events: none; + } + @keyframes mixedGlow { + 0%, 100% { opacity: 0.4; transform: scale(1); } + 50% { opacity: 0.85; transform: scale(1.01); } + } + .mixed-pending__head { + display: flex; + align-items: center; + gap: 8px; + flex-shrink: 0; + } + .mixed-pending__icon-wrap { + width: 32px; + height: 32px; + border-radius: 50%; + background: rgba(74, 144, 217, 0.25); + border: 1px solid rgba(74, 144, 217, 0.5); + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + flex-shrink: 0; + } + .mixed-pending__title { + font-size: 13px; + font-weight: 700; + color: #fff; + letter-spacing: 0.5px; + } + .mixed-pending__amount { + margin-left: auto; + font-size: 18px; + font-weight: 800; + color: #60a5fa; + font-family: Menlo, Consolas, monospace; + } + .mixed-pending__status { + padding: 2px 8px; + background: rgba(74, 144, 217, 0.2); + color: #60a5fa; + font-size: 10px; + font-weight: 700; + border-radius: 8px; + letter-spacing: 0.3px; + } + /* 第二步内嵌的扫码/收银引导 */ + .mixed-pending__content { + flex: 1; + display: flex; + align-items: center; + gap: 8px; + min-height: 0; + } + + /* 嵌入式扫码(混合支付内嵌,复用 .pay-online 同款卡片样式) */ + .inline-scan { + flex: 1; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; + min-height: 0; + } + /* 共用 .pay-online__card 系列样式,不再单独定义 */ + + /* 现金补差引导 */ + .cash-pending { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 4px; + text-align: center; + } + .cash-pending__icon { + font-size: 38px; + filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)); + } + .cash-pending__title { + font-size: 12px; + color: #fff; + font-weight: 700; + } + .cash-pending__hint { + font-size: 10px; + color: rgba(255, 255, 255, 0.65); + line-height: 1.4; + max-width: 200px; + } + + /* ============ 现金找零:单列卡片(图标 + 状态 + 信息条) ============ */ + .pay-cash-change { + flex: 1; + display: flex; + flex-direction: column; + gap: 8px; + align-items: center; + justify-content: center; + } + .pay-cash-change__icon-area { + width: 80px; + height: 80px; + border-radius: 50%; + background: radial-gradient(circle at 50% 50%, rgba(82, 196, 26, 0.3), rgba(82, 196, 26, 0.06) 70%); + border: 2px solid rgba(82, 196, 26, 0.5); + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 0 32px rgba(82, 196, 26, 0.28); + position: relative; + } + .pay-cash-change__icon-area::before { + content: ''; + position: absolute; + inset: -10px; + border-radius: 50%; + border: 1px solid rgba(82, 196, 26, 0.22); + animation: rippleBal 2s ease-out infinite; + } + .pay-cash-change__icon { font-size: 42px; } + .pay-cash-change__status { text-align: center; } + .pay-cash-change__title { + font-size: 16px; + font-weight: 700; + color: #fff; + letter-spacing: 1px; + margin-bottom: 3px; + } + .pay-cash-change__hint { + font-size: 11px; + color: rgba(255, 255, 255, 0.6); + } + .change-info { + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 1px; + background: linear-gradient(135deg, rgba(82, 196, 26, 0.15), rgba(10, 196, 168, 0.08)); + border: 1px solid rgba(82, 196, 26, 0.4); + border-radius: 8px; + overflow: hidden; + } + .change-info__cell { + padding: 7px 6px; + text-align: center; + background: rgba(14, 19, 38, 0.4); + display: flex; + flex-direction: column; + gap: 2px; + } + .change-info__label { + font-size: 10px; + color: rgba(255, 255, 255, 0.55); + } + .change-info__value { + font-size: 14px; + color: #fff; + font-weight: 700; + font-family: Menlo, Consolas, monospace; + } + .change-info__value--highlight { color: #4ade80; font-weight: 800; font-size: 16px; } @@ -643,7 +1154,6 @@ - @@ -653,12 +1163,11 @@ - - - - - + + + +
#类别 餐品名称单价取餐量热量金额单价(元/100g)取餐量(g)热量(kcal)金额(元)
@@ -668,10 +1177,15 @@
+
+ 餐线 + 餐线取餐 + 10 件 + +
- @@ -681,128 +1195,87 @@ - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - + + + + - - - - - - - - - - - - - - + + + + - - - - - - - - - - - - - - + + + + - - - - - + + + +
1餐线
清炒时蔬
¥4.00/100g150g45 kcal¥6.004.00150456.00
2餐线
米饭
¥1.60/100g250g360 kcal¥4.001.602503604.00
3餐线
红烧肉
¥12.00/100g180g486 kcal¥21.6012.0018048621.60
4餐线
鱼香肉丝
¥7.50/100g160g336 kcal¥12.007.5016033612.00
5餐线
冬瓜排骨汤
¥1.00/100g300g336 kcal¥3.001.003003363.00
6餐线
番茄炒蛋
¥5.50/100g140g196 kcal¥7.70
7档口
蒸南瓜
¥2.80/100g120g48 kcal¥3.36
8档口
凉拌黄瓜
¥3.20/100g100g32 kcal¥3.205.501401967.70
9餐线
麻婆豆腐
¥3.50/100g80g80 kcal¥2.80
10档口
拌三丝
¥2.50/100g70g35 kcal¥1.753.5080802.80
11餐线
蒸蛋羹
¥3.00/100g80g60 kcal¥2.40
12档口
卤豆干
¥2.80/100g60g50 kcal¥1.683.0080602.40
13餐线
紫菜蛋花汤
¥1.20/100g90g25 kcal¥1.081.2090251.08
- +
+ 档口 + 档口取餐 + 4 件 + +
- @@ -810,122 +1283,37 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + - - - - - - - - - - - - - - + + + + - - - - - - - - - - - - - - + + + + - - - - - - - - - - - - - - + + + +
1餐线
清炒时蔬
¥4.00/100g150g45 kcal¥6.00
2餐线
米饭
¥1.60/100g250g360 kcal¥4.00
3餐线
红烧肉
¥12.00/100g180g486 kcal¥21.60
4餐线
鱼香肉丝
¥7.50/100g160g336 kcal¥12.00
5餐线
冬瓜排骨汤
¥1.00/100g300g336 kcal¥3.00
6餐线
番茄炒蛋
¥5.50/100g140g196 kcal¥7.70
7档口
蒸南瓜
¥2.80/100g120g48 kcal¥3.362.80120483.36
8档口
凉拌黄瓜
¥3.20/100g100g32 kcal¥3.20
9餐线
麻婆豆腐
¥3.50/100g80g80 kcal¥2.803.20100323.20
10档口
拌三丝
¥2.50/100g70g35 kcal¥1.75
11餐线
蒸蛋羹
¥3.00/100g80g60 kcal¥2.402.5070351.75
12档口
卤豆干
¥2.80/100g60g50 kcal¥1.68
13餐线
紫菜蛋花汤
¥1.20/100g90g25 kcal¥1.082.8060501.68
@@ -937,27 +1325,25 @@
- - - - - - - + + + + + + -
合计 - 1780g + 1780 - 2089 kcal + 2089 ¥70.57 @@ -968,7 +1354,7 @@ - +
@@ -1002,7 +1388,6 @@
-
蛋白质 @@ -1013,7 +1398,6 @@
-
脂肪 @@ -1024,7 +1408,6 @@
-
碳水 @@ -1039,55 +1422,62 @@
- +
-
应付金额
-
¥65.57
-
原价 ¥70.57 · 优惠金额 ¥5.00
+
+
应付金额
+
¥65.57
+
原价 ¥70.57 · 优惠 ¥5.00
+
+
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
扫码支付
-
- 微信 - 支付宝 -
-
- 请用 微信/支付宝
- 扫描二维码完成支付 + +
+ + +
+ +
+ + +
+ + + +
+ +
+
+ 🎫 代金券 ¥10 + +
+ + +
+
请使用下方任一途径完成支付
+
+ +
+
+
@@ -1097,6 +1487,379 @@
diff --git a/other-module/canteen-device/checkout-device/user-03-paying.html b/other-module/canteen-device/checkout-device/user-03-paying.html deleted file mode 100644 index aa769ce..0000000 --- a/other-module/canteen-device/checkout-device/user-03-paying.html +++ /dev/null @@ -1,1146 +0,0 @@ - - - - - - 用户屏 - 支付引导 | 蚁熊智能餐养平台 - - - - -
- - -
- - - - - - - - -
- - -
-
- 应付金额 - ￥41.60 -
-
-
- - 等待支付中 -
-
- - -
- 🎫 代金券已应用 · 抵扣 ￥10.00 · 券号 MQ202608-A47H9X -
- - -
- -
- -
- - - - - diff --git a/other-module/canteen-device/checkout-device/user-04-success.html b/other-module/canteen-device/checkout-device/user-04-success.html index d0e078f..7ccddac 100644 --- a/other-module/canteen-device/checkout-device/user-04-success.html +++ b/other-module/canteen-device/checkout-device/user-04-success.html @@ -711,7 +711,7 @@ document.querySelectorAll('.demo-switcher__btn').forEach(function(btn) { btn.addEventListener('click', function() { switchDemo(btn.dataset.method); - /* 同步 URL 参数,便于复制链接分享(与 user-03-paying 风格一致) */ + /* 同步 URL 参数,便于复制链接分享 */ var url = new URL(window.location.href); url.searchParams.set('method', btn.dataset.method); window.history.replaceState({}, '', url.toString());