From b4373f30e90094a7b70ea1722b41f7764c35a913 Mon Sep 17 00:00:00 2001 From: fengpu <18691763612@163.com> Date: Mon, 8 Jun 2026 18:12:02 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=90=A5=E5=85=BB=E6=A8=A1=E5=9D=97?= =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F8=E9=A1=B5=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E2=80=94=E8=8F=9C=E5=93=81=E8=AF=A6=E6=83=85=E5=9B=9B=E7=BB=B4?= =?UTF-8?q?=E5=BA=A6=E9=87=8D=E6=9E=84=E3=80=81=E5=8E=BB=E9=99=A4=E9=A3=9F?= =?UTF-8?q?=E5=A0=82=E7=AD=9B=E9=80=89=E3=80=81=E9=A3=9F=E8=B0=B1=E7=BB=9F?= =?UTF-8?q?=E8=AE=A1=E5=9B=9B=E5=9B=BE=E6=A0=87=E7=BB=9F=E4=B8=80=E3=80=81?= =?UTF-8?q?=E9=A3=9F=E6=9D=90=E5=8D=95=E4=BD=8D=E5=85=8B=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.7 --- .../mini-program/nutrition/doc/CHANGELOG.md | 18 + .../nutrition/eat-dish-detail.html | 401 +++++++++++++++--- .../mini-program/nutrition/eat-home.html | 67 +-- .../mini-program/nutrition/eat-nutrition.html | 66 +-- .../mini-program/nutrition/make-follow.html | 15 +- .../mini-program/nutrition/make-home.html | 22 +- .../nutrition/make-my-recipes.html | 34 +- .../mini-program/nutrition/make-popular.html | 16 +- .../mini-program/nutrition/me-favorites.html | 10 +- 9 files changed, 431 insertions(+), 218 deletions(-) diff --git a/other-module/mini-program/nutrition/doc/CHANGELOG.md b/other-module/mini-program/nutrition/doc/CHANGELOG.md index 474f0c9..d9ca75b 100644 --- a/other-module/mini-program/nutrition/doc/CHANGELOG.md +++ b/other-module/mini-program/nutrition/doc/CHANGELOG.md @@ -44,3 +44,21 @@ ### 变更 - 更新 `index.html` SITE_MAP，修正 other-terminals 目录路径为 other-module - 小程序模块添加 21 个页面条目 + +## [1.1.0] - 2026-06-08 + +### 变更 + +**吃模块** +- `eat-dish-detail.html` — 按后台餐品总库四维度重构（基本档案/餐品构成/烹饪工艺/营养指标），去除 Tab 切换改为单屏滚动浏览，食材清单支持折叠展开，去掉规格价格区，营养指标改为绝对值展示去进度条 +- `eat-home.html` — 移除顶部当前食堂筛选区域 +- `eat-nutrition.html` — 移除顶部当前食堂筛选区域 + +**做模块** +- `make-follow.html` — 新增食材简介区块，食材清单计量单位统一为克，收藏按钮显示收藏数量 +- `make-home.html` — 推荐食谱列表每项下方添加四图标统计行（点赞/收藏/浏览量/照做次数） +- `make-popular.html` — 食谱列表统计行补充收藏图标，统一为四图标 + +**我模块** +- `me-favorites.html` — 收藏列表统计行补充收藏图标，统一为四图标 +- `make-my-recipes.html` — 已发布食谱列表统计行改为独立四图标展示 diff --git a/other-module/mini-program/nutrition/eat-dish-detail.html b/other-module/mini-program/nutrition/eat-dish-detail.html index edec152..8dfeabd 100644 --- a/other-module/mini-program/nutrition/eat-dish-detail.html +++ b/other-module/mini-program/nutrition/eat-dish-detail.html @@ -22,41 +22,170 @@ } .status-bar .time { font-size: 15px; font-weight: 700; } .status-bar .icons { display: flex; gap: 6px; align-items: center; } - .nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; border-bottom: 0.5px solid #f0f0f0; flex-shrink: 0; position: relative; } + .nav-bar { + height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; + border-bottom: 0.5px solid #f0f0f0; flex-shrink: 0; position: relative; + } .nav-bar .back { font-size: 22px; color: #1677ff; cursor: pointer; text-decoration: none; line-height: 1; } .nav-bar .title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; } - .home-indicator { - height: 20px; display: flex; align-items: center; justify-content: center; background: #fff; flex-shrink: 0; - } - .home-indicator::after { content: ''; width: 120px; height: 5px; background: #1a1a1a; border-radius: 3px; opacity: 0.2; } .page-content { flex: 1; overflow-y: auto; background: #f5f5f5; } .page-content::-webkit-scrollbar { display: none; } - /* 业务样式 */ - .cover { height: 180px; background: linear-gradient(135deg,#f0f7ff,#e6f4ff); display: flex; align-items: center; justify-content: center; font-size: 72px; } - .detail-header { background: #fff; padding: 14px 16px 12px; border-bottom: 6px solid #f5f5f5; } - .detail-header .name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } - .detail-header .dish-name { font-size: 18px; font-weight: 700; } - .detail-header .dish-tag { padding: 2px 10px; border-radius: 10px; font-size: 11px; } - .detail-header .desc { font-size: 13px; color: #666; line-height: 1.6; margin-bottom: 10px; } - .detail-header .price-row { display: flex; align-items: center; justify-content: space-between; } - .detail-header .price { font-size: 22px; font-weight: 800; color: #f5222d; } - .detail-header .price .unit { font-size: 13px; color: #999; font-weight: 400; } - .detail-header .cal-badge { font-size: 12px; color: #666; background: #f5f5f5; padding: 4px 10px; border-radius: 8px; } - .section { background: #fff; padding: 14px 16px; margin-bottom: 8px; } - .section .sec-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; } - .nutri-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; text-align: center; margin-bottom: 12px; } - .nutri-cell { background: #f8f9fa; border-radius: 10px; padding: 10px 4px; } - .nutri-cell .val { font-size: 14px; font-weight: 700; } - .nutri-cell .label { font-size: 11px; color: #999; margin-top: 3px; } - .index-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; text-align: center; } - .index-cell { background: #f8f9fa; border-radius: 10px; padding: 8px 4px; } - .index-cell .icon { font-size: 11px; margin-bottom: 3px; } - .index-cell .val { font-size: 12px; font-weight: 600; color: #333; } - .index-cell .label { font-size: 10px; color: #999; margin-top: 2px; } - .info-card { font-size: 13px; color: #555; background: #f8f9fa; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } - .crowd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } - .crowd-tag { padding: 4px 12px; border-radius: 14px; background: #e6f4ff; color: #1677ff; font-size: 12px; } - .avoid-tip { padding: 8px 10px; background: #fff7e6; border-radius: 8px; font-size: 12px; color: #fa8c16; } + + /* 封面区 */ + .cover { + height: 140px; background: linear-gradient(135deg, #fff7e6 0%, #fff1e6 40%, #fef3e2 100%); + display: flex; align-items: center; justify-content: center; font-size: 56px; position: relative; + } + .cover::after { + content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 20px; + background: linear-gradient(to top, #fff, transparent); + } + + /* 菜品头部 */ + .dish-header { + background: #fff; padding: 0 16px 14px; + } + .dish-header .name-row { + display: flex; align-items: center; gap: 8px; margin-bottom: 6px; + } + .dish-header .dish-name { font-size: 20px; font-weight: 700; } + .dish-header .dish-cat { + padding: 2px 8px; border-radius: 4px; font-size: 11px; background: #e6f4ff; color: #1677ff; + } + .dish-header .tags { display: flex; gap: 6px; } + .dish-header .dish-tag { + padding: 2px 8px; border-radius: 4px; font-size: 11px; + background: #f6ffed; color: #52c41a; + } + .dish-header .meta-row { margin-top: 4px; } + .dish-header .price { font-size: 20px; font-weight: 700; color: #f5222d; } + .dish-header .price .unit { font-size: 12px; color: #999; font-weight: 400; } + + /* 信息概要卡片 */ + .summary-row { + display: flex; margin: 0 16px 10px; gap: 8px; + } + .summary-card { + flex: 1; background: #fff; border-radius: 10px; padding: 10px 0; text-align: center; + } + .summary-card .s-val { font-size: 15px; font-weight: 600; color: #333; } + .summary-card .s-label { font-size: 11px; color: #999; margin-top: 3px; } + + /* 通用区块 */ + .section { background: #fff; margin: 0 16px 8px; border-radius: 12px; padding: 14px 16px; } + .section:last-child { margin-bottom: 16px; } + .sec-title { + font-size: 14px; font-weight: 600; color: #333; margin-bottom: 12px; + display: flex; align-items: center; gap: 6px; + } + .sec-title::before { + content: ''; width: 3px; height: 14px; background: #1677ff; border-radius: 2px; flex-shrink: 0; + } + + /* 适配人群 */ + .crowd-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } + .crowd-item { + display: flex; align-items: center; gap: 4px; + padding: 6px 12px; background: #f8f9fa; border-radius: 16px; font-size: 13px; + } + .crowd-level { + padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 600; + } + .crowd-level.rec { background: #f6ffed; color: #52c41a; } + .crowd-level.mod { background: #fff7e6; color: #fa8c16; } + .crowd-level.avoid { background: #fff1f0; color: #f5222d; } + .crowd-note { + padding: 8px 10px; background: #fffbe6; border-radius: 8px; + font-size: 12px; color: #ad6800; border: 1px solid #ffe58f; + } + + /* 可折叠食材清单 */ + .ing-header { + display: flex; align-items: center; justify-content: space-between; + padding: 10px 0; + } + .ing-header .toggle { + display: flex; align-items: center; gap: 4px; font-size: 12px; color: #1677ff; + font-weight: 400; cursor: pointer; user-select: none; + } + .ing-header .toggle .arrow { display: inline-block; transition: transform 0.2s; font-size: 10px; } + .ing-header .toggle .arrow.open { transform: rotate(180deg); } + .ing-list { display: flex; flex-direction: column; gap: 6px; } + .ing-item { + display: flex; align-items: center; gap: 8px; padding: 8px 10px; + background: #f8f9fa; border-radius: 8px; + } + .ing-item.extra { display: none; } + .ing-list.expanded .ing-item.extra { display: flex; } + .ing-item .ing-icon { + width: 32px; height: 32px; border-radius: 8px; background: #fff; + display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; + } + .ing-item .ing-info { flex: 1; min-width: 0; } + .ing-item .ing-name { font-size: 13px; font-weight: 500; } + .ing-item .ing-meta { font-size: 11px; color: #999; margin-top: 1px; } + .ing-item .ing-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; } + .ing-badge { + padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; white-space: nowrap; + } + .ing-badge.main { background: #e6f4ff; color: #1677ff; } + .ing-badge.sub { background: #f5f5f5; color: #999; } + .ing-badge.allergen { background: #fff7e6; color: #fa8c16; } + + /* 烹饪工艺卡片 2×3 */ + .cook-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } + .cook-card { + background: #f8f9fa; border-radius: 10px; padding: 10px 12px; text-align: center; + } + .cook-card .cook-icon { font-size: 18px; margin-bottom: 3px; } + .cook-card .cook-val { font-size: 14px; font-weight: 600; color: #333; } + .cook-card .cook-label { font-size: 10px; color: #999; margin-top: 2px; } + + /* 营养指标 - 宏量四大项(2×2) */ + .nutri-macro { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } + .nutri-macro-item { + border-radius: 10px; padding: 12px; text-align: center; + } + .nutri-macro-item:nth-child(1) { background: #fff7e6; } + .nutri-macro-item:nth-child(1) .macro-val { color: #d46b08; } + .nutri-macro-item:nth-child(2) { background: #f6ffed; } + .nutri-macro-item:nth-child(2) .macro-val { color: #389e0d; } + .nutri-macro-item:nth-child(3) { background: #e6f4ff; } + .nutri-macro-item:nth-child(3) .macro-val { color: #096dd9; } + .nutri-macro-item:nth-child(4) { background: #f9f0ff; } + .nutri-macro-item:nth-child(4) .macro-val { color: #531dab; } + .nutri-macro-item .macro-val { font-size: 20px; font-weight: 700; margin-bottom: 2px; } + .nutri-macro-item .macro-label { font-size: 12px; color: #999; } + + /* 营养指标 - 其他指标行 */ + .nutri-extra { + display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; + } + .nutri-extra .extra-item { font-size: 12px; color: #999; } + .nutri-extra .extra-item strong { color: #555; font-weight: 500; } + + /* 营养等级 */ + .nutri-grade-row { + display: flex; align-items: center; justify-content: space-between; + padding: 8px 10px; background: #f8f9fa; border-radius: 8px; + } + .nutri-grade-row .grade-label { font-size: 13px; color: #666; } + .grade-badge { + padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; + } + .grade-badge.good { background: #f6ffed; color: #52c41a; } + .grade-badge.warn { background: #fff7e6; color: #fa8c16; } + .grade-badge.bad { background: #fff1f0; color: #f5222d; } + + /* Home Indicator */ + .home-indicator { + height: 20px; display: flex; align-items: center; justify-content: center; + background: #fff; flex-shrink: 0; + } + .home-indicator::after { + content: ''; width: 120px; height: 5px; background: #1a1a1a; + border-radius: 3px; opacity: 0.2; + } @@ -71,51 +200,205 @@
-
🍗
- -
+
🥩
+ + +
- 宫保鸡丁 - 推荐 + 红烧肉 + 荤菜 +
+ 高蛋白 +
-
鸡胸肉、花生、干辣椒爆炒，外嫩里滑，麻辣鲜香
-
- ¥12 / 份 - 📊 285kcal +
+ ¥12/标准份
- + + +
+
200g
克重
+
无
过敏原
+
午/晚
适用餐次
+
385kcal
热量
+
+ +
-
营养成分（每份）
-
-
22.4g
蛋白质
-
14.2g
脂肪
-
12.6g
碳水
-
680mg
钠
+
适配人群
+
+
+ 成人推荐 +
+
+ 高血脂人群慎食 +
+
+ 高血压人群适量 +
-
-
🩸
中GI(52)
GI指数
-
😌
68
饱腹感SI
-
⚡
低
嘌呤
+
⚠ 高血脂人群控制摄入量
+
+ + +
+
+ + 食材清单 + + + 展开全部 + ▾ + +
+
+
+
🥩
+
+
猪五花肉
+
肉禽类/猪肉 · 160g · 80%
+
+
+ 主料 +
+
+
+
🫚
+
+
生姜
+
调味品/香辛料 · 5g · 2.5%
+
+
+ 辅料 +
+
+
+
🥣
+
+
生抽
+
调味品/酱油 · 15g · 7.5%
+
+
+ 辅料 + 含麸质 +
+
+
+
🧊
+
+
冰糖
+
调味品/糖类 · 10g · 5%
+
+
+ 辅料 +
+
+
+
🍶
+
+
料酒
+
调味品/酒类 · 10g · 5%
+
+
+ 辅料 +
+
+
烹饪工艺
-
🍳 爆炒 · 约8分钟 · 用油适中
-
🥬 食材：鸡胸肉120g、花生20g、干辣椒5g、葱姜蒜适量
+
+
+
🍳
+
炖 · 煎
+
主/辅烹饪法
+
+
+
⏱️
+
45min
+
烹饪时长
+
+
+
🔥
+
中火→小火
+
火候
+
+
+
🫒
+
15g
+
油用量
+
+
+
🧂
+
3g
+
盐用量
+
+
+
🌡️
+
100→80℃
+
烹饪温度
+
+
- + +
-
适合人群
-
- 成人 - 健身人群 +
营养指标（每份）
+
+
+
385kcal
+
热量
+
+
+
18.2g
+
蛋白质
+
+
+
12.4g
+
碳水化合物
+
+
+
28.6g
+
脂肪
+
+
+
+ 维生素C 0.8mg + 矿物质 42mg + 膳食纤维 0.3g + 钠 486mg + 铁 2.4mg + 锌 1.8mg
-
⚠ 痛风急性期慎食（含嘌呤）
+
+ + diff --git a/other-module/mini-program/nutrition/eat-home.html b/other-module/mini-program/nutrition/eat-home.html index c644ce9..6badf92 100644 --- a/other-module/mini-program/nutrition/eat-home.html +++ b/other-module/mini-program/nutrition/eat-home.html @@ -51,30 +51,6 @@ border-radius: 3px; opacity: 0.2; } /* === 页面业务样式 === */ - .canteen-header { - background: #fff; padding: 10px 16px; display: flex; align-items: center; - justify-content: space-between; border-bottom: 0.5px solid #f0f0f0; - } - .canteen-select { display: flex; align-items: center; gap: 6px; cursor: pointer; } - .canteen-select .label { font-size: 13px; color: #999; } - .canteen-select .name { font-size: 15px; font-weight: 600; } - .canteen-select .arrow { font-size: 12px; color: #999; transition: transform 0.2s; } - .canteen-select .arrow.open { transform: rotate(180deg); } - /* 食堂下拉菜单 */ - .canteen-header { position: relative; } - .canteen-dropdown { - display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 10; - background: #fff; border-top: 0.5px solid #f0f0f0; - box-shadow: 0 4px 12px rgba(0,0,0,0.08); - } - .canteen-dropdown.show { display: block; } - .canteen-option { - padding: 12px 16px; font-size: 14px; color: #333; cursor: pointer; - border-bottom: 0.5px solid #f5f5f5; - } - .canteen-option:last-child { border-bottom: none; } - .canteen-option:active { background: #f5f5f5; } - .canteen-option.selected { color: #1677ff; font-weight: 600; } .action-btns { display: flex; gap: 12px; padding: 16px 16px 12px; background: #fff; border-bottom: 0.5px solid #f5f5f5; @@ -127,20 +103,6 @@
- -
-
- 当前食堂 - CQ食堂A区 - ▾ -
-
-
CQ食堂A区
-
CQ食堂B区
-
总部食堂
-
西区员工餐厅
-
-
@@ -248,34 +210,7 @@ ] }; - /* 食堂下拉切换 */ - var toggle = document.getElementById('canteenToggle'); - var dropdown = document.getElementById('canteenDropdown'); - var arrow = document.getElementById('canteenArrow'); - var nameEl = document.getElementById('canteenName'); - - toggle.addEventListener('click', function(e) { - e.stopPropagation(); - var isOpen = dropdown.classList.toggle('show'); - arrow.classList.toggle('open', isOpen); - }); - - dropdown.addEventListener('click', function(e) { - var opt = e.target.closest('.canteen-option'); - if (!opt) return; - nameEl.textContent = opt.dataset.name; - dropdown.querySelectorAll('.canteen-option').forEach(function(o) { o.classList.remove('selected'); }); - opt.classList.add('selected'); - dropdown.classList.remove('show'); - arrow.classList.remove('open'); - }); - - document.addEventListener('click', function() { - dropdown.classList.remove('show'); - arrow.classList.remove('open'); - }); - - /* 餐次 Tab 切换 */ +/* 餐次 Tab 切换 */ var tabs = document.querySelectorAll('.meal-tab'); var mealList = document.querySelector('.meal-list'); diff --git a/other-module/mini-program/nutrition/eat-nutrition.html b/other-module/mini-program/nutrition/eat-nutrition.html index 547a324..d5803c8 100644 --- a/other-module/mini-program/nutrition/eat-nutrition.html +++ b/other-module/mini-program/nutrition/eat-nutrition.html @@ -24,29 +24,6 @@ .status-bar .icons { display: flex; gap: 6px; align-items: center; } .page-content { flex: 1; overflow-y: auto; background: #f5f5f5; } .page-content::-webkit-scrollbar { display: none; } - /* 食堂选择栏 */ - .canteen-header { - background: #fff; padding: 10px 16px; display: flex; align-items: center; - justify-content: space-between; border-bottom: 0.5px solid #f0f0f0; position: relative; - } - .canteen-select { display: flex; align-items: center; gap: 6px; cursor: pointer; } - .canteen-select .label { font-size: 13px; color: #999; } - .canteen-select .name { font-size: 15px; font-weight: 600; } - .canteen-select .arrow { font-size: 12px; color: #999; transition: transform 0.2s; } - .canteen-select .arrow.open { transform: rotate(180deg); } - .canteen-dropdown { - display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 10; - background: #fff; border-top: 0.5px solid #f0f0f0; - box-shadow: 0 4px 12px rgba(0,0,0,0.08); - } - .canteen-dropdown.show { display: block; } - .canteen-option { - padding: 12px 16px; font-size: 14px; color: #333; cursor: pointer; - border-bottom: 0.5px solid #f5f5f5; - } - .canteen-option:last-child { border-bottom: none; } - .canteen-option:active { background: #f5f5f5; } - .canteen-option.selected { color: #1677ff; font-weight: 600; } /* 营养/食谱 卡片 */ .action-btns { display: flex; gap: 12px; padding: 16px 16px 12px; background: #fff; @@ -167,20 +144,6 @@
- -
-
- 当前食堂 - CQ食堂A区 - ▾ -
-
-
CQ食堂A区
-
CQ食堂B区
-
总部食堂
-
西区员工餐厅
-
-
@@ -369,34 +332,7 @@