diff --git a/other-module/canteen-device/canteen-nutrition-scale/02-dish-display.html b/other-module/canteen-device/canteen-nutrition-scale/02-dish-display.html index 9cf354f..3559ddc 100644 --- a/other-module/canteen-device/canteen-nutrition-scale/02-dish-display.html +++ b/other-module/canteen-device/canteen-nutrition-scale/02-dish-display.html @@ -148,18 +148,6 @@ flex-direction: column; padding: 50px 80px 30px; } - /* 顶部副标题 */ - .normal-heading { - text-align: center; - margin-bottom: 24px; - } - .normal-heading__text { - font-size: 26px; - font-weight: 600; - color: #FF9800; - letter-spacing: 4px; - text-shadow: 0 0 20px rgba(255,152,0,0.2); - } /* 中部左右分栏内容 */ .normal-content { flex: 1; @@ -176,8 +164,8 @@ } /* 左侧大图 */ .normal-img-box { - width: 480px; - height: 360px; + width: 560px; + height: 420px; border-radius: 20px; overflow: hidden; flex-shrink: 0; @@ -295,84 +283,30 @@ display: none; } - /* ================ 视频模式布局（上信息条 + 下大视频） ================ */ + /* ================ 视频模式布局（左右分栏：左视频 + 右信息卡） ================ */ .video-mode { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; - flex-direction: column; - padding: 24px 40px 28px; - gap: 20px; + flex-direction: row; + align-items: center; + padding: 50px 80px 30px; + gap: 24px; } .main-area.mode-video .video-mode { display: flex; } - /* 顶部信息条（菜名 + 价格突出 + 标签） */ - .video-topbar { - display: flex; - align-items: center; - gap: 24px; - padding: 14px 24px; - background: rgba(255,255,255,0.04); - border: 1px solid rgba(255,255,255,0.08); - border-radius: 12px; - flex-shrink: 0; - } - .video-topbar__name { - font-size: 32px; - font-weight: 700; - color: #fff; - flex-shrink: 0; - } - /* 视频模式价格突出（青底胶囊，靠右） */ - .video-topbar__price { - display: flex; - align-items: baseline; - gap: 4px; - padding: 8px 18px; - background: linear-gradient(135deg, rgba(10,196,168,0.18), rgba(10,196,168,0.08)); - border: 1px solid rgba(10,196,168,0.4); - border-radius: 10px; - flex-shrink: 0; - margin-left: auto; - } - .video-topbar__price-symbol { - font-size: 18px; - font-weight: 600; - color: #0AC4A8; - } - .video-topbar__price-num { - font-size: 36px; - font-weight: 800; - color: #0AC4A8; - line-height: 1; - text-shadow: 0 0 12px rgba(10,196,168,0.4); - } - .video-topbar__price-unit { - font-size: 13px; - color: rgba(10,196,168,0.7); - margin-left: 2px; - } - /* 视频模式标签行 */ - .video-topbar__tags { - display: flex; - flex-wrap: wrap; - gap: 6px; - flex: 1; - min-width: 0; - } - - /* 视频播放区（尽量放大） */ + /* 视频播放区（左侧主体，尽量放大） */ .video-player { flex: 1; - width: 100%; - border-radius: 14px; + height: 420px; + border-radius: 20px; overflow: hidden; position: relative; background: #000; box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); - min-height: 0; + min-width: 0; } .video-player .video-bg { position: absolute; @@ -449,7 +383,7 @@
- ◀ 返回 Phone-192.168.1.165:5555 + ◀ 返回
@@ -468,11 +402,6 @@
- -
- 先识别 后取餐 -
-
@@ -503,22 +432,9 @@
点击菜品信息 → 进入取餐界面
- +
- -
- 宫保鸡丁 - -
- -
- ￥ - 5 - 元/100克 -
-
- - +
@@ -529,6 +445,27 @@ ⛶
+ + +
+
宫保鸡丁
+ +
+ ￥ + 5 + 元/100克 +
+ +
+ +
+ +
+ 热量 + 158.66 + 千卡/100克 +
+
@@ -622,7 +559,7 @@ var dishTags = dishData.tags || []; /* 常规模式数据填充 */ - document.getElementById('dishImg').innerHTML = dishFoodSVG(480, 360, dishData.colors); + document.getElementById('dishImg').innerHTML = dishFoodSVG(560, 420, dishData.colors); document.getElementById('dishName').textContent = dishData.name; document.getElementById('dishPrice').textContent = dishData.price; document.getElementById('dishKcal').textContent = dishData.kcal; @@ -631,6 +568,7 @@ /* 视频模式数据填充 */ document.getElementById('videoDishName').textContent = dishData.name; document.getElementById('videoDishPrice').textContent = dishData.price; + document.getElementById('videoDishKcal').textContent = dishData.kcal; document.getElementById('videoBg').innerHTML = videoBgSVG(dishData.colors); renderTags('videoTags', dishTags); diff --git a/other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup-dual.html b/other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup-dual.html index 6b895f0..e7f883f 100644 --- a/other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup-dual.html +++ b/other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup-dual.html @@ -63,6 +63,7 @@ flex-direction: column; gap: 12px; min-width: 0; + min-height: 0; } /* 设置按钮(浮于 pickup-section 头部) */ .settings-btn { @@ -106,7 +107,6 @@ font-size: 20px; flex-shrink: 0; } .info-card__body { flex: 1; min-width: 0; } - /* 用户信息卡:第一行 姓名 + 编号 同行 */ .info-card__line { display: flex; align-items: baseline; @@ -125,31 +125,7 @@ color: rgba(255,255,255,0.55); font-weight: 500; } - /* 第二行:推荐热量 + 范围值 */ - .info-card__heat { - display: flex; - align-items: baseline; - gap: 6px; - white-space: nowrap; - } - .info-card__label { - font-size: 11px; - color: rgba(255,255,255,0.45); - font-weight: 400; - } - .info-card__value { - font-size: 16px; - font-weight: 700; - color: #0AC4A8; - line-height: 1.1; - } - .info-card__unit { - font-size: 11px; - font-weight: 400; - color: rgba(10,196,168,0.7); - } - - /* ===== 餐品信息卡 ===== */ + /* 餐品信息卡 */ .info-card--dish { cursor: pointer; transition: background 0.2s; @@ -188,121 +164,106 @@ letter-spacing: 0; text-shadow: none; } - .info-card__dish-heat { - font-size: 11px; - color: rgba(255,255,255,0.5); - line-height: 1.3; - } - .info-card__dish-heat em { - font-style: normal; - color: #0AC4A8; - font-weight: 600; - } - /* ===== 当前餐次标题行(参考单屏 03 nutrition-header-row) ===== */ - .meal-header-row { + /* ===== 中列下半部：餐品展示（上方视频铺满 + 下方热量/标签区域） ===== */ + .dish-display { + flex: 1; + background: #000; + border-radius: 14px; + overflow: hidden; + display: flex; + flex-direction: column; + min-height: 0; + box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); + } + /* 上方视频区：占据剩余空间 */ + .dish-video { + flex: 1; + position: relative; + background: #000; + min-height: 0; + } + .dish-video .video-bg { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + } + .video-play-btn { + position: absolute; + top: 50%; left: 50%; + transform: translate(-50%, -50%); + width: 64px; height: 64px; + background: rgba(0,0,0,0.55); + border: 2px solid rgba(255,255,255,0.85); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: transform 0.2s, background 0.2s; + z-index: 2; + } + .video-play-btn:hover { + background: rgba(0,0,0,0.75); + transform: translate(-50%, -50%) scale(1.05); + } + .video-play-btn::after { + content: ''; + width: 0; height: 0; + border-left: 18px solid #fff; + border-top: 12px solid transparent; + border-bottom: 12px solid transparent; + margin-left: 5px; + } + .video-controls { + position: absolute; + bottom: 0; left: 0; right: 0; + padding: 10px 14px; + background: linear-gradient(to top, rgba(0,0,0,0.75), transparent); + display: flex; + align-items: center; + gap: 12px; + font-size: 12px; + color: rgba(255,255,255,0.85); + z-index: 2; + } + .video-progress { + flex: 1; + height: 4px; + background: rgba(255,255,255,0.2); + border-radius: 2px; + position: relative; + } + .video-progress::after { + content: ''; + position: absolute; + left: 0; top: 0; + width: 35%; + height: 100%; + background: #FF9800; + border-radius: 2px; + } + .video-time { + font-size: 12px; + letter-spacing: 0.5px; + white-space: nowrap; + } + /* 下方信息区：热量 + 标签 */ + .dish-meta { + flex-shrink: 0; + padding: 14px 20px; + background: #1a2b4a; display: flex; align-items: center; justify-content: space-between; - background: #1a2b4a; - border-radius: 10px; - padding: 12px 20px; - flex-shrink: 0; - } - .meal-header-row .n-title { - font-size: 16px; - font-weight: 600; - color: #fff; - } - .meal-header-row .n-title-hint { - font-size: 12px; - font-weight: 400; - color: #FFB236; - margin-left: 4px; - } - .meal-header-row .n-meal { - font-size: 13px; - color: rgba(255,255,255,0.5); - } - .meal-header-row .n-time { - font-size: 12px; - color: rgba(255,255,255,0.35); - margin-left: 12px; - } - - /* ===== 中列下半部:餐品介绍(替代 nutrition-core) ===== */ - .dish-display { - flex: 1; - background: linear-gradient(180deg, #1a2b4a 0%, #142038 100%); - border-radius: 14px; - display: flex; - align-items: center; - justify-content: center; - padding: 24px; - min-height: 0; - } - .dish-info { - display: flex; - align-items: center; - justify-content: center; - gap: 32px; - width: 100%; - } - .dish-img-box { - width: 320px; height: 320px; - border-radius: 20px; - overflow: hidden; - flex-shrink: 0; - box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); - } - .dish-img-box svg { width: 100%; height: 100%; } - .dish-info-text { - display: flex; - flex-direction: column; gap: 16px; - flex: 1; - min-width: 0; - max-width: 420px; } - .dish-name-row { - font-size: 38px; - font-weight: 700; - color: #fff; - line-height: 1.2; - } - /* 价格胶囊(青色) */ - .dish-price-pill { - display: flex; - align-items: baseline; - gap: 6px; - padding: 10px 20px; - background: linear-gradient(135deg, rgba(10,196,168,0.18), rgba(10,196,168,0.06)); - border: 1px solid rgba(10,196,168,0.4); - border-radius: 12px; - width: fit-content; - } - .dish-price-pill__symbol { - font-size: 20px; - font-weight: 600; - color: #0AC4A8; - } - .dish-price-pill__num { - font-size: 44px; - font-weight: 800; - color: #0AC4A8; - line-height: 1; - text-shadow: 0 0 16px rgba(10,196,168,0.35); - } - .dish-price-pill__unit { - font-size: 14px; - color: rgba(10,196,168,0.8); - font-weight: 400; - } - /* 餐品标签 chips */ .dish-tags { display: flex; flex-wrap: wrap; gap: 8px; + flex: 1; + min-width: 0; } .dish-tag { display: inline-flex; @@ -326,29 +287,28 @@ background: rgba(91,155,248,0.12); border-color: rgba(91,155,248,0.25); } - .dish-divider { - width: 100%; - height: 1px; - background: rgba(255,255,255,0.1); - } .dish-cal-row { display: flex; align-items: baseline; gap: 8px; + flex-shrink: 0; + padding: 6px 14px; + background: rgba(0,0,0,0.25); + border-radius: 8px; } .dish-cal-row__label { font-size: 13px; - color: rgba(255,255,255,0.5); + color: rgba(255,255,255,0.6); letter-spacing: 0.5px; } .dish-cal-row__num { - font-size: 26px; + font-size: 24px; font-weight: 700; color: #fff; } .dish-cal-row__unit { font-size: 12px; - color: rgba(255,255,255,0.5); + color: rgba(255,255,255,0.55); } /* ===== 右列:取餐记录(通顶) ===== */ @@ -391,13 +351,42 @@ border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } - .pickup-list { flex: 1; overflow-y: auto; padding: 0; } + .pickup-list { flex: 1; overflow: hidden; padding: 0; } .pickup-row { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 10px 0; font-size: 13px; color: rgba(255,255,255,0.7); border-bottom: 1px solid rgba(255,255,255,0.04); } + /* 当前正在取餐的餐品行：橙色背景胶囊 + 左侧色条 + 文字加粗 */ + .pickup-row--active { + position: relative; + padding: 12px 12px 12px 16px; + margin: 4px -4px; + background: linear-gradient(135deg, rgba(255,178,54,0.22) 0%, rgba(255,140,40,0.32) 100%); + border: 1px solid rgba(255,178,54,0.55); + border-radius: 8px; + box-shadow: 0 4px 14px rgba(255,140,40,0.22); + border-bottom: 1px solid rgba(255,178,54,0.55); + } + .pickup-row--active::before { + content: ''; + position: absolute; + left: 0; top: 6px; bottom: 6px; + width: 3px; + background: #FFB236; + border-radius: 2px; + box-shadow: 0 0 8px rgba(255,178,54,0.6); + } + .pickup-row--active > span { + color: #fff; + font-weight: 700; + } + .pickup-row--active > span:nth-child(2), + .pickup-row--active > span:nth-child(3) { + color: #FFB236; + text-shadow: 0 1px 4px rgba(255,140,40,0.4); + } /* 合计区:橙色胶囊(沿用单屏 03 样式) */ .pickup-footer { display: flex; @@ -530,7 +519,7 @@ 大屏 · 1280×720
- +
@@ -555,37 +544,30 @@
- -
- 📊 本餐次摄入（推荐热量 580~720 千卡） - - 当前餐次：早餐 - 06:00 ~ 10:19 - -
- - +
-
-
-
-
宫保鸡丁
-
- ￥ - 5 - 元/100克 -
-
- 高蛋白 - 低芥酸 - 营养均衡 -
-
-
- 热量 - 158.66 - 千卡/100克 -
+ +
+
+
+
+ ⏯ +
+ 01:23 / 03:45 + ⛶ +
+
+ +
+
+ 高蛋白 + 低芥酸 + 营养均衡 +
+
+ 热量 + 158.66 + 千卡/100克
@@ -605,7 +587,7 @@ 小计(元)
-
+
宫保鸡丁1869.30
@@ -741,21 +723,29 @@ window.location.href = '01-meal-start.html'; }); - /* ===== 餐品占位图(SVG) ===== */ - function dishFoodSVG(w, h, colors) { - var id = 'dg'; - return '' + + /* ===== 视频背景 SVG（按菜品色系生成展示画面） ===== */ + function videoBgSVG(colors) { + var w = 1280, h = 720; + var id = 'vidGrad'; + return '' + '' + '' + '' + '' + '' + - '' + - '' + - '' + + '' + + '' + + '餐品制作工艺展示' + ''; } - document.getElementById('dishImg').innerHTML = dishFoodSVG(320, 320, ['#C87030', '#E8A040', '#D08028']); + document.getElementById('videoBg').innerHTML = videoBgSVG(['#C87030', '#E8A040', '#D08028']); + + /* ===== 视频播放按钮（演示用，点击切换播放/暂停图标） ===== */ + var videoPlaying = false; + document.getElementById('videoPlayBtn').addEventListener('click', function() { + videoPlaying = !videoPlaying; + this.style.opacity = videoPlaying ? '0' : '1'; + }); diff --git a/other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup.html b/other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup.html index 874ed9e..59faf10 100644 --- a/other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup.html +++ b/other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup.html @@ -30,6 +30,34 @@ display: flex; flex-direction: column; } + /* 屏幕边缘报警层(热量超标触发):全屏红色边框跑马灯 + 外发光脉冲 */ + .device-frame--alarm::after { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + border-radius: 24px; + border: 4px solid rgba(255,40,40,0.85); + box-shadow: + inset 0 0 36px rgba(255,40,40,0.55), + 0 0 28px rgba(255,40,40,0.7); + animation: screenEdgeAlarm 1s ease-in-out infinite; + z-index: 50; + } + @keyframes screenEdgeAlarm { + 0%, 100% { + border-color: rgba(255,40,40,0.55); + box-shadow: + inset 0 0 18px rgba(255,40,40,0.3), + 0 0 14px rgba(255,40,40,0.35); + } + 50% { + border-color: rgba(255,40,40,1); + box-shadow: + inset 0 0 48px rgba(255,40,40,0.75), + 0 0 36px rgba(255,40,40,0.9); + } + } /* ---- 主内容区：两列 ---- */ .main-area { @@ -162,52 +190,37 @@ font-weight: 600; } - /* 营养标题行 */ - .nutrition-header-row { - display: flex; - align-items: center; - justify-content: space-between; - background: #1a2b4a; - border-radius: 10px; - padding: 12px 20px; - flex-shrink: 0; - } - .nutrition-header-row .n-title { - font-size: 16px; - font-weight: 600; - color: #fff; - } - /* 标题行内的推荐热量提示:小字号+淡青色,作为辅助信息弱化视觉权重 */ - .nutrition-header-row .n-title-hint { - font-size: 12px; - font-weight: 400; - color: #0AC4A8; - margin-left: 4px; - } - .nutrition-header-row .n-meal { - font-size: 13px; - color: rgba(255,255,255,0.5); - } - .nutrition-header-row .n-time { - font-size: 12px; - color: rgba(255,255,255,0.35); - margin-left: 12px; - } - - /* 圆柱形营养展示区 */ + /* 圆柱形营养展示区:纵向布局,柱组占满主体,底部居中放推荐热量提示 */ .nutrition-core { flex: 1; background: linear-gradient(180deg, #1a2b4a 0%, #142038 100%); border-radius: 14px; display: flex; - align-items: flex-end; - justify-content: center; - padding: 40px 40px 32px; - gap: 32px; + flex-direction: column; + align-items: stretch; + justify-content: space-between; + padding: 24px 40px 18px; position: relative; overflow: hidden; } + /* 底部居中的推荐热量提示横条(独立于柱组之外,不影响柱子基线对齐) */ + .cyl-recommend { + font-size: 13px; + color: #0AC4A8; + text-align: center; + line-height: 1.3; + letter-spacing: 0.5px; + white-space: nowrap; + flex-shrink: 0; + padding-top: 12px; + } + /* 超标时提示色变红加粗,与屏幕边缘报警呼应 */ + .nutrition-core--over .cyl-recommend { + color: #ff5a5a; + font-weight: 700; + } + /* 圆柱组 */ .cyl-group { display: flex; @@ -215,7 +228,9 @@ justify-content: center; gap: 32px; width: 100%; - padding-bottom: 16px; + flex: 1; + align-self: center; + padding-bottom: 8px; } /* 单个圆柱 */ @@ -224,6 +239,11 @@ flex-direction: column; align-items: center; gap: 8px; + position: relative; + } + /* 超标语义:数值变红(不闪烁,闪烁已改为屏幕边缘报警) */ + .cyl-item--over .cyl-value { + color: #ff5a5a; } /* 圆柱数值（柱顶） */ @@ -327,6 +347,41 @@ font-size: 13px; color: rgba(255,255,255,0.7); border-bottom: 1px solid rgba(255,255,255,0.04); + position: relative; + } + /* 正在取餐的餐品行:差异化高亮 + 呼吸光晕 + 左侧高亮条 */ + .pickup-row--active { + background: linear-gradient(90deg, + rgba(255,178,54,0.22) 0%, + rgba(255,178,54,0.08) 60%, + transparent 100%); + border-bottom-color: rgba(255,178,54,0.25); + border-radius: 6px; + animation: pickupPulse 1.8s ease-in-out infinite; + } + .pickup-row--active::before { + content: ''; + position: absolute; + left: -16px; + top: 6px; + bottom: 6px; + width: 4px; + border-radius: 2px; + background: #FFB236; + box-shadow: 0 0 8px rgba(255,178,54,0.8); + } + .pickup-row--active > span:first-child { + color: #fff; + font-weight: 700; + } + .pickup-row--active > span:nth-child(2), + .pickup-row--active > span:nth-child(3) { + color: #FFB236; + font-weight: 600; + } + @keyframes pickupPulse { + 0%, 100% { box-shadow: inset 0 0 0 0 rgba(255,178,54,0); } + 50% { box-shadow: inset 0 0 18px 0 rgba(255,178,54,0.25); } } /* 合计区：单行排布,合计/重量/金额一行,金额最大化 */ .pickup-footer { @@ -401,7 +456,7 @@ -
+
@@ -438,22 +493,13 @@
- -
- 📊 本餐次摄入（推荐热量 2000~2500 千卡） - - 当前餐次：早餐 - 06:00 ~ 10:19 - -
- -
+
- -
-
1070千卡
+ +
+
2780千卡
@@ -532,6 +578,8 @@
+ +
推荐热量 2000~2500 千卡
@@ -551,7 +599,7 @@ 小计(元)
-
+
宫保鸡丁 186 9.30 diff --git a/other-module/canteen-device/canteen-nutrition-scale/doc/CHANGELOG.md b/other-module/canteen-device/canteen-nutrition-scale/doc/CHANGELOG.md index 82029e5..6d2c1d6 100644 --- a/other-module/canteen-device/canteen-nutrition-scale/doc/CHANGELOG.md +++ b/other-module/canteen-device/canteen-nutrition-scale/doc/CHANGELOG.md @@ -1,5 +1,61 @@ # 餐线营养秤 - 变更记录 +## [2026-08-07] fix: 取餐页报警层移至屏幕边缘 + 推荐热量居中 + 取消"取餐中"标签 + +### 调整 +- **热量超标报警层从柱身移到屏幕边缘**（`03-meal-pickup.html`）： + - 移除原 `.cyl-item--over` 柱身跑马灯（伪元素斜向扫动光带 + 外发光呼吸 + 数值脉冲三处动画全部删除） + - 改为 `.device-frame--alarm` 触发 `.device-frame::after`：PAD 外壳内侧 4px 红色边框 + 内外双重红色 `box-shadow` 发光，`screenEdgeAlarm` 1s `ease-in-out` 循环（边框颜色与发光强度脉冲） + - 柱身仅保留"超标语义"轻量变化：热量柱数值变红（不闪烁），与屏幕边缘报警呼应 +- **推荐热量提示居中显示在底部**： + - `.cyl-recommend` 从原热量柱列内部移出，改放 `.nutrition-core` 容器底部，作为独立横条居中显示 + - `.nutrition-core` 改为纵向 flex（`flex-direction: column` + `justify-content: space-between`）：上方 `.cyl-group` 占满主体高度并 `align-self: center`，下方 `.cyl-recommend` 横条贴底 + - 关键：所有柱子使用 `align-items: flex-end` 底对齐，移除原"附在热量柱下方"的位置后柱子们站在同一基线，避免高低不平 + - 超标时 `.nutrition-core--over` 让提示色由淡青变红加粗 +- **右侧取餐列表取消"取餐中"胶囊标签**：删除 `.pickup-row--active > span:first-child::after` 段，保留其余差异化高亮（左侧 4px 橙色光条 + 橙色渐变背景 + 内部呼吸光晕 + 餐名/数值加粗变橙） + +--- + +## [2026-08-07] refactor: 取餐页（单屏版）删除中部营养标题行 + 热量超标跑马灯 + 取餐行差异化 + +### 调整 +- **删除中部「本餐次摄入」营养标题行**（`03-meal-pickup.html`）：移除 `.nutrition-header-row` 整块及相关 CSS（标题、推荐热量副文案、当前餐次、时间段），营养圆柱区直接占据剩余空间 +- **推荐热量提示移至热量柱下方**：新增 `.cyl-recommend`（11px 淡青色），固定文案"推荐 2000~2500 千卡"，紧跟"热量"标签 +- **热量超标红色跑马灯闪烁**：演示值改为 2780 千卡（>2500 上限），`.cyl-item--over` 修饰类触发： + - `::before` 伪元素叠加斜向扫动光带（`cylOverSweep` 1.4s linear infinite）+ 红色外发光阴影 + - `.cyl-value` 文字变红 + 透明度脉冲（`cylValueBlink` 1s ease-in-out infinite） + - 同步把 `.cyl-recommend` 提示色切换为红色加粗，与跑马灯呼应 +- **右侧取餐列表差异化"正在取餐"餐品**：新增 `.pickup-row--active` 修饰类，演示首行（宫保鸡丁）标记为正在取餐 + - 左侧 4px 亮橙色高亮条（带橙色发光阴影，伪元素定位到行容器外 `-16px`） + - 行背景橙色横向渐变 + 内部呼吸光晕（`pickupPulse` 1.8s ease-in-out infinite） + - 餐品名加粗变白，行尾追加"取餐中"橙色胶囊小标签；重量/小计变橙色加粗 + +--- + +## [2026-08-07] refactor: 双屏取餐页大屏中部删长条 + 餐品区改视频展示 + +### 调整 +- **删除大屏中部「本餐次摄入」长条**（`03-meal-pickup-dual.html`）：移除 `.meal-header-row` 及其关联 CSS（标题、推荐热量副文案、当前餐次、时间段），保留顶部「用户信息 + 餐品信息」横排不变 +- **餐品展示区改为视频铺满**： + - `.dish-display` 重构为纵向布局：上方 `.dish-video` 视频铺满剩余空间（含视频背景、播放按钮、进度条、时间、全屏控件），下方 `.dish-meta` 信息条展示「餐品标签 + 每100g 热量」 + - 移除原 `.dish-info` 左右分栏结构（菜名/价格等信息已在顶部餐品信息卡展示，避免重复） + - 移除上一版引入的演示切换按钮（常规/视频），固定为视频展示 +- **右侧取餐列表取消滚动条**：`.pickup-list` 的 `overflow-y: auto` 改为 `overflow: hidden` +- **右侧取餐记录高亮当前餐品**（保留上一版改动）：`.pickup-row--active` 修饰类，橙色背景胶囊 + 左侧 3px 色条 + 文字加粗，首行宫保鸡丁标记为正在取餐 + +--- + +## [2026-08-07] refactor: 菜品展示页常规模式放大菜品图 + 视频模式改左右布局 + +### 调整 +- **常规模式菜品图放大**（`02-dish-display.html`）：左侧 `.normal-img-box` 由 480×360 调整为 560×420，同步更新 SVG 生成尺寸 +- **视频模式改左右布局**：原「上信息条 + 下大视频」纵向布局调整为「左视频 + 右信息卡」横向布局 + - 移除原 `.video-topbar` 顶部信息条及相关 CSS + - 右侧复用常规模式 `.normal-info` 信息卡结构（菜名 / 价格 / 标签 / 分隔线 / 热量），保持两模式右侧视觉一致 + - JS 数据填充同步覆盖视频模式热量字段（`#videoDishKcal`） + +--- + ## [2026-08-05] feat: 菜品展示页新增视频演示模式 ### 新增 diff --git a/other-module/canteen-device/checkout-device/doc/CHANGELOG.md b/other-module/canteen-device/checkout-device/doc/CHANGELOG.md index b3baa81..e9ac641 100644 --- a/other-module/canteen-device/checkout-device/doc/CHANGELOG.md +++ b/other-module/canteen-device/checkout-device/doc/CHANGELOG.md @@ -1,5 +1,28 @@ # 结算设备 CHANGELOG +## 2026-08-07 | U02 副屏取餐明细三栏重构 + +### 变更 +- `user-02-checkout-sync.html` 全面重构,优化副屏结算信息密度与视觉聚焦 + - **顶部**:删除原「您的取餐明细」标题,改为全宽用户信息条(头像+姓名/工号+部门·餐线+会员等级+实时时间) + - **左侧餐品明细**: + - 改用 `` 表格化布局(`table-layout: fixed`),彻底解决原 grid 卡片对齐混乱问题 + - 新增「热量(kcal)」列,与表头/合计行严格对齐 + - 列表区域使用 CSS animation 实现**垂直无缝循环滚动**(18s,首尾重复一份数据,hover 暂停) + - 合计行固定在列表底部(`flex-shrink: 0`),列宽与表头完全对齐:合计 / 总重量 1040g / 总热量 1563 kcal / 总金额 ¥46.60 + - **右侧三段式纵向布局**(删除原顶部用户信息,改由顶部条承担): + 1. 营养摄入卡(压缩版):热量环形 + 三大营养素横条;**三大营养素改为显示 NRV%(营养素参考值占比),不再显示克数**;删除原底部「💡 搭配均衡...」提示文字 + 2. 订单金额(中间,极醒目):字号提升至 60px,加粗发光阴影,强调应付金额 ¥41.60 + 3. 支付二维码(底部):内联简化版二维码 SVG + 微信/支付宝标签 + 扫码提示 + +## 2026-08-07 | 恢复副屏支付引导页(需求回退) + +### 变更 +- 恢复 `user-03-paying.html`(用户屏 U03「支付引导」页面,需求回滚) +- 重命名 `user-03-success.html` → `user-04-success.html`,支付成功退回 U04 序号 +- `index.html` 用户屏区恢复 4 张卡片:U01 待机 / U02 取餐明细 / U03 支付引导 / U04 支付成功 +- 注:本次仅回退「副屏支付引导删除」部分,收银员屏「小票预览」改名(2026-08-07 上一次提交)保持不变 + ## 2026-08-07 | 副屏支付引导删除 + 收银员屏小票预览改名 ### 变更 diff --git a/other-module/canteen-device/checkout-device/index.html b/other-module/canteen-device/checkout-device/index.html index 7d79acd..e93d052 100644 --- a/other-module/canteen-device/checkout-device/index.html +++ b/other-module/canteen-device/checkout-device/index.html @@ -217,8 +217,16 @@
同步商品列表 + 营养摘要
- + 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 4a56a1f..5f65a12 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,214 +29,22 @@ flex-direction: column; } - /* 顶部标题区 */ + /* 顶部用户信息条(全宽) */ .header { - padding: 20px 36px; - background: rgba(26, 43, 74, 0.5); - border-bottom: 1px solid rgba(255, 255, 255, 0.06); - display: flex; - justify-content: space-between; - align-items: center; - flex-shrink: 0; - } - .header__title { - font-size: 22px; - font-weight: 700; - color: #fff; + padding: 14px 28px; + 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; align-items: center; - gap: 10px; - } - .header__count { - padding: 3px 12px; - background: rgba(74, 144, 217, 0.2); - border: 1px solid rgba(74, 144, 217, 0.4); - border-radius: 14px; - font-size: 13px; - color: #60a5fa; - } - .header__time { - font-size: 13px; - color: rgba(255, 255, 255, 0.55); - font-family: Menlo, Consolas, monospace; - } - - /* 主体:左右两列 */ - .body { - flex: 1; - display: grid; - grid-template-columns: 1fr 360px; - overflow: hidden; - } - - /* 左:商品列表 */ - .items-area { - padding: 14px 28px 18px; - overflow-y: auto; - scrollbar-width: none; - display: flex; - flex-direction: column; - } - .items-area::-webkit-scrollbar { display: none; } - - .zone-header { - font-size: 13px; - color: rgba(255, 255, 255, 0.6); - font-weight: 600; - letter-spacing: 0.5px; - padding: 6px 0 8px; - border-bottom: 1px dashed rgba(255, 255, 255, 0.1); - margin-bottom: 6px; - margin-top: 4px; - display: flex; - align-items: center; - gap: 8px; - } - .zone-header__count { - padding: 1px 8px; - background: rgba(74, 144, 217, 0.18); - border-radius: 10px; - font-size: 11px; - color: #60a5fa; - font-weight: 500; - } - - .item-card { - display: grid; - grid-template-columns: 24px auto 1fr auto; - gap: 10px; - padding: 8px 14px; - background: rgba(26, 43, 74, 0.35); - border: 1px solid rgba(255, 255, 255, 0.04); - border-radius: 8px; - margin-bottom: 4px; - align-items: center; - animation: slideIn 0.4s ease; - } - @keyframes slideIn { - from { opacity: 0; transform: translateX(-20px); } - to { opacity: 1; transform: translateX(0); } - } - .item-card__seq { - width: 22px; - height: 22px; - border-radius: 50%; - background: rgba(74, 144, 217, 0.18); - border: 1px solid rgba(74, 144, 217, 0.35); - color: #60a5fa; - font-size: 11px; - font-weight: 700; - font-family: Menlo, Consolas, monospace; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - } - .item-card__info { - display: flex; - align-items: baseline; - gap: 8px; - min-width: 0; - } - .item-card__name { - font-size: 15px; - color: #fff; - font-weight: 600; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .item-card__unit-price { - font-size: 12px; - color: rgba(255, 255, 255, 0.55); - font-family: Menlo, Consolas, monospace; - flex-shrink: 0; - } - .item-card__weight { - font-size: 12px; - color: #0AC4A8; - font-family: Menlo, Consolas, monospace; - padding: 2px 10px; - background: rgba(10, 196, 168, 0.12); - border-radius: 10px; - white-space: nowrap; - text-align: center; - min-width: 76px; - justify-self: center; - } - .item-card__price { - font-size: 16px; - color: #0AC4A8; - font-weight: 700; - font-family: Menlo, Consolas, monospace; - white-space: nowrap; - } - - /* 列表底部统一小计条 */ - .subtotal-bar { - margin-top: 10px; - padding: 12px 16px; - background: linear-gradient(90deg, rgba(10, 196, 168, 0.12), rgba(74, 144, 217, 0.08)); - border: 1px solid rgba(10, 196, 168, 0.3); - border-radius: 10px; - display: flex; - justify-content: space-between; - align-items: center; - } - - /* 表头 */ - .table-head { - display: grid; - grid-template-columns: 24px auto 1fr auto; - gap: 10px; - padding: 6px 14px; - font-size: 11px; - color: rgba(255, 255, 255, 0.4); - letter-spacing: 1px; - font-weight: 500; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - margin-bottom: 4px; - } - .table-head__name { text-align: left; } - .table-head__weight { text-align: center; justify-self: center; } - .table-head__price { text-align: right; } - .subtotal-bar__count { - font-size: 13px; - color: rgba(255, 255, 255, 0.7); - } - .subtotal-bar__count strong { - color: #fff; - font-size: 15px; - font-family: Menlo, Consolas, monospace; - margin: 0 2px; - } - .subtotal-bar__amount { - font-size: 22px; - font-weight: 700; - color: #0AC4A8; - font-family: Menlo, Consolas, monospace; - } - - /* 右:用户 + 金额 + 营养 */ - .side-area { - padding: 16px 20px; - background: rgba(26, 43, 74, 0.3); - border-left: 1px solid rgba(255, 255, 255, 0.06); - display: flex; - flex-direction: column; gap: 14px; - overflow: hidden; + flex-shrink: 0; } - - /* 用户信息卡 */ .user-card { display: flex; align-items: center; gap: 12px; - padding: 12px 14px; - background: linear-gradient(90deg, rgba(74, 144, 217, 0.15), rgba(10, 196, 168, 0.06)); - border: 1px solid rgba(74, 144, 217, 0.3); - border-radius: 12px; + flex: 1; + min-width: 0; } .user-card__avatar { width: 44px; @@ -295,31 +103,233 @@ font-weight: 500; margin-top: 1px; } - .section-label { - font-size: 12px; - color: rgba(255, 255, 255, 0.5); - letter-spacing: 1px; - display: flex; - align-items: center; - gap: 6px; - } - .section-label::before { - content: ""; - width: 3px; - height: 11px; - background: #4a90d9; - border-radius: 2px; + .header__time { + font-size: 13px; + color: rgba(255, 255, 255, 0.55); + font-family: Menlo, Consolas, monospace; + flex-shrink: 0; + padding-left: 16px; + border-left: 1px solid rgba(255, 255, 255, 0.1); } - /* 营养达标卡片 */ - .nutrition-card { + /* 主体:左右两列 */ + .body { flex: 1; + display: grid; + grid-template-columns: 1fr 360px; + overflow: hidden; + } + + /* 左:餐品明细表格区 */ + .items-area { + padding: 12px 24px 14px; + display: flex; + flex-direction: column; + overflow: hidden; + } + .items-area__title { + font-size: 13px; + color: rgba(255, 255, 255, 0.7); + font-weight: 600; + letter-spacing: 0.5px; + padding: 4px 0 8px; + display: flex; + align-items: center; + gap: 8px; + } + .items-area__title-count { + padding: 1px 8px; + background: rgba(74, 144, 217, 0.18); + border-radius: 10px; + font-size: 11px; + color: #60a5fa; + font-weight: 500; + } + + /* 餐品明细表格 */ + .items-table { + width: 100%; + border-collapse: collapse; + table-layout: fixed; + } + .items-table th, + .items-table td { + padding: 9px 8px; + text-align: left; + vertical-align: middle; + } + /* 列宽:序号 / 餐品名称+单价 / 取餐量 / 热量 / 金额 */ + .items-table col.col-seq { width: 40px; } + .items-table col.col-name { width: auto; } + .items-table col.col-weight { width: 100px; } + .items-table col.col-cal { width: 110px; } + .items-table col.col-price { width: 92px; } + + .items-table thead th { + position: sticky; + top: 0; + z-index: 2; + background: rgba(14, 19, 38, 0.95); + font-size: 11px; + color: rgba(255, 255, 255, 0.5); + letter-spacing: 1px; + 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-price-h { text-align: right; } + + .items-table tbody 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; + border-radius: 50%; + background: rgba(74, 144, 217, 0.18); + border: 1px solid rgba(74, 144, 217, 0.35); + color: #60a5fa; + font-size: 11px; + font-weight: 700; + font-family: Menlo, Consolas, monospace; + display: inline-flex; + align-items: center; + justify-content: center; + } + .cell-name { + font-size: 15px; + color: #fff; + font-weight: 600; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .cell-name small { + display: block; + font-size: 11px; + color: rgba(255, 255, 255, 0.5); + font-family: Menlo, Consolas, monospace; + font-weight: 400; + margin-top: 2px; + } + .cell-weight, .cell-cal { + text-align: center; + 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; + } + + /* 表格滚动容器 */ + .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); + background: linear-gradient(90deg, rgba(10, 196, 168, 0.14), rgba(74, 144, 217, 0.08)); + border-radius: 10px; + flex-shrink: 0; + } + .items-footer table { + width: 100%; + border-collapse: collapse; + table-layout: fixed; + } + .items-footer td { + padding: 12px 8px; + 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-name-f { width: auto; } + .items-footer td.col-weight-f { width: 100px; text-align: center; } + .items-footer td.col-cal-f { width: 110px; text-align: center; } + .items-footer td.col-price-f { width: 92px; text-align: right; } + .footer-label { + font-size: 13px; + color: rgba(255, 255, 255, 0.7); + letter-spacing: 1px; + font-weight: 600; + } + .footer-value { + font-size: 15px; + color: #fff; + font-weight: 700; + font-family: Menlo, Consolas, monospace; + } + .footer-value--cal { color: #fbbf24; } + .footer-amount { + font-size: 22px; + font-weight: 700; + color: #0AC4A8; + font-family: Menlo, Consolas, monospace; + } + + /* 右:营养 + 金额 + 二维码 */ + .side-area { + padding: 14px 18px; + background: rgba(26, 43, 74, 0.3); + border-left: 1px solid rgba(255, 255, 255, 0.06); + display: flex; + flex-direction: column; + gap: 12px; + overflow: hidden; + } + + /* 营养摄入卡(压缩版) */ + .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; display: flex; flex-direction: column; + flex-shrink: 0; } .nutrition-head { display: flex; @@ -358,17 +368,16 @@ margin-top: 1px; } - /* 热量环形 + 三大营养条 */ .nutrition-main { display: grid; - grid-template-columns: 88px 1fr; + grid-template-columns: 84px 1fr; gap: 12px; align-items: center; } .calorie-ring { position: relative; - width: 88px; - height: 88px; + width: 84px; + height: 84px; } .calorie-ring__svg { width: 100%; @@ -403,7 +412,7 @@ font-weight: 600; } - /* 三大营养素横条 */ + /* 三大营养素 NRV% 横条(不显示克数,只显示 NRV%) */ .macro-list { display: flex; flex-direction: column; @@ -430,12 +439,12 @@ .macro-row__value { color: #fff; font-family: Menlo, Consolas, monospace; - font-weight: 600; + font-weight: 700; } .macro-row__value small { color: rgba(255, 255, 255, 0.4); - font-weight: 400; - font-size: 10px; + font-weight: 500; + font-size: 9px; margin-left: 2px; } .macro-bar { @@ -460,59 +469,113 @@ border-radius: 3px; } - /* 营养结论 */ - .nutrition-conclusion { - margin-top: 10px; - padding: 7px 10px; - background: rgba(251, 191, 36, 0.1); - border-left: 2px solid #fbbf24; - border-radius: 4px; - font-size: 11px; - color: rgba(255, 255, 255, 0.78); - line-height: 1.5; - } - - /* 应付金额(突出展示) */ + /* 订单金额(中间,非常醒目) */ .amount-card { - background: linear-gradient(135deg, rgba(10, 196, 168, 0.18), rgba(0, 0, 0, 0.35)); - border: 1.5px solid rgba(10, 196, 168, 0.55); + background: linear-gradient(135deg, rgba(10, 196, 168, 0.22), rgba(0, 0, 0, 0.4)); + border: 2px solid rgba(10, 196, 168, 0.65); border-radius: 14px; - padding: 14px 16px; + padding: 16px; text-align: center; - box-shadow: 0 6px 20px rgba(10, 196, 168, 0.18); + box-shadow: 0 6px 24px rgba(10, 196, 168, 0.25), inset 0 0 0 1px rgba(10, 196, 168, 0.15); + flex-shrink: 0; } .amount-card__label { font-size: 14px; color: rgba(255, 255, 255, 0.85); font-weight: 600; - letter-spacing: 1px; + letter-spacing: 2px; margin-bottom: 4px; } .amount-card__value { - font-size: 52px; + font-size: 60px; font-weight: 800; color: #0AC4A8; font-family: Menlo, Consolas, monospace; line-height: 1.05; - text-shadow: 0 0 24px rgba(10, 196, 168, 0.4); + text-shadow: 0 0 32px rgba(10, 196, 168, 0.55), 0 0 8px rgba(10, 196, 168, 0.8); + letter-spacing: 1px; } .amount-card__sub { font-size: 12px; color: rgba(255, 255, 255, 0.55); - margin-top: 4px; + margin-top: 6px; } .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: 12px 14px; + display: flex; + align-items: center; + gap: 14px; + flex: 1; + min-height: 0; + } + .qr-card__code { + width: 120px; + height: 120px; + background: #fff; + border-radius: 8px; + padding: 6px; + 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; + display: flex; + flex-direction: column; + gap: 6px; + } + .qr-card__title { + font-size: 14px; + color: #fff; + font-weight: 700; + } + .qr-card__methods { + display: flex; + gap: 6px; + flex-wrap: wrap; + } + .qr-card__method { + padding: 3px 8px; + border-radius: 4px; + font-size: 11px; + 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; + } + .qr-card__hint strong { color: #fbbf24; }
- +
-
- 🛍️ 您的取餐明细 - 共 5 件 +
+
👤‍🌾
+
+
+ 张*明 + EMP002346 +
+ 研发中心 · 二荤餐线 +
+
+ 金牌会员 + LV5 +
2026-08-06 12:30:45
@@ -520,111 +583,175 @@
- +
- -
- # - 餐品名称 / 单价 - 取餐量 - 金额 +
+ 🛍️ 餐品明细 + 共 5 件
- -
- 🥜 餐线菜品 - 2 件 -
-
-
1
-
- 清炒时蔬 - ¥4.00/100g + +
+ + + + + + + + + + + + + + + + +
#餐品名称 / 单价取餐量热量金额
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
1
清炒时蔬¥4.00/100g
150g45 kcal¥6.00
2
米饭¥1.60/100g
250g360 kcal¥4.00
3
红烧肉¥12.00/100g
180g486 kcal¥21.60
4
鱼香肉丝¥7.50/100g
160g336 kcal¥12.00
5
冬瓜排骨汤¥1.00/100g
300g336 kcal¥3.00
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
1
清炒时蔬¥4.00/100g
150g45 kcal¥6.00
2
米饭¥1.60/100g
250g360 kcal¥4.00
3
红烧肉¥12.00/100g
180g486 kcal¥21.60
4
鱼香肉丝¥7.50/100g
160g336 kcal¥12.00
5
冬瓜排骨汤¥1.00/100g
300g336 kcal¥3.00
+
- 取 150g -
¥6.00
-
-
-
2
-
- 米饭 - ¥1.60/100g -
- 取 250g -
¥4.00
- -
- ⚖️ 档口菜品 - 3 件 -
-
-
3
-
- 红烧肉 - ¥12.00/100g -
- 取 180g -
¥21.60
-
-
-
4
-
- 鱼香肉丝 - ¥7.50/100g -
- 取 160g -
¥12.00
-
-
-
5
-
- 冬瓜排骨汤 - ¥1.00/100g -
- 取 300g -
¥3.00
-
- - -
-
餐品种类 5 项 · 总重量 1040g · 餐线 2 · 档口 3
-
¥46.60
+ +
+ + + + + + + + + + + + + + + + + +
+ 合计 + + 1040g + + 1563 kcal + + ¥46.60 +
- +
- -
-
👤‍🌾
-
-
- 张*明 - EMP002346 -
- 研发中心 · 二荤餐线 -
-
- 金牌会员 - LV5 -
-
- -
-
应付金额
-
¥41.60
-
原价 ¥46.60 · 优惠金额 ¥5.00
-
- - +
🥗 本餐营养摄入 - 您的午餐目标 · 热量 950 kcal + NRV% · 营养素参考值占比 ⭐ 88 分 @@ -649,48 +776,96 @@
- +
- +
蛋白质 - 35/ 35g + 59% NRV
-
+
- +
脂肪 - 28/ 30g + 47% NRV
-
+
- +
碳水 - 88/ 110g + 28% NRV
-
+
+
-
- 💡 搭配均衡,蛋白质达标、脂肪与碳水略低于目标,建议搭配一份水果补充能量 + +
+
应付金额
+
¥41.60
+
原价 ¥46.60 · 优惠金额 ¥5.00
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
扫码支付
+
+ 微信 + 支付宝 +
+
+ 请用 微信/支付宝
+ 扫描二维码完成支付 +
+
diff --git a/other-module/canteen-device/checkout-device/user-03-paying.html b/other-module/canteen-device/checkout-device/user-03-paying.html new file mode 100644 index 0000000..c5eae59 --- /dev/null +++ b/other-module/canteen-device/checkout-device/user-03-paying.html @@ -0,0 +1,210 @@ + + + + + + 用户屏 - 支付引导 | 蚁熊智能餐养平台 + + + + +
+ + +
+
+ 应付金额 + ¥41.60 +
+
+ + 等待支付中 +
+
+ + +
+ + +
+
+ 📱 +
+ +
+
请出示付款码
+
+ 打开微信/支付宝,将付款码对准扫码器 +
+
+ +
+ 📱 支持微信 / 支付宝 / 银联云闪付 +
+
+ +
+ +
+ + + diff --git a/other-module/canteen-device/checkout-device/user-03-success.html b/other-module/canteen-device/checkout-device/user-04-success.html similarity index 100% rename from other-module/canteen-device/checkout-device/user-03-success.html rename to other-module/canteen-device/checkout-device/user-04-success.html