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

feat: 新增LED餐品展示屏模块

Browse Source 
4800×312超宽长条屏，11格布局。首格为餐厅LOGO，后10格每格展示菜品插图+营养标签+百克价格/热量。10道菜品配本地SVG手绘插图，零外部请求。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
zhangyan
2026-07-29 09:41:48 +08:00
co-authored by Claude Opus 4.6
parent a4f61cc65c
commit eff33506d2
15 changed files with 548 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2 -1
View File
@@ -887,7 +887,8 @@ const SITE_MAP = [
{label:'净菜包装贴标秤 · 包装任务', file:'clean-veg-packaging-labeler/01-orders.html'},
{label:'净菜包装贴标秤 · 包装作业', file:'clean-veg-packaging-labeler/02-labeling.html'},
{label:'净菜包装贴标秤 · 包装历史', file:'clean-veg-packaging-labeler/03-history.html'},
{label:'净菜包装贴标秤 · 标签预览', file:'clean-veg-packaging-labeler/label-preview.html'}
{label:'净菜包装贴标秤 · 标签预览', file:'clean-veg-packaging-labeler/label-preview.html'},
{label:'LED餐品展示屏', file:'led-food-display/index.html'}
] },
{ name:'蓝牙称小程序', dir:'other-module/bluetooth-scale-miniprogram', entry:'index.html', prd:'other-module/bluetooth-scale-miniprogram/doc/PRD.md', done:true, pages:[
{ file:'doc/design-overview.html', label:'页面总览' },
other-module/canteen-device/index.html
+6
View File
@@ -275,6 +275,12 @@
<div class="card__name">营养得分屏</div>
<div class="card__desc">个人营养评分与健康建议</div>
</a>
<a class="card" href="led-food-display/index.html">
<span class="card__status card__status--done">已设计</span>
<div class="card__icon">&#x1F4FA;</div>
<div class="card__name">LED餐品展示屏</div>
<div class="card__desc">餐品名称、每百克价格与热量滚动展示</div>
</a>
</div>
</div>
other-module/canteen-device/led-food-display/doc/CHANGELOG.md
+18
View File
@@ -0,0 +1,18 @@
# LED 餐品展示屏 CHANGELOG
## 2026-07-29 | 初版创建
### 新增
- `index.html` — LED 餐品展示屏，4800×312 超宽长条屏，11 格横向布局
- 第 1 格：智养膳臻餐厅 LOGO（白底）
- 第 2-11 格：10 道餐品，每格全幅菜品插图 + 底部半透明白色信息卡片
- 信息卡：餐品名称（大黑粗体）+ 3 个绿色营养标签 + 百克价格 & 热量
- 格间 4px LED 模块分割条
- `index.html` — 10 道菜品配本地 SVG 手绘插图，存于 `img/` 目录
- 01 宫保鸡丁 / 02 鱼香肉丝 / 03 番茄炒蛋 / 04 麻婆豆腐 / 05 红烧肉
- 06 清炒时蔬 / 07 糖醋排骨 / 08 水煮鱼 / 09 回锅肉 / 10 蒜蓉西兰花
- `logo.jpg` — 智养膳臻餐厅 LOGO 图片
### 导航同步
- `canteen-device/index.html` — 营养用餐区新增「LED餐品展示屏」卡片
- 根 `index.html` — SITE_MAP 新增条目
other-module/canteen-device/led-food-display/img/01-gongbaojiding.svg
+27
View File
@@ -0,0 +1,27 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 312">
<defs>
<radialGradient id="plate" cx="50%" cy="55%" r="45%">
<stop offset="0%" stop-color="#fafafa"/>
<stop offset="100%" stop-color="#e0d8d0"/>
</radialGradient>
</defs>
<rect width="432" height="312" fill="#f5f0eb"/>
<!-- 盘子 -->
<ellipse cx="216" cy="190" rx="170" ry="110" fill="url(#plate)" stroke="#d0c8c0" stroke-width="2"/>
<!-- 鸡肉块 -->
<rect x="140" y="150" width="45" height="30" rx="8" fill="#8B4513" transform="rotate(-15 162 165)"/>
<rect x="200" y="140" width="50" height="28" rx="8" fill="#A0522D" transform="rotate(10 225 154)"/>
<rect x="160" y="180" width="42" height="26" rx="7" fill="#9B5533" transform="rotate(-5 181 193)"/>
<rect x="230" y="175" width="40" height="32" rx="8" fill="#8B4513" transform="rotate(20 250 191)"/>
<!-- 花生 -->
<ellipse cx="155" cy="210" rx="10" ry="7" fill="#DEB887" transform="rotate(-30 155 210)"/>
<ellipse cx="260" cy="200" rx="9" ry="6" fill="#D2B48C" transform="rotate(40 260 200)"/>
<ellipse cx="200" cy="220" rx="8" ry="6" fill="#DEB887"/>
<ellipse cx="240" cy="160" rx="8" ry="5" fill="#D2B48C"/>
<!-- 干辣椒 -->
<rect x="175" y="135" width="5" height="20" rx="2" fill="#CC0000" transform="rotate(25 177 145)"/>
<rect x="245" y="155" width="5" height="18" rx="2" fill="#CC0000" transform="rotate(-20 247 164)"/>
<!-- 葱花 -->
<circle cx="215" cy="145" r="4" fill="#228B22"/>
<circle cx="190" cy="170" r="3" fill="#2E8B57"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

other-module/canteen-device/led-food-display/img/02-yuxiangrousi.svg
+28
View File
@@ -0,0 +1,28 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 312">
<defs>
<radialGradient id="plate2" cx="50%" cy="55%" r="45%">
<stop offset="0%" stop-color="#fafafa"/>
<stop offset="100%" stop-color="#e8e0d8"/>
</radialGradient>
</defs>
<rect width="432" height="312" fill="#f5f0eb"/>
<ellipse cx="216" cy="190" rx="175" ry="112" fill="url(#plate2)" stroke="#d5cdc5" stroke-width="2"/>
<!-- 肉丝（细条） -->
<rect x="130" y="150" width="60" height="6" rx="3" fill="#C4743E" transform="rotate(-10 160 153)"/>
<rect x="180" y="145" width="55" height="5" rx="2.5" fill="#D4884A" transform="rotate(8 207 147)"/>
<rect x="145" y="170" width="50" height="6" rx="3" fill="#B86834" transform="rotate(-5 170 173)"/>
<rect x="200" y="165" width="58" height="5" rx="2.5" fill="#C4743E" transform="rotate(12 229 167)"/>
<rect x="160" y="190" width="52" height="5" rx="2.5" fill="#D4884A"/>
<rect x="220" y="188" width="48" height="6" rx="3" fill="#B86834" transform="rotate(-8 244 191)"/>
<rect x="140" y="210" width="45" height="5" rx="2.5" fill="#C4743E" transform="rotate(15 162 212)"/>
<!-- 胡萝卜丝 -->
<rect x="175" y="160" width="35" height="4" rx="2" fill="#FF6B35"/>
<rect x="230" y="150" width="30" height="4" rx="2" fill="#FF7F50" transform="rotate(-15 245 152)"/>
<rect x="155" y="195" width="28" height="4" rx="2" fill="#FF6B35"/>
<!-- 木耳丝 -->
<rect x="210" y="175" width="30" height="4" rx="2" fill="#3E2723"/>
<rect x="135" y="185" width="25" height="4" rx="2" fill="#4E342E"/>
<!-- 青椒丝 -->
<rect x="240" y="195" width="28" height="4" rx="2" fill="#4CAF50"/>
<rect x="165" y="145" width="22" height="4" rx="2" fill="#66BB6A"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

other-module/canteen-device/led-food-display/img/03-fanqiechaodan.svg
+25
View File
@@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 312">
<defs>
<radialGradient id="plate3" cx="50%" cy="55%" r="45%">
<stop offset="0%" stop-color="#fafafa"/>
<stop offset="100%" stop-color="#e8e0d8"/>
</radialGradient>
</defs>
<rect width="432" height="312" fill="#f5f0eb"/>
<ellipse cx="216" cy="185" rx="175" ry="115" fill="url(#plate3)" stroke="#d5cdc5" stroke-width="2"/>
<!-- 番茄块（红色） -->
<path d="M135,150 Q155,135 175,150 Q180,170 160,180 Q135,175 135,150" fill="#E53935"/>
<path d="M200,140 Q225,125 245,140 Q250,165 225,170 Q200,165 200,140" fill="#EF5350"/>
<path d="M160,185 Q180,175 195,190 Q190,210 170,210 Q155,200 160,185" fill="#D32F2F"/>
<path d="M230,180 Q255,170 265,190 Q260,210 240,210 Q225,200 230,180" fill="#E53935"/>
<!-- 鸡蛋块（黄色） -->
<ellipse cx="170" cy="165" rx="20" ry="14" fill="#FFD54F"/>
<ellipse cx="230" cy="160" rx="22" ry="15" fill="#FFCA28"/>
<ellipse cx="185" cy="200" rx="18" ry="12" fill="#FFD54F"/>
<ellipse cx="250" cy="195" rx="16" ry="11" fill="#FFCA28"/>
<ellipse cx="145" cy="195" rx="14" ry="10" fill="#FFD54F"/>
<!-- 葱花点缀 -->
<circle cx="200" cy="155" r="3" fill="#66BB6A"/>
<circle cx="160" cy="180" r="2.5" fill="#4CAF50"/>
<circle cx="240" cy="175" r="2.5" fill="#66BB6A"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

other-module/canteen-device/led-food-display/img/04-mapodoufu.svg
+32
View File
@@ -0,0 +1,32 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 312">
<defs>
<radialGradient id="plate4" cx="50%" cy="55%" r="45%">
<stop offset="0%" stop-color="#fefefe"/>
<stop offset="100%" stop-color="#e8e0d5"/>
</radialGradient>
</defs>
<rect width="432" height="312" fill="#f5f0eb"/>
<ellipse cx="216" cy="185" rx="170" ry="110" fill="url(#plate4)" stroke="#d0c8c0" stroke-width="2"/>
<!-- 红油酱汁底 -->
<ellipse cx="216" cy="190" rx="140" ry="85" fill="#C62828" opacity="0.9"/>
<ellipse cx="216" cy="188" rx="138" ry="83" fill="#D32F2F" opacity="0.85"/>
<!-- 豆腐块（白色） -->
<rect x="150" y="155" width="32" height="25" rx="5" fill="#FFF8E1" stroke="#E8DCC8" stroke-width="0.5"/>
<rect x="200" y="148" width="30" height="24" rx="5" fill="#FFFFFF" stroke="#E8DCC8" stroke-width="0.5"/>
<rect x="175" y="185" width="28" height="23" rx="5" fill="#FFF8E1" stroke="#E8DCC8" stroke-width="0.5"/>
<rect x="230" y="180" width="30" height="25" rx="5" fill="#FFFFFF" stroke="#E8DCC8" stroke-width="0.5"/>
<rect x="160" y="200" width="26" height="22" rx="5" fill="#FFF8E1" stroke="#E8DCC8" stroke-width="0.5"/>
<rect x="210" y="200" width="28" height="22" rx="5" fill="#FFFFFF" stroke="#E8DCC8" stroke-width="0.5"/>
<!-- 肉末 -->
<circle cx="155" cy="170" r="3" fill="#5D4037"/>
<circle cx="220" cy="165" r="3" fill="#4E342E"/>
<circle cx="185" cy="210" r="2.5" fill="#5D4037"/>
<circle cx="250" cy="195" r="2.5" fill="#4E342E"/>
<!-- 葱花 -->
<rect x="143" y="152" width="3" height="8" rx="1.5" fill="#2E7D32" transform="rotate(15 144 156)"/>
<rect x="235" y="175" width="3" height="7" rx="1.5" fill="#388E3C" transform="rotate(-20 236 178)"/>
<rect x="195" y="145" width="3" height="7" rx="1.5" fill="#2E7D32" transform="rotate(30 196 148)"/>
<!-- 花椒 -->
<circle cx="170" cy="160" r="2" fill="#8D6E63"/>
<circle cx="240" cy="160" r="2" fill="#8D6E63"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

other-module/canteen-device/led-food-display/img/05-hongshaorou.svg
+24
View File
@@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 312">
<defs>
<radialGradient id="plate5" cx="50%" cy="55%" r="45%">
<stop offset="0%" stop-color="#fefefe"/>
<stop offset="100%" stop-color="#e0d8cd"/>
</radialGradient>
</defs>
<rect width="432" height="312" fill="#f5f0eb"/>
<ellipse cx="216" cy="185" rx="175" ry="112" fill="url(#plate5)" stroke="#d5cdc5" stroke-width="2"/>
<!-- 红烧肉块 -->
<rect x="135" y="150" width="48" height="35" rx="10" fill="#6D4C41" transform="rotate(-8 159 167)"/>
<rect x="130" y="145" width="48" height="20" rx="8" fill="#8D6E63" transform="rotate(-8 154 155)"/>
<rect x="195" y="140" width="52" height="38" rx="10" fill="#5D4037" transform="rotate(5 221 159)"/>
<rect x="190" y="135" width="52" height="22" rx="8" fill="#795548" transform="rotate(5 216 146)"/>
<rect x="160" y="185" width="45" height="32" rx="9" fill="#6D4C41"/>
<rect x="230" y="178" width="48" height="34" rx="10" fill="#5D4037" transform="rotate(12 254 195)"/>
<rect x="225" y="173" width="48" height="20" rx="8" fill="#795548" transform="rotate(12 249 183)"/>
<!-- 酱汁光泽 -->
<ellipse cx="155" cy="158" rx="12" ry="5" fill="#A1887F" opacity="0.4"/>
<ellipse cx="220" cy="150" rx="14" ry="5" fill="#A1887F" opacity="0.4"/>
<ellipse cx="250" cy="185" rx="10" ry="4" fill="#A1887F" opacity="0.3"/>
<!-- 八角/香料 -->
<text x="240" y="215" font-size="16" fill="#5D4037" opacity="0.5">&#x273F;</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

other-module/canteen-device/led-food-display/img/06-qingchaoshishu.svg
+25
View File
@@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 312">
<defs>
<radialGradient id="plate6" cx="50%" cy="55%" r="45%">
<stop offset="0%" stop-color="#fefefe"/>
<stop offset="100%" stop-color="#e8e0d5"/>
</radialGradient>
</defs>
<rect width="432" height="312" fill="#f5f0eb"/>
<ellipse cx="216" cy="185" rx="170" ry="112" fill="url(#plate6)" stroke="#d5cdc5" stroke-width="2"/>
<!-- 青菜叶 -->
<ellipse cx="170" cy="170" rx="40" ry="25" fill="#4CAF50" transform="rotate(-20 170 170)"/>
<ellipse cx="230" cy="160" rx="42" ry="28" fill="#66BB6A" transform="rotate(15 230 160)"/>
<ellipse cx="150" cy="195" rx="35" ry="22" fill="#388E3C" transform="rotate(-30 150 195)"/>
<ellipse cx="250" cy="190" rx="38" ry="24" fill="#43A047" transform="rotate(25 250 190)"/>
<ellipse cx="200" cy="195" rx="36" ry="23" fill="#4CAF50" transform="rotate(-10 200 195)"/>
<ellipse cx="180" cy="150" rx="35" ry="20" fill="#66BB6A" transform="rotate(30 180 150)"/>
<ellipse cx="210" cy="210" rx="32" ry="20" fill="#388E3C"/>
<!-- 叶脉纹理 -->
<line x1="150" y1="170" x2="185" y2="190" stroke="#2E7D32" stroke-width="1.5" opacity="0.5"/>
<line x1="210" y1="155" x2="250" y2="175" stroke="#2E7D32" stroke-width="1.5" opacity="0.5"/>
<line x1="180" y1="195" x2="215" y2="210" stroke="#1B5E20" stroke-width="1" opacity="0.4"/>
<!-- 蒜瓣 -->
<ellipse cx="195" cy="165" rx="6" ry="4" fill="#FFFDE7"/>
<ellipse cx="155" cy="180" rx="5" ry="3.5" fill="#FFFDE7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

other-module/canteen-device/led-food-display/img/07-tangcupaigu.svg
+33
View File
@@ -0,0 +1,33 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 312">
<defs>
<radialGradient id="plate7" cx="50%" cy="55%" r="45%">
<stop offset="0%" stop-color="#fefefe"/>
<stop offset="100%" stop-color="#e8e0d5"/>
</radialGradient>
</defs>
<rect width="432" height="312" fill="#f5f0eb"/>
<ellipse cx="216" cy="185" rx="175" ry="112" fill="url(#plate7)" stroke="#d5cdc5" stroke-width="2"/>
<!-- 排骨块 -->
<rect x="140" y="155" width="50" height="28" rx="8" fill="#8D6E63" transform="rotate(-15 165 169)"/>
<rect x="135" y="148" width="50" height="16" rx="6" fill="#BCAAA4" transform="rotate(-15 160 156)"/>
<!-- 骨头截面（白色小椭圆） -->
<ellipse cx="155" cy="162" rx="4" ry="5" fill="#EFEBE9" transform="rotate(-15 155 162)"/>
<ellipse cx="172" cy="158" rx="3.5" ry="4.5" fill="#EFEBE9" transform="rotate(-15 172 158)"/>
<rect x="200" y="148" width="52" height="30" rx="8" fill="#6D4C41" transform="rotate(10 226 163)"/>
<rect x="195" y="142" width="52" height="18" rx="6" fill="#A1887F" transform="rotate(10 221 151)"/>
<ellipse cx="215" cy="156" rx="4" ry="5" fill="#EFEBE9" transform="rotate(10 215 156)"/>
<ellipse cx="232" cy="153" rx="3.5" ry="4.5" fill="#EFEBE9" transform="rotate(10 232 153)"/>
<rect x="165" y="185" width="48" height="26" rx="8" fill="#8D6E63" transform="rotate(-5 189 198)"/>
<rect x="160" y="178" width="48" height="15" rx="6" fill="#BCAAA4" transform="rotate(-5 184 185)"/>
<ellipse cx="180" cy="191" rx="4" ry="5" fill="#EFEBE9"/>
<ellipse cx="198" cy="189" rx="3.5" ry="4.5" fill="#EFEBE9"/>
<!-- 糖醋酱汁光泽 -->
<ellipse cx="160" cy="165" rx="14" ry="5" fill="#FFCC80" opacity="0.35"/>
<ellipse cx="222" cy="158" rx="15" ry="5" fill="#FFCC80" opacity="0.35"/>
<!-- 白芝麻 -->
<circle cx="148" cy="160" r="1.5" fill="#FFFFF0"/>
<circle cx="210" cy="152" r="1.5" fill="#FFFFF0"/>
<circle cx="240" cy="160" r="1.5" fill="#FFFFF0"/>
<circle cx="230" cy="148" r="1" fill="#FFFFF0"/>
<circle cx="175" cy="190" r="1" fill="#FFFFF0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

other-module/canteen-device/led-food-display/img/08-shuizhuyu.svg
+31
View File
@@ -0,0 +1,31 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 312">
<defs>
<radialGradient id="plate8" cx="50%" cy="55%" r="45%">
<stop offset="0%" stop-color="#fefefe"/>
<stop offset="100%" stop-color="#e0d8cd"/>
</radialGradient>
</defs>
<rect width="432" height="312" fill="#f5f0eb"/>
<!-- 大碗 -->
<ellipse cx="216" cy="200" rx="165" ry="95" fill="#fafafa" stroke="#d0c8c0" stroke-width="2"/>
<!-- 红油汤底 -->
<ellipse cx="216" cy="195" rx="150" ry="82" fill="#B71C1C"/>
<ellipse cx="216" cy="193" rx="145" ry="78" fill="#D32F2F" opacity="0.9"/>
<!-- 鱼片（白色） -->
<path d="M145,180 Q170,165 195,178 Q200,185 185,192 Q160,195 145,180" fill="#F5F5F5" stroke="#E0E0E0" stroke-width="0.5"/>
<path d="M210,170 Q235,158 260,172 Q268,182 250,188 Q225,190 210,170" fill="#FAFAFA" stroke="#E0E0E0" stroke-width="0.5"/>
<path d="M170,198 Q195,186 215,195 Q220,202 205,208 Q185,210 170,198" fill="#F5F5F5" stroke="#E0E0E0" stroke-width="0.5"/>
<path d="M230,195 Q250,182 270,195 Q275,205 258,210 Q240,210 230,195" fill="#FAFAFA" stroke="#E0E0E0" stroke-width="0.5"/>
<path d="M155,210 Q180,200 200,210 Q205,218 188,222 Q165,222 155,210" fill="#F5F5F5" stroke="#E0E0E0" stroke-width="0.5"/>
<!-- 干辣椒 -->
<rect x="175" y="165" width="6" height="22" rx="3" fill="#E53935" transform="rotate(15 178 176)"/>
<rect x="245" y="170" width="6" height="20" rx="3" fill="#E53935" transform="rotate(-10 248 180)"/>
<!-- 花椒 -->
<circle cx="190" cy="175" r="2.5" fill="#8D6E63"/>
<circle cx="230" cy="180" r="2" fill="#8D6E63"/>
<circle cx="160" cy="190" r="2" fill="#8D6E63"/>
<!-- 豆芽/配菜 -->
<line x1="170" y1="215" x2="175" y2="205" stroke="#FFFDE7" stroke-width="2" stroke-linecap="round"/>
<line x1="185" y1="216" x2="188" y2="206" stroke="#FFFDE7" stroke-width="2" stroke-linecap="round"/>
<line x1="200" y1="215" x2="202" y2="207" stroke="#FFFDE7" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

other-module/canteen-device/led-food-display/img/09-huiguorou.svg
+32
View File
@@ -0,0 +1,32 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 312">
<defs>
<radialGradient id="plate9" cx="50%" cy="55%" r="45%">
<stop offset="0%" stop-color="#fefefe"/>
<stop offset="100%" stop-color="#e8e0d5"/>
</radialGradient>
</defs>
<rect width="432" height="312" fill="#f5f0eb"/>
<ellipse cx="216" cy="185" rx="175" ry="112" fill="url(#plate9)" stroke="#d5cdc5" stroke-width="2"/>
<!-- 肉片（棕色薄片） -->
<ellipse cx="170" cy="160" rx="40" ry="18" fill="#8D6E63" transform="rotate(-15 170 160)"/>
<ellipse cx="168" cy="157" rx="38" ry="12" fill="#A1887F" transform="rotate(-15 168 157)"/>
<ellipse cx="235" cy="155" rx="38" ry="17" fill="#795548" transform="rotate(20 235 155)"/>
<ellipse cx="233" cy="152" rx="36" ry="11" fill="#8D6E63" transform="rotate(20 233 152)"/>
<ellipse cx="150" cy="195" rx="35" ry="16" fill="#6D4C41" transform="rotate(-25 150 195)"/>
<ellipse cx="148" cy="192" rx="33" ry="10" fill="#8D6E63" transform="rotate(-25 148 192)"/>
<ellipse cx="250" cy="190" rx="36" ry="15" fill="#795548" transform="rotate(15 250 190)"/>
<ellipse cx="248" cy="187" rx="34" ry="10" fill="#A1887F" transform="rotate(15 248 187)"/>
<ellipse cx="200" cy="200" rx="33" ry="14" fill="#8D6E63"/>
<ellipse cx="198" cy="197" rx="31" ry="9" fill="#A1887F"/>
<!-- 蒜苗段（绿色） -->
<rect x="180" y="148" width="4" height="30" rx="2" fill="#4CAF50" transform="rotate(20 182 163)"/>
<rect x="220" y="175" width="4" height="28" rx="2" fill="#66BB6A" transform="rotate(-15 222 189)"/>
<rect x="155" y="180" width="3.5" height="25" rx="1.5" fill="#43A047" transform="rotate(30 157 192)"/>
<rect x="260" y="165" width="3.5" height="22" rx="1.5" fill="#4CAF50" transform="rotate(-25 262 176)"/>
<!-- 红椒片 -->
<rect x="190" y="178" width="8" height="5" rx="2" fill="#E53935" transform="rotate(10 194 180)"/>
<rect x="240" y="168" width="7" height="5" rx="2" fill="#EF5350" transform="rotate(-20 243 170)"/>
<!-- 豆瓣酱色块 -->
<circle cx="210" cy="175" r="4" fill="#BF360C" opacity="0.6"/>
<circle cx="160" cy="170" r="3" fill="#BF360C" opacity="0.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

other-module/canteen-device/led-food-display/img/10-suanrongxilanhua.svg
+38
View File
@@ -0,0 +1,38 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 312">
<defs>
<radialGradient id="plate10" cx="50%" cy="55%" r="45%">
<stop offset="0%" stop-color="#fefefe"/>
<stop offset="100%" stop-color="#e8e0d5"/>
</radialGradient>
</defs>
<rect width="432" height="312" fill="#f5f0eb"/>
<ellipse cx="216" cy="185" rx="170" ry="112" fill="url(#plate10)" stroke="#d5cdc5" stroke-width="2"/>
<!-- 西兰花 -->
<circle cx="160" cy="165" r="25" fill="#2E7D32"/>
<circle cx="145" cy="155" r="15" fill="#388E3C"/>
<circle cx="175" cy="155" r="14" fill="#43A047"/>
<circle cx="160" cy="148" r="13" fill="#4CAF50"/>
<circle cx="148" cy="170" r="12" fill="#388E3C"/>
<circle cx="172" cy="170" r="11" fill="#43A047"/>
<circle cx="220" cy="160" r="26" fill="#2E7D32"/>
<circle cx="205" cy="150" r="16" fill="#388E3C"/>
<circle cx="238" cy="150" r="15" fill="#43A047"/>
<circle cx="220" cy="142" r="14" fill="#4CAF50"/>
<circle cx="208" cy="168" r="13" fill="#388E3C"/>
<circle cx="235" cy="168" r="12" fill="#43A047"/>
<circle cx="255" cy="178" r="14" fill="#2E7D32"/>
<circle cx="250" cy="170" r="12" fill="#388E3C"/>
<circle cx="140" cy="185" r="16" fill="#388E3C"/>
<circle cx="145" cy="178" r="13" fill="#43A047"/>
<circle cx="185" cy="190" r="15" fill="#2E7D32"/>
<circle cx="185" cy="185" r="12" fill="#388E3C"/>
<!-- 茎部（浅绿） -->
<rect x="156" y="185" width="6" height="28" rx="3" fill="#81C784"/>
<rect x="216" y="180" width="6" height="30" rx="3" fill="#81C784"/>
<rect x="140" y="192" width="5" height="20" rx="2.5" fill="#A5D6A7"/>
<!-- 蒜粒（白色） -->
<circle cx="180" cy="160" r="2" fill="#FFFDE7"/>
<circle cx="230" cy="155" r="2" fill="#FFFDE7"/>
<circle cx="160" cy="155" r="1.5" fill="#FFFDE7"/>
<circle cx="210" cy="148" r="1.5" fill="#FFFDE7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

other-module/canteen-device/led-food-display/index.html
+227
View File
@@ -0,0 +1,227 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LED餐品展示屏 | 蚁熊智能餐养平台</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
background: #030303;
color: #fff;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.led-scroll {
width: 100vw;
overflow-x: auto;
overflow-y: hidden;
display: flex;
align-items: center;
scrollbar-width: none;
}
.led-scroll::-webkit-scrollbar { display: none; }
.led-strip {
display: flex;
width: 4800px;
height: 312px;
background: #060606;
overflow: hidden;
flex-shrink: 0;
}
/* ---- 格子 ---- */
.led-cell {
height: 312px;
flex-shrink: 0;
position: relative;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
justify-content: center;
border-right: 1px solid rgba(255,255,255,0.06);
}
/* LOGO 格 */
.led-cell--logo {
width: 480px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.led-cell--logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* 餐品格 */
.led-cell--food {
width: 428px;
}
/* ---- 格间分割条（LED 屏模块缝隙光效） ---- */
.led-divider {
width: 4px;
height: 312px;
flex-shrink: 0;
background: #0a0a0a;
position: relative;
}
.led-divider::before {
content: '';
position: absolute;
left: 1px;
top: 16px;
bottom: 16px;
width: 1px;
background: linear-gradient(180deg,
transparent 0%,
rgba(255,255,255,0.15) 15%,
rgba(255,255,255,0.25) 50%,
rgba(255,255,255,0.15) 85%,
transparent 100%);
}
/* ---- 底部信息卡片 ---- */
.info-card {
width: 100%;
margin: 0 12px 10px 12px;
background: rgba(255,255,255,0.88);
backdrop-filter: blur(6px);
border-radius: 14px;
padding: 12px 16px 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.info-card__name {
font-size: 26px;
font-weight: 800;
color: #1a1a1a;
letter-spacing: 2px;
text-align: center;
line-height: 1.2;
}
/* 营养标签行 */
.info-card__tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.info-card__tag {
padding: 3px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
color: #fff;
letter-spacing: 0.5px;
white-space: nowrap;
background: #4caf50;
}
/* 价格 + 热量 大号数字 */
.info-card__stats {
display: flex;
gap: 28px;
align-items: baseline;
}
.info-card__stat {
display: flex;
align-items: baseline;
gap: 2px;
}
.info-card__stat-num {
font-size: 28px;
font-weight: 800;
color: #1a1a1a;
line-height: 1;
}
.info-card__stat-unit {
font-size: 12px;
font-weight: 500;
color: rgba(0,0,0,0.45);
margin-left: 2px;
}
.info-card__stat-sep {
width: 1px;
height: 18px;
background: rgba(0,0,0,0.12);
align-self: center;
}
</style>
</head>
<body>
<div class="led-scroll">
<div class="led-strip" id="ledStrip">
<div class="led-cell led-cell--logo">
<img src="logo.jpg" alt="智养膳臻餐厅" />
</div>
</div>
</div>
<script>
/* 菜品图片：本地 SVG 手绘插图，与餐品名称一一对应 */
var foodList = [
{ name:'宫保鸡丁', price:6.8, calorie:156, tags:['高蛋白质','富含硒','增强免疫力'], bg:'img/01-gongbaojiding.svg' },
{ name:'鱼香肉丝', price:7.2, calorie:142, tags:['高蛋白质','低脂肪','富含铁'], bg:'img/02-yuxiangrousi.svg' },
{ name:'番茄炒蛋', price:4.5, calorie:98, tags:['高蛋白质','富含维C','抗氧化'], bg:'img/03-fanqiechaodan.svg' },
{ name:'麻婆豆腐', price:3.8, calorie:85, tags:['高蛋白质','富含钙','低胆固醇'], bg:'img/04-mapodoufu.svg' },
{ name:'红烧肉', price:9.5, calorie:242, tags:['高蛋白质','富含铁','补气血'], bg:'img/05-hongshaorou.svg' },
{ name:'清炒时蔬', price:3.0, calorie:45, tags:['低热量','富含纤维','高维生素'], bg:'img/06-qingchaoshishu.svg' },
{ name:'糖醋排骨', price:8.8, calorie:198, tags:['高蛋白质','富含钙','强筋健骨'], bg:'img/07-tangcupaigu.svg' },
{ name:'水煮鱼', price:7.5, calorie:128, tags:['高蛋白质','富含Omega3','低脂肪'], bg:'img/08-shuizhuyu.svg' },
{ name:'回锅肉', price:8.0, calorie:185, tags:['高蛋白质','富含铁','增强体力'], bg:'img/09-huiguorou.svg' },
{ name:'蒜蓉西兰花', price:4.2, calorie:52, tags:['低热量','富含维C','高纤维'], bg:'img/10-suanrongxilanhua.svg' }
];
var strip = document.getElementById('ledStrip');
foodList.forEach(function(food) {
var cell = document.createElement('div');
cell.className = 'led-cell led-cell--food';
cell.style.backgroundImage = 'url(' + food.bg + ')';
var tagsHtml = food.tags.map(function(t) {
return '<span class="info-card__tag">' + t + '</span>';
}).join('');
cell.innerHTML =
'<div class="info-card">' +
'<div class="info-card__name">' + food.name + '</div>' +
'<div class="info-card__tags">' + tagsHtml + '</div>' +
'<div class="info-card__stats">' +
'<div class="info-card__stat">' +
'<span class="info-card__stat-num">&yen;' + food.price.toFixed(1) + '</span>' +
'<span class="info-card__stat-unit">/100g</span>' +
'</div>' +
'<div class="info-card__stat-sep"></div>' +
'<div class="info-card__stat">' +
'<span class="info-card__stat-num">' + food.calorie + '</span>' +
'<span class="info-card__stat-unit">kcal/100g</span>' +
'</div>' +
'</div>' +
'</div>';
/* 每个餐品格前插入分割条 */
var divider = document.createElement('div');
divider.className = 'led-divider';
strip.appendChild(divider);
strip.appendChild(cell);
});
</script>
</body>
</html>
other-module/canteen-device/led-food-display/logo.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 184 KiB