feat: 营养模块小程序8页优化—菜品详情四维度重构、去除食堂筛选、食谱统计四图标统一、食材单位克化
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
fengpu
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
f7acd81164
commit
b4373f30e9
@@ -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` — 已发布食谱列表统计行改为独立四图标展示
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -71,51 +200,205 @@
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- 封面 -->
|
||||
<div class="cover">🍗</div>
|
||||
<!-- 基本信息 -->
|
||||
<div class="detail-header">
|
||||
<div class="cover">🥩</div>
|
||||
|
||||
<!-- 菜品头部 -->
|
||||
<div class="dish-header">
|
||||
<div class="name-row">
|
||||
<span class="dish-name">宫保鸡丁</span>
|
||||
<span class="dish-tag" style="background:#f6ffed;color:#52c41a">推荐</span>
|
||||
<span class="dish-name">红烧肉</span>
|
||||
<span class="dish-cat">荤菜</span>
|
||||
<div class="tags">
|
||||
<span class="dish-tag">高蛋白</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desc">鸡胸肉、花生、干辣椒爆炒，外嫩里滑，麻辣鲜香</div>
|
||||
<div class="price-row">
|
||||
<span class="price">¥12 <span class="unit">/ 份</span></span>
|
||||
<span class="cal-badge">📊 285kcal</span>
|
||||
<div class="meta-row">
|
||||
<span class="price">¥12<span class="unit">/标准份</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 营养成分 -->
|
||||
|
||||
<!-- 信息概要 -->
|
||||
<div class="summary-row">
|
||||
<div class="summary-card"><div class="s-val">200g</div><div class="s-label">克重</div></div>
|
||||
<div class="summary-card"><div class="s-val">无</div><div class="s-label">过敏原</div></div>
|
||||
<div class="summary-card"><div class="s-val">午/晚</div><div class="s-label">适用餐次</div></div>
|
||||
<div class="summary-card"><div class="s-val">385kcal</div><div class="s-label">热量</div></div>
|
||||
</div>
|
||||
|
||||
<!-- 适配人群 -->
|
||||
<div class="section">
|
||||
<div class="sec-title">营养成分（每份）</div>
|
||||
<div class="nutri-grid">
|
||||
<div class="nutri-cell"><div class="val" style="color:#52c41a">22.4g</div><div class="label">蛋白质</div></div>
|
||||
<div class="nutri-cell"><div class="val" style="color:#fa8c16">14.2g</div><div class="label">脂肪</div></div>
|
||||
<div class="nutri-cell"><div class="val" style="color:#722ed1">12.6g</div><div class="label">碳水</div></div>
|
||||
<div class="nutri-cell"><div class="val" style="color:#1677ff">680mg</div><div class="label">钠</div></div>
|
||||
<div class="sec-title">适配人群</div>
|
||||
<div class="crowd-list">
|
||||
<div class="crowd-item">
|
||||
<span>成人</span><span class="crowd-level rec">推荐</span>
|
||||
</div>
|
||||
<div class="crowd-item">
|
||||
<span>高血脂人群</span><span class="crowd-level avoid">慎食</span>
|
||||
</div>
|
||||
<div class="crowd-item">
|
||||
<span>高血压人群</span><span class="crowd-level mod">适量</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="index-grid">
|
||||
<div class="index-cell"><div class="icon">🩸</div><div class="val">中GI(52)</div><div class="label">GI指数</div></div>
|
||||
<div class="index-cell"><div class="icon">😌</div><div class="val">68</div><div class="label">饱腹感SI</div></div>
|
||||
<div class="index-cell"><div class="icon">⚡</div><div class="val">低</div><div class="label">嘌呤</div></div>
|
||||
<div class="crowd-note">⚠ 高血脂人群控制摄入量</div>
|
||||
</div>
|
||||
|
||||
<!-- 食材清单（可折叠，默认展示2项） -->
|
||||
<div class="section">
|
||||
<div class="ing-header">
|
||||
<span style="display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#333;">
|
||||
<span style="display:inline-block;width:3px;height:14px;background:#1677ff;border-radius:2px;flex-shrink:0;"></span>食材清单
|
||||
</span>
|
||||
<span class="toggle" id="ingToggle">
|
||||
<span id="ingToggleText">展开全部</span>
|
||||
<span class="arrow" id="ingArrow">▾</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ing-list" id="ingList">
|
||||
<div class="ing-item">
|
||||
<div class="ing-icon">🥩</div>
|
||||
<div class="ing-info">
|
||||
<div class="ing-name">猪五花肉</div>
|
||||
<div class="ing-meta">肉禽类/猪肉 · 160g · 80%</div>
|
||||
</div>
|
||||
<div class="ing-badges">
|
||||
<span class="ing-badge main">主料</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ing-item">
|
||||
<div class="ing-icon">🫚</div>
|
||||
<div class="ing-info">
|
||||
<div class="ing-name">生姜</div>
|
||||
<div class="ing-meta">调味品/香辛料 · 5g · 2.5%</div>
|
||||
</div>
|
||||
<div class="ing-badges">
|
||||
<span class="ing-badge sub">辅料</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ing-item extra">
|
||||
<div class="ing-icon">🥣</div>
|
||||
<div class="ing-info">
|
||||
<div class="ing-name">生抽</div>
|
||||
<div class="ing-meta">调味品/酱油 · 15g · 7.5%</div>
|
||||
</div>
|
||||
<div class="ing-badges">
|
||||
<span class="ing-badge sub">辅料</span>
|
||||
<span class="ing-badge allergen">含麸质</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ing-item extra">
|
||||
<div class="ing-icon">🧊</div>
|
||||
<div class="ing-info">
|
||||
<div class="ing-name">冰糖</div>
|
||||
<div class="ing-meta">调味品/糖类 · 10g · 5%</div>
|
||||
</div>
|
||||
<div class="ing-badges">
|
||||
<span class="ing-badge sub">辅料</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ing-item extra">
|
||||
<div class="ing-icon">🍶</div>
|
||||
<div class="ing-info">
|
||||
<div class="ing-name">料酒</div>
|
||||
<div class="ing-meta">调味品/酒类 · 10g · 5%</div>
|
||||
</div>
|
||||
<div class="ing-badges">
|
||||
<span class="ing-badge sub">辅料</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 烹饪工艺 -->
|
||||
<div class="section">
|
||||
<div class="sec-title">烹饪工艺</div>
|
||||
<div class="info-card">🍳 爆炒 · 约8分钟 · 用油适中</div>
|
||||
<div class="info-card">🥬 食材：鸡胸肉120g、花生20g、干辣椒5g、葱姜蒜适量</div>
|
||||
<div class="cook-grid">
|
||||
<div class="cook-card">
|
||||
<div class="cook-icon">🍳</div>
|
||||
<div class="cook-val">炖 · 煎</div>
|
||||
<div class="cook-label">主/辅烹饪法</div>
|
||||
</div>
|
||||
<div class="cook-card">
|
||||
<div class="cook-icon">⏱️</div>
|
||||
<div class="cook-val">45min</div>
|
||||
<div class="cook-label">烹饪时长</div>
|
||||
</div>
|
||||
<div class="cook-card">
|
||||
<div class="cook-icon">🔥</div>
|
||||
<div class="cook-val">中火→小火</div>
|
||||
<div class="cook-label">火候</div>
|
||||
</div>
|
||||
<div class="cook-card">
|
||||
<div class="cook-icon">🫒</div>
|
||||
<div class="cook-val">15g</div>
|
||||
<div class="cook-label">油用量</div>
|
||||
</div>
|
||||
<div class="cook-card">
|
||||
<div class="cook-icon">🧂</div>
|
||||
<div class="cook-val">3g</div>
|
||||
<div class="cook-label">盐用量</div>
|
||||
</div>
|
||||
<div class="cook-card">
|
||||
<div class="cook-icon">🌡️</div>
|
||||
<div class="cook-val">100→80℃</div>
|
||||
<div class="cook-label">烹饪温度</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 适合人群 -->
|
||||
|
||||
<!-- 营养指标 -->
|
||||
<div class="section">
|
||||
<div class="sec-title">适合人群</div>
|
||||
<div class="crowd-tags">
|
||||
<span class="crowd-tag">成人</span>
|
||||
<span class="crowd-tag">健身人群</span>
|
||||
<div class="sec-title">营养指标（每份）</div>
|
||||
<div class="nutri-macro">
|
||||
<div class="nutri-macro-item">
|
||||
<div class="macro-val">385kcal</div>
|
||||
<div class="macro-label">热量</div>
|
||||
</div>
|
||||
<div class="nutri-macro-item">
|
||||
<div class="macro-val">18.2g</div>
|
||||
<div class="macro-label">蛋白质</div>
|
||||
</div>
|
||||
<div class="nutri-macro-item">
|
||||
<div class="macro-val">12.4g</div>
|
||||
<div class="macro-label">碳水化合物</div>
|
||||
</div>
|
||||
<div class="nutri-macro-item">
|
||||
<div class="macro-val">28.6g</div>
|
||||
<div class="macro-label">脂肪</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nutri-extra">
|
||||
<span class="extra-item">维生素C <strong>0.8mg</strong></span>
|
||||
<span class="extra-item">矿物质 <strong>42mg</strong></span>
|
||||
<span class="extra-item">膳食纤维 <strong>0.3g</strong></span>
|
||||
<span class="extra-item">钠 <strong>486mg</strong></span>
|
||||
<span class="extra-item">铁 <strong>2.4mg</strong></span>
|
||||
<span class="extra-item">锌 <strong>1.8mg</strong></span>
|
||||
</div>
|
||||
<div class="avoid-tip">⚠ 痛风急性期慎食（含嘌呤）</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 食材清单折叠 —— 默认显示2项，展开显示全部，收起保持2项 */
|
||||
var ingToggle = document.getElementById('ingToggle');
|
||||
var ingList = document.getElementById('ingList');
|
||||
var ingArrow = document.getElementById('ingArrow');
|
||||
var ingToggleText = document.getElementById('ingToggleText');
|
||||
var expanded = false;
|
||||
|
||||
ingToggle.addEventListener('click', function() {
|
||||
expanded = !expanded;
|
||||
if (expanded) {
|
||||
ingList.classList.add('expanded');
|
||||
ingArrow.classList.add('open');
|
||||
ingToggleText.textContent = '收起';
|
||||
} else {
|
||||
ingList.classList.remove('expanded');
|
||||
ingArrow.classList.remove('open');
|
||||
ingToggleText.textContent = '展开全部';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</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 @@
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<div class="page-content">
|
||||
<!-- 食堂选择栏 -->
|
||||
<div class="canteen-header">
|
||||
<div class="canteen-select" id="canteenToggle">
|
||||
<span class="label">当前食堂</span>
|
||||
<span class="name" id="canteenName">CQ食堂A区</span>
|
||||
<span class="arrow" id="canteenArrow">▾</span>
|
||||
</div>
|
||||
<div class="canteen-dropdown" id="canteenDropdown">
|
||||
<div class="canteen-option selected" data-name="CQ食堂A区">CQ食堂A区</div>
|
||||
<div class="canteen-option" data-name="CQ食堂B区">CQ食堂B区</div>
|
||||
<div class="canteen-option" data-name="总部食堂">总部食堂</div>
|
||||
<div class="canteen-option" data-name="西区员工餐厅">西区员工餐厅</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 营养/食谱 入口按钮 -->
|
||||
<div class="action-btns">
|
||||
@@ -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');
|
||||
|
||||
|
||||
@@ -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 @@
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="page-content">
|
||||
<!-- 食堂选择栏 -->
|
||||
<div class="canteen-header">
|
||||
<div class="canteen-select" id="canteenToggle">
|
||||
<span class="label">当前食堂</span>
|
||||
<span class="name" id="canteenName">CQ食堂A区</span>
|
||||
<span class="arrow" id="canteenArrow">▾</span>
|
||||
</div>
|
||||
<div class="canteen-dropdown" id="canteenDropdown">
|
||||
<div class="canteen-option selected" data-name="CQ食堂A区">CQ食堂A区</div>
|
||||
<div class="canteen-option" data-name="CQ食堂B区">CQ食堂B区</div>
|
||||
<div class="canteen-option" data-name="总部食堂">总部食堂</div>
|
||||
<div class="canteen-option" data-name="西区员工餐厅">西区员工餐厅</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 营养/食谱 卡片 -->
|
||||
<div class="action-btns">
|
||||
@@ -369,34 +332,7 @@
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
<script>
|
||||
/* 食堂下拉切换 */
|
||||
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 contentTabs = document.querySelectorAll('.content-tab');
|
||||
contentTabs.forEach(function(tab) {
|
||||
tab.addEventListener('click', function() {
|
||||
|
||||
@@ -99,6 +99,7 @@
|
||||
}
|
||||
.btn-like { background: #fff1f0; color: #f5222d; border: 1px solid #ffccc7 !important; }
|
||||
.btn-collect { background: #fff7e6; color: #fa8c16; border: 1px solid #ffd591 !important; }
|
||||
.intro-text { font-size: 13px; color: #555; line-height: 1.7; }
|
||||
.btn-start { background: #1677ff; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
@@ -123,15 +124,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="sec-title">食谱简介</div>
|
||||
<div class="intro-text">鸡胸肉提供优质低脂蛋白，搭配生菜、小番茄、黄瓜等新鲜时蔬，富含膳食纤维和维生素。橄榄油提供健康不饱和脂肪酸。食材简单易得，营养均衡，适合减脂期日常食用。</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="sec-title">食材清单</div>
|
||||
<div class="ingredient-list">
|
||||
<div class="ingredient-item"><span class="name">鸡胸肉</span><span class="amount">150g</span></div>
|
||||
<div class="ingredient-item"><span class="name">生菜</span><span class="amount">100g</span></div>
|
||||
<div class="ingredient-item"><span class="name">小番茄</span><span class="amount">6颗</span></div>
|
||||
<div class="ingredient-item"><span class="name">黄瓜</span><span class="amount">半根</span></div>
|
||||
<div class="ingredient-item"><span class="name">橄榄油</span><span class="amount">5ml</span></div>
|
||||
<div class="ingredient-item"><span class="name">黑胡椒</span><span class="amount">适量</span></div>
|
||||
<div class="ingredient-item"><span class="name">小番茄</span><span class="amount">120g</span></div>
|
||||
<div class="ingredient-item"><span class="name">黄瓜</span><span class="amount">80g</span></div>
|
||||
<div class="ingredient-item"><span class="name">橄榄油</span><span class="amount">5g</span></div>
|
||||
<div class="ingredient-item"><span class="name">黑胡椒</span><span class="amount">2g</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
@@ -162,7 +167,7 @@
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-like">❤️ 128</button>
|
||||
<button class="btn btn-collect">⭐ 收藏</button>
|
||||
<button class="btn btn-collect">⭐ 95</button>
|
||||
<button class="btn btn-start">开始照做</button>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
|
||||
@@ -83,7 +83,9 @@
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.recipe-item .recipe-meta { font-size: 12px; color: #999; margin-top: 3px; }
|
||||
.recipe-item .recipe-likes { font-size: 11px; color: #ff6b6b; margin-top: 3px; }
|
||||
.recipe-item .recipe-stats { display: flex; gap: 10px; margin-top: 4px; }
|
||||
.recipe-item .stat { font-size: 11px; color: #bbb; }
|
||||
.recipe-item .stat.likes { color: #ff6b6b; }
|
||||
|
||||
/* 底部 Tab 栏 */
|
||||
.tab-bar {
|
||||
@@ -151,7 +153,11 @@
|
||||
<div class="content">
|
||||
<div class="recipe-title">低脂番茄炒蛋的正确打开方式</div>
|
||||
<div class="recipe-meta">营养达人小李 · 180kcal/份</div>
|
||||
<div class="recipe-likes">❤️ 286人喜欢</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 286</span>
|
||||
<span class="stat">⭐ 120</span>
|
||||
<span class="stat">👁️ 1.8k</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="recipe-item" href="make-follow.html">
|
||||
@@ -159,7 +165,11 @@
|
||||
<div class="content">
|
||||
<div class="recipe-title">高蛋白健身餐：鸡胸肉沙拉</div>
|
||||
<div class="recipe-meta">健身博士阿强 · 320kcal/份</div>
|
||||
<div class="recipe-likes">❤️ 198人喜欢</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 198</span>
|
||||
<span class="stat">⭐ 95</span>
|
||||
<span class="stat">👁️ 1.2k</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="recipe-item" href="make-follow.html">
|
||||
@@ -167,7 +177,11 @@
|
||||
<div class="content">
|
||||
<div class="recipe-title">糖尿病友好版红烧肉</div>
|
||||
<div class="recipe-meta">控糖生活家 · 260kcal/份</div>
|
||||
<div class="recipe-likes">❤️ 156人喜欢</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 156</span>
|
||||
<span class="stat">⭐ 82</span>
|
||||
<span class="stat">👁️ 980</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -73,7 +73,9 @@
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.recipe-card .recipe-meta { font-size: 12px; color: #999; margin-top: 4px; }
|
||||
.recipe-card .recipe-stats { font-size: 11px; color: #ff6b6b; margin-top: 3px; }
|
||||
.recipe-card .recipe-stats { display: flex; gap: 8px; margin-top: 3px; }
|
||||
.recipe-card .stat { font-size: 11px; color: #bbb; }
|
||||
.recipe-card .stat.likes { color: #ff6b6b; }
|
||||
/* 状态标签 */
|
||||
.status-tag {
|
||||
font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
|
||||
@@ -133,7 +135,11 @@
|
||||
<div class="info">
|
||||
<div class="recipe-name">低脂番茄炒蛋<span class="status-tag published">已发布</span></div>
|
||||
<div class="recipe-meta">发布于 2026-05-16 · 180kcal/份</div>
|
||||
<div class="recipe-stats">❤️ 286 · 👁️ 1.2k</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 286</span>
|
||||
<span class="stat">⭐ 120</span>
|
||||
<span class="stat">👁️ 1.2k</span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="action-btn view" href="make-follow.html">查看</a>
|
||||
</div>
|
||||
@@ -142,7 +148,11 @@
|
||||
<div class="info">
|
||||
<div class="recipe-name">鸡胸肉蔬菜沙拉<span class="status-tag published">已发布</span></div>
|
||||
<div class="recipe-meta">发布于 2026-05-14 · 220kcal/份</div>
|
||||
<div class="recipe-stats">❤️ 128 · 👁️ 860</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 128</span>
|
||||
<span class="stat">⭐ 62</span>
|
||||
<span class="stat">👁️ 860</span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="action-btn view" href="make-follow.html">查看</a>
|
||||
</div>
|
||||
@@ -151,7 +161,11 @@
|
||||
<div class="info">
|
||||
<div class="recipe-name">清蒸鲈鱼<span class="status-tag published">已发布</span></div>
|
||||
<div class="recipe-meta">发布于 2026-05-10 · 142kcal/份</div>
|
||||
<div class="recipe-stats">❤️ 56 · 👁️ 420</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 56</span>
|
||||
<span class="stat">⭐ 28</span>
|
||||
<span class="stat">👁️ 420</span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="action-btn view" href="make-follow.html">查看</a>
|
||||
</div>
|
||||
@@ -160,7 +174,11 @@
|
||||
<div class="info">
|
||||
<div class="recipe-name">蒜蓉西兰花<span class="status-tag published">已发布</span></div>
|
||||
<div class="recipe-meta">发布于 2026-05-08 · 68kcal/份</div>
|
||||
<div class="recipe-stats">❤️ 12 · 👁️ 180</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 12</span>
|
||||
<span class="stat">⭐ 8</span>
|
||||
<span class="stat">👁️ 180</span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="action-btn view" href="make-follow.html">查看</a>
|
||||
</div>
|
||||
@@ -169,8 +187,12 @@
|
||||
<div class="info">
|
||||
<div class="recipe-name">低钠杂粮面<span class="status-tag published">已发布</span></div>
|
||||
<div class="recipe-meta">发布于 2026-05-05 · 310kcal/份</div>
|
||||
<div class="recipe-stats">❤️ 4 · 👁️ 90</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 4</span>
|
||||
<span class="stat">⭐ 2</span>
|
||||
<span class="stat">👁️ 90</span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="action-btn view" href="make-follow.html">查看</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -138,8 +138,8 @@
|
||||
<div class="recipe-meta">营养达人小李 · 180kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 286</span>
|
||||
<span class="stat">⭐ 120</span>
|
||||
<span class="stat">👁️ 1.8k</span>
|
||||
<span class="stat">📋 152</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -150,8 +150,8 @@
|
||||
<div class="recipe-meta">健身博士阿强 · 320kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 198</span>
|
||||
<span class="stat">⭐ 95</span>
|
||||
<span class="stat">👁️ 1.2k</span>
|
||||
<span class="stat">📋 96</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -162,8 +162,8 @@
|
||||
<div class="recipe-meta">控糖生活家 · 260kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 156</span>
|
||||
<span class="stat">⭐ 82</span>
|
||||
<span class="stat">👁️ 980</span>
|
||||
<span class="stat">📋 78</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -174,8 +174,8 @@
|
||||
<div class="recipe-meta">厨艺爱好者老张 · 280kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 143</span>
|
||||
<span class="stat">⭐ 68</span>
|
||||
<span class="stat">👁️ 860</span>
|
||||
<span class="stat">📋 65</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -186,8 +186,8 @@
|
||||
<div class="recipe-meta">养生大叔老陈 · 156kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 128</span>
|
||||
<span class="stat">⭐ 56</span>
|
||||
<span class="stat">👁️ 750</span>
|
||||
<span class="stat">📋 52</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -198,8 +198,8 @@
|
||||
<div class="recipe-meta">素食主义小美 · 120kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 112</span>
|
||||
<span class="stat">⭐ 48</span>
|
||||
<span class="stat">👁️ 680</span>
|
||||
<span class="stat">📋 45</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -210,8 +210,8 @@
|
||||
<div class="recipe-meta">减脂达人阿杰 · 245kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 98</span>
|
||||
<span class="stat">⭐ 36</span>
|
||||
<span class="stat">👁️ 620</span>
|
||||
<span class="stat">📋 38</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -222,8 +222,8 @@
|
||||
<div class="recipe-meta">轻食girl小可 · 195kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 87</span>
|
||||
<span class="stat">⭐ 32</span>
|
||||
<span class="stat">👁️ 540</span>
|
||||
<span class="stat">📋 32</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@@ -74,8 +74,8 @@
|
||||
<div class="recipe-meta">健身博士阿强 · 320kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 198</span>
|
||||
<span class="stat">⭐ 95</span>
|
||||
<span class="stat">👁️ 1.2k</span>
|
||||
<span class="stat">📋 96</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -89,8 +89,8 @@
|
||||
<div class="recipe-meta">厨艺爱好者老张 · 280kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 143</span>
|
||||
<span class="stat">⭐ 68</span>
|
||||
<span class="stat">👁️ 860</span>
|
||||
<span class="stat">📋 65</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -104,8 +104,8 @@
|
||||
<div class="recipe-meta">素食主义小美 · 120kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 112</span>
|
||||
<span class="stat">⭐ 48</span>
|
||||
<span class="stat">👁️ 680</span>
|
||||
<span class="stat">📋 45</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -119,8 +119,8 @@
|
||||
<div class="recipe-meta">养生大叔老陈 · 156kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 128</span>
|
||||
<span class="stat">⭐ 56</span>
|
||||
<span class="stat">👁️ 750</span>
|
||||
<span class="stat">📋 52</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -134,8 +134,8 @@
|
||||
<div class="recipe-meta">减脂达人阿杰 · 245kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 98</span>
|
||||
<span class="stat">⭐ 36</span>
|
||||
<span class="stat">👁️ 620</span>
|
||||
<span class="stat">📋 38</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user