feat: 新增今日食谱页、做-社区模块重构及子页面，多页面交互优化
- 新增 eat-recipe-today.html（今日食谱展示，含日期栏、餐次Tab、分类菜品卡片） - 新增 eat-cart.html（购物车页面） - 新增 make-ranking.html（创作排行榜，含本周/本月/总榜切换） - 新增 make-share.html（分享赚钱，含收益卡片、奖励规则、收益明细） - 新增 make-popular.html（热门创作列表，含分类筛选） - 重构 make-home.html（Banner + 四宫格导航 + 热门创作） - 优化 make-create.html（支持封面图片/视频上传、步骤媒体上传） - 优化 make-follow.html（食谱详情支持视频播放按钮、步骤媒体展示） - 优化 eat-recipe.html（查看食谱跳转、扫码点餐提示） - 同步更新多个小程序页面交互及后台管理页面样式 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
冯普
@@ -47,7 +47,9 @@
|
||||
text-decoration: none; padding: 4px 12px; border: 1px solid #1677ff; border-radius: 12px;
|
||||
}
|
||||
.faq-section { padding: 16px; }
|
||||
.faq-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: #333; }
|
||||
.faq-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
.faq-title { font-size: 13px; font-weight: 600; color: #333; }
|
||||
.faq-toggle { font-size: 12px; color: #1677ff; cursor: pointer; }
|
||||
.faq-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.faq-item {
|
||||
display: block; padding: 12px 14px; background: #fff; border-radius: 10px;
|
||||
@@ -86,14 +88,17 @@
|
||||
</div>
|
||||
<!-- 常见问题 -->
|
||||
<div class="faq-section">
|
||||
<div class="faq-title">常见问题</div>
|
||||
<div class="faq-list">
|
||||
<div class="faq-header">
|
||||
<div class="faq-title">常见问题</div>
|
||||
<span class="faq-toggle" id="faqToggle">展开全部 ›</span>
|
||||
</div>
|
||||
<div class="faq-list" id="faqList">
|
||||
<a class="faq-item" href="ask-chat.html">🥗 今天午餐吃什么比较健康？</a>
|
||||
<a class="faq-item" href="ask-chat.html">📊 我的营养摄入有什么不足？</a>
|
||||
<a class="faq-item" href="ask-chat.html">🏋️ 健身后应该怎么补充蛋白质？</a>
|
||||
<a class="faq-item" href="ask-chat.html">⚠️ 我有高血压，饮食要注意什么？</a>
|
||||
<a class="faq-item" href="ask-chat.html">🍎 推荐一些低GI的食物</a>
|
||||
<a class="faq-item" href="ask-chat.html">🥛 乳糖不耐受怎么补钙？</a>
|
||||
<a class="faq-item" href="ask-chat.html" style="display:none">🏋️ 健身后应该怎么补充蛋白质？</a>
|
||||
<a class="faq-item" href="ask-chat.html" style="display:none">⚠️ 我有高血压，饮食要注意什么？</a>
|
||||
<a class="faq-item" href="ask-chat.html" style="display:none">🍎 推荐一些低GI的食物</a>
|
||||
<a class="faq-item" href="ask-chat.html" style="display:none">🥛 乳糖不耐受怎么补钙？</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,5 +116,18 @@
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
<script>
|
||||
var toggle = document.getElementById('faqToggle');
|
||||
var items = document.querySelectorAll('#faqList .faq-item');
|
||||
var expanded = false;
|
||||
|
||||
toggle.addEventListener('click', function() {
|
||||
expanded = !expanded;
|
||||
items.forEach(function(item, i) {
|
||||
if (i >= 2) item.style.display = expanded ? 'block' : 'none';
|
||||
});
|
||||
toggle.textContent = expanded ? '收起 ‹' : '展开全部 ›';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,199 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>购物车 | 智能餐养小程序</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a2a2a; display: flex; justify-content: center; align-items: flex-start;
|
||||
min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
padding: 24px 0 40px;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 390px; height: 844px; background: #fff; border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden; position: relative; display: flex; flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.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 .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; }
|
||||
.nav-bar .clear-btn {
|
||||
position: absolute; right: 16px; font-size: 13px; color: #999; cursor: pointer;
|
||||
background: none; border: none;
|
||||
}
|
||||
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
.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;
|
||||
}
|
||||
/* 购物车商品列表 */
|
||||
.cart-section { background: #fff; margin-bottom: 8px; }
|
||||
.cart-section .sec-title {
|
||||
padding: 14px 16px 10px; font-size: 14px; font-weight: 600; color: #333;
|
||||
border-bottom: 0.5px solid #f5f5f5;
|
||||
}
|
||||
.cart-item {
|
||||
display: flex; align-items: center; gap: 10px; padding: 12px 16px;
|
||||
border-bottom: 0.5px solid #f5f5f5;
|
||||
}
|
||||
.cart-item:last-child { border-bottom: none; }
|
||||
.cart-item .food-icon {
|
||||
width: 52px; height: 52px; border-radius: 10px; background: #f5f5f5;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0;
|
||||
}
|
||||
.cart-item .food-info { flex: 1; min-width: 0; }
|
||||
.cart-item .food-name { font-size: 14px; font-weight: 600; }
|
||||
.cart-item .food-meta { font-size: 11px; color: #999; margin-top: 2px; }
|
||||
.cart-item .food-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
|
||||
.cart-item .food-price { font-size: 15px; font-weight: 700; color: #f5222d; }
|
||||
/* 数量控制 */
|
||||
.qty-ctrl { display: flex; align-items: center; gap: 0; }
|
||||
.qty-btn {
|
||||
width: 26px; height: 26px; border-radius: 50%; border: 1px solid #d9d9d9;
|
||||
background: #fff; font-size: 15px; color: #333; cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center; line-height: 1;
|
||||
}
|
||||
.qty-btn:active { background: #f5f5f5; }
|
||||
.qty-num { width: 32px; text-align: center; font-size: 14px; font-weight: 600; }
|
||||
/* 营养汇总 */
|
||||
.nutri-summary { background: #fff; margin-bottom: 8px; padding: 14px 16px; }
|
||||
.nutri-summary .sec-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
|
||||
.nutri-row { display: flex; gap: 8px; }
|
||||
.nutri-tag {
|
||||
flex: 1; text-align: center; padding: 10px 4px; background: #f8f9fa;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.nutri-tag .val { font-size: 14px; font-weight: 700; }
|
||||
.nutri-tag .label { font-size: 11px; color: #999; margin-top: 3px; }
|
||||
/* 备注 */
|
||||
.remark-section { background: #fff; margin-bottom: 8px; padding: 14px 16px; }
|
||||
.remark-section .sec-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
|
||||
.remark-input {
|
||||
width: 100%; height: 36px; border-radius: 8px; border: 1px solid #e8e8e8;
|
||||
padding: 0 12px; font-size: 13px; background: #f8f9fa; outline: none;
|
||||
}
|
||||
.remark-input:focus { border-color: #1677ff; }
|
||||
/* 底部结算栏 */
|
||||
.settle-bar {
|
||||
height: 60px; background: #fff; border-top: 1px solid #f0f0f0;
|
||||
display: flex; align-items: center; padding: 0 16px; gap: 12px; flex-shrink: 0;
|
||||
}
|
||||
.settle-info { flex: 1; }
|
||||
.settle-total { font-size: 12px; color: #666; }
|
||||
.settle-total .amount { font-size: 20px; font-weight: 800; color: #f5222d; }
|
||||
.settle-desc { font-size: 11px; color: #999; margin-top: 2px; }
|
||||
.settle-btn {
|
||||
height: 44px; padding: 0 28px; background: #1677ff; color: #fff; border: none;
|
||||
border-radius: 22px; font-size: 15px; font-weight: 600; cursor: pointer;
|
||||
text-decoration: none; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">09:41</span>
|
||||
<div class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="javascript:history.back()">‹</a>
|
||||
<span class="title">购物车</span>
|
||||
<button class="clear-btn">清空</button>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- 已选菜品 -->
|
||||
<div class="cart-section">
|
||||
<div class="sec-title">已选菜品（3）</div>
|
||||
<div class="cart-item">
|
||||
<div class="food-icon">🍗</div>
|
||||
<div class="food-info">
|
||||
<div class="food-name">宫保鸡丁</div>
|
||||
<div class="food-meta">285kcal/份 · 蛋白质 22.4g</div>
|
||||
<div class="food-bottom">
|
||||
<span class="food-price">¥12</span>
|
||||
<div class="qty-ctrl">
|
||||
<button class="qty-btn">−</button>
|
||||
<span class="qty-num">1</span>
|
||||
<button class="qty-btn">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cart-item">
|
||||
<div class="food-icon">🥦</div>
|
||||
<div class="food-info">
|
||||
<div class="food-name">炒西兰花</div>
|
||||
<div class="food-meta">68kcal/份 · 蛋白质 3.2g</div>
|
||||
<div class="food-bottom">
|
||||
<span class="food-price">¥8</span>
|
||||
<div class="qty-ctrl">
|
||||
<button class="qty-btn">−</button>
|
||||
<span class="qty-num">1</span>
|
||||
<button class="qty-btn">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cart-item">
|
||||
<div class="food-icon">🐟</div>
|
||||
<div class="food-info">
|
||||
<div class="food-name">清蒸鱼</div>
|
||||
<div class="food-meta">142kcal/份 · 蛋白质 20.8g</div>
|
||||
<div class="food-bottom">
|
||||
<span class="food-price">¥18</span>
|
||||
<div class="qty-ctrl">
|
||||
<button class="qty-btn">−</button>
|
||||
<span class="qty-num">1</span>
|
||||
<button class="qty-btn">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 营养汇总 -->
|
||||
<div class="nutri-summary">
|
||||
<div class="sec-title">本单营养概览</div>
|
||||
<div class="nutri-row">
|
||||
<div class="nutri-tag"><div class="val" style="color:#fa8c16">495</div><div class="label">总热量(kcal)</div></div>
|
||||
<div class="nutri-tag"><div class="val" style="color:#52c41a">46.4g</div><div class="label">蛋白质</div></div>
|
||||
<div class="nutri-tag"><div class="val" style="color:#722ed1">22.6g</div><div class="label">脂肪</div></div>
|
||||
<div class="nutri-tag"><div class="val" style="color:#1677ff">16.4g</div><div class="label">碳水</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备注 -->
|
||||
<div class="remark-section">
|
||||
<div class="sec-title">备注</div>
|
||||
<input class="remark-input" placeholder="如：少辣、不要香菜..." readonly>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部结算栏 -->
|
||||
<div class="settle-bar">
|
||||
<div class="settle-info">
|
||||
<div class="settle-total">合计 <span class="amount">¥38.00</span></div>
|
||||
<div class="settle-desc">已享员工餐补优惠</div>
|
||||
</div>
|
||||
<a class="settle-btn" href="eat-order-confirm.html">提交订单</a>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -57,11 +57,6 @@
|
||||
.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; }
|
||||
.trace-link {
|
||||
display: block; text-align: center; padding: 12px; background: #fff;
|
||||
margin: 0 16px 16px; border-radius: 12px; font-size: 13px; color: #1677ff;
|
||||
text-decoration: none; border: 1px solid #e6f4ff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -119,8 +114,6 @@
|
||||
</div>
|
||||
<div class="avoid-tip">⚠ 痛风急性期慎食（含嘌呤）</div>
|
||||
</div>
|
||||
<!-- 溯源链接 -->
|
||||
<a class="trace-link" href="trace-detail.html">🔍 查看食材溯源信息 ›</a>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
@@ -58,7 +58,23 @@
|
||||
.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; }
|
||||
.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;
|
||||
@@ -97,20 +113,6 @@
|
||||
.meal-item .food-name { font-size: 14px; font-weight: 500; }
|
||||
.meal-item .food-meta { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.meal-item .food-cal { font-size: 13px; font-weight: 600; color: #fa8c16; flex-shrink: 0; }
|
||||
.nutri-summary {
|
||||
margin: 12px 16px; padding: 14px; background: #fff; border-radius: 12px;
|
||||
}
|
||||
.nutri-summary .summary-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
|
||||
.nutri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
||||
.nutri-card {
|
||||
background: #f8f9fa; border-radius: 10px; padding: 10px 8px; text-align: center;
|
||||
}
|
||||
.nutri-card .val { font-size: 16px; font-weight: 700; }
|
||||
.nutri-card .unit { font-size: 11px; color: #999; margin-top: 2px; }
|
||||
.nutri-link {
|
||||
display: block; text-align: center; font-size: 12px; color: #1677ff;
|
||||
margin-top: 10px; cursor: pointer; text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -127,10 +129,16 @@
|
||||
<div class="page-content">
|
||||
<!-- 食堂选择栏 -->
|
||||
<div class="canteen-header">
|
||||
<div class="canteen-select">
|
||||
<div class="canteen-select" id="canteenToggle">
|
||||
<span class="label">当前食堂</span>
|
||||
<span class="name">长庆食堂A区</span>
|
||||
<span class="arrow">▾</span>
|
||||
<span class="name" id="canteenName">长庆食堂A区</span>
|
||||
<span class="arrow" id="canteenArrow">▾</span>
|
||||
</div>
|
||||
<div class="canteen-dropdown" id="canteenDropdown">
|
||||
<div class="canteen-option selected" data-name="长庆食堂A区">长庆食堂A区</div>
|
||||
<div class="canteen-option" data-name="长庆食堂B区">长庆食堂B区</div>
|
||||
<div class="canteen-option" data-name="总部食堂">总部食堂</div>
|
||||
<div class="canteen-option" data-name="西区员工餐厅">西区员工餐厅</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -184,19 +192,25 @@
|
||||
</div>
|
||||
<span class="food-cal">232kcal</span>
|
||||
</a>
|
||||
<a class="meal-item" href="eat-dish-detail.html">
|
||||
<div class="food-icon">🥬</div>
|
||||
<div class="food-info">
|
||||
<div class="food-name">蒜蓉油麦菜</div>
|
||||
<div class="food-meta">蛋白质 1.8g · 脂肪 3.2g</div>
|
||||
</div>
|
||||
<span class="food-cal">52kcal</span>
|
||||
</a>
|
||||
<a class="meal-item" href="eat-dish-detail.html">
|
||||
<div class="food-icon">🍲</div>
|
||||
<div class="food-info">
|
||||
<div class="food-name">番茄蛋花汤</div>
|
||||
<div class="food-meta">蛋白质 4.6g · 脂肪 2.1g</div>
|
||||
</div>
|
||||
<span class="food-cal">48kcal</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 营养摘要 -->
|
||||
<div class="nutri-summary">
|
||||
<div class="summary-title">午餐营养摘要</div>
|
||||
<div class="nutri-grid">
|
||||
<div class="nutri-card"><div class="val" style="color:#fa8c16">727</div><div class="unit">千卡 / 热量</div></div>
|
||||
<div class="nutri-card"><div class="val" style="color:#52c41a">50.6g</div><div class="unit">蛋白质</div></div>
|
||||
<div class="nutri-card"><div class="val" style="color:#722ed1">22.6g</div><div class="unit">脂肪</div></div>
|
||||
</div>
|
||||
<a class="nutri-link" href="eat-nutrition.html">查看完整营养分析 ›</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 Tab -->
|
||||
@@ -209,5 +223,80 @@
|
||||
<!-- Home Indicator -->
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
<script>
|
||||
/* 餐次菜品数据 */
|
||||
var mealData = {
|
||||
'早餐': [
|
||||
{ icon: '🥛', name: '豆浆', meta: '蛋白质 3.6g · 碳水 8.2g', cal: '65kcal' },
|
||||
{ icon: '🥖', name: '油条', meta: '碳水 24g · 脂肪 12.8g', cal: '198kcal' },
|
||||
{ icon: '🥚', name: '水煮蛋', meta: '蛋白质 6.3g · 脂肪 5.3g', cal: '78kcal' },
|
||||
{ icon: '🥣', name: '小米粥', meta: '碳水 16g · 蛋白质 1.8g', cal: '72kcal' }
|
||||
],
|
||||
'午餐': [
|
||||
{ icon: '🍗', name: '宫保鸡丁', meta: '蛋白质 22.4g · 脂肪 14.2g', cal: '285kcal' },
|
||||
{ icon: '🐟', name: '清蒸鱼', meta: '蛋白质 20.8g · 脂肪 4.6g', cal: '142kcal' },
|
||||
{ icon: '🥦', name: '炒西兰花', meta: '蛋白质 3.2g · 脂肪 3.8g', cal: '68kcal' },
|
||||
{ icon: '🍚', name: '米饭（中碗）', meta: '碳水 58g · 蛋白质 4.2g', cal: '232kcal' },
|
||||
{ icon: '🥬', name: '蒜蓉油麦菜', meta: '蛋白质 1.8g · 脂肪 3.2g', cal: '52kcal' },
|
||||
{ icon: '🍲', name: '番茄蛋花汤', meta: '蛋白质 4.6g · 脂肪 2.1g', cal: '48kcal' }
|
||||
],
|
||||
'晚餐': [
|
||||
{ icon: '🍳', name: '番茄炒蛋', meta: '蛋白质 10.2g · 脂肪 8.6g', cal: '156kcal' },
|
||||
{ icon: '🫑', name: '青椒肉丝', meta: '蛋白质 14.8g · 脂肪 9.2g', cal: '178kcal' },
|
||||
{ icon: '🥬', name: '紫菜蛋花汤', meta: '蛋白质 3.4g · 脂肪 1.2g', cal: '32kcal' },
|
||||
{ icon: '🍞', name: '馒头', meta: '碳水 44g · 蛋白质 7.0g', cal: '221kcal' }
|
||||
]
|
||||
};
|
||||
|
||||
/* 食堂下拉切换 */
|
||||
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 切换 */
|
||||
var tabs = document.querySelectorAll('.meal-tab');
|
||||
var mealList = document.querySelector('.meal-list');
|
||||
|
||||
function renderMeal(mealType) {
|
||||
var items = mealData[mealType] || [];
|
||||
mealList.innerHTML = items.map(function(d) {
|
||||
return '<a class="meal-item" href="eat-dish-detail.html">'
|
||||
+ '<div class="food-icon">' + d.icon + '</div>'
|
||||
+ '<div class="food-info"><div class="food-name">' + d.name + '</div>'
|
||||
+ '<div class="food-meta">' + d.meta + '</div></div>'
|
||||
+ '<span class="food-cal">' + d.cal + '</span></a>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
tabs.forEach(function(tab) {
|
||||
tab.addEventListener('click', function() {
|
||||
tabs.forEach(function(t) { t.classList.remove('active'); });
|
||||
tab.classList.add('active');
|
||||
renderMeal(tab.textContent);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
.record-item .r-time { font-size: 11px; color: #999; margin-top: 2px; }
|
||||
.record-item .r-cal { font-size: 13px; font-weight: 600; color: #fa8c16; flex-shrink: 0; }
|
||||
.day-summary {
|
||||
margin: 0 16px 16px; padding: 14px; background: #fff; border-radius: 12px;
|
||||
margin: 0 16px 8px; padding: 14px; background: #fff; border-radius: 12px;
|
||||
}
|
||||
.day-summary .ds-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
|
||||
.ds-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; text-align: center; }
|
||||
@@ -84,28 +84,42 @@
|
||||
<span class="date">2026年5月13日（今天）</span>
|
||||
<span class="arrow">›</span>
|
||||
</div>
|
||||
<!-- 今日摄入汇总 -->
|
||||
<div class="day-summary">
|
||||
<div class="ds-title">今日摄入汇总</div>
|
||||
<div class="ds-grid">
|
||||
<div class="ds-card"><div class="val" style="color:#fa8c16">1827</div><div class="label">千卡</div></div>
|
||||
<div class="ds-card"><div class="val" style="color:#52c41a">107g</div><div class="label">蛋白质</div></div>
|
||||
<div class="ds-card"><div class="val" style="color:#722ed1">69g</div><div class="label">脂肪</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 早餐 -->
|
||||
<div class="meal-section">
|
||||
<div class="meal-title">🌅 早餐 <span class="cal-total">共 386kcal</span></div>
|
||||
<div class="meal-title">🌅 早餐 <span class="cal-total">共 413kcal</span></div>
|
||||
<a class="record-item" href="eat-dish-detail.html">
|
||||
<div class="r-icon">🥛</div>
|
||||
<div class="r-info"><div class="r-name">牛奶（250ml）</div><div class="r-time">07:32</div></div>
|
||||
<span class="r-cal">156kcal</span>
|
||||
<div class="r-info"><div class="r-name">豆浆</div><div class="r-time">07:30</div></div>
|
||||
<span class="r-cal">65kcal</span>
|
||||
</a>
|
||||
<a class="record-item" href="eat-dish-detail.html">
|
||||
<div class="r-icon">🥖</div>
|
||||
<div class="r-info"><div class="r-name">油条</div><div class="r-time">07:30</div></div>
|
||||
<span class="r-cal">198kcal</span>
|
||||
</a>
|
||||
<a class="record-item" href="eat-dish-detail.html">
|
||||
<div class="r-icon">🥚</div>
|
||||
<div class="r-info"><div class="r-name">水煮蛋 ×2</div><div class="r-time">07:32</div></div>
|
||||
<span class="r-cal">144kcal</span>
|
||||
<div class="r-info"><div class="r-name">水煮蛋</div><div class="r-time">07:32</div></div>
|
||||
<span class="r-cal">78kcal</span>
|
||||
</a>
|
||||
<a class="record-item" href="eat-dish-detail.html">
|
||||
<div class="r-icon">🍞</div>
|
||||
<div class="r-info"><div class="r-name">全麦面包</div><div class="r-time">07:35</div></div>
|
||||
<span class="r-cal">86kcal</span>
|
||||
<div class="r-icon">🥣</div>
|
||||
<div class="r-info"><div class="r-name">小米粥</div><div class="r-time">07:35</div></div>
|
||||
<span class="r-cal">72kcal</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- 午餐 -->
|
||||
<div class="meal-section">
|
||||
<div class="meal-title">☀️ 午餐 <span class="cal-total">共 727kcal</span></div>
|
||||
<div class="meal-title">☀️ 午餐 <span class="cal-total">共 827kcal</span></div>
|
||||
<a class="record-item" href="eat-dish-detail.html">
|
||||
<div class="r-icon">🍗</div>
|
||||
<div class="r-info"><div class="r-name">宫保鸡丁</div><div class="r-time">12:05</div></div>
|
||||
@@ -126,15 +140,40 @@
|
||||
<div class="r-info"><div class="r-name">米饭（中碗）</div><div class="r-time">12:05</div></div>
|
||||
<span class="r-cal">232kcal</span>
|
||||
</a>
|
||||
<a class="record-item" href="eat-dish-detail.html">
|
||||
<div class="r-icon">🥬</div>
|
||||
<div class="r-info"><div class="r-name">蒜蓉油麦菜</div><div class="r-time">12:08</div></div>
|
||||
<span class="r-cal">52kcal</span>
|
||||
</a>
|
||||
<a class="record-item" href="eat-dish-detail.html">
|
||||
<div class="r-icon">🍲</div>
|
||||
<div class="r-info"><div class="r-name">番茄蛋花汤</div><div class="r-time">12:08</div></div>
|
||||
<span class="r-cal">48kcal</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- 全天摘要 -->
|
||||
<div class="day-summary">
|
||||
<div class="ds-title">今日摄入汇总</div>
|
||||
<div class="ds-grid">
|
||||
<div class="ds-card"><div class="val" style="color:#fa8c16">1113</div><div class="label">千卡</div></div>
|
||||
<div class="ds-card"><div class="val" style="color:#52c41a">68g</div><div class="label">蛋白质</div></div>
|
||||
<div class="ds-card"><div class="val" style="color:#722ed1">42g</div><div class="label">脂肪</div></div>
|
||||
</div>
|
||||
<!-- 晚餐 -->
|
||||
<div class="meal-section">
|
||||
<div class="meal-title">🌙 晚餐 <span class="cal-total">共 587kcal</span></div>
|
||||
<a class="record-item" href="eat-dish-detail.html">
|
||||
<div class="r-icon">🍳</div>
|
||||
<div class="r-info"><div class="r-name">番茄炒蛋</div><div class="r-time">18:10</div></div>
|
||||
<span class="r-cal">156kcal</span>
|
||||
</a>
|
||||
<a class="record-item" href="eat-dish-detail.html">
|
||||
<div class="r-icon">🫑</div>
|
||||
<div class="r-info"><div class="r-name">青椒肉丝</div><div class="r-time">18:10</div></div>
|
||||
<span class="r-cal">178kcal</span>
|
||||
</a>
|
||||
<a class="record-item" href="eat-dish-detail.html">
|
||||
<div class="r-icon">🥬</div>
|
||||
<div class="r-info"><div class="r-name">紫菜蛋花汤</div><div class="r-time">18:12</div></div>
|
||||
<span class="r-cal">32kcal</span>
|
||||
</a>
|
||||
<a class="record-item" href="eat-dish-detail.html">
|
||||
<div class="r-icon">🍞</div>
|
||||
<div class="r-info"><div class="r-name">馒头</div><div class="r-time">18:12</div></div>
|
||||
<span class="r-cal">221kcal</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
|
||||
@@ -24,25 +24,71 @@
|
||||
.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; }
|
||||
/* 导航栏 */
|
||||
.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;
|
||||
/* 食堂选择栏 */
|
||||
.canteen-header {
|
||||
background: #fff; padding: 10px 16px; display: flex; align-items: center;
|
||||
justify-content: space-between; border-bottom: 0.5px solid #f0f0f0; 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;
|
||||
.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);
|
||||
}
|
||||
.nav-bar .action {
|
||||
margin-left: auto; padding: 3px 10px; border-radius: 10px;
|
||||
border: 1px solid #1677ff; background: #fff; color: #1677ff; font-size: 11px; cursor: pointer;
|
||||
.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;
|
||||
}
|
||||
.action-btn {
|
||||
flex: 1; padding: 14px 0; border-radius: 14px; border: 2px solid #d9d9d9;
|
||||
background: #fff; color: #333; font-size: 15px; font-weight: 600;
|
||||
cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.action-btn.active { border-color: #1677ff; background: #1677ff; color: #fff; }
|
||||
.action-btn .btn-icon { font-size: 24px; }
|
||||
/* 返回就餐记录入口 */
|
||||
.back-record {
|
||||
display: flex; align-items: center; gap: 4px; padding: 10px 16px;
|
||||
background: #fff; border-bottom: 0.5px solid #f0f0f0;
|
||||
font-size: 13px; color: #1677ff; cursor: pointer; text-decoration: none;
|
||||
}
|
||||
.back-record .back-arrow { font-size: 16px; }
|
||||
/* 内容Tab切换 */
|
||||
.content-tabs {
|
||||
display: flex; background: #fff; border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.content-tab {
|
||||
flex: 1; text-align: center; padding: 10px 0; font-size: 14px; color: #999;
|
||||
cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500;
|
||||
}
|
||||
.content-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
.tab-panel { display: none; }
|
||||
.tab-panel.active { display: block; }
|
||||
/* 业务样式 */
|
||||
.section { background: #fff; margin-bottom: 8px; padding: 14px 16px; }
|
||||
.section-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
|
||||
.bar-item { margin-bottom: 12px; }
|
||||
.bar-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
|
||||
.section { background: #fff; padding: 14px 16px; }
|
||||
.legend {
|
||||
display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
|
||||
padding-bottom: 10px; border-bottom: 0.5px solid #f5f5f5;
|
||||
}
|
||||
.legend span { font-size: 10px; color: #999; display: flex; align-items: center; gap: 3px; }
|
||||
.legend .dot { display: inline-block; width: 10px; height: 6px; border-radius: 2px; }
|
||||
.bar-item { margin-bottom: 10px; }
|
||||
.bar-item:last-child { margin-bottom: 0; }
|
||||
.bar-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
|
||||
.bar-label .name { font-size: 12px; color: #555; font-weight: 500; }
|
||||
.bar-label .vals { font-size: 11px; }
|
||||
.bar-label .vals .cur { color: #333; font-weight: 600; }
|
||||
@@ -52,31 +98,48 @@
|
||||
position: relative; height: 8px; background: #f5f5f5; border-radius: 4px; overflow: hidden;
|
||||
}
|
||||
.progress-bar .fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; }
|
||||
.legend {
|
||||
display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px;
|
||||
padding-top: 10px; border-top: 0.5px solid #f5f5f5;
|
||||
/* 膳食宝塔 - 金字塔样式 */
|
||||
.tower-pyramid {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 0;
|
||||
padding: 0 0 6px; position: relative;
|
||||
}
|
||||
.legend span { font-size: 10px; color: #999; display: flex; align-items: center; gap: 3px; }
|
||||
.legend .dot { display: inline-block; width: 10px; height: 6px; border-radius: 2px; }
|
||||
/* 膳食宝塔 */
|
||||
.tower-item { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||||
.tower-block {
|
||||
padding: 4px; border-radius: 6px; text-align: center; flex-shrink: 0;
|
||||
/* 塔尖：纯CSS三角形，宽度与第一层对齐 */
|
||||
.tower-pyramid::before {
|
||||
content: ''; display: block; width: 0; height: 0;
|
||||
border-left: 58px solid transparent; border-right: 58px solid transparent;
|
||||
border-bottom: 22px solid #fff3e0;
|
||||
}
|
||||
.tower-block .icon { font-size: 14px; }
|
||||
.tower-block .name { font-size: 9px; font-weight: 600; }
|
||||
.tower-info { flex: 1; }
|
||||
.tower-info .rec { font-size: 11px; color: #999; }
|
||||
.tower-info .actual { font-size: 11px; margin-top: 2px; }
|
||||
/* 评分卡片 */
|
||||
.score-grid { display: flex; gap: 8px; margin-bottom: 10px; }
|
||||
.score-card { flex: 1; border-radius: 10px; padding: 10px; text-align: center; }
|
||||
.score-card .num { font-size: 20px; font-weight: 800; }
|
||||
.score-card .desc { font-size: 11px; color: #999; margin-top: 2px; }
|
||||
.warn-tip {
|
||||
padding: 8px 10px; background: #fff7e6; border-radius: 8px;
|
||||
font-size: 12px; color: #fa8c16;
|
||||
.tower-level {
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
padding: 6px 8px 5px; border-bottom: 1.5px solid #fff;
|
||||
}
|
||||
.tower-level:last-child { border-bottom: none; border-radius: 0 0 8px 8px; }
|
||||
/* 第一行：图标 + 名称 */
|
||||
.t-row1 { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
|
||||
.t-row1 .t-icon { font-size: 13px; line-height: 1; }
|
||||
.t-row1 .t-name { font-size: 11px; font-weight: 700; }
|
||||
/* 第二行：推荐 / 实际 / 结果 */
|
||||
.t-row2 { display: flex; align-items: center; gap: 6px; }
|
||||
.t-row2 .t-rec { font-size: 9px; color: rgba(0,0,0,0.45); }
|
||||
.t-row2 .t-actual { font-size: 9px; font-weight: 600; }
|
||||
.t-row2 .t-result {
|
||||
font-size: 9px; font-weight: 700; padding: 1px 6px;
|
||||
border-radius: 8px; white-space: nowrap;
|
||||
}
|
||||
.t-result.ok { background: rgba(82,196,26,0.15); color: #389e0d; }
|
||||
.t-result.warn { background: rgba(250,140,22,0.15); color: #d46b08; }
|
||||
.t-result.over { background: rgba(245,34,45,0.15); color: #cf1322; }
|
||||
/* 底部 Tab 栏 */
|
||||
.tab-bar {
|
||||
height: 50px; background: #fff; border-top: 0.5px solid #e8e8e8;
|
||||
display: flex; align-items: center; flex-shrink: 0;
|
||||
}
|
||||
.tab-item {
|
||||
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
|
||||
text-decoration: none; font-size: 10px; color: #999; padding: 6px 0;
|
||||
}
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item.active { color: #1677ff; }
|
||||
.home-indicator {
|
||||
height: 20px; display: flex; align-items: center; justify-content: center;
|
||||
background: #fff; flex-shrink: 0;
|
||||
@@ -93,98 +156,245 @@
|
||||
<span class="time">09:41</span>
|
||||
<div class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="eat-home.html">‹</a>
|
||||
<span class="title">营养明细</span>
|
||||
<span class="action">膳食宝塔 ›</span>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="page-content">
|
||||
<!-- 营养素进度条 -->
|
||||
<div class="section">
|
||||
<div class="section-title">📊 营养素明细</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">热量</span><span class="vals"><span class="cur">1286</span><span class="sep"> / </span><span class="ref">2000kcal</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:43%;background:#1677ff"></div></div>
|
||||
<!-- 食堂选择栏 -->
|
||||
<div class="canteen-header">
|
||||
<div class="canteen-select" id="canteenToggle">
|
||||
<span class="label">当前食堂</span>
|
||||
<span class="name" id="canteenName">长庆食堂A区</span>
|
||||
<span class="arrow" id="canteenArrow">▾</span>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">蛋白质</span><span class="vals"><span class="cur">68g</span><span class="sep"> / </span><span class="ref">75g</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:61%;background:#52c41a"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">脂肪</span><span class="vals"><span class="cur">42g</span><span class="sep"> / </span><span class="ref">65g</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:43%;background:#52c41a"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">碳水化合物</span><span class="vals"><span class="cur">186g</span><span class="sep"> / </span><span class="ref">275g</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:45%;background:#1677ff"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">膳食纤维</span><span class="vals"><span class="cur">12g</span><span class="sep"> / </span><span class="ref">25g</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:32%;background:#1677ff"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">钠</span><span class="vals"><span class="cur">2600mg</span><span class="sep"> / </span><span class="ref">2000mg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:87%;background:#f5222d"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">钙</span><span class="vals"><span class="cur">420mg</span><span class="sep"> / </span><span class="ref">800mg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:35%;background:#1677ff"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">维生素C</span><span class="vals"><span class="cur">42mg</span><span class="sep"> / </span><span class="ref">100mg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:28%;background:#1677ff"></div></div>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<span><span class="dot" style="background:#1677ff"></span>不足(<60%)</span>
|
||||
<span><span class="dot" style="background:#52c41a"></span>达标(60~100%)</span>
|
||||
<span><span class="dot" style="background:#fa8c16"></span>偏高(100~120%)</span>
|
||||
<span><span class="dot" style="background:#f5222d"></span>超标(>120%)</span>
|
||||
<div class="canteen-dropdown" id="canteenDropdown">
|
||||
<div class="canteen-option selected" data-name="长庆食堂A区">长庆食堂A区</div>
|
||||
<div class="canteen-option" data-name="长庆食堂B区">长庆食堂B区</div>
|
||||
<div class="canteen-option" data-name="总部食堂">总部食堂</div>
|
||||
<div class="canteen-option" data-name="西区员工餐厅">西区员工餐厅</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 膳食宝塔 -->
|
||||
<div class="section">
|
||||
<div class="section-title">🏛️ 膳食宝塔评估</div>
|
||||
<div class="tower-item">
|
||||
<div class="tower-block" style="width:76px;background:#f6ffed;border:1px solid #b7eb8f"><span class="icon">🌾</span><div class="name" style="color:#52c41a">谷薯类</div></div>
|
||||
<div class="tower-info"><div class="rec">推荐：250~400g</div><div class="actual"><span style="color:#555">实际：186g</span><span style="margin-left:6px;font-weight:600;color:#52c41a">✓ 适量</span></div></div>
|
||||
</div>
|
||||
<div class="tower-item">
|
||||
<div class="tower-block" style="width:68px;background:#f6ffed;border:1px solid #b7eb8f"><span class="icon">🥦</span><div class="name" style="color:#52c41a">蔬菜水果</div></div>
|
||||
<div class="tower-info"><div class="rec">推荐：300~500g</div><div class="actual"><span style="color:#555">实际：280g</span><span style="margin-left:6px;font-weight:600;color:#52c41a">✓ 适量</span></div></div>
|
||||
</div>
|
||||
<div class="tower-item">
|
||||
<div class="tower-block" style="width:60px;background:#f6ffed;border:1px solid #b7eb8f"><span class="icon">🥩</span><div class="name" style="color:#52c41a">畜禽鱼蛋</div></div>
|
||||
<div class="tower-info"><div class="rec">推荐：120~200g</div><div class="actual"><span style="color:#555">实际：168g</span><span style="margin-left:6px;font-weight:600;color:#52c41a">✓ 适量</span></div></div>
|
||||
</div>
|
||||
<div class="tower-item">
|
||||
<div class="tower-block" style="width:52px;background:#fff7e6;border:1px solid #ffd591"><span class="icon">🥛</span><div class="name" style="color:#fa8c16">奶豆坚果</div></div>
|
||||
<div class="tower-info"><div class="rec">推荐：25~35g</div><div class="actual"><span style="color:#555">实际：20g</span><span style="margin-left:6px;font-weight:600;color:#fa8c16">⚠ 注意</span></div></div>
|
||||
</div>
|
||||
<div class="tower-item">
|
||||
<div class="tower-block" style="width:44px;background:#fff7e6;border:1px solid #ffd591"><span class="icon">🧂</span><div class="name" style="color:#fa8c16">烹调油盐</div></div>
|
||||
<div class="tower-info"><div class="rec">推荐：油<25g</div><div class="actual"><span style="color:#555">实际：偏高</span><span style="margin-left:6px;font-weight:600;color:#fa8c16">⚠ 注意</span></div></div>
|
||||
</div>
|
||||
<div class="tower-item">
|
||||
<div class="tower-block" style="width:36px;background:#fff7e6;border:1px solid #ffd591"><span class="icon">💧</span><div class="name" style="color:#fa8c16">饮水</div></div>
|
||||
<div class="tower-info"><div class="rec">推荐：1500ml+</div><div class="actual"><span style="color:#555">实际：800ml</span><span style="margin-left:6px;font-weight:600;color:#fa8c16">⚠ 注意</span></div></div>
|
||||
<!-- 营养/食谱 卡片 -->
|
||||
<div class="action-btns">
|
||||
<a class="action-btn active" href="eat-nutrition.html"><span class="btn-icon">🥗</span>营养</a>
|
||||
<a class="action-btn" href="eat-recipe.html"><span class="btn-icon">📋</span>食谱</a>
|
||||
</div>
|
||||
|
||||
<!-- 返回就餐记录 -->
|
||||
<a class="back-record" href="eat-home.html"><span class="back-arrow">‹</span> 返回就餐记录</a>
|
||||
|
||||
<!-- 内容Tab -->
|
||||
<div class="content-tabs">
|
||||
<div class="content-tab active" data-panel="nutrientPanel">营养素明细</div>
|
||||
<div class="content-tab" data-panel="towerPanel">膳食宝塔评估</div>
|
||||
</div>
|
||||
|
||||
<!-- 营养素明细面板 -->
|
||||
<div class="tab-panel active" id="nutrientPanel">
|
||||
<div class="section">
|
||||
<!-- 图例 -->
|
||||
<div class="legend">
|
||||
<span><span class="dot" style="background:#1677ff"></span>不足(<60%)</span>
|
||||
<span><span class="dot" style="background:#52c41a"></span>达标(60~100%)</span>
|
||||
<span><span class="dot" style="background:#fa8c16"></span>偏高(100~120%)</span>
|
||||
<span><span class="dot" style="background:#f5222d"></span>超标(>120%)</span>
|
||||
</div>
|
||||
<!-- 宏量营养素 -->
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">热量</span><span class="vals"><span class="cur">1286</span><span class="sep"> / </span><span class="ref">2000kcal</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:64%;background:#52c41a"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">蛋白质</span><span class="vals"><span class="cur">68g</span><span class="sep"> / </span><span class="ref">75g</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:91%;background:#52c41a"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">脂肪</span><span class="vals"><span class="cur">42g</span><span class="sep"> / </span><span class="ref">65g</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:65%;background:#52c41a"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">碳水化合物</span><span class="vals"><span class="cur">186g</span><span class="sep"> / </span><span class="ref">275g</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:68%;background:#52c41a"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">膳食纤维</span><span class="vals"><span class="cur">12g</span><span class="sep"> / </span><span class="ref">25g</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:48%;background:#1677ff"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">饱和脂肪酸</span><span class="vals"><span class="cur">18g</span><span class="sep"> / </span><span class="ref">20g</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:90%;background:#52c41a"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">反式脂肪酸</span><span class="vals"><span class="cur">0.4g</span><span class="sep"> / </span><span class="ref">2g</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:20%;background:#1677ff"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">糖</span><span class="vals"><span class="cur">38g</span><span class="sep"> / </span><span class="ref">50g</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:76%;background:#52c41a"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">胆固醇</span><span class="vals"><span class="cur">286mg</span><span class="sep"> / </span><span class="ref">300mg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:95%;background:#52c41a"></div></div>
|
||||
</div>
|
||||
<!-- 矿物质 -->
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">钠</span><span class="vals"><span class="cur">2600mg</span><span class="sep"> / </span><span class="ref">2000mg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:100%;background:#f5222d"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">钾</span><span class="vals"><span class="cur">1100mg</span><span class="sep"> / </span><span class="ref">2000mg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:55%;background:#1677ff"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">钙</span><span class="vals"><span class="cur">420mg</span><span class="sep"> / </span><span class="ref">800mg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:53%;background:#1677ff"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">铁</span><span class="vals"><span class="cur">10mg</span><span class="sep"> / </span><span class="ref">12mg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:83%;background:#52c41a"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">锌</span><span class="vals"><span class="cur">7mg</span><span class="sep"> / </span><span class="ref">12mg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:58%;background:#1677ff"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">磷</span><span class="vals"><span class="cur">680mg</span><span class="sep"> / </span><span class="ref">720mg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:94%;background:#52c41a"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">镁</span><span class="vals"><span class="cur">180mg</span><span class="sep"> / </span><span class="ref">330mg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:55%;background:#1677ff"></div></div>
|
||||
</div>
|
||||
<!-- 维生素 -->
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">维生素A</span><span class="vals"><span class="cur">320μgRE</span><span class="sep"> / </span><span class="ref">800μgRE</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:40%;background:#1677ff"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">维生素B1</span><span class="vals"><span class="cur">0.8mg</span><span class="sep"> / </span><span class="ref">1.4mg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:57%;background:#1677ff"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">维生素B2</span><span class="vals"><span class="cur">0.9mg</span><span class="sep"> / </span><span class="ref">1.4mg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:64%;background:#52c41a"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">维生素B6</span><span class="vals"><span class="cur">1.1mg</span><span class="sep"> / </span><span class="ref">1.4mg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:79%;background:#52c41a"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">维生素B12</span><span class="vals"><span class="cur">1.8μg</span><span class="sep"> / </span><span class="ref">2.4μg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:75%;background:#52c41a"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">维生素C</span><span class="vals"><span class="cur">42mg</span><span class="sep"> / </span><span class="ref">100mg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:42%;background:#1677ff"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">维生素D</span><span class="vals"><span class="cur">3.2μg</span><span class="sep"> / </span><span class="ref">10μg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:32%;background:#1677ff"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">维生素E</span><span class="vals"><span class="cur">9mg</span><span class="sep"> / </span><span class="ref">14mg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:64%;background:#52c41a"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">叶酸</span><span class="vals"><span class="cur">180μgDFE</span><span class="sep"> / </span><span class="ref">400μgDFE</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:45%;background:#1677ff"></div></div>
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<div class="bar-label"><span class="name">烟酸</span><span class="vals"><span class="cur">11mg</span><span class="sep"> / </span><span class="ref">14mg</span></span></div>
|
||||
<div class="progress-bar"><div class="fill" style="width:79%;background:#52c41a"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 评分对比 -->
|
||||
<div class="section">
|
||||
<div class="section-title">📈 营养评分对比</div>
|
||||
<div class="score-grid">
|
||||
<div class="score-card" style="background:#f6ffed"><div class="num" style="color:#52c41a">78</div><div class="desc">本人评分</div></div>
|
||||
<div class="score-card" style="background:#e6f4ff"><div class="num" style="color:#1677ff">82</div><div class="desc">部门均值</div></div>
|
||||
<div class="score-card" style="background:#f5f5f5"><div class="num" style="color:#8c8c8c">80</div><div class="desc">全公司均值</div></div>
|
||||
<!-- 膳食宝塔面板 -->
|
||||
<div class="tab-panel" id="towerPanel">
|
||||
<div class="section">
|
||||
<div class="tower-pyramid">
|
||||
<!-- 第1层（塔尖下）：烹调油盐 -->
|
||||
<div class="tower-level" style="width:32%;background:#fff3e0">
|
||||
<div class="t-row1"><span class="t-icon">🧂</span><span class="t-name" style="color:#ad6800">烹调油盐</span></div>
|
||||
<div class="t-row2"><span class="t-rec">油<25g 盐<5g</span><span class="t-actual" style="color:#d46b08">偏高</span><span class="t-result warn">注意</span></div>
|
||||
</div>
|
||||
<!-- 第2层：饮水 -->
|
||||
<div class="tower-level" style="width:44%;background:#e6f7ff">
|
||||
<div class="t-row1"><span class="t-icon">💧</span><span class="t-name" style="color:#0050b3">饮水</span></div>
|
||||
<div class="t-row2"><span class="t-rec">推荐 1500ml+</span><span class="t-actual" style="color:#d46b08">实际 800ml</span><span class="t-result warn">不足</span></div>
|
||||
</div>
|
||||
<!-- 第3层：奶豆坚果 -->
|
||||
<div class="tower-level" style="width:56%;background:#fff7e6">
|
||||
<div class="t-row1"><span class="t-icon">🥛</span><span class="t-name" style="color:#ad6800">奶豆坚果</span></div>
|
||||
<div class="t-row2"><span class="t-rec">推荐 25~35g</span><span class="t-actual" style="color:#d46b08">实际 20g</span><span class="t-result warn">不足</span></div>
|
||||
</div>
|
||||
<!-- 第4层：畜禽鱼蛋 -->
|
||||
<div class="tower-level" style="width:68%;background:#f0fbe4">
|
||||
<div class="t-row1"><span class="t-icon">🥩</span><span class="t-name" style="color:#135200">畜禽鱼蛋</span></div>
|
||||
<div class="t-row2"><span class="t-rec">推荐 120~200g</span><span class="t-actual" style="color:#389e0d">实际 168g</span><span class="t-result ok">适量</span></div>
|
||||
</div>
|
||||
<!-- 第5层：蔬菜水果 -->
|
||||
<div class="tower-level" style="width:82%;background:#e8f5d6">
|
||||
<div class="t-row1"><span class="t-icon">🥦</span><span class="t-name" style="color:#135200">蔬菜水果</span></div>
|
||||
<div class="t-row2"><span class="t-rec">推荐 300~500g</span><span class="t-actual" style="color:#389e0d">实际 280g</span><span class="t-result ok">适量</span></div>
|
||||
</div>
|
||||
<!-- 第6层（塔基）：谷薯类 -->
|
||||
<div class="tower-level" style="width:96%;background:#e0f0c8;border-radius:0 0 8px 8px">
|
||||
<div class="t-row1"><span class="t-icon">🌾</span><span class="t-name" style="color:#135200">谷薯类</span></div>
|
||||
<div class="t-row2"><span class="t-rec">推荐 250~400g</span><span class="t-actual" style="color:#389e0d">实际 186g</span><span class="t-result ok">适量</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="warn-tip">⚠ 钠摄入偏高（130%），建议减少腌制品；膳食纤维不足，建议增加蔬菜</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 Tab -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item active" href="eat-home.html"><span class="tab-icon">🍽️</span>吃</a>
|
||||
<a class="tab-item" href="ask-home.html"><span class="tab-icon">💬</span>问</a>
|
||||
<a class="tab-item" href="make-home.html"><span class="tab-icon">🍳</span>做</a>
|
||||
<a class="tab-item" href="me-home.html"><span class="tab-icon">👤</span>我</a>
|
||||
</div>
|
||||
<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切换 */
|
||||
var contentTabs = document.querySelectorAll('.content-tab');
|
||||
contentTabs.forEach(function(tab) {
|
||||
tab.addEventListener('click', function() {
|
||||
contentTabs.forEach(function(t) { t.classList.remove('active'); });
|
||||
tab.classList.add('active');
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p) { p.classList.remove('active'); });
|
||||
document.getElementById(tab.dataset.panel).classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -62,6 +62,15 @@
|
||||
width: 24px; height: 24px; border-radius: 50%; background: #1677ff; color: #fff;
|
||||
border: none; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.qty-ctrl { display: none; align-items: center; gap: 0; }
|
||||
.qty-ctrl.show { display: flex; }
|
||||
.qty-btn {
|
||||
width: 24px; height: 24px; border-radius: 50%; border: 1px solid #d9d9d9;
|
||||
background: #fff; font-size: 14px; color: #333; cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center; line-height: 1;
|
||||
}
|
||||
.qty-btn:active { background: #f5f5f5; }
|
||||
.qty-num { width: 28px; text-align: center; font-size: 13px; font-weight: 600; }
|
||||
/* 底部购物车栏 */
|
||||
.cart-bar {
|
||||
height: 56px; background: #fff; border-top: 1px solid #f0f0f0;
|
||||
@@ -92,7 +101,7 @@
|
||||
<div class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="eat-home.html">‹</a>
|
||||
<a class="back" href="javascript:history.back()">‹</a>
|
||||
<span class="title">订餐</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
@@ -108,52 +117,76 @@
|
||||
</div>
|
||||
<!-- 右侧菜品列表 -->
|
||||
<div class="menu-area">
|
||||
<div class="menu-item">
|
||||
<div class="menu-item" data-price="12">
|
||||
<div class="food-icon">🍗</div>
|
||||
<div class="food-info">
|
||||
<div class="food-name">宫保鸡丁</div>
|
||||
<div class="food-desc">鸡胸肉花生爆炒 · 285kcal</div>
|
||||
<div class="food-bottom"><span class="food-price">¥12</span><button class="add-btn">+</button></div>
|
||||
<div class="food-bottom">
|
||||
<span class="food-price">¥12</span>
|
||||
<button class="add-btn">+</button>
|
||||
<div class="qty-ctrl"><button class="qty-btn minus">−</button><span class="qty-num">0</span><button class="qty-btn plus">+</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item" data-price="18">
|
||||
<div class="food-icon">🐟</div>
|
||||
<div class="food-info">
|
||||
<div class="food-name">清蒸鱼</div>
|
||||
<div class="food-desc">新鲜草鱼清蒸 · 142kcal</div>
|
||||
<div class="food-bottom"><span class="food-price">¥18</span><button class="add-btn">+</button></div>
|
||||
<div class="food-bottom">
|
||||
<span class="food-price">¥18</span>
|
||||
<button class="add-btn">+</button>
|
||||
<div class="qty-ctrl"><button class="qty-btn minus">−</button><span class="qty-num">0</span><button class="qty-btn plus">+</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item" data-price="8">
|
||||
<div class="food-icon">🥦</div>
|
||||
<div class="food-info">
|
||||
<div class="food-name">炒西兰花</div>
|
||||
<div class="food-desc">大火快炒翠绿脆嫩 · 68kcal</div>
|
||||
<div class="food-bottom"><span class="food-price">¥8</span><button class="add-btn">+</button></div>
|
||||
<div class="food-bottom">
|
||||
<span class="food-price">¥8</span>
|
||||
<button class="add-btn">+</button>
|
||||
<div class="qty-ctrl"><button class="qty-btn minus">−</button><span class="qty-num">0</span><button class="qty-btn plus">+</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item" data-price="8">
|
||||
<div class="food-icon">🍅</div>
|
||||
<div class="food-info">
|
||||
<div class="food-name">番茄炒蛋</div>
|
||||
<div class="food-desc">酸甜可口老少皆宜 · 168kcal</div>
|
||||
<div class="food-bottom"><span class="food-price">¥8</span><button class="add-btn">+</button></div>
|
||||
<div class="food-bottom">
|
||||
<span class="food-price">¥8</span>
|
||||
<button class="add-btn">+</button>
|
||||
<div class="qty-ctrl"><button class="qty-btn minus">−</button><span class="qty-num">0</span><button class="qty-btn plus">+</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item" data-price="16">
|
||||
<div class="food-icon">🍖</div>
|
||||
<div class="food-info">
|
||||
<div class="food-name">红烧肉</div>
|
||||
<div class="food-desc">五花肉慢炖软糯入味 · 395kcal</div>
|
||||
<div class="food-bottom"><span class="food-price">¥16</span><button class="add-btn">+</button></div>
|
||||
<div class="food-bottom">
|
||||
<span class="food-price">¥16</span>
|
||||
<button class="add-btn">+</button>
|
||||
<div class="qty-ctrl"><button class="qty-btn minus">−</button><span class="qty-num">0</span><button class="qty-btn plus">+</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item" data-price="6">
|
||||
<div class="food-icon">🥬</div>
|
||||
<div class="food-info">
|
||||
<div class="food-name">蒜蓉油麦菜</div>
|
||||
<div class="food-desc">清淡爽口富含纤维 · 45kcal</div>
|
||||
<div class="food-bottom"><span class="food-price">¥6</span><button class="add-btn">+</button></div>
|
||||
<div class="food-bottom">
|
||||
<span class="food-price">¥6</span>
|
||||
<button class="add-btn">+</button>
|
||||
<div class="qty-ctrl"><button class="qty-btn minus">−</button><span class="qty-num">0</span><button class="qty-btn plus">+</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -161,10 +194,10 @@
|
||||
</div>
|
||||
<!-- 购物车栏 -->
|
||||
<div class="cart-bar">
|
||||
<div class="cart-icon-wrap">
|
||||
<a class="cart-icon-wrap" href="eat-cart.html" style="text-decoration:none">
|
||||
<span style="font-size:20px">🛒</span>
|
||||
<span class="badge">3</span>
|
||||
</div>
|
||||
</a>
|
||||
<div class="cart-info">
|
||||
<div class="cart-total">¥38.00</div>
|
||||
<div class="cart-desc">已选 3 个餐品</div>
|
||||
@@ -173,5 +206,76 @@
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
<script>
|
||||
var badge = document.querySelector('.cart-icon-wrap .badge');
|
||||
var cartTotal = document.querySelector('.cart-total');
|
||||
var cartDesc = document.querySelector('.cart-desc');
|
||||
|
||||
/* 更新购物车栏 */
|
||||
function updateCart() {
|
||||
var items = document.querySelectorAll('.menu-item');
|
||||
var count = 0, total = 0;
|
||||
items.forEach(function(item) {
|
||||
var qty = parseInt(item.querySelector('.qty-num').textContent) || 0;
|
||||
var price = parseInt(item.dataset.price) || 0;
|
||||
count += qty;
|
||||
total += qty * price;
|
||||
});
|
||||
badge.textContent = count;
|
||||
badge.style.display = count > 0 ? 'flex' : 'none';
|
||||
cartTotal.textContent = '¥' + total.toFixed(2);
|
||||
cartDesc.textContent = '已选 ' + count + ' 个餐品';
|
||||
}
|
||||
|
||||
/* 点击 + 添加按钮 */
|
||||
document.querySelectorAll('.add-btn').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
var bottom = btn.closest('.food-bottom');
|
||||
var qtyCtrl = bottom.querySelector('.qty-ctrl');
|
||||
var qtyNum = bottom.querySelector('.qty-num');
|
||||
btn.style.display = 'none';
|
||||
qtyCtrl.classList.add('show');
|
||||
qtyNum.textContent = '1';
|
||||
updateCart();
|
||||
});
|
||||
});
|
||||
|
||||
/* 点击数量控制 +/- */
|
||||
document.querySelectorAll('.qty-ctrl').forEach(function(ctrl) {
|
||||
var plusBtn = ctrl.querySelector('.plus');
|
||||
var minusBtn = ctrl.querySelector('.minus');
|
||||
var qtyNum = ctrl.querySelector('.qty-num');
|
||||
var addBtn = ctrl.closest('.food-bottom').querySelector('.add-btn');
|
||||
|
||||
plusBtn.addEventListener('click', function() {
|
||||
var n = parseInt(qtyNum.textContent) || 0;
|
||||
qtyNum.textContent = n + 1;
|
||||
updateCart();
|
||||
});
|
||||
|
||||
minusBtn.addEventListener('click', function() {
|
||||
var n = parseInt(qtyNum.textContent) || 0;
|
||||
if (n <= 1) {
|
||||
qtyNum.textContent = '0';
|
||||
ctrl.classList.remove('show');
|
||||
addBtn.style.display = 'flex';
|
||||
} else {
|
||||
qtyNum.textContent = n - 1;
|
||||
}
|
||||
updateCart();
|
||||
});
|
||||
});
|
||||
|
||||
/* 左侧分类切换 */
|
||||
document.querySelectorAll('.cat-item').forEach(function(cat) {
|
||||
cat.addEventListener('click', function() {
|
||||
document.querySelectorAll('.cat-item').forEach(function(c) { c.classList.remove('active'); });
|
||||
cat.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
/* 初始化：购物车归零 */
|
||||
updateCart();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,387 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>今日食谱 | 智能餐养小程序</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a2a2a; display: flex; justify-content: center; align-items: flex-start;
|
||||
min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
padding: 24px 0 40px;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 390px; height: 844px; background: #fff; border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden; position: relative; display: flex; flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.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; flex-shrink: 0; border-bottom: 0.5px solid #f0f0f0;
|
||||
}
|
||||
.nav-back {
|
||||
width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
|
||||
font-size: 20px; color: #333; cursor: pointer; text-decoration: none; flex-shrink: 0;
|
||||
}
|
||||
.nav-title {
|
||||
flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: #1a1a1a;
|
||||
margin-right: 32px;
|
||||
}
|
||||
.nav-action {
|
||||
width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
|
||||
font-size: 18px; cursor: pointer; flex-shrink: 0; margin-right: -32px;
|
||||
}
|
||||
|
||||
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 日期栏 */
|
||||
.date-bar {
|
||||
background: #fff; padding: 12px 16px 14px; text-align: center;
|
||||
border-bottom: 0.5px solid #f0f0f0;
|
||||
}
|
||||
.date-text { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
|
||||
/* 餐次 Tab */
|
||||
.meal-tabs {
|
||||
display: flex; background: #fff; padding: 0 16px 12px;
|
||||
}
|
||||
.meal-tab {
|
||||
flex: 1; text-align: center; padding: 10px 0 8px; font-size: 14px;
|
||||
color: #999; cursor: pointer; position: relative; font-weight: 500;
|
||||
border: none; background: none;
|
||||
}
|
||||
.meal-tab.active { color: #1677ff; font-weight: 600; }
|
||||
.meal-tab.active::after {
|
||||
content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
|
||||
width: 24px; height: 3px; background: #1677ff; border-radius: 2px;
|
||||
}
|
||||
|
||||
/* 分类区块 */
|
||||
.category-section { padding: 0 16px; margin-top: 10px; }
|
||||
.category-title {
|
||||
font-size: 15px; font-weight: 600; color: #1a1a1a;
|
||||
padding: 12px 0 10px; display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.category-title .cat-icon { font-size: 16px; }
|
||||
|
||||
/* 食物卡片网格 */
|
||||
.food-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 4px; }
|
||||
.food-card {
|
||||
background: #fff; border-radius: 12px; overflow: hidden;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.05); cursor: pointer;
|
||||
text-decoration: none; color: inherit;
|
||||
}
|
||||
.food-card .img-box {
|
||||
height: 90px; background: #f8f8f8; display: flex; align-items: center;
|
||||
justify-content: center; font-size: 40px;
|
||||
}
|
||||
.food-card .card-body { padding: 8px 10px 10px; }
|
||||
.food-card .food-name-row {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 4px;
|
||||
}
|
||||
.food-card .food-name { font-size: 13px; font-weight: 600; color: #1a1a1a; }
|
||||
.food-card .food-tag {
|
||||
font-size: 10px; padding: 2px 8px; border-radius: 8px; font-weight: 500; flex-shrink: 0;
|
||||
}
|
||||
.food-card .food-info-row {
|
||||
display: flex; align-items: center; gap: 4px; margin-top: 4px;
|
||||
}
|
||||
.food-card .food-kcal { font-size: 11px; color: #999; }
|
||||
.food-card .food-dot { font-size: 11px; color: #d9d9d9; }
|
||||
.food-card .food-price { font-size: 12px; color: #f5222d; font-weight: 600; }
|
||||
.food-tag--green { background: #f6ffed; color: #52c41a; }
|
||||
.food-tag--orange { background: #fff7e6; color: #fa8c16; }
|
||||
.food-tag--red { background: #fff1f0; color: #f5222d; }
|
||||
|
||||
/* 底部间距 */
|
||||
.bottom-spacer { height: 16px; }
|
||||
|
||||
/* 底部 Tab 栏 */
|
||||
.tab-bar {
|
||||
height: 50px; background: #fff; border-top: 0.5px solid #e8e8e8;
|
||||
display: flex; align-items: center; flex-shrink: 0;
|
||||
}
|
||||
.tab-item {
|
||||
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
|
||||
text-decoration: none; font-size: 10px; color: #999; padding: 6px 0;
|
||||
}
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item.active { color: #1677ff; }
|
||||
.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>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">09:41</span>
|
||||
<div class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" href="eat-recipe.html">‹</a>
|
||||
<div class="nav-title">今日食谱</div>
|
||||
<div class="nav-action">📅</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<div class="page-content">
|
||||
<!-- 日期 -->
|
||||
<div class="date-bar">
|
||||
<div class="date-text" id="dateText"></div>
|
||||
</div>
|
||||
|
||||
<!-- 餐次切换 -->
|
||||
<div class="meal-tabs">
|
||||
<button class="meal-tab" data-meal="breakfast">早餐</button>
|
||||
<button class="meal-tab active" data-meal="lunch">午餐</button>
|
||||
<button class="meal-tab" data-meal="dinner">晚餐</button>
|
||||
</div>
|
||||
|
||||
<!-- 午餐内容（默认展示） -->
|
||||
<div class="meal-content" id="mealContent">
|
||||
<!-- 主食 -->
|
||||
<div class="category-section">
|
||||
<div class="category-title"><span class="cat-icon">🍚</span>主食</div>
|
||||
<div class="food-grid">
|
||||
<a class="food-card" href="eat-dish-detail.html">
|
||||
<div class="img-box">🍚</div>
|
||||
<div class="card-body">
|
||||
<div class="food-name-row">
|
||||
<span class="food-name">杂粮米饭</span>
|
||||
<span class="food-tag food-tag--green">推荐</span>
|
||||
</div>
|
||||
<div class="food-info-row">
|
||||
<span class="food-kcal">180kcal/100g</span>
|
||||
<span class="food-dot">·</span>
|
||||
<span class="food-price">¥3</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="food-card" href="eat-dish-detail.html">
|
||||
<div class="img-box">🌽</div>
|
||||
<div class="card-body">
|
||||
<div class="food-name-row">
|
||||
<span class="food-name">玉米馒头</span>
|
||||
<span class="food-tag food-tag--green">推荐</span>
|
||||
</div>
|
||||
<div class="food-info-row">
|
||||
<span class="food-kcal">220kcal/100g</span>
|
||||
<span class="food-dot">·</span>
|
||||
<span class="food-price">¥2</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="food-card" href="eat-dish-detail.html">
|
||||
<div class="img-box">🍠</div>
|
||||
<div class="card-body">
|
||||
<div class="food-name-row">
|
||||
<span class="food-name">紫薯粥</span>
|
||||
<span class="food-tag food-tag--green">推荐</span>
|
||||
</div>
|
||||
<div class="food-info-row">
|
||||
<span class="food-kcal">95kcal/100g</span>
|
||||
<span class="food-dot">·</span>
|
||||
<span class="food-price">¥4</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="food-card" href="eat-dish-detail.html">
|
||||
<div class="img-box">🍙</div>
|
||||
<div class="card-body">
|
||||
<div class="food-name-row">
|
||||
<span class="food-name">白米饭</span>
|
||||
<span class="food-tag food-tag--orange">适量</span>
|
||||
</div>
|
||||
<div class="food-info-row">
|
||||
<span class="food-kcal">230kcal/100g</span>
|
||||
<span class="food-dot">·</span>
|
||||
<span class="food-price">¥2</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 热菜 -->
|
||||
<div class="category-section">
|
||||
<div class="category-title"><span class="cat-icon">🍳</span>热菜</div>
|
||||
<div class="food-grid">
|
||||
<a class="food-card" href="eat-dish-detail.html">
|
||||
<div class="img-box">🍗</div>
|
||||
<div class="card-body">
|
||||
<div class="food-name-row">
|
||||
<span class="food-name">宫保鸡丁</span>
|
||||
<span class="food-tag food-tag--green">推荐</span>
|
||||
</div>
|
||||
<div class="food-info-row">
|
||||
<span class="food-kcal">285kcal/100g</span>
|
||||
<span class="food-dot">·</span>
|
||||
<span class="food-price">¥12</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="food-card" href="eat-dish-detail.html">
|
||||
<div class="img-box">🐟</div>
|
||||
<div class="card-body">
|
||||
<div class="food-name-row">
|
||||
<span class="food-name">清蒸鲈鱼</span>
|
||||
<span class="food-tag food-tag--green">推荐</span>
|
||||
</div>
|
||||
<div class="food-info-row">
|
||||
<span class="food-kcal">142kcal/100g</span>
|
||||
<span class="food-dot">·</span>
|
||||
<span class="food-price">¥18</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="food-card" href="eat-dish-detail.html">
|
||||
<div class="img-box">🍅</div>
|
||||
<div class="card-body">
|
||||
<div class="food-name-row">
|
||||
<span class="food-name">番茄炒蛋</span>
|
||||
<span class="food-tag food-tag--orange">适量</span>
|
||||
</div>
|
||||
<div class="food-info-row">
|
||||
<span class="food-kcal">168kcal/100g</span>
|
||||
<span class="food-dot">·</span>
|
||||
<span class="food-price">¥8</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="food-card" href="eat-dish-detail.html">
|
||||
<div class="img-box">🍖</div>
|
||||
<div class="card-body">
|
||||
<div class="food-name-row">
|
||||
<span class="food-name">红烧肉</span>
|
||||
<span class="food-tag food-tag--red">少选</span>
|
||||
</div>
|
||||
<div class="food-info-row">
|
||||
<span class="food-kcal">395kcal/100g</span>
|
||||
<span class="food-dot">·</span>
|
||||
<span class="food-price">¥16</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 凉菜 -->
|
||||
<div class="category-section">
|
||||
<div class="category-title"><span class="cat-icon">🥒</span>凉菜</div>
|
||||
<div class="food-grid">
|
||||
<a class="food-card" href="eat-dish-detail.html">
|
||||
<div class="img-box">🥒</div>
|
||||
<div class="card-body">
|
||||
<div class="food-name-row">
|
||||
<span class="food-name">凉拌黄瓜</span>
|
||||
<span class="food-tag food-tag--green">推荐</span>
|
||||
</div>
|
||||
<div class="food-info-row">
|
||||
<span class="food-kcal">35kcal/100g</span>
|
||||
<span class="food-dot">·</span>
|
||||
<span class="food-price">¥6</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="food-card" href="eat-dish-detail.html">
|
||||
<div class="img-box">🥩</div>
|
||||
<div class="card-body">
|
||||
<div class="food-name-row">
|
||||
<span class="food-name">蒜泥白肉</span>
|
||||
<span class="food-tag food-tag--orange">适量</span>
|
||||
</div>
|
||||
<div class="food-info-row">
|
||||
<span class="food-kcal">210kcal/100g</span>
|
||||
<span class="food-dot">·</span>
|
||||
<span class="food-price">¥14</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 汤品 -->
|
||||
<div class="category-section">
|
||||
<div class="category-title"><span class="cat-icon">🍲</span>汤品</div>
|
||||
<div class="food-grid">
|
||||
<a class="food-card" href="eat-dish-detail.html">
|
||||
<div class="img-box">🥣</div>
|
||||
<div class="card-body">
|
||||
<div class="food-name-row">
|
||||
<span class="food-name">紫菜蛋花汤</span>
|
||||
<span class="food-tag food-tag--green">推荐</span>
|
||||
</div>
|
||||
<div class="food-info-row">
|
||||
<span class="food-kcal">28kcal/100g</span>
|
||||
<span class="food-dot">·</span>
|
||||
<span class="food-price">¥5</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="food-card" href="eat-dish-detail.html">
|
||||
<div class="img-box">🌽</div>
|
||||
<div class="card-body">
|
||||
<div class="food-name-row">
|
||||
<span class="food-name">玉米排骨汤</span>
|
||||
<span class="food-tag food-tag--green">推荐</span>
|
||||
</div>
|
||||
<div class="food-info-row">
|
||||
<span class="food-kcal">85kcal/100g</span>
|
||||
<span class="food-dot">·</span>
|
||||
<span class="food-price">¥10</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 Tab -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item active" href="eat-home.html"><span class="tab-icon">🍽️</span>吃</a>
|
||||
<a class="tab-item" href="ask-home.html"><span class="tab-icon">💬</span>问</a>
|
||||
<a class="tab-item" href="make-home.html"><span class="tab-icon">🍳</span>做</a>
|
||||
<a class="tab-item" href="me-home.html"><span class="tab-icon">👤</span>我</a>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 动态设置今日日期 */
|
||||
var now = new Date();
|
||||
var weekDays = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
|
||||
var dateStr = now.getFullYear() + '年' + (now.getMonth()+1) + '月' + now.getDate() + '日 ' + weekDays[now.getDay()];
|
||||
document.getElementById('dateText').textContent = dateStr;
|
||||
|
||||
/* 餐次 Tab 切换 */
|
||||
var tabs = document.querySelectorAll('.meal-tab');
|
||||
tabs.forEach(function(tab) {
|
||||
tab.addEventListener('click', function() {
|
||||
tabs.forEach(function(t) { t.classList.remove('active'); });
|
||||
tab.classList.add('active');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -22,15 +22,51 @@
|
||||
}
|
||||
.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 .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; }
|
||||
/* 食堂选择栏 */
|
||||
.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;
|
||||
border-bottom: 0.5px solid #f5f5f5;
|
||||
}
|
||||
.action-btn {
|
||||
flex: 1; padding: 14px 0; border-radius: 14px; border: 2px solid #d9d9d9;
|
||||
background: #fff; color: #333; font-size: 15px; font-weight: 600;
|
||||
cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.action-btn.active { border-color: #1677ff; background: #1677ff; color: #fff; }
|
||||
.action-btn .btn-icon { font-size: 24px; }
|
||||
/* 返回就餐记录入口 */
|
||||
.back-record {
|
||||
display: flex; align-items: center; gap: 4px; padding: 10px 16px;
|
||||
background: #fff; border-bottom: 0.5px solid #f0f0f0;
|
||||
font-size: 13px; color: #1677ff; cursor: pointer; text-decoration: none;
|
||||
}
|
||||
.back-record .back-arrow { font-size: 16px; }
|
||||
/* 业务样式 */
|
||||
.quick-actions {
|
||||
display: flex; gap: 10px; padding: 14px 16px 10px; background: #fff; margin-bottom: 8px;
|
||||
@@ -38,7 +74,7 @@
|
||||
.quick-btn {
|
||||
flex: 1; padding: 12px 0; border-radius: 12px; border: none; color: #fff;
|
||||
font-size: 13px; font-weight: 600; cursor: pointer; display: flex;
|
||||
flex-direction: column; align-items: center; gap: 3px;
|
||||
flex-direction: column; align-items: center; gap: 3px; text-decoration: none;
|
||||
}
|
||||
.quick-btn .qicon { font-size: 20px; }
|
||||
.dish-list { padding: 0 16px 16px; background: #fff; }
|
||||
@@ -59,6 +95,25 @@
|
||||
font-size: 10px; padding: 2px 8px; border-radius: 8px; flex-shrink: 0;
|
||||
}
|
||||
.dish-item .arrow { font-size: 16px; color: #ccc; margin-left: 4px; }
|
||||
/* 底部 Tab 栏 */
|
||||
.tab-bar {
|
||||
height: 50px; background: #fff; border-top: 0.5px solid #e8e8e8;
|
||||
display: flex; align-items: center; flex-shrink: 0;
|
||||
}
|
||||
.tab-item {
|
||||
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
|
||||
text-decoration: none; font-size: 10px; color: #999; padding: 6px 0;
|
||||
}
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item.active { color: #1677ff; }
|
||||
.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>
|
||||
@@ -67,16 +122,37 @@
|
||||
<span class="time">09:41</span>
|
||||
<div class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="eat-home.html">‹</a>
|
||||
<span class="title">今日食谱</span>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="page-content">
|
||||
<!-- 食堂选择栏 -->
|
||||
<div class="canteen-header">
|
||||
<div class="canteen-select" id="canteenToggle">
|
||||
<span class="label">当前食堂</span>
|
||||
<span class="name" id="canteenName">长庆食堂A区</span>
|
||||
<span class="arrow" id="canteenArrow">▾</span>
|
||||
</div>
|
||||
<div class="canteen-dropdown" id="canteenDropdown">
|
||||
<div class="canteen-option selected" data-name="长庆食堂A区">长庆食堂A区</div>
|
||||
<div class="canteen-option" data-name="长庆食堂B区">长庆食堂B区</div>
|
||||
<div class="canteen-option" data-name="总部食堂">总部食堂</div>
|
||||
<div class="canteen-option" data-name="西区员工餐厅">西区员工餐厅</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 营养/食谱 卡片 -->
|
||||
<div class="action-btns">
|
||||
<a class="action-btn" href="eat-nutrition.html"><span class="btn-icon">🥗</span>营养</a>
|
||||
<a class="action-btn active" href="eat-recipe.html"><span class="btn-icon">📋</span>食谱</a>
|
||||
</div>
|
||||
|
||||
<!-- 返回就餐记录 -->
|
||||
<a class="back-record" href="javascript:history.back()"><span class="back-arrow">‹</span> 返回就餐记录</a>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
<div class="quick-actions">
|
||||
<button class="quick-btn" style="background:linear-gradient(135deg,#1677ff,#4096ff)"><span class="qicon">📷</span>扫码点餐</button>
|
||||
<button class="quick-btn" style="background:linear-gradient(135deg,#52c41a,#73d13d)"><span class="qicon">🛒</span><a href="eat-order.html" style="color:#fff;text-decoration:none">订餐</a></button>
|
||||
<button class="quick-btn" style="background:linear-gradient(135deg,#722ed1,#9254de)"><span class="qicon">📋</span>查看食谱</button>
|
||||
<button class="quick-btn" style="background:linear-gradient(135deg,#1677ff,#4096ff)" onclick="alert('扫码后跳转至点餐页面')"><span class="qicon">📷</span>扫码点餐</button>
|
||||
<a class="quick-btn" style="background:linear-gradient(135deg,#52c41a,#73d13d)" href="eat-order.html"><span class="qicon">🛒</span>订餐</a>
|
||||
<a class="quick-btn" style="background:linear-gradient(135deg,#722ed1,#9254de)" href="eat-recipe-today.html"><span class="qicon">📋</span>查看食谱</a>
|
||||
</div>
|
||||
<!-- 推荐食谱列表 -->
|
||||
<div class="dish-list">
|
||||
@@ -108,7 +184,43 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 Tab -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item active" href="eat-home.html"><span class="tab-icon">🍽️</span>吃</a>
|
||||
<a class="tab-item" href="ask-home.html"><span class="tab-icon">💬</span>问</a>
|
||||
<a class="tab-item" href="make-home.html"><span class="tab-icon">🍳</span>做</a>
|
||||
<a class="tab-item" href="me-home.html"><span class="tab-icon">👤</span>我</a>
|
||||
</div>
|
||||
<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');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -54,6 +54,27 @@
|
||||
}
|
||||
.cover-upload .icon { font-size: 32px; }
|
||||
.cover-upload .text { font-size: 13px; }
|
||||
.cover-type-row {
|
||||
display: flex; gap: 10px; margin-top: 10px;
|
||||
}
|
||||
.cover-type-btn {
|
||||
flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
|
||||
padding: 10px 0; border-radius: 10px; border: 1px solid #e8e8e8;
|
||||
background: #fafafa; font-size: 13px; color: #333; cursor: pointer;
|
||||
}
|
||||
.cover-type-btn .ct-icon { font-size: 18px; }
|
||||
.cover-type-btn:active { border-color: #1677ff; background: #f0f7ff; color: #1677ff; }
|
||||
/* 步骤媒体上传 */
|
||||
.step-media-row {
|
||||
display: flex; gap: 8px; margin: 6px 0 0 30px;
|
||||
}
|
||||
.step-media-btn {
|
||||
width: 60px; height: 60px; border: 1.5px dashed #d9d9d9; border-radius: 8px;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
gap: 2px; background: #fafafa; cursor: pointer; color: #999;
|
||||
}
|
||||
.step-media-btn .sm-icon { font-size: 18px; }
|
||||
.step-media-btn .sm-text { font-size: 9px; }
|
||||
.tag-input { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.tag-chip {
|
||||
padding: 4px 10px; border-radius: 12px; background: #e6f4ff; color: #1677ff;
|
||||
@@ -91,7 +112,11 @@
|
||||
<div class="form-section">
|
||||
<div class="cover-upload">
|
||||
<span class="icon">📷</span>
|
||||
<span class="text">上传食谱封面图</span>
|
||||
<span class="text">上传食谱封面</span>
|
||||
</div>
|
||||
<div class="cover-type-row">
|
||||
<button class="cover-type-btn"><span class="ct-icon">🖼️</span>上传图片</button>
|
||||
<button class="cover-type-btn"><span class="ct-icon">🎬</span>上传视频</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 基本信息 -->
|
||||
@@ -129,10 +154,18 @@
|
||||
<div class="num">1</div>
|
||||
<textarea placeholder="描述第一步操作..." readonly></textarea>
|
||||
</div>
|
||||
<div class="step-media-row">
|
||||
<div class="step-media-btn"><span class="sm-icon">🖼️</span><span class="sm-text">加图片</span></div>
|
||||
<div class="step-media-btn"><span class="sm-icon">🎬</span><span class="sm-text">加视频</span></div>
|
||||
</div>
|
||||
<div class="step-edit">
|
||||
<div class="num">2</div>
|
||||
<textarea placeholder="描述第二步操作..." readonly></textarea>
|
||||
</div>
|
||||
<div class="step-media-row">
|
||||
<div class="step-media-btn"><span class="sm-icon">🖼️</span><span class="sm-text">加图片</span></div>
|
||||
<div class="step-media-btn"><span class="sm-icon">🎬</span><span class="sm-text">加视频</span></div>
|
||||
</div>
|
||||
<div class="add-step-btn">+ 添加步骤</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -36,6 +36,22 @@
|
||||
.recipe-cover {
|
||||
height: 200px; background: linear-gradient(135deg,#f6ffed,#d9f7be);
|
||||
display: flex; align-items: center; justify-content: center; font-size: 64px;
|
||||
position: relative;
|
||||
}
|
||||
.play-btn {
|
||||
position: absolute; width: 52px; height: 52px; border-radius: 50%;
|
||||
background: rgba(0,0,0,0.45); display: flex; align-items: center;
|
||||
justify-content: center; cursor: pointer;
|
||||
}
|
||||
.play-btn::after {
|
||||
content: ''; width: 0; height: 0; border-style: solid;
|
||||
border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.cover-badge {
|
||||
position: absolute; top: 10px; right: 10px; padding: 3px 10px;
|
||||
border-radius: 10px; background: rgba(0,0,0,0.5); color: #fff;
|
||||
font-size: 11px; font-weight: 500;
|
||||
}
|
||||
.recipe-info { padding: 16px; }
|
||||
.recipe-info .title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
|
||||
@@ -48,13 +64,31 @@
|
||||
.ingredient-item { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 0.5px solid #f5f5f5; font-size: 13px; }
|
||||
.ingredient-item .name { color: #333; }
|
||||
.ingredient-item .amount { color: #999; }
|
||||
.step-list { display: flex; flex-direction: column; gap: 14px; }
|
||||
.step-item { display: flex; gap: 10px; }
|
||||
.step-list { display: flex; flex-direction: column; gap: 16px; }
|
||||
.step-item { display: flex; gap: 10px; flex-wrap: wrap; }
|
||||
.step-num {
|
||||
width: 24px; height: 24px; border-radius: 50%; background: #1677ff; color: #fff;
|
||||
font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.step-text { font-size: 13px; color: #333; line-height: 1.6; padding-top: 2px; }
|
||||
.step-text { font-size: 13px; color: #333; line-height: 1.6; padding-top: 2px; flex: 1; }
|
||||
.step-media {
|
||||
width: 100%; margin-left: 34px; margin-top: 6px; border-radius: 10px;
|
||||
overflow: hidden; position: relative;
|
||||
}
|
||||
.step-media .media-box {
|
||||
height: 100px; background: #f5f5f5; display: flex; align-items: center;
|
||||
justify-content: center; font-size: 36px; border-radius: 10px;
|
||||
}
|
||||
.step-media .video-play {
|
||||
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
|
||||
width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.4);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.step-media .video-play::after {
|
||||
content: ''; width: 0; height: 0; border-style: solid;
|
||||
border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.action-bar {
|
||||
padding: 12px 16px; background: #fff; border-top: 0.5px solid #f0f0f0;
|
||||
display: flex; gap: 12px; flex-shrink: 0;
|
||||
@@ -80,7 +114,7 @@
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="recipe-detail">
|
||||
<div class="recipe-cover">🥗</div>
|
||||
<div class="recipe-cover">🥗<div class="play-btn"></div><span class="cover-badge">01:32</span></div>
|
||||
<div class="recipe-info">
|
||||
<div class="title">低脂鸡胸肉沙拉</div>
|
||||
<div class="meta">👤 营养师小王 · 15分钟 · 220kcal</div>
|
||||
@@ -103,10 +137,29 @@
|
||||
<div class="section">
|
||||
<div class="sec-title">制作步骤</div>
|
||||
<div class="step-list">
|
||||
<div class="step-item"><div class="step-num">1</div><div class="step-text">鸡胸肉用盐和黑胡椒腌制10分钟</div></div>
|
||||
<div class="step-item"><div class="step-num">2</div><div class="step-text">平底锅少油煎至两面金黄，切片备用</div></div>
|
||||
<div class="step-item"><div class="step-num">3</div><div class="step-text">生菜洗净撕小块，黄瓜切片，小番茄对半切</div></div>
|
||||
<div class="step-item"><div class="step-num">4</div><div class="step-text">所有食材摆盘，淋上橄榄油，撒黑胡椒即可</div></div>
|
||||
<div class="step-item">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-text">鸡胸肉用盐和黑胡椒腌制10分钟</div>
|
||||
<div class="step-media"><div class="media-box" style="background:#f0f7ff">🧂</div></div>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-text">平底锅少油煎至两面金黄，切片备用</div>
|
||||
<div class="step-media">
|
||||
<div class="media-box" style="background:#fff7e6">🍳</div>
|
||||
<div class="video-play"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<div class="step-num">3</div>
|
||||
<div class="step-text">生菜洗净撕小块，黄瓜切片，小番茄对半切</div>
|
||||
<div class="step-media"><div class="media-box" style="background:#f6ffed">🥬</div></div>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<div class="step-num">4</div>
|
||||
<div class="step-text">所有食材摆盘，淋上橄榄油，撒黑胡椒即可</div>
|
||||
<div class="step-media"><div class="media-box" style="background:#f6ffed">🥗</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,9 +22,68 @@
|
||||
}
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.tab-bar { height: 50px; background: #fff; border-top: 0.5px solid #e8e8e8; display: flex; align-items: center; flex-shrink: 0; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* Banner */
|
||||
.banner {
|
||||
background: linear-gradient(135deg, #ff8c38, #ff6b1a);
|
||||
padding: 24px 20px 28px; position: relative; overflow: hidden;
|
||||
}
|
||||
.banner::after {
|
||||
content: '做'; position: absolute; right: -10px; top: -10px;
|
||||
font-size: 120px; font-weight: 900; color: rgba(255,255,255,0.12); line-height: 1;
|
||||
}
|
||||
.banner .title { font-size: 20px; font-weight: 700; color: #fff; position: relative; z-index: 1; }
|
||||
.banner .desc { font-size: 13px; color: rgba(255,255,255,0.85); margin-top: 6px; position: relative; z-index: 1; }
|
||||
|
||||
/* 四宫格入口 */
|
||||
.grid-nav {
|
||||
display: grid; grid-template-columns: repeat(4, 1fr);
|
||||
background: #fff; padding: 18px 0 14px; margin-bottom: 10px;
|
||||
}
|
||||
.grid-nav-item {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||||
text-decoration: none; color: #333; cursor: pointer;
|
||||
}
|
||||
.grid-nav-item .nav-icon {
|
||||
width: 46px; height: 46px; border-radius: 14px; display: flex;
|
||||
align-items: center; justify-content: center; font-size: 22px;
|
||||
}
|
||||
.grid-nav-item .nav-label { font-size: 12px; font-weight: 500; }
|
||||
|
||||
/* 热门创作 */
|
||||
.section-header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 14px 16px 10px; background: #fff;
|
||||
}
|
||||
.section-header .sec-title { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.section-header .sec-more {
|
||||
font-size: 12px; color: #999; text-decoration: none; display: flex; align-items: center; gap: 2px;
|
||||
}
|
||||
.recipe-list { background: #fff; padding: 0 16px 12px; }
|
||||
.recipe-item {
|
||||
display: flex; align-items: center; gap: 12px; padding: 12px 0;
|
||||
border-bottom: 0.5px solid #f0f0f0; text-decoration: none; color: inherit;
|
||||
}
|
||||
.recipe-item:last-child { border-bottom: none; }
|
||||
.recipe-item .avatar {
|
||||
width: 52px; height: 52px; border-radius: 12px; display: flex;
|
||||
align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0;
|
||||
}
|
||||
.recipe-item .content { flex: 1; min-width: 0; }
|
||||
.recipe-item .recipe-title {
|
||||
font-size: 14px; font-weight: 600; color: #1a1a1a;
|
||||
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; }
|
||||
|
||||
/* 底部 Tab 栏 */
|
||||
.tab-bar {
|
||||
height: 50px; background: #fff; border-top: 0.5px solid #e8e8e8;
|
||||
display: flex; align-items: center; flex-shrink: 0;
|
||||
}
|
||||
.tab-item {
|
||||
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
|
||||
text-decoration: none; font-size: 10px; color: #999; padding: 6px 0;
|
||||
@@ -32,33 +91,13 @@
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item.active { color: #1677ff; }
|
||||
.home-indicator {
|
||||
height: 20px; display: flex; align-items: center; justify-content: center; background: #fff; flex-shrink: 0;
|
||||
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; }
|
||||
/* 业务样式 */
|
||||
.make-header { background: #fff; padding: 16px; margin-bottom: 8px; }
|
||||
.make-header .title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
|
||||
.make-header .desc { font-size: 13px; color: #666; }
|
||||
.make-actions {
|
||||
display: flex; gap: 10px; padding: 0 16px 12px; background: #fff; margin-bottom: 8px;
|
||||
.home-indicator::after {
|
||||
content: ''; width: 120px; height: 5px; background: #1a1a1a;
|
||||
border-radius: 3px; opacity: 0.2;
|
||||
}
|
||||
.make-action-btn {
|
||||
flex: 1; padding: 14px 0; border-radius: 12px; border: none; color: #fff;
|
||||
font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none;
|
||||
}
|
||||
.recipe-card {
|
||||
margin: 0 16px 12px; background: #fff; border-radius: 12px; overflow: hidden;
|
||||
text-decoration: none; color: inherit; display: block;
|
||||
}
|
||||
.recipe-card .cover {
|
||||
height: 120px; display: flex; align-items: center; justify-content: center; font-size: 48px;
|
||||
}
|
||||
.recipe-card .card-body { padding: 12px 14px; }
|
||||
.recipe-card .card-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
|
||||
.recipe-card .card-meta { font-size: 12px; color: #999; margin-bottom: 8px; }
|
||||
.recipe-card .card-footer { display: flex; align-items: center; justify-content: space-between; }
|
||||
.recipe-card .author { font-size: 11px; color: #666; }
|
||||
.recipe-card .stats { font-size: 11px; color: #999; display: flex; gap: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -68,49 +107,66 @@
|
||||
<div class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="make-header">
|
||||
<div class="title">🍳 健康食谱社区</div>
|
||||
<div class="desc">分享你的健康食谱，一起吃出好身体</div>
|
||||
<!-- Banner -->
|
||||
<div class="banner">
|
||||
<div class="title">一起动手做健康餐 🍳</div>
|
||||
<div class="desc">分享你的创意食谱，和大家一起吃出好身体</div>
|
||||
</div>
|
||||
<div class="make-actions">
|
||||
<a class="make-action-btn" href="make-follow.html" style="background:linear-gradient(135deg,#52c41a,#73d13d)">📖 照做食谱</a>
|
||||
<a class="make-action-btn" href="make-create.html" style="background:linear-gradient(135deg,#1677ff,#4096ff)">✏️ 我要创作</a>
|
||||
|
||||
<!-- 四宫格入口 -->
|
||||
<div class="grid-nav">
|
||||
<a class="grid-nav-item" href="make-follow.html">
|
||||
<div class="nav-icon" style="background:#e6f4ff">📋</div>
|
||||
<span class="nav-label">照做食谱</span>
|
||||
</a>
|
||||
<a class="grid-nav-item" href="make-create.html">
|
||||
<div class="nav-icon" style="background:#f6ffed">🌿</div>
|
||||
<span class="nav-label">我要创作</span>
|
||||
</a>
|
||||
<a class="grid-nav-item" href="make-ranking.html">
|
||||
<div class="nav-icon" style="background:#fff7e6">🏆</div>
|
||||
<span class="nav-label">创作排行</span>
|
||||
</a>
|
||||
<a class="grid-nav-item" href="make-share.html">
|
||||
<div class="nav-icon" style="background:#fff1f0">💰</div>
|
||||
<span class="nav-label">分享赚钱</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- 热门食谱 -->
|
||||
<a class="recipe-card" href="make-follow.html">
|
||||
<div class="cover" style="background:linear-gradient(135deg,#f6ffed,#d9f7be)">🥗</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">低脂鸡胸肉沙拉</div>
|
||||
<div class="card-meta">热量 220kcal · 蛋白质 28g · 准备时间 15分钟</div>
|
||||
<div class="card-footer">
|
||||
<span class="author">👤 营养师小王</span>
|
||||
<span class="stats"><span>❤️ 128</span><span>👁️ 1.2k</span></span>
|
||||
|
||||
<!-- 热门创作 -->
|
||||
<div class="section-header">
|
||||
<span class="sec-title">热门创作</span>
|
||||
<a class="sec-more" href="make-popular.html">查看全部 ›</a>
|
||||
</div>
|
||||
<div class="recipe-list">
|
||||
<a class="recipe-item" href="make-follow.html">
|
||||
<div class="avatar" style="background:#fff7e6">🍳</div>
|
||||
<div class="content">
|
||||
<div class="recipe-title">低脂番茄炒蛋的正确打开方式</div>
|
||||
<div class="recipe-meta">营养达人小李 · 180kcal/份</div>
|
||||
<div class="recipe-likes">❤️ 286人喜欢</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="recipe-card" href="make-follow.html">
|
||||
<div class="cover" style="background:linear-gradient(135deg,#fff7e6,#ffe7ba)">🍲</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">养胃南瓜小米粥</div>
|
||||
<div class="card-meta">热量 156kcal · 膳食纤维 4.2g · 准备时间 30分钟</div>
|
||||
<div class="card-footer">
|
||||
<span class="author">👤 健康达人李姐</span>
|
||||
<span class="stats"><span>❤️ 96</span><span>👁️ 890</span></span>
|
||||
</a>
|
||||
<a class="recipe-item" href="make-follow.html">
|
||||
<div class="avatar" style="background:#f6ffed">🥗</div>
|
||||
<div class="content">
|
||||
<div class="recipe-title">高蛋白健身餐：鸡胸肉沙拉</div>
|
||||
<div class="recipe-meta">健身博士阿强 · 320kcal/份</div>
|
||||
<div class="recipe-likes">❤️ 198人喜欢</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="recipe-card" href="make-follow.html">
|
||||
<div class="cover" style="background:linear-gradient(135deg,#e6f4ff,#bae0ff)">🐟</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">柠檬烤三文鱼</div>
|
||||
<div class="card-meta">热量 280kcal · Omega-3 丰富 · 准备时间 25分钟</div>
|
||||
<div class="card-footer">
|
||||
<span class="author">👤 厨艺爱好者老张</span>
|
||||
<span class="stats"><span>❤️ 215</span><span>👁️ 2.1k</span></span>
|
||||
</a>
|
||||
<a class="recipe-item" href="make-follow.html">
|
||||
<div class="avatar" style="background:#fff1f0">🍖</div>
|
||||
<div class="content">
|
||||
<div class="recipe-title">糖尿病友好版红烧肉</div>
|
||||
<div class="recipe-meta">控糖生活家 · 260kcal/份</div>
|
||||
<div class="recipe-likes">❤️ 156人喜欢</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 Tab -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item" href="eat-home.html"><span class="tab-icon">🍽️</span>吃</a>
|
||||
<a class="tab-item" href="ask-home.html"><span class="tab-icon">💬</span>问</a>
|
||||
|
||||
@@ -0,0 +1,236 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>热门创作 | 智能餐养小程序</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a2a2a; display: flex; justify-content: center; align-items: flex-start;
|
||||
min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
padding: 24px 0 40px;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 390px; height: 844px; background: #fff; border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden; position: relative; display: flex; flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.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 .back { font-size: 22px; color: #333; cursor: pointer; text-decoration: none; line-height: 1; }
|
||||
.nav-bar .title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 分类 Tab */
|
||||
.cat-tabs {
|
||||
display: flex; gap: 0; background: #fff; padding: 10px 16px 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.cat-tabs::-webkit-scrollbar { display: none; }
|
||||
.cat-tab {
|
||||
padding: 6px 16px 10px; font-size: 14px; color: #999; cursor: pointer;
|
||||
position: relative; font-weight: 500; border: none; background: none; white-space: nowrap;
|
||||
}
|
||||
.cat-tab.active { color: #1677ff; font-weight: 600; }
|
||||
.cat-tab.active::after {
|
||||
content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
|
||||
width: 24px; height: 3px; background: #1677ff; border-radius: 2px;
|
||||
}
|
||||
|
||||
/* 食谱列表 */
|
||||
.recipe-list { background: #fff; padding: 0 16px; margin-top: 8px; }
|
||||
.recipe-item {
|
||||
display: flex; align-items: center; gap: 12px; padding: 14px 0;
|
||||
border-bottom: 0.5px solid #f0f0f0; text-decoration: none; color: inherit;
|
||||
}
|
||||
.recipe-item:last-child { border-bottom: none; }
|
||||
.recipe-item .avatar {
|
||||
width: 56px; height: 56px; border-radius: 12px; display: flex;
|
||||
align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0;
|
||||
}
|
||||
.recipe-item .content { flex: 1; min-width: 0; }
|
||||
.recipe-item .recipe-title {
|
||||
font-size: 14px; font-weight: 600; color: #1a1a1a;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.recipe-item .recipe-meta { font-size: 12px; color: #999; 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 {
|
||||
height: 50px; background: #fff; border-top: 0.5px solid #e8e8e8;
|
||||
display: flex; align-items: center; flex-shrink: 0;
|
||||
}
|
||||
.tab-item {
|
||||
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
|
||||
text-decoration: none; font-size: 10px; color: #999; padding: 6px 0;
|
||||
}
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item.active { color: #1677ff; }
|
||||
.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>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">09:41</span>
|
||||
<div class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="make-home.html">‹</a>
|
||||
<span class="title">热门创作</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- 分类 Tab -->
|
||||
<div class="cat-tabs">
|
||||
<button class="cat-tab active">全部</button>
|
||||
<button class="cat-tab">低脂</button>
|
||||
<button class="cat-tab">高蛋白</button>
|
||||
<button class="cat-tab">素食</button>
|
||||
<button class="cat-tab">控糖</button>
|
||||
<button class="cat-tab">养胃</button>
|
||||
</div>
|
||||
|
||||
<!-- 食谱列表 -->
|
||||
<div class="recipe-list">
|
||||
<a class="recipe-item" href="make-follow.html">
|
||||
<div class="avatar" style="background:#fff7e6">🍳</div>
|
||||
<div class="content">
|
||||
<div class="recipe-title">低脂番茄炒蛋的正确打开方式</div>
|
||||
<div class="recipe-meta">营养达人小李 · 180kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 286</span>
|
||||
<span class="stat">👁️ 1.8k</span>
|
||||
<span class="stat">📋 152</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="recipe-item" href="make-follow.html">
|
||||
<div class="avatar" style="background:#f6ffed">🥗</div>
|
||||
<div class="content">
|
||||
<div class="recipe-title">高蛋白健身餐：鸡胸肉沙拉</div>
|
||||
<div class="recipe-meta">健身博士阿强 · 320kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 198</span>
|
||||
<span class="stat">👁️ 1.2k</span>
|
||||
<span class="stat">📋 96</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="recipe-item" href="make-follow.html">
|
||||
<div class="avatar" style="background:#fff1f0">🍖</div>
|
||||
<div class="content">
|
||||
<div class="recipe-title">糖尿病友好版红烧肉</div>
|
||||
<div class="recipe-meta">控糖生活家 · 260kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 156</span>
|
||||
<span class="stat">👁️ 980</span>
|
||||
<span class="stat">📋 78</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="recipe-item" href="make-follow.html">
|
||||
<div class="avatar" style="background:#e6f4ff">🐟</div>
|
||||
<div class="content">
|
||||
<div class="recipe-title">柠檬烤三文鱼（Omega-3 丰富）</div>
|
||||
<div class="recipe-meta">厨艺爱好者老张 · 280kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 143</span>
|
||||
<span class="stat">👁️ 860</span>
|
||||
<span class="stat">📋 65</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="recipe-item" href="make-follow.html">
|
||||
<div class="avatar" style="background:#fff7e6">🍲</div>
|
||||
<div class="content">
|
||||
<div class="recipe-title">养胃南瓜小米粥</div>
|
||||
<div class="recipe-meta">养生大叔老陈 · 156kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 128</span>
|
||||
<span class="stat">👁️ 750</span>
|
||||
<span class="stat">📋 52</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="recipe-item" href="make-follow.html">
|
||||
<div class="avatar" style="background:#f6ffed">🥬</div>
|
||||
<div class="content">
|
||||
<div class="recipe-title">五彩素食餐：时蔬拼盘</div>
|
||||
<div class="recipe-meta">素食主义小美 · 120kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 112</span>
|
||||
<span class="stat">👁️ 680</span>
|
||||
<span class="stat">📋 45</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="recipe-item" href="make-follow.html">
|
||||
<div class="avatar" style="background:#fff1f0">🥩</div>
|
||||
<div class="content">
|
||||
<div class="recipe-title">低卡牛肉西兰花（减脂必备）</div>
|
||||
<div class="recipe-meta">减脂达人阿杰 · 245kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 98</span>
|
||||
<span class="stat">👁️ 620</span>
|
||||
<span class="stat">📋 38</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="recipe-item" href="make-follow.html">
|
||||
<div class="avatar" style="background:#e6f4ff">🥣</div>
|
||||
<div class="content">
|
||||
<div class="recipe-title">紫薯燕麦早餐杯</div>
|
||||
<div class="recipe-meta">轻食girl小可 · 195kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 87</span>
|
||||
<span class="stat">👁️ 540</span>
|
||||
<span class="stat">📋 32</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 Tab -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item" href="eat-home.html"><span class="tab-icon">🍽️</span>吃</a>
|
||||
<a class="tab-item" href="ask-home.html"><span class="tab-icon">💬</span>问</a>
|
||||
<a class="tab-item active" href="make-home.html"><span class="tab-icon">🍳</span>做</a>
|
||||
<a class="tab-item" href="me-home.html"><span class="tab-icon">👤</span>我</a>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
<script>
|
||||
/* Tab 切换 */
|
||||
var tabs = document.querySelectorAll('.cat-tab');
|
||||
tabs.forEach(function(tab) {
|
||||
tab.addEventListener('click', function() {
|
||||
tabs.forEach(function(t) { t.classList.remove('active'); });
|
||||
tab.classList.add('active');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>创作排行 | 智能餐养小程序</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a2a2a; display: flex; justify-content: center; align-items: flex-start;
|
||||
min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
padding: 24px 0 40px;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 390px; height: 844px; background: #fff; border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden; position: relative; display: flex; flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.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 .back { font-size: 22px; color: #333; cursor: pointer; text-decoration: none; line-height: 1; }
|
||||
.nav-bar .title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 排行 Tab */
|
||||
.rank-tabs {
|
||||
display: flex; background: #fff; padding: 0 16px;
|
||||
border-bottom: 0.5px solid #f0f0f0;
|
||||
}
|
||||
.rank-tab {
|
||||
flex: 1; text-align: center; padding: 12px 0 10px; font-size: 14px;
|
||||
color: #999; cursor: pointer; position: relative; font-weight: 500;
|
||||
border: none; background: none;
|
||||
}
|
||||
.rank-tab.active { color: #1677ff; font-weight: 600; }
|
||||
.rank-tab.active::after {
|
||||
content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
|
||||
width: 24px; height: 3px; background: #1677ff; border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Top3 领奖台 */
|
||||
.podium {
|
||||
background: linear-gradient(180deg, #fff8f0, #fff); padding: 24px 16px 16px;
|
||||
display: flex; align-items: flex-end; justify-content: center; gap: 12px;
|
||||
}
|
||||
.podium-item {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100px;
|
||||
}
|
||||
.podium-item .avatar {
|
||||
width: 52px; height: 52px; border-radius: 50%; display: flex;
|
||||
align-items: center; justify-content: center; font-size: 24px;
|
||||
border: 3px solid #d9d9d9; position: relative;
|
||||
}
|
||||
.podium-item.gold .avatar { width: 60px; height: 60px; border-color: #faad14; font-size: 28px; }
|
||||
.podium-item.silver .avatar { border-color: #bfbfbf; }
|
||||
.podium-item.bronze .avatar { border-color: #d48806; }
|
||||
.podium-item .medal {
|
||||
position: absolute; bottom: -6px; font-size: 16px; background: #fff;
|
||||
border-radius: 50%; width: 20px; height: 20px; display: flex;
|
||||
align-items: center; justify-content: center;
|
||||
}
|
||||
.podium-item .name { font-size: 13px; font-weight: 600; color: #1a1a1a; }
|
||||
.podium-item .likes { font-size: 11px; color: #999; }
|
||||
|
||||
/* 排行列表 */
|
||||
.rank-list { background: #fff; padding: 0 16px; margin-top: 8px; }
|
||||
.rank-item {
|
||||
display: flex; align-items: center; gap: 12px; padding: 14px 0;
|
||||
border-bottom: 0.5px solid #f0f0f0;
|
||||
}
|
||||
.rank-item:last-child { border-bottom: none; }
|
||||
.rank-num {
|
||||
width: 24px; text-align: center; font-size: 15px; font-weight: 700; color: #999; flex-shrink: 0;
|
||||
}
|
||||
.rank-item .r-avatar {
|
||||
width: 40px; height: 40px; border-radius: 50%; display: flex;
|
||||
align-items: center; justify-content: center; font-size: 18px;
|
||||
background: #f5f5f5; flex-shrink: 0;
|
||||
}
|
||||
.rank-item .r-info { flex: 1; min-width: 0; }
|
||||
.rank-item .r-name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.rank-item .r-meta { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.rank-item .r-likes {
|
||||
font-size: 12px; color: #ff6b6b; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 底部 Tab 栏 */
|
||||
.tab-bar {
|
||||
height: 50px; background: #fff; border-top: 0.5px solid #e8e8e8;
|
||||
display: flex; align-items: center; flex-shrink: 0;
|
||||
}
|
||||
.tab-item {
|
||||
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
|
||||
text-decoration: none; font-size: 10px; color: #999; padding: 6px 0;
|
||||
}
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item.active { color: #1677ff; }
|
||||
.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>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">09:41</span>
|
||||
<div class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="make-home.html">‹</a>
|
||||
<span class="title">创作排行</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- 排行 Tab -->
|
||||
<div class="rank-tabs">
|
||||
<button class="rank-tab active" data-tab="week">本周</button>
|
||||
<button class="rank-tab" data-tab="month">本月</button>
|
||||
<button class="rank-tab" data-tab="all">总榜</button>
|
||||
</div>
|
||||
|
||||
<!-- Top3 领奖台 -->
|
||||
<div class="podium">
|
||||
<div class="podium-item silver">
|
||||
<div class="avatar" style="background:#f0f0f0">👩🍳<span class="medal">🥈</span></div>
|
||||
<div class="name">健身博士阿强</div>
|
||||
<div class="likes">❤️ 1,280</div>
|
||||
</div>
|
||||
<div class="podium-item gold">
|
||||
<div class="avatar" style="background:#fff7e6">👨🍳<span class="medal">🥇</span></div>
|
||||
<div class="name">营养达人小李</div>
|
||||
<div class="likes">❤️ 2,156</div>
|
||||
</div>
|
||||
<div class="podium-item bronze">
|
||||
<div class="avatar" style="background:#fff1f0">👩⚕️<span class="medal">🥉</span></div>
|
||||
<div class="name">控糖生活家</div>
|
||||
<div class="likes">❤️ 986</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 排行列表 4-10 -->
|
||||
<div class="rank-list">
|
||||
<div class="rank-item">
|
||||
<div class="rank-num">4</div>
|
||||
<div class="r-avatar" style="background:#e6f4ff">🧑🍳</div>
|
||||
<div class="r-info">
|
||||
<div class="r-name">厨艺爱好者老张</div>
|
||||
<div class="r-meta">12 个食谱</div>
|
||||
</div>
|
||||
<div class="r-likes">❤️ 856</div>
|
||||
</div>
|
||||
<div class="rank-item">
|
||||
<div class="rank-num">5</div>
|
||||
<div class="r-avatar" style="background:#f6ffed">👩</div>
|
||||
<div class="r-info">
|
||||
<div class="r-name">素食主义小美</div>
|
||||
<div class="r-meta">9 个食谱</div>
|
||||
</div>
|
||||
<div class="r-likes">❤️ 723</div>
|
||||
</div>
|
||||
<div class="rank-item">
|
||||
<div class="rank-num">6</div>
|
||||
<div class="r-avatar" style="background:#fff7e6">👨</div>
|
||||
<div class="r-info">
|
||||
<div class="r-name">减脂达人阿杰</div>
|
||||
<div class="r-meta">8 个食谱</div>
|
||||
</div>
|
||||
<div class="r-likes">❤️ 651</div>
|
||||
</div>
|
||||
<div class="rank-item">
|
||||
<div class="rank-num">7</div>
|
||||
<div class="r-avatar" style="background:#f0f0f0">👩🔬</div>
|
||||
<div class="r-info">
|
||||
<div class="r-name">营养师王医生</div>
|
||||
<div class="r-meta">7 个食谱</div>
|
||||
</div>
|
||||
<div class="r-likes">❤️ 542</div>
|
||||
</div>
|
||||
<div class="rank-item">
|
||||
<div class="rank-num">8</div>
|
||||
<div class="r-avatar" style="background:#fff1f0">🧓</div>
|
||||
<div class="r-info">
|
||||
<div class="r-name">养生大叔老陈</div>
|
||||
<div class="r-meta">6 个食谱</div>
|
||||
</div>
|
||||
<div class="r-likes">❤️ 438</div>
|
||||
</div>
|
||||
<div class="rank-item">
|
||||
<div class="rank-num">9</div>
|
||||
<div class="r-avatar" style="background:#e6f4ff">👧</div>
|
||||
<div class="r-info">
|
||||
<div class="r-name">轻食girl小可</div>
|
||||
<div class="r-meta">5 个食谱</div>
|
||||
</div>
|
||||
<div class="r-likes">❤️ 367</div>
|
||||
</div>
|
||||
<div class="rank-item">
|
||||
<div class="rank-num">10</div>
|
||||
<div class="r-avatar" style="background:#f6ffed">👨⚕️</div>
|
||||
<div class="r-info">
|
||||
<div class="r-name">健康管理师刘哥</div>
|
||||
<div class="r-meta">5 个食谱</div>
|
||||
</div>
|
||||
<div class="r-likes">❤️ 312</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 Tab -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item" href="eat-home.html"><span class="tab-icon">🍽️</span>吃</a>
|
||||
<a class="tab-item" href="ask-home.html"><span class="tab-icon">💬</span>问</a>
|
||||
<a class="tab-item active" href="make-home.html"><span class="tab-icon">🍳</span>做</a>
|
||||
<a class="tab-item" href="me-home.html"><span class="tab-icon">👤</span>我</a>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
<script>
|
||||
/* Tab 切换 */
|
||||
var tabs = document.querySelectorAll('.rank-tab');
|
||||
tabs.forEach(function(tab) {
|
||||
tab.addEventListener('click', function() {
|
||||
tabs.forEach(function(t) { t.classList.remove('active'); });
|
||||
tab.classList.add('active');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>分享赚钱 | 智能餐养小程序</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a2a2a; display: flex; justify-content: center; align-items: flex-start;
|
||||
min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
padding: 24px 0 40px;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 390px; height: 844px; background: #fff; border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden; position: relative; display: flex; flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.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 .back { font-size: 22px; color: #333; cursor: pointer; text-decoration: none; line-height: 1; }
|
||||
.nav-bar .title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 收益卡片 */
|
||||
.earnings-card {
|
||||
margin: 12px 16px; background: linear-gradient(135deg, #ff8c38, #ff6b1a);
|
||||
border-radius: 16px; padding: 20px; color: #fff;
|
||||
}
|
||||
.earnings-main { text-align: center; margin-bottom: 18px; }
|
||||
.earnings-main .label { font-size: 13px; opacity: 0.85; margin-bottom: 6px; }
|
||||
.earnings-main .balance { font-size: 36px; font-weight: 700; }
|
||||
.earnings-main .balance .unit { font-size: 16px; font-weight: 500; }
|
||||
.earnings-sub { display: flex; }
|
||||
.earnings-sub-item { flex: 1; text-align: center; }
|
||||
.earnings-sub-item .label { font-size: 11px; opacity: 0.75; margin-bottom: 3px; }
|
||||
.earnings-sub-item .val { font-size: 16px; font-weight: 600; }
|
||||
.earnings-sub-divider { width: 1px; background: rgba(255,255,255,0.25); flex-shrink: 0; }
|
||||
|
||||
/* 规则说明 */
|
||||
.rules-section {
|
||||
background: #fff; margin: 10px 0; padding: 20px 16px;
|
||||
}
|
||||
.rules-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 16px; }
|
||||
.rule-steps { display: flex; flex-direction: column; gap: 16px; }
|
||||
.rule-step {
|
||||
display: flex; gap: 12px; align-items: flex-start;
|
||||
}
|
||||
.rule-step .step-icon {
|
||||
width: 44px; height: 44px; border-radius: 12px; display: flex;
|
||||
align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
|
||||
}
|
||||
.rule-step .step-content { flex: 1; }
|
||||
.rule-step .step-title { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px; }
|
||||
.rule-step .step-desc { font-size: 12px; color: #999; line-height: 1.5; }
|
||||
.step-arrow {
|
||||
text-align: center; color: #d9d9d9; font-size: 16px; margin-left: 14px;
|
||||
}
|
||||
|
||||
/* 收益明细 */
|
||||
.detail-section {
|
||||
background: #fff; margin-top: 10px; padding: 16px;
|
||||
}
|
||||
.detail-header {
|
||||
display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
|
||||
}
|
||||
.detail-header .sec-title { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.detail-header .sec-more { font-size: 12px; color: #999; }
|
||||
.detail-item {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 0; border-bottom: 0.5px solid #f0f0f0;
|
||||
}
|
||||
.detail-item:last-child { border-bottom: none; }
|
||||
.detail-item .d-info { }
|
||||
.detail-item .d-title { font-size: 13px; color: #1a1a1a; }
|
||||
.detail-item .d-time { font-size: 11px; color: #999; margin-top: 2px; }
|
||||
.detail-item .d-amount { font-size: 15px; font-weight: 600; color: #ff6b1a; }
|
||||
|
||||
/* 奖励规则表 */
|
||||
.reward-table { margin-top: 14px; }
|
||||
.reward-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 10px 0; border-bottom: 0.5px solid #f5f5f5;
|
||||
}
|
||||
.reward-row:last-child { border-bottom: none; }
|
||||
.reward-row .r-label { font-size: 13px; color: #333; }
|
||||
.reward-row .r-value { font-size: 14px; font-weight: 700; color: #ff6b1a; }
|
||||
|
||||
.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>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">09:41</span>
|
||||
<div class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="make-home.html">‹</a>
|
||||
<span class="title">分享赚钱</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- 收益卡片 -->
|
||||
<div class="earnings-card">
|
||||
<div class="earnings-main">
|
||||
<div class="label">当前余额（元）</div>
|
||||
<div class="balance">128<span class="unit">.50</span></div>
|
||||
</div>
|
||||
<div class="earnings-sub">
|
||||
<div class="earnings-sub-item">
|
||||
<div class="label">累计收益</div>
|
||||
<div class="val">¥256.80</div>
|
||||
</div>
|
||||
<div class="earnings-sub-divider"></div>
|
||||
<div class="earnings-sub-item">
|
||||
<div class="label">本月收益</div>
|
||||
<div class="val">¥36.00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 赚钱规则 -->
|
||||
<div class="rules-section">
|
||||
<div class="rules-title">赚钱攻略</div>
|
||||
<div class="rule-steps">
|
||||
<div class="rule-step">
|
||||
<div class="step-icon" style="background:#fff7e6">✏️</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">第一步：创作食谱</div>
|
||||
<div class="step-desc">发布原创健康食谱，通过审核即可上线</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-arrow">↓</div>
|
||||
<div class="rule-step">
|
||||
<div class="step-icon" style="background:#e6f4ff">🔗</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">第二步：分享推广</div>
|
||||
<div class="step-desc">将食谱分享给好友或朋友圈，邀请更多人加入</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-arrow">↓</div>
|
||||
<div class="rule-step">
|
||||
<div class="step-icon" style="background:#f6ffed">💰</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">第三步：赚取收益</div>
|
||||
<div class="step-desc">互动越多收益越高，收益实时到账</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reward-table">
|
||||
<div class="reward-row">
|
||||
<span class="r-label">每获得 1 个点赞</span>
|
||||
<span class="r-value">+0.1 元</span>
|
||||
</div>
|
||||
<div class="reward-row">
|
||||
<span class="r-label">每被照做 1 次</span>
|
||||
<span class="r-value">+0.5 元</span>
|
||||
</div>
|
||||
<div class="reward-row">
|
||||
<span class="r-label">每成功邀请 1 位新用户</span>
|
||||
<span class="r-value">+5 元</span>
|
||||
</div>
|
||||
<div class="reward-row">
|
||||
<span class="r-label">月度创作排行前 10 名</span>
|
||||
<span class="r-value">额外奖励</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 收益明细 -->
|
||||
<div class="detail-section">
|
||||
<div class="detail-header">
|
||||
<span class="sec-title">收益明细</span>
|
||||
<span class="sec-more">全部 ›</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="d-info">
|
||||
<div class="d-title">《低脂番茄炒蛋》被照做</div>
|
||||
<div class="d-time">今天 14:23</div>
|
||||
</div>
|
||||
<div class="d-amount">+1.00</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="d-info">
|
||||
<div class="d-title">《低脂番茄炒蛋》被收藏</div>
|
||||
<div class="d-time">今天 11:05</div>
|
||||
</div>
|
||||
<div class="d-amount">+0.50</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="d-info">
|
||||
<div class="d-title">《鸡胸肉沙拉》分享阅读</div>
|
||||
<div class="d-time">昨天 20:18</div>
|
||||
</div>
|
||||
<div class="d-amount">+0.10</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="d-info">
|
||||
<div class="d-title">《鸡胸肉沙拉》被照做</div>
|
||||
<div class="d-time">昨天 16:42</div>
|
||||
</div>
|
||||
<div class="d-amount">+1.00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user