yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 餐线营养秤+餐厅终端导航页PAD居中外壳改造，挂载至根导航

Browse Source 
- 9 个营养秤页面（index/01~06，含双屏大/小）统一改造为 body 全屏深色画布 + flex 居中，新增 .device-frame 1280x720 PAD 外壳（圆角24px + 阴影），双屏小屏复用 480x320 .screen-frame
- 修正内容区 calc(100vh - X) → calc(100% - X)，避免视口与外壳尺寸耦合；隐藏 PAD 内可见滚动条
- 父级 canteen-device/index.html 同步改造 + 内容紧凑化（gap/padding/icon）适配 PAD 高度
- 根 index.html SITE_MAP「其他终端 → 餐厅终端设备」标记 done:true 并挂载 9 个营养秤页面，卡片状态由待设计 → 已完成
- 新增 canteen-nutrition-scale/doc/CHANGELOG.md，记录两次改造

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
fengpu
2026-06-12 11:06:59 +08:00
co-authored by Claude Opus 4.7
parent 5e8ca181af
commit 2373704945
12 changed files with 279 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
other-module/canteen-device/canteen-nutrition-scale/01-meal-start.html
+21 -1
View File
@@ -6,13 +6,29 @@
<title>开餐界面 - 蚁熊智能餐养平台</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 外层视口：全屏深色背景，承载居中 PAD 外壳 */
body {
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
background: #0e1326;
background: #05080f;
color: #fff;
min-height: 100vh;
min-width: 1280px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
/* PAD 设备外壳：1280x720 内容画布，模拟硬件外观 */
.device-frame {
width: 1280px;
height: 720px;
background: #0e1326;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
position: relative;
display: flex;
flex-direction: column;
}
/* ---- 顶部导航栏 ---- */
@@ -419,6 +435,8 @@
</head>
<body>
<div class="device-frame">
<!-- 顶部导航 -->
<div class="top-bar">
<a class="back-btn" href="index.html">&#x25C0;</a>
@@ -501,6 +519,8 @@
<!-- Toast -->
<div class="toast" id="toast"></div>
</div>
<script>
/**
* 餐品数据库（模拟）
other-module/canteen-device/canteen-nutrition-scale/02-dish-display.html
+24 -6
View File
@@ -6,14 +6,29 @@
<title>取餐界面 - 蚁熊智能餐养平台</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 外层视口：全屏深色背景，承载居中 PAD 外壳 */
body {
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
width: 1280px;
min-height: 720px;
overflow: hidden;
/* 深蓝渐变背景 */
background: linear-gradient(135deg, #0a1628 0%, #0d1f40 50%, #080f1e 100%);
background: #05080f;
color: #fff;
min-height: 100vh;
min-width: 1280px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
/* PAD 设备外壳：1280x720 内容画布，渐变背景平移至此 */
.device-frame {
width: 1280px;
height: 720px;
background: linear-gradient(135deg, #0a1628 0%, #0d1f40 50%, #080f1e 100%);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
position: relative;
display: flex;
flex-direction: column;
}
/* ---- 顶部窗口栏 ---- */
@@ -29,7 +44,7 @@
/* ---- 主内容区 ---- */
.main-area {
height: calc(100vh - 32px);
height: calc(100% - 32px);
position: relative;
}
@@ -163,6 +178,7 @@
</style>
</head>
<body>
<div class="device-frame">
<!-- 顶部窗口栏 -->
<div class="top-bar">
<span>Phone-192.168.1.165:5555</span>
@@ -197,6 +213,8 @@
</div>
</div>
</div>
<script>
/**
* 待取餐界面交互逻辑
other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup-dual-large.html
+20 -2
View File
@@ -6,13 +6,29 @@
<title>取餐信息屏（大屏）- 蚁熊智能餐养平台</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 外层视口：全屏深色背景，承载居中 PAD 外壳 */
body {
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
background: #05080f;
color: #fff;
min-height: 100vh;
min-width: 1280px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
/* PAD 设备外壳 */
.device-frame {
width: 1280px;
height: 720px;
overflow: hidden;
background: linear-gradient(135deg, #0a1628 0%, #0d1f40 50%, #080f1e 100%);
color: #fff;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
position: relative;
display: flex;
flex-direction: column;
}
.main-area {
height: 100%;
@@ -198,6 +214,7 @@
</style>
</head>
<body>
<div class="device-frame">
<div class="toast" id="toast"></div>
<div class="main-area">
<!-- 用户信息 -->
@@ -265,6 +282,7 @@
</div>
</div>
</div>
</div>
<script>
document.getElementById('settingsBtn').addEventListener('click', function(e) {
e.preventDefault();
other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup-dual-small.html
+10 -6
View File
@@ -6,23 +6,27 @@
<title>取餐营养屏（小屏）- 蚁熊智能餐养平台</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 外层视口：全屏深色背景，承载居中副屏外壳 */
body {
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
width: 480px;
height: 320px;
overflow: hidden;
background: linear-gradient(135deg, #0a1628 0%, #0d1f40 50%, #080f1e 100%);
background: #05080f;
color: #fff;
min-height: 100vh;
min-width: 480px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.screen-frame {
width: 480px;
height: 320px;
background: linear-gradient(180deg, #1a2b4a 0%, #142038 100%);
border-radius: 8px;
border-radius: 16px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(74, 144, 217, 0.15);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(74, 144, 217, 0.15);
}
.header {
display: flex;
other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup.html
+22 -2
View File
@@ -6,13 +6,29 @@
<title>取餐界面 - 蚁熊智能餐养平台</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 外层视口：全屏深色背景，承载居中 PAD 外壳 */
body {
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
background: #05080f;
color: #fff;
min-height: 100vh;
min-width: 1280px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
/* PAD 设备外壳 */
.device-frame {
width: 1280px;
height: 720px;
overflow: hidden;
background: linear-gradient(135deg, #0a1628 0%, #0d1f40 50%, #080f1e 100%);
color: #fff;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
position: relative;
display: flex;
flex-direction: column;
}
/* ---- 主内容区：两列 ---- */
@@ -287,6 +303,8 @@
</head>
<body>
<div class="device-frame">
<!-- Toast 提示 -->
<div class="toast" id="toast"></div>
@@ -463,6 +481,8 @@
</div>
</div>
</div>
<script>
/**
* 取餐界面交互逻辑
other-module/canteen-device/canteen-nutrition-scale/04-settings.html
+20 -2
View File
@@ -7,14 +7,29 @@
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 外层视口：全屏深色背景，承载居中 PAD 外壳 */
body {
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
background: #12162d;
background: #05080f;
color: #fff;
min-height: 100vh;
min-width: 1280px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
/* PAD 设备外壳 */
.device-frame {
width: 1280px;
height: 720px;
background: #12162d;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
position: relative;
display: flex;
flex-direction: column;
}
/* ---- 顶部导航栏 ---- */
@@ -47,7 +62,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
height: calc(100vh - 44px);
height: calc(100% - 44px);
gap: 24px;
padding: 24px;
}
@@ -245,6 +260,7 @@
</style>
</head>
<body>
<div class="device-frame">
<!-- 顶部导航 -->
<div class="top-bar">
<a class="back-btn" href="01-meal-start.html">&#x25C0; &#x8FD4;&#x56DE;</a>
@@ -351,6 +367,8 @@
<!-- ===== Toast 提示 ===== -->
<div class="toast" id="toast"></div>
</div>
<!-- ===== 交互逻辑 ===== -->
<script>
var toast = document.getElementById('toast');
other-module/canteen-device/canteen-nutrition-scale/05-dish-sampling.html
+28 -1
View File
@@ -6,7 +6,30 @@
<title>餐品采样界面 - 蚁熊智能餐养平台</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif; background: #0e1326; color: #fff; width: 1280px; height: 720px; overflow: hidden; }
/* 外层视口：全屏深色背景，承载居中 PAD 外壳 */
body {
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
background: #05080f;
color: #fff;
min-height: 100vh;
min-width: 1280px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
/* PAD 设备外壳 */
.device-frame {
width: 1280px;
height: 720px;
background: #0e1326;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
position: relative;
display: flex;
flex-direction: column;
}
/* ---- 顶部导航栏 ---- */
.top-bar { display: flex; align-items: center; height: 44px; background: #1a2b4a; padding: 0 20px; }
@@ -160,6 +183,8 @@ body { font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
</head>
<body>
<div class="device-frame">
<!-- 顶部导航 -->
<div class="top-bar">
<a class="back-btn" href="javascript:history.back()">&#x25C0; &#x8FD4;&#x56DE;</a>
@@ -240,6 +265,8 @@ body { font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
<!-- Toast -->
<div class="toast" id="toast"></div>
</div>
<script>
/**
* 餐品采样界面交互逻辑
other-module/canteen-device/canteen-nutrition-scale/06-sampling-history.html
+28 -1
View File
@@ -6,7 +6,30 @@
<title>采样历史 - 蚁熊智能餐养平台</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif; background: #0e1326; color: #fff; width: 1280px; height: 720px; overflow: hidden; }
/* 外层视口：全屏深色背景，承载居中 PAD 外壳 */
body {
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
background: #05080f;
color: #fff;
min-height: 100vh;
min-width: 1280px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
/* PAD 设备外壳 */
.device-frame {
width: 1280px;
height: 720px;
background: #0e1326;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
position: relative;
display: flex;
flex-direction: column;
}
/* ---- 顶部导航栏 ---- */
.top-bar { display: flex; align-items: center; height: 44px; background: #1a2b4a; padding: 0 20px; }
@@ -203,6 +226,8 @@ body { font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
</head>
<body>
<div class="device-frame">
<!-- 顶部导航 -->
<div class="top-bar">
<a class="back-btn" href="javascript:history.back()">&#x25C0; &#x8FD4;&#x56DE;</a>
@@ -275,6 +300,8 @@ body { font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
<!-- Toast -->
<div class="toast" id="toast"></div>
</div>
<script>
/**
* 采样历史页面交互逻辑
other-module/canteen-device/canteen-nutrition-scale/doc/CHANGELOG.md
+38
View File
@@ -0,0 +1,38 @@
# 餐线营养秤 - 变更记录
## [2026-06-12] feat: 同步父级 canteen-device 导航页 PAD 外壳改造 + 根导航挂载
**变更背景**：父级"餐线设备"导航页与营养秤系列保持视觉一致；同时把本模块 9 个完成页面挂载至根目录 `index.html` 的"其他终端 → 餐厅终端设备"分组，使卡片显示"已完成"绿色边框。
**变更内容**：
- `other-module/canteen-device/index.html`：
- body 改全屏深色画布 + flex 居中，新增 `.device-frame` 1280×720 PAD 外壳（圆角 24px、阴影）
- 内容区紧凑化（gap 16→10，card padding 20→14，icon 28→22，section gap 收紧），适配 PAD 高度
- `.main-content` 保留 `overflow-y:auto` 滚动能力但隐藏滚动条样式（webkit + firefox），PAD 内视觉无可见滚动条
- `index.html`（根导航）：
- `SITE_MAP` 中"其他终端 → 餐厅终端设备"模块：`pages` 填入 9 个营养秤页面（含模块导航 + 8 个业务页），`done:true`
- 卡片状态由"待设计"灰色 → "已完成"绿色边框，页数徽章可展开 9 个页面跳转链接
## [2026-06-12] refactor: PAD 终端居中外壳改造，所有页面新增 device-frame 视觉容器
**问题背景**：原页面均以 `body { width:1280px; height:720px }` 固定尺寸渲染，浏览器视口大于该尺寸时内容靠左上角显示，周围出现大片空白，缺少居中。
**改造方案**：
- 将 `body` 改为全屏深色画布（`background:#05080f`，`min-height:100vh`），通过 flex 居中承载 PAD 外壳
- 新增 `.device-frame` 容器（1280×720，圆角 24px，深色阴影），承载原有业务 UI，模拟 PAD 设备外观
- 副屏页面（双屏小屏 480×320）复用并升级现有 `.screen-frame`（圆角 16px、加阴影）作为外壳
- 修正内容区 `height: calc(100vh - X)` → `height: calc(100% - X)`，避免视口与外壳尺寸耦合
- 移除 `.main-content` 不必要的 `overflow-y:auto`，确保 PAD 内无滚动条
**涉及文件**：
- `index.html`：导航页改造 + 移除卡片网格滚动条
- `01-meal-start.html`：开餐界面
- `02-dish-display.html`：餐品展示界面（含 `100vh` → `100%` 修正）
- `03-meal-pickup.html`：取餐界面（单屏）
- `03-meal-pickup-dual-large.html`：取餐界面（双屏·大屏）
- `03-meal-pickup-dual-small.html`：取餐界面（双屏·小屏 480×320 副屏）
- `04-settings.html`：设置界面（含 `100vh` → `100%` 修正）
- `05-dish-sampling.html`：餐品采样界面
- `06-sampling-history.html`：采样历史
**视觉一致性**：与项目背景 2.5 节"医疗点PAD端"风格保持一致（圆角硬件外观 + 深色画布留白）。
other-module/canteen-device/canteen-nutrition-scale/index.html
+21 -2
View File
@@ -6,13 +6,29 @@
<title>餐线营养秤 - 蚁熊智能餐养平台</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 外层视口：全屏深色背景，承载居中 PAD 外壳 */
body {
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
background: #0e1326;
background: #05080f;
color: #fff;
min-height: 100vh;
min-width: 1280px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
/* PAD 设备外壳：保留 1280x720 内容画布，圆角+阴影模拟硬件外观 */
.device-frame {
width: 1280px;
height: 720px;
background: #0e1326;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
position: relative;
display: flex;
flex-direction: column;
}
.top-bar {
display: flex;
@@ -43,7 +59,7 @@
padding: 24px 32px;
height: calc(100% - 44px);
align-content: start;
overflow-y: auto;
overflow: hidden;
}
.card {
display: flex;
@@ -71,6 +87,7 @@
</head>
<body>
<div class="device-frame">
<div class="top-bar">
<a class="back-btn" href="../index.html">&#x25C0; &#x8FD4;&#x56DE;</a>
<span class="top-bar__title">&#x9910;&#x7EBF;&#x8425;&#x517B;&#x79E4;</span>
@@ -119,5 +136,7 @@
</a>
</div>
</div>
</body>
</html>
other-module/canteen-device/index.html
+36 -13
View File
@@ -6,13 +6,29 @@
<title>餐线设备 - 蚁熊智能餐养平台</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 外层视口：全屏深色背景，承载居中 PAD 外壳 */
body {
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
background: #0e1326;
background: #05080f;
color: #fff;
min-height: 100vh;
min-width: 1280px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
/* PAD 设备外壳 */
.device-frame {
width: 1280px;
height: 720px;
background: #0e1326;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
position: relative;
display: flex;
flex-direction: column;
}
.top-bar {
display: flex;
@@ -29,31 +45,34 @@
color: rgba(255, 255, 255, 0.85);
}
.main-content {
padding: 24px 32px;
padding: 14px 22px 16px;
height: calc(100% - 44px);
display: flex;
flex-direction: column;
gap: 16px;
gap: 10px;
overflow-y: auto;
/* 隐藏滚动条样式（保留滚动能力，PAD 内视觉上无滚动条） */
scrollbar-width: none;
}
.main-content::-webkit-scrollbar { display: none; }
.section-title {
font-size: 14px;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
padding-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
gap: 10px;
}
.card {
display: block;
text-decoration: none;
background: #1a2b4a;
border-radius: 12px;
padding: 20px;
border-radius: 10px;
padding: 14px 16px;
border: 1px solid rgba(255, 255, 255, 0.06);
transition: all 0.2s;
cursor: pointer;
@@ -64,17 +83,17 @@
border-color: rgba(74, 144, 217, 0.3);
}
.card__icon {
font-size: 28px;
margin-bottom: 10px;
font-size: 22px;
margin-bottom: 6px;
}
.card__name {
font-size: 14px;
font-size: 13px;
font-weight: 600;
color: #fff;
margin-bottom: 4px;
margin-bottom: 3px;
}
.card__desc {
font-size: 12px;
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
line-height: 1.4;
}
@@ -82,6 +101,8 @@
</head>
<body>
<div class="device-frame">
<!-- 顶部导航 -->
<div class="top-bar">
<span class="top-bar__title">餐线设备</span>
@@ -206,5 +227,7 @@
</div>
</div>
</div>
</body>
</html>