From 2373704945407b60406dc759a2ed3ce5dafefe5d Mon Sep 17 00:00:00 2001
From: fengpu <18691763612@163.com>
Date: Fri, 12 Jun 2026 11:06:59 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=A4=90=E7=BA=BF=E8=90=A5?=
 =?UTF-8?q?=E5=85=BB=E7=A7=A4+=E9=A4=90=E5=8E=85=E7=BB=88=E7=AB=AF?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E9=A1=B5PAD=E5=B1=85=E4=B8=AD=E5=A4=96?=
 =?UTF-8?q?=E5=A3=B3=E6=94=B9=E9=80=A0=EF=BC=8C=E6=8C=82=E8=BD=BD=E8=87=B3?=
 =?UTF-8?q?=E6=A0=B9=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 index.html                                    | 12 ++++-
 .../01-meal-start.html                        | 22 ++++++++-
 .../02-dish-display.html                      | 30 +++++++++---
 .../03-meal-pickup-dual-large.html            | 22 ++++++++-
 .../03-meal-pickup-dual-small.html            | 16 +++---
 .../03-meal-pickup.html                       | 24 ++++++++-
 .../canteen-nutrition-scale/04-settings.html  | 22 ++++++++-
 .../05-dish-sampling.html                     | 29 ++++++++++-
 .../06-sampling-history.html                  | 29 ++++++++++-
 .../canteen-nutrition-scale/doc/CHANGELOG.md  | 38 ++++++++++++++
 .../canteen-nutrition-scale/index.html        | 23 ++++++++-
 other-module/canteen-device/index.html        | 49 ++++++++++++++-----
 12 files changed, 279 insertions(+), 37 deletions(-)
 create mode 100644 other-module/canteen-device/canteen-nutrition-scale/doc/CHANGELOG.md

diff --git a/index.html b/index.html
index 476c5cf..a57bf6f 100644
--- a/index.html
+++ b/index.html
@@ -838,7 +838,17 @@ const SITE_MAP = [
     { name:'标准版中心大屏', dir:'other-module/emergency-screen/standard-center', pages:[] },
     { name:'九厂应急中心大屏', dir:'other-module/emergency-screen/jiuchang-center', pages:[] },
     { name:'医疗点PAD端', dir:'other-module/medical-pad', pages:[] },
-    { name:'餐厅终端设备', dir:'other-module/canteen-device', pages:[] }
+    { name:'餐厅终端设备', dir:'other-module/canteen-device', done:true, pages:[
+      {label:'餐线营养秤 · 模块导航', file:'canteen-nutrition-scale/index.html'},
+      {label:'餐线营养秤 · 开餐界面', file:'canteen-nutrition-scale/01-meal-start.html'},
+      {label:'餐线营养秤 · 餐品展示', file:'canteen-nutrition-scale/02-dish-display.html'},
+      {label:'餐线营养秤 · 取餐（单屏）', file:'canteen-nutrition-scale/03-meal-pickup.html'},
+      {label:'餐线营养秤 · 取餐（双屏·大屏）', file:'canteen-nutrition-scale/03-meal-pickup-dual-large.html'},
+      {label:'餐线营养秤 · 取餐（双屏·小屏）', file:'canteen-nutrition-scale/03-meal-pickup-dual-small.html'},
+      {label:'餐线营养秤 · 设置', file:'canteen-nutrition-scale/04-settings.html'},
+      {label:'餐线营养秤 · 餐品采样', file:'canteen-nutrition-scale/05-dish-sampling.html'},
+      {label:'餐线营养秤 · 采样历史', file:'canteen-nutrition-scale/06-sampling-history.html'}
+    ] }
   ]}
 ];
 
diff --git a/other-module/canteen-device/canteen-nutrition-scale/01-meal-start.html b/other-module/canteen-device/canteen-nutrition-scale/01-meal-start.html
index 890a308..7651b48 100644
--- a/other-module/canteen-device/canteen-nutrition-scale/01-meal-start.html
+++ b/other-module/canteen-device/canteen-nutrition-scale/01-meal-start.html
@@ -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>
     /**
      * 餐品数据库（模拟）
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 1b67919..5f302e7 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
@@ -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>
     /**
      * 待取餐界面交互逻辑
diff --git a/other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup-dual-large.html b/other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup-dual-large.html
index 73c33ec..e80449e 100644
--- a/other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup-dual-large.html
+++ b/other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup-dual-large.html
@@ -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();
diff --git a/other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup-dual-small.html b/other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup-dual-small.html
index b79f09a..40fef8d 100644
--- a/other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup-dual-small.html
+++ b/other-module/canteen-device/canteen-nutrition-scale/03-meal-pickup-dual-small.html
@@ -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;
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 d44280b..6ba17e2 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
@@ -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>
     /**
      * 取餐界面交互逻辑
diff --git a/other-module/canteen-device/canteen-nutrition-scale/04-settings.html b/other-module/canteen-device/canteen-nutrition-scale/04-settings.html
index 6c973f4..0faa46c 100644
--- a/other-module/canteen-device/canteen-nutrition-scale/04-settings.html
+++ b/other-module/canteen-device/canteen-nutrition-scale/04-settings.html
@@ -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');
diff --git a/other-module/canteen-device/canteen-nutrition-scale/05-dish-sampling.html b/other-module/canteen-device/canteen-nutrition-scale/05-dish-sampling.html
index 023614b..6021eee 100644
--- a/other-module/canteen-device/canteen-nutrition-scale/05-dish-sampling.html
+++ b/other-module/canteen-device/canteen-nutrition-scale/05-dish-sampling.html
@@ -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>
 /**
  * 餐品采样界面交互逻辑
diff --git a/other-module/canteen-device/canteen-nutrition-scale/06-sampling-history.html b/other-module/canteen-device/canteen-nutrition-scale/06-sampling-history.html
index 8bdefd4..410ecbb 100644
--- a/other-module/canteen-device/canteen-nutrition-scale/06-sampling-history.html
+++ b/other-module/canteen-device/canteen-nutrition-scale/06-sampling-history.html
@@ -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>
 /**
  * 采样历史页面交互逻辑
diff --git a/other-module/canteen-device/canteen-nutrition-scale/doc/CHANGELOG.md b/other-module/canteen-device/canteen-nutrition-scale/doc/CHANGELOG.md
new file mode 100644
index 0000000..fe3e1f9
--- /dev/null
+++ b/other-module/canteen-device/canteen-nutrition-scale/doc/CHANGELOG.md
@@ -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端"风格保持一致（圆角硬件外观 + 深色画布留白）。
diff --git a/other-module/canteen-device/canteen-nutrition-scale/index.html b/other-module/canteen-device/canteen-nutrition-scale/index.html
index e7d1379..2ae7e5a 100644
--- a/other-module/canteen-device/canteen-nutrition-scale/index.html
+++ b/other-module/canteen-device/canteen-nutrition-scale/index.html
@@ -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>
diff --git a/other-module/canteen-device/index.html b/other-module/canteen-device/index.html
index 99f4cfb..342f778 100644
--- a/other-module/canteen-device/index.html
+++ b/other-module/canteen-device/index.html
@@ -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>