feat: LED展示屏扩展至15格，本地实拍图替换SVG，LOGO改为文字
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
zhangyan
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
656814d4fe
commit
0f0756c448
@@ -16,3 +16,13 @@
|
||||
### 导航同步
|
||||
- `canteen-device/index.html` — 营养用餐区新增「LED餐品展示屏」卡片
|
||||
- 根 `index.html` — SITE_MAP 新增条目
|
||||
|
||||
## 2026-07-29 | 扩展至 15 格 + 本地实拍图 + LOGO 改文字
|
||||
|
||||
### 变更
|
||||
- 餐品格从 10 格扩展至 15 格，新增：干煸豆角、酸辣土豆丝、口水鸡、葱爆牛肉、地三鲜
|
||||
- 所有菜品插图由 SVG 手绘图替换为本地真实菜品图片（存于 `img/01-宫保鸡丁/` 至 `img/15-地三鲜/`）
|
||||
- 首格 LOGO 由图片改为文字「欢迎光临，数字味道」（白底黑字）
|
||||
|
||||
### 删除
|
||||
- `img/*.svg` — 10 个旧版 SVG 手绘菜品插图，已被真实图片替代
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
@@ -1,28 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
@@ -1,25 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 372 KiB |
@@ -1,32 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
@@ -1,24 +0,0 @@
|
||||
<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">✿</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
@@ -1,25 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 191 KiB |
@@ -1,33 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
@@ -1,31 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
@@ -1,32 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 2.1 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
@@ -1,38 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 362 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
@@ -46,30 +46,30 @@
|
||||
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;
|
||||
width: 360px;
|
||||
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;
|
||||
padding: 20px;
|
||||
color: #1a1a1a;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 4px;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 餐品格 */
|
||||
.led-cell--food {
|
||||
width: 428px;
|
||||
width: 292px;
|
||||
}
|
||||
|
||||
/* ---- 格间分割条（LED 屏模块缝隙光效） ---- */
|
||||
/* ---- 格间分割条 ---- */
|
||||
.led-divider {
|
||||
width: 4px;
|
||||
height: 312px;
|
||||
@@ -86,80 +86,78 @@
|
||||
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%,
|
||||
rgba(255,255,255,0.12) 15%,
|
||||
rgba(255,255,255,0.2) 50%,
|
||||
rgba(255,255,255,0.12) 85%,
|
||||
transparent 100%);
|
||||
}
|
||||
|
||||
/* ---- 底部信息卡片 ---- */
|
||||
.info-card {
|
||||
width: 100%;
|
||||
margin: 0 12px 10px 12px;
|
||||
width: calc(100% - 12px);
|
||||
margin-bottom: 8px;
|
||||
background: rgba(255,255,255,0.88);
|
||||
backdrop-filter: blur(6px);
|
||||
border-radius: 14px;
|
||||
padding: 12px 16px 14px;
|
||||
border-radius: 10px;
|
||||
padding: 8px 10px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.info-card__name {
|
||||
font-size: 26px;
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: #1a1a1a;
|
||||
letter-spacing: 2px;
|
||||
letter-spacing: 1.5px;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* 营养标签行 */
|
||||
.info-card__tags {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: 5px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.info-card__tag {
|
||||
padding: 3px 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
letter-spacing: 0.5px;
|
||||
letter-spacing: 0.3px;
|
||||
white-space: nowrap;
|
||||
background: #4caf50;
|
||||
}
|
||||
|
||||
/* 价格 + 热量 大号数字 */
|
||||
.info-card__stats {
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
gap: 16px;
|
||||
align-items: baseline;
|
||||
}
|
||||
.info-card__stat {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 2px;
|
||||
gap: 1px;
|
||||
}
|
||||
.info-card__stat-num {
|
||||
font-size: 28px;
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: #1a1a1a;
|
||||
line-height: 1;
|
||||
}
|
||||
.info-card__stat-unit {
|
||||
font-size: 12px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: rgba(0,0,0,0.45);
|
||||
margin-left: 2px;
|
||||
color: rgba(0,0,0,0.4);
|
||||
margin-left: 1px;
|
||||
}
|
||||
.info-card__stat-sep {
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
background: rgba(0,0,0,0.12);
|
||||
height: 14px;
|
||||
background: rgba(0,0,0,0.1);
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
@@ -167,33 +165,64 @@
|
||||
<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 class="led-cell led-cell--logo">欢迎光临，数字味道</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 菜品图片：本地 SVG 手绘插图，与餐品名称一一对应 */
|
||||
/*
|
||||
* 15 道餐品背景：
|
||||
* - img: 真实菜品图 URL（优先）
|
||||
* - bg: 菜品专属渐变色（图片未提供时的默认背景）
|
||||
* 有了真实原图后，将图片放入 img/ 目录，改 img 为本地路径即可生效。
|
||||
*/
|
||||
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' }
|
||||
{ name:'宫保鸡丁', price:6.8, calorie:156, tags:['高蛋白质','富含硒','增强免疫力'],
|
||||
bg:'', img:'img/01-宫保鸡丁/u=1690708677,295588643&fm=253&app=138&f=JPEG.jpg' },
|
||||
{ name:'鱼香肉丝', price:7.2, calorie:142, tags:['高蛋白质','低脂肪','富含铁'],
|
||||
bg:'', img:'img/02-鱼香肉丝/443533a7bdbe4a1d862b93aa3f41defa.webp' },
|
||||
{ name:'番茄炒蛋', price:4.5, calorie:98, tags:['高蛋白质','富含维C','抗氧化'],
|
||||
bg:'', img:'img/03-番茄炒蛋/u=966521940,2056770917&fm=3074&app=3074&f=JPEG.jpg' },
|
||||
{ name:'麻婆豆腐', price:3.8, calorie:85, tags:['高蛋白质','富含钙','低胆固醇'],
|
||||
bg:'', img:'img/04-麻婆豆腐/v2-75bda6021dc7ea0b7ebffea61b37a35d_r.jpg' },
|
||||
{ name:'红烧肉', price:9.5, calorie:242, tags:['高蛋白质','富含铁','补气血'],
|
||||
bg:'', img:'img/05-红烧肉/2f738bd4b31c8701f98edc526f3b863f0708ff1a.webp' },
|
||||
{ name:'清炒时蔬', price:3.0, calorie:45, tags:['低热量','富含纤维','高维生素'],
|
||||
bg:'', img:'img/06-清炒时蔬/06-清炒时蔬.jpg' },
|
||||
{ name:'糖醋排骨', price:8.8, calorie:198, tags:['高蛋白质','富含钙','强筋健骨'],
|
||||
bg:'', img:'img/07-糖醋排骨/e1fe9925bc315c60e16d9b1ef1be4e0348547763.webp' },
|
||||
{ name:'水煮鱼', price:7.5, calorie:128, tags:['高蛋白质','富含Omega3','低脂肪'],
|
||||
bg:'', img:'img/08-水煮鱼/下载.jpg' },
|
||||
{ name:'回锅肉', price:8.0, calorie:185, tags:['高蛋白质','富含铁','增强体力'],
|
||||
bg:'', img:'img/09-回锅肉/u=383043788,2156989392&fm=253&app=138&f=JPEG.jpg' },
|
||||
{ name:'蒜蓉西兰花', price:4.2, calorie:52, tags:['低热量','富含维C','高纤维'],
|
||||
bg:'', img:'img/10-蒜蓉西兰花/8d7cb3525ac74301bc86f074af8cc13b.webp' },
|
||||
{ name:'干煸豆角', price:3.5, calorie:62, tags:['低热量','富含纤维','高蛋白'],
|
||||
bg:'', img:'img/11-干煸豆角/12-酸辣土豆丝.png' },
|
||||
{ name:'酸辣土豆丝', price:2.8, calorie:55, tags:['低脂肪','富含维C','高纤维'],
|
||||
bg:'', img:'img/12-酸辣土豆丝/u=18640018,2947141880&fm=3074&app=3074&f=JPEG.jpg' },
|
||||
{ name:'口水鸡', price:7.8, calorie:168, tags:['高蛋白质','低脂肪','富含硒'],
|
||||
bg:'', img:'img/13-口水鸡/u=873728758,3455945663&fm=253&app=120&f=JPEG.jpg' },
|
||||
{ name:'葱爆牛肉', price:8.5, calorie:178, tags:['高蛋白质','富含铁','增强体力'],
|
||||
bg:'', img:'img/14-葱爆牛肉/0.png' },
|
||||
{ name:'地三鲜', price:3.2, calorie:72, tags:['低热量','富含纤维','高维生素'],
|
||||
bg:'', img:'img/15-地三鲜/42d50814ed454bd8b2fede901de64808.webp' }
|
||||
];
|
||||
|
||||
var strip = document.getElementById('ledStrip');
|
||||
|
||||
foodList.forEach(function(food) {
|
||||
/* 每个餐品格前插入分割条 */
|
||||
var divider = document.createElement('div');
|
||||
divider.className = 'led-divider';
|
||||
strip.appendChild(divider);
|
||||
|
||||
var cell = document.createElement('div');
|
||||
cell.className = 'led-cell led-cell--food';
|
||||
cell.style.backgroundImage = 'url(' + food.bg + ')';
|
||||
/* 有菜品图用图，没有则用专属渐变色 */
|
||||
cell.style.background = food.img
|
||||
? 'url(' + food.img + ') center/cover no-repeat'
|
||||
: food.bg;
|
||||
|
||||
var tagsHtml = food.tags.map(function(t) {
|
||||
return '<span class="info-card__tag">' + t + '</span>';
|
||||
@@ -215,11 +244,6 @@
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
/* 每个餐品格前插入分割条 */
|
||||
var divider = document.createElement('div');
|
||||
divider.className = 'led-divider';
|
||||
strip.appendChild(divider);
|
||||
|
||||
strip.appendChild(cell);
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user