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
- 📱
-
-
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 @@