feat: 营养管理小程序原型迁移（21页独立HTML）
将营养管理小程序从SPA架构迁移为21个独立自包含HTML原型页面， 覆盖吃/问/做/我四大模块及溯源功能，适配墨刀导入规范。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
冯普
+27
-5
@@ -645,11 +645,33 @@ const SITE_MAP = [
|
||||
]
|
||||
},
|
||||
{ id:'other-terminals', label:'其他终端', icon:'other', color:'#b37feb', modules:[
|
||||
{ name:'营养管理小程序', dir:'other-terminals/mini-program', pages:[] },
|
||||
{ name:'西安应急中心大屏', dir:'other-terminals/emergency-screen/xian-center', pages:[] },
|
||||
{ name:'标准版中心大屏', dir:'other-terminals/emergency-screen/standard-center', pages:[] },
|
||||
{ name:'九厂应急中心大屏', dir:'other-terminals/emergency-screen/jiuchang-center', pages:[] },
|
||||
{ name:'医疗点PAD端', dir:'other-terminals/medical-pad', pages:[] }
|
||||
{ name:'营养管理小程序', dir:'other-module/mini-program/nutrition', entry:'eat-home.html', pages:[
|
||||
{label:'吃-首页', file:'eat-home.html'},
|
||||
{label:'营养明细', file:'eat-nutrition.html'},
|
||||
{label:'今日食谱', file:'eat-recipe.html'},
|
||||
{label:'菜品详情', file:'eat-dish-detail.html'},
|
||||
{label:'订餐', file:'eat-order.html'},
|
||||
{label:'订单确认', file:'eat-order-confirm.html'},
|
||||
{label:'就餐记录', file:'eat-meal-record.html'},
|
||||
{label:'AI营养助手', file:'ask-home.html'},
|
||||
{label:'AI对话', file:'ask-chat.html'},
|
||||
{label:'历史对话', file:'ask-history.html'},
|
||||
{label:'做-社区', file:'make-home.html'},
|
||||
{label:'照做食谱', file:'make-follow.html'},
|
||||
{label:'创作食谱', file:'make-create.html'},
|
||||
{label:'个人中心', file:'me-home.html'},
|
||||
{label:'健康档案', file:'me-health.html'},
|
||||
{label:'我的订单', file:'me-orders.html'},
|
||||
{label:'订单详情', file:'me-order-detail.html'},
|
||||
{label:'我的余额', file:'me-wallet.html'},
|
||||
{label:'设置', file:'me-settings.html'},
|
||||
{label:'扫码溯源', file:'trace-query.html'},
|
||||
{label:'溯源链路', file:'trace-detail.html'}
|
||||
] },
|
||||
{ name:'西安应急中心大屏', dir:'other-module/emergency-screen/xian-center', pages:[] },
|
||||
{ name:'标准版中心大屏', dir:'other-module/emergency-screen/standard-center', pages:[] },
|
||||
{ name:'九厂应急中心大屏', dir:'other-module/emergency-screen/jiuchang-center', pages:[] },
|
||||
{ name:'医疗点PAD端', dir:'other-module/medical-pad', pages:[] }
|
||||
]}
|
||||
];
|
||||
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI对话 | 智能餐养小程序</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; }
|
||||
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; background: #f5f5f5; }
|
||||
.chat-body::-webkit-scrollbar { display: none; }
|
||||
.msg-row { display: flex; gap: 8px; max-width: 85%; }
|
||||
.msg-row.bot { align-self: flex-start; }
|
||||
.msg-row.user { align-self: flex-end; flex-direction: row-reverse; }
|
||||
.msg-avatar {
|
||||
width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 16px;
|
||||
}
|
||||
.msg-row.bot .msg-avatar { background: linear-gradient(135deg, #e6f4ff, #91caff); }
|
||||
.msg-row.user .msg-avatar { background: linear-gradient(135deg, #f6ffed, #95de64); }
|
||||
.msg-bubble { padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.6; }
|
||||
.msg-row.bot .msg-bubble { background: #fff; color: #333; border-top-left-radius: 4px; }
|
||||
.msg-row.user .msg-bubble { background: #1677ff; color: #fff; border-top-right-radius: 4px; }
|
||||
.input-bar {
|
||||
padding: 10px 16px; background: #fff; border-top: 0.5px solid #f0f0f0;
|
||||
display: flex; align-items: center; gap: 10px; flex-shrink: 0;
|
||||
}
|
||||
.input-bar .input-field {
|
||||
flex: 1; height: 36px; border-radius: 18px; border: 1px solid #e8e8e8;
|
||||
padding: 0 14px; font-size: 14px; background: #f5f5f5; outline: none;
|
||||
}
|
||||
.input-bar .send-btn {
|
||||
width: 36px; height: 36px; border-radius: 50%; background: #1677ff;
|
||||
border: none; color: #fff; font-size: 16px; cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.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="ask-home.html">‹</a>
|
||||
<span class="title">AI 营养助手</span>
|
||||
</div>
|
||||
<div class="chat-body">
|
||||
<div class="msg-row bot">
|
||||
<div class="msg-avatar">🤖</div>
|
||||
<div class="msg-bubble">您好！我是您的 AI 营养助手。根据您的健康档案，我可以为您提供个性化的饮食建议。请问有什么可以帮您的？</div>
|
||||
</div>
|
||||
<div class="msg-row user">
|
||||
<div class="msg-avatar">👤</div>
|
||||
<div class="msg-bubble">今天午餐吃什么比较健康？</div>
|
||||
</div>
|
||||
<div class="msg-row bot">
|
||||
<div class="msg-avatar">🤖</div>
|
||||
<div class="msg-bubble">根据您的营养档案分析，今天建议您午餐选择：<br><br>1. 🐟 <b>清蒸鱼</b>（142kcal）— 优质蛋白，低脂<br>2. 🥦 <b>炒西兰花</b>（68kcal）— 补充膳食纤维和维C<br>3. 🍚 <b>杂粮饭</b>（180kcal）— 低GI主食<br><br>这样搭配总热量约 390kcal，蛋白质充足，钠含量较低，适合您的健康目标。</div>
|
||||
</div>
|
||||
<div class="msg-row user">
|
||||
<div class="msg-avatar">👤</div>
|
||||
<div class="msg-bubble">我有轻度高血压，还需要注意什么？</div>
|
||||
</div>
|
||||
<div class="msg-row bot">
|
||||
<div class="msg-avatar">🤖</div>
|
||||
<div class="msg-bubble">针对轻度高血压，饮食上建议：<br><br>⚠️ <b>控钠</b>：每日钠摄入 < 2000mg，避免腌制品<br>🥬 <b>增钾</b>：多吃绿叶蔬菜、香蕉、土豆<br>🐟 <b>优质脂肪</b>：选择深海鱼，补充 Omega-3<br>🚫 <b>少油少盐</b>：避免红烧肉等高钠菜品<br><br>今天食堂的清蒸鱼和炒西兰花都很适合您！</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-bar">
|
||||
<input class="input-field" placeholder="继续提问..." readonly>
|
||||
<button class="send-btn">↑</button>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,120 @@
|
||||
<!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; }
|
||||
.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; }
|
||||
/* 业务样式 */
|
||||
.search-bar {
|
||||
padding: 12px 16px; background: #fff; margin-bottom: 8px;
|
||||
}
|
||||
.search-bar input {
|
||||
width: 100%; height: 36px; border-radius: 18px; border: 1px solid #e8e8e8;
|
||||
padding: 0 14px; font-size: 13px; background: #f5f5f5; outline: none;
|
||||
}
|
||||
.chat-list { padding: 0 16px; }
|
||||
.chat-item {
|
||||
display: flex; align-items: center; gap: 12px; padding: 14px 0;
|
||||
border-bottom: 0.5px solid #f0f0f0; text-decoration: none; color: inherit;
|
||||
}
|
||||
.chat-item:last-child { border-bottom: none; }
|
||||
.chat-item .avatar {
|
||||
width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #e6f4ff, #91caff);
|
||||
display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
|
||||
}
|
||||
.chat-item .info { flex: 1; min-width: 0; }
|
||||
.chat-item .topic { font-size: 14px; font-weight: 500; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.chat-item .preview { font-size: 12px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.chat-item .meta { flex-shrink: 0; text-align: right; }
|
||||
.chat-item .time { font-size: 11px; color: #bbb; }
|
||||
.chat-item .count { font-size: 10px; color: #999; margin-top: 4px; }
|
||||
</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="ask-home.html">‹</a>
|
||||
<span class="title">历史对话</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="search-bar">
|
||||
<input placeholder="搜索对话记录..." readonly>
|
||||
</div>
|
||||
<div class="chat-list">
|
||||
<a class="chat-item" href="ask-chat.html">
|
||||
<div class="avatar">🤖</div>
|
||||
<div class="info">
|
||||
<div class="topic">午餐健康搭配建议</div>
|
||||
<div class="preview">根据您的营养档案，建议选择清蒸鱼...</div>
|
||||
</div>
|
||||
<div class="meta"><div class="time">今天 09:41</div><div class="count">4条</div></div>
|
||||
</a>
|
||||
<a class="chat-item" href="ask-chat.html">
|
||||
<div class="avatar">🤖</div>
|
||||
<div class="info">
|
||||
<div class="topic">高血压饮食注意事项</div>
|
||||
<div class="preview">控钠、增钾、优质脂肪是关键...</div>
|
||||
</div>
|
||||
<div class="meta"><div class="time">昨天 18:20</div><div class="count">6条</div></div>
|
||||
</a>
|
||||
<a class="chat-item" href="ask-chat.html">
|
||||
<div class="avatar">🤖</div>
|
||||
<div class="info">
|
||||
<div class="topic">健身后蛋白质补充</div>
|
||||
<div class="preview">运动后30分钟内补充20-30g优质蛋白...</div>
|
||||
</div>
|
||||
<div class="meta"><div class="time">5月11日</div><div class="count">3条</div></div>
|
||||
</a>
|
||||
<a class="chat-item" href="ask-chat.html">
|
||||
<div class="avatar">🤖</div>
|
||||
<div class="info">
|
||||
<div class="topic">低GI食物推荐</div>
|
||||
<div class="preview">推荐燕麦、糙米、红薯等低GI主食...</div>
|
||||
</div>
|
||||
<div class="meta"><div class="time">5月9日</div><div class="count">5条</div></div>
|
||||
</a>
|
||||
<a class="chat-item" href="ask-chat.html">
|
||||
<div class="avatar">🤖</div>
|
||||
<div class="info">
|
||||
<div class="topic">乳糖不耐受补钙方案</div>
|
||||
<div class="preview">可选择豆腐、芝麻酱、深绿色蔬菜...</div>
|
||||
</div>
|
||||
<div class="meta"><div class="time">5月7日</div><div class="count">4条</div></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI营养助手 | 智能餐养小程序</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; }
|
||||
.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; }
|
||||
.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; }
|
||||
/* 业务样式 */
|
||||
.ask-header {
|
||||
background: linear-gradient(135deg, #e6f4ff, #f0f7ff); padding: 24px 16px 16px; text-align: center;
|
||||
}
|
||||
.ask-header .avatar { font-size: 48px; margin-bottom: 8px; }
|
||||
.ask-header .title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
|
||||
.ask-header .desc { font-size: 13px; color: #666; }
|
||||
.ask-header .history-link {
|
||||
display: inline-block; margin-top: 10px; font-size: 12px; color: #1677ff;
|
||||
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-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.faq-item {
|
||||
display: block; padding: 12px 14px; background: #fff; border-radius: 10px;
|
||||
font-size: 13px; color: #333; text-decoration: none;
|
||||
border: 1px solid #f0f0f0; transition: border-color 0.2s;
|
||||
}
|
||||
.faq-item:hover { border-color: #1677ff; }
|
||||
.input-bar {
|
||||
padding: 10px 16px; background: #fff; border-top: 0.5px solid #f0f0f0;
|
||||
display: flex; align-items: center; gap: 10px; flex-shrink: 0;
|
||||
}
|
||||
.input-bar .input-field {
|
||||
flex: 1; height: 36px; border-radius: 18px; border: 1px solid #e8e8e8;
|
||||
padding: 0 14px; font-size: 14px; background: #f5f5f5; outline: none;
|
||||
}
|
||||
.input-bar .send-btn {
|
||||
width: 36px; height: 36px; border-radius: 50%; background: #1677ff;
|
||||
border: none; color: #fff; font-size: 16px; cursor: pointer;
|
||||
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="page-content">
|
||||
<!-- 头部 -->
|
||||
<div class="ask-header">
|
||||
<div class="avatar">🤖</div>
|
||||
<div class="title">AI 营养助手</div>
|
||||
<div class="desc">基于您的健康档案，提供个性化营养建议</div>
|
||||
<a class="history-link" href="ask-history.html">历史对话 ›</a>
|
||||
</div>
|
||||
<!-- 常见问题 -->
|
||||
<div class="faq-section">
|
||||
<div class="faq-title">常见问题</div>
|
||||
<div class="faq-list">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 输入栏 -->
|
||||
<div class="input-bar">
|
||||
<input class="input-field" placeholder="输入您的营养问题..." readonly>
|
||||
<button class="send-btn">↑</button>
|
||||
</div>
|
||||
<!-- 底部 Tab -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item" href="eat-home.html"><span class="tab-icon">🍽️</span>吃</a>
|
||||
<a class="tab-item active" 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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
# 营养管理小程序 CHANGELOG
|
||||
|
||||
## [1.0.0] - 2026-05-13
|
||||
|
||||
### 新增
|
||||
- 从 `nutrition-prototype` 项目迁移智能餐养小程序原型至本项目
|
||||
- 按项目规范重构为独立自包含 HTML 文件（共 21 页）
|
||||
- 新增小程序特有样式：右上角胶囊按钮（三点菜单 + 关闭按钮）
|
||||
- 统一手机壳尺寸为 390×844（iPhone 14 规范）
|
||||
|
||||
### 页面清单
|
||||
|
||||
**吃模块（7页）**
|
||||
- `eat-home.html` — 首页（食堂选择、就餐记录、营养摘要）
|
||||
- `eat-nutrition.html` — 营养明细（营养素进度条、膳食宝塔、评分对比）
|
||||
- `eat-recipe.html` — 今日食谱（推荐列表、快捷操作）
|
||||
- `eat-dish-detail.html` — 菜品详情（营养成分、烹饪工艺、适合人群）
|
||||
- `eat-order.html` — 订餐（左侧分类 + 右侧菜品列表 + 购物车栏）
|
||||
- `eat-order-confirm.html` — 订单确认（取餐码、订单明细）
|
||||
- `eat-meal-record.html` — 就餐记录（按日期/餐次查看）
|
||||
|
||||
**问模块（3页）**
|
||||
- `ask-home.html` — AI 营养助手首页（常见问题、输入框）
|
||||
- `ask-chat.html` — AI 对话详情（多轮对话展示）
|
||||
- `ask-history.html` — 历史对话列表
|
||||
|
||||
**做模块（3页）**
|
||||
- `make-home.html` — 健康食谱社区首页（热门食谱卡片）
|
||||
- `make-follow.html` — 照做食谱详情（食材清单、制作步骤）
|
||||
- `make-create.html` — 创作食谱（表单编辑页）
|
||||
|
||||
**我模块（6页）**
|
||||
- `me-home.html` — 个人中心（用户信息、快捷菜单）
|
||||
- `me-health.html` — 健康档案（BMI、过敏原、健康目标）
|
||||
- `me-orders.html` — 我的订单列表
|
||||
- `me-order-detail.html` — 订单详情（含溯源入口）
|
||||
- `me-wallet.html` — 我的余额（消费记录）
|
||||
- `me-settings.html` — 设置（通知、账号、隐私）
|
||||
|
||||
**溯源模块（2页）**
|
||||
- `trace-query.html` — 扫码溯源（扫码入口、历史记录）
|
||||
- `trace-detail.html` — 溯源链路（时间线可视化、资质证书）
|
||||
|
||||
### 变更
|
||||
- 更新 `index.html` SITE_MAP，修正 other-terminals 目录路径为 other-module
|
||||
- 小程序模块添加 21 个页面条目
|
||||
@@ -0,0 +1,128 @@
|
||||
<!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; }
|
||||
.home-indicator {
|
||||
height: 20px; display: flex; align-items: center; justify-content: center; background: #fff; flex-shrink: 0;
|
||||
}
|
||||
.home-indicator::after { content: ''; width: 120px; height: 5px; background: #1a1a1a; border-radius: 3px; opacity: 0.2; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
/* 业务样式 */
|
||||
.cover { height: 180px; background: linear-gradient(135deg,#f0f7ff,#e6f4ff); display: flex; align-items: center; justify-content: center; font-size: 72px; }
|
||||
.detail-header { background: #fff; padding: 14px 16px 12px; border-bottom: 6px solid #f5f5f5; }
|
||||
.detail-header .name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
|
||||
.detail-header .dish-name { font-size: 18px; font-weight: 700; }
|
||||
.detail-header .dish-tag { padding: 2px 10px; border-radius: 10px; font-size: 11px; }
|
||||
.detail-header .desc { font-size: 13px; color: #666; line-height: 1.6; margin-bottom: 10px; }
|
||||
.detail-header .price-row { display: flex; align-items: center; justify-content: space-between; }
|
||||
.detail-header .price { font-size: 22px; font-weight: 800; color: #f5222d; }
|
||||
.detail-header .price .unit { font-size: 13px; color: #999; font-weight: 400; }
|
||||
.detail-header .cal-badge { font-size: 12px; color: #666; background: #f5f5f5; padding: 4px 10px; border-radius: 8px; }
|
||||
.section { background: #fff; padding: 14px 16px; margin-bottom: 8px; }
|
||||
.section .sec-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
|
||||
.nutri-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; text-align: center; margin-bottom: 12px; }
|
||||
.nutri-cell { background: #f8f9fa; border-radius: 10px; padding: 10px 4px; }
|
||||
.nutri-cell .val { font-size: 14px; font-weight: 700; }
|
||||
.nutri-cell .label { font-size: 11px; color: #999; margin-top: 3px; }
|
||||
.index-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; text-align: center; }
|
||||
.index-cell { background: #f8f9fa; border-radius: 10px; padding: 8px 4px; }
|
||||
.index-cell .icon { font-size: 11px; margin-bottom: 3px; }
|
||||
.index-cell .val { font-size: 12px; font-weight: 600; color: #333; }
|
||||
.index-cell .label { font-size: 10px; color: #999; margin-top: 2px; }
|
||||
.info-card { font-size: 13px; color: #555; background: #f8f9fa; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
|
||||
.crowd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
|
||||
.crowd-tag { padding: 4px 12px; border-radius: 14px; background: #e6f4ff; color: #1677ff; font-size: 12px; }
|
||||
.avoid-tip { padding: 8px 10px; background: #fff7e6; border-radius: 8px; font-size: 12px; color: #fa8c16; }
|
||||
.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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- 封面 -->
|
||||
<div class="cover">🍗</div>
|
||||
<!-- 基本信息 -->
|
||||
<div class="detail-header">
|
||||
<div class="name-row">
|
||||
<span class="dish-name">宫保鸡丁</span>
|
||||
<span class="dish-tag" style="background:#f6ffed;color:#52c41a">推荐</span>
|
||||
</div>
|
||||
<div class="desc">鸡胸肉、花生、干辣椒爆炒，外嫩里滑，麻辣鲜香</div>
|
||||
<div class="price-row">
|
||||
<span class="price">¥12 <span class="unit">/ 份</span></span>
|
||||
<span class="cal-badge">📊 285kcal</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 营养成分 -->
|
||||
<div class="section">
|
||||
<div class="sec-title">营养成分（每份）</div>
|
||||
<div class="nutri-grid">
|
||||
<div class="nutri-cell"><div class="val" style="color:#52c41a">22.4g</div><div class="label">蛋白质</div></div>
|
||||
<div class="nutri-cell"><div class="val" style="color:#fa8c16">14.2g</div><div class="label">脂肪</div></div>
|
||||
<div class="nutri-cell"><div class="val" style="color:#722ed1">12.6g</div><div class="label">碳水</div></div>
|
||||
<div class="nutri-cell"><div class="val" style="color:#1677ff">680mg</div><div class="label">钠</div></div>
|
||||
</div>
|
||||
<div class="index-grid">
|
||||
<div class="index-cell"><div class="icon">🩸</div><div class="val">中GI(52)</div><div class="label">GI指数</div></div>
|
||||
<div class="index-cell"><div class="icon">😌</div><div class="val">68</div><div class="label">饱腹感SI</div></div>
|
||||
<div class="index-cell"><div class="icon">⚡</div><div class="val">低</div><div class="label">嘌呤</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 烹饪工艺 -->
|
||||
<div class="section">
|
||||
<div class="sec-title">烹饪工艺</div>
|
||||
<div class="info-card">🍳 爆炒 · 约8分钟 · 用油适中</div>
|
||||
<div class="info-card">🥬 食材：鸡胸肉120g、花生20g、干辣椒5g、葱姜蒜适量</div>
|
||||
</div>
|
||||
<!-- 适合人群 -->
|
||||
<div class="section">
|
||||
<div class="sec-title">适合人群</div>
|
||||
<div class="crowd-tags">
|
||||
<span class="crowd-tag">成人</span>
|
||||
<span class="crowd-tag">健身人群</span>
|
||||
</div>
|
||||
<div class="avoid-tip">⚠ 痛风急性期慎食（含嘌呤）</div>
|
||||
</div>
|
||||
<!-- 溯源链接 -->
|
||||
<a class="trace-link" href="trace-detail.html">🔍 查看食材溯源信息 ›</a>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,213 @@
|
||||
<!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; }
|
||||
/* 页面内容区 */
|
||||
.page-content {
|
||||
flex: 1; overflow-y: auto; background: #f5f5f5;
|
||||
}
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
/* 底部 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 */
|
||||
.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;
|
||||
}
|
||||
/* === 页面业务样式 === */
|
||||
.canteen-header {
|
||||
background: #fff; padding: 10px 16px; display: flex; align-items: center;
|
||||
justify-content: space-between; border-bottom: 0.5px solid #f0f0f0;
|
||||
}
|
||||
.canteen-select { display: flex; align-items: center; gap: 6px; cursor: pointer; }
|
||||
.canteen-select .label { font-size: 13px; color: #999; }
|
||||
.canteen-select .name { font-size: 15px; font-weight: 600; }
|
||||
.canteen-select .arrow { font-size: 12px; color: #999; }
|
||||
.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; }
|
||||
.record-section { background: #fff; }
|
||||
.record-header {
|
||||
padding: 12px 16px 8px; display: flex; align-items: center; justify-content: space-between;
|
||||
}
|
||||
.record-header .title { font-size: 14px; font-weight: 600; }
|
||||
.record-header .link { font-size: 12px; color: #1677ff; cursor: pointer; text-decoration: none; }
|
||||
.meal-tabs { display: flex; border-bottom: 1px solid #f0f0f0; }
|
||||
.meal-tab {
|
||||
flex: 1; text-align: center; padding: 8px 0; font-size: 13px; color: #999; cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
.meal-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
.meal-list { padding: 12px 16px; }
|
||||
.meal-item {
|
||||
display: flex; align-items: center; gap: 10px; padding: 10px 0;
|
||||
border-bottom: 0.5px solid #f5f5f5; cursor: pointer; text-decoration: none; color: inherit;
|
||||
}
|
||||
.meal-item:last-child { border-bottom: none; }
|
||||
.meal-item .food-icon {
|
||||
width: 44px; height: 44px; border-radius: 12px; background: #f5f5f5;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
|
||||
}
|
||||
.meal-item .food-info { flex: 1; min-width: 0; }
|
||||
.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>
|
||||
<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="page-content">
|
||||
<!-- 食堂选择栏 -->
|
||||
<div class="canteen-header">
|
||||
<div class="canteen-select">
|
||||
<span class="label">当前食堂</span>
|
||||
<span class="name">长庆食堂A区</span>
|
||||
<span class="arrow">▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 营养/食谱 入口按钮 -->
|
||||
<div class="action-btns">
|
||||
<a class="action-btn" 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>
|
||||
|
||||
<!-- 今日就餐记录 -->
|
||||
<div class="record-section">
|
||||
<div class="record-header">
|
||||
<span class="title">今日就餐记录</span>
|
||||
<a class="link" href="eat-meal-record.html">查看全部 ›</a>
|
||||
</div>
|
||||
<div class="meal-tabs">
|
||||
<div class="meal-tab">早餐</div>
|
||||
<div class="meal-tab active">午餐</div>
|
||||
<div class="meal-tab">晚餐</div>
|
||||
</div>
|
||||
<div class="meal-list">
|
||||
<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">蛋白质 22.4g · 脂肪 14.2g</div>
|
||||
</div>
|
||||
<span class="food-cal">285kcal</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">蛋白质 20.8g · 脂肪 4.6g</div>
|
||||
</div>
|
||||
<span class="food-cal">142kcal</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">蛋白质 3.2g · 脂肪 3.8g</div>
|
||||
</div>
|
||||
<span class="food-cal">68kcal</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">碳水 58g · 蛋白质 4.2g</div>
|
||||
</div>
|
||||
<span class="food-cal">232kcal</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 -->
|
||||
<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>
|
||||
<!-- Home Indicator -->
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,143 @@
|
||||
<!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; }
|
||||
.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; }
|
||||
/* 业务样式 */
|
||||
.date-nav {
|
||||
display: flex; align-items: center; justify-content: center; gap: 16px;
|
||||
padding: 12px 16px; background: #fff; margin-bottom: 8px;
|
||||
}
|
||||
.date-nav .arrow { font-size: 18px; color: #1677ff; cursor: pointer; }
|
||||
.date-nav .date { font-size: 15px; font-weight: 600; }
|
||||
.meal-section { background: #fff; margin-bottom: 8px; padding: 14px 16px; }
|
||||
.meal-section .meal-title {
|
||||
font-size: 14px; font-weight: 600; margin-bottom: 10px;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.meal-section .meal-title .cal-total { font-size: 12px; color: #fa8c16; font-weight: 400; }
|
||||
.record-item {
|
||||
display: flex; align-items: center; gap: 10px; padding: 8px 0;
|
||||
border-bottom: 0.5px solid #f5f5f5; text-decoration: none; color: inherit;
|
||||
}
|
||||
.record-item:last-child { border-bottom: none; }
|
||||
.record-item .r-icon {
|
||||
width: 40px; height: 40px; border-radius: 10px; background: #f5f5f5;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
|
||||
}
|
||||
.record-item .r-info { flex: 1; }
|
||||
.record-item .r-name { font-size: 13px; font-weight: 500; }
|
||||
.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;
|
||||
}
|
||||
.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; }
|
||||
.ds-card { background: #f8f9fa; border-radius: 8px; padding: 8px; }
|
||||
.ds-card .val { font-size: 15px; font-weight: 700; }
|
||||
.ds-card .label { font-size: 10px; color: #999; margin-top: 2px; }
|
||||
</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="eat-home.html">‹</a>
|
||||
<span class="title">就餐记录</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- 日期导航 -->
|
||||
<div class="date-nav">
|
||||
<span class="arrow">‹</span>
|
||||
<span class="date">2026年5月13日（今天）</span>
|
||||
<span class="arrow">›</span>
|
||||
</div>
|
||||
<!-- 早餐 -->
|
||||
<div class="meal-section">
|
||||
<div class="meal-title">🌅 早餐 <span class="cal-total">共 386kcal</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>
|
||||
</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>
|
||||
</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>
|
||||
</a>
|
||||
</div>
|
||||
<!-- 午餐 -->
|
||||
<div class="meal-section">
|
||||
<div class="meal-title">☀️ 午餐 <span class="cal-total">共 727kcal</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>
|
||||
<span class="r-cal">285kcal</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:05</div></div>
|
||||
<span class="r-cal">142kcal</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:05</div></div>
|
||||
<span class="r-cal">68kcal</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:05</div></div>
|
||||
<span class="r-cal">232kcal</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>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,190 @@
|
||||
<!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; }
|
||||
.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;
|
||||
}
|
||||
.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 .action {
|
||||
margin-left: auto; padding: 3px 10px; border-radius: 10px;
|
||||
border: 1px solid #1677ff; background: #fff; color: #1677ff; font-size: 11px; cursor: pointer;
|
||||
}
|
||||
/* 业务样式 */
|
||||
.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; }
|
||||
.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; }
|
||||
.bar-label .vals .sep { color: #ccc; }
|
||||
.bar-label .vals .ref { color: #999; }
|
||||
.progress-bar {
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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="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>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
<div class="warn-tip">⚠ 钠摄入偏高（130%），建议减少腌制品；膳食纤维不足，建议增加蔬菜</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,100 @@
|
||||
<!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; }
|
||||
.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; }
|
||||
/* 业务样式 */
|
||||
.success-area { text-align: center; padding: 40px 16px 24px; background: #fff; margin-bottom: 8px; }
|
||||
.success-icon { font-size: 56px; margin-bottom: 12px; }
|
||||
.success-title { font-size: 18px; font-weight: 700; color: #52c41a; margin-bottom: 6px; }
|
||||
.success-desc { font-size: 13px; color: #999; }
|
||||
.pickup-code {
|
||||
margin: 0 16px 12px; background: #fff; border-radius: 12px; padding: 20px; text-align: center;
|
||||
}
|
||||
.pickup-code .label { font-size: 13px; color: #666; margin-bottom: 8px; }
|
||||
.pickup-code .code { font-size: 36px; font-weight: 800; color: #1677ff; letter-spacing: 4px; }
|
||||
.pickup-code .hint { font-size: 12px; color: #999; margin-top: 8px; }
|
||||
.order-detail { margin: 0 16px 12px; background: #fff; border-radius: 12px; padding: 16px; }
|
||||
.order-detail .od-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
|
||||
.order-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 0.5px solid #f5f5f5; }
|
||||
.order-item:last-child { border-bottom: none; }
|
||||
.order-item .oi-name { font-size: 13px; color: #333; }
|
||||
.order-item .oi-price { font-size: 13px; color: #666; }
|
||||
.order-total { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid #f0f0f0; margin-top: 8px; }
|
||||
.order-total .label { font-size: 14px; font-weight: 600; }
|
||||
.order-total .amount { font-size: 18px; font-weight: 800; color: #f5222d; }
|
||||
.action-btns { padding: 16px; display: flex; gap: 12px; }
|
||||
.action-btns .btn {
|
||||
flex: 1; height: 44px; border-radius: 22px; border: none; font-size: 15px;
|
||||
font-weight: 600; cursor: pointer; text-decoration: none; display: flex;
|
||||
align-items: center; justify-content: center;
|
||||
}
|
||||
.btn-primary { background: #1677ff; color: #fff; }
|
||||
.btn-ghost { background: #fff; color: #1677ff; border: 1px solid #1677ff !important; }
|
||||
</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="eat-order.html">‹</a>
|
||||
<span class="title">订单确认</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="success-area">
|
||||
<div class="success-icon">✅</div>
|
||||
<div class="success-title">下单成功</div>
|
||||
<div class="success-desc">请凭取餐码到窗口取餐</div>
|
||||
</div>
|
||||
<div class="pickup-code">
|
||||
<div class="label">取餐码</div>
|
||||
<div class="code">A086</div>
|
||||
<div class="hint">请在 30 分钟内取餐，超时将自动取消</div>
|
||||
</div>
|
||||
<div class="order-detail">
|
||||
<div class="od-title">订单详情</div>
|
||||
<div class="order-item"><span class="oi-name">宫保鸡丁 ×1</span><span class="oi-price">¥12</span></div>
|
||||
<div class="order-item"><span class="oi-name">炒西兰花 ×1</span><span class="oi-price">¥8</span></div>
|
||||
<div class="order-item"><span class="oi-name">清蒸鱼 ×1</span><span class="oi-price">¥18</span></div>
|
||||
<div class="order-total"><span class="label">合计</span><span class="amount">¥38.00</span></div>
|
||||
</div>
|
||||
<div class="action-btns">
|
||||
<a class="btn btn-ghost" href="eat-home.html">返回首页</a>
|
||||
<a class="btn btn-primary" href="me-orders.html">查看订单</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,177 @@
|
||||
<!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; }
|
||||
.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; }
|
||||
/* 业务样式 */
|
||||
.order-layout { display: flex; height: 100%; }
|
||||
.category-sidebar {
|
||||
width: 80px; background: #f8f8f8; overflow-y: auto; flex-shrink: 0;
|
||||
}
|
||||
.category-sidebar::-webkit-scrollbar { display: none; }
|
||||
.cat-item {
|
||||
padding: 14px 8px; text-align: center; font-size: 12px; color: #666;
|
||||
border-left: 3px solid transparent; cursor: pointer;
|
||||
}
|
||||
.cat-item.active { background: #fff; color: #1677ff; font-weight: 600; border-left-color: #1677ff; }
|
||||
.menu-area { flex: 1; overflow-y: auto; padding: 12px; }
|
||||
.menu-area::-webkit-scrollbar { display: none; }
|
||||
.menu-item {
|
||||
display: flex; align-items: center; gap: 10px; padding: 10px 0;
|
||||
border-bottom: 0.5px solid #f0f0f0;
|
||||
}
|
||||
.menu-item:last-child { border-bottom: none; }
|
||||
.menu-item .food-icon {
|
||||
width: 56px; height: 56px; border-radius: 10px; background: #f5f5f5;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0;
|
||||
}
|
||||
.menu-item .food-info { flex: 1; min-width: 0; }
|
||||
.menu-item .food-name { font-size: 14px; font-weight: 600; }
|
||||
.menu-item .food-desc { font-size: 11px; color: #999; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.menu-item .food-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
|
||||
.menu-item .food-price { font-size: 15px; font-weight: 700; color: #f5222d; }
|
||||
.add-btn {
|
||||
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;
|
||||
}
|
||||
/* 底部购物车栏 */
|
||||
.cart-bar {
|
||||
height: 56px; background: #fff; border-top: 1px solid #f0f0f0;
|
||||
display: flex; align-items: center; padding: 0 16px; gap: 12px; flex-shrink: 0;
|
||||
}
|
||||
.cart-icon-wrap {
|
||||
width: 44px; height: 44px; border-radius: 50%; background: #1677ff;
|
||||
display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0;
|
||||
}
|
||||
.cart-icon-wrap .badge {
|
||||
position: absolute; top: -4px; right: -4px; background: #f5222d; color: #fff;
|
||||
font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.cart-info { flex: 1; }
|
||||
.cart-total { font-size: 16px; font-weight: 700; color: #f5222d; }
|
||||
.cart-desc { font-size: 11px; color: #999; }
|
||||
.cart-submit {
|
||||
height: 44px; padding: 0 24px; background: #1677ff; color: #fff; border: none;
|
||||
border-radius: 22px; font-size: 15px; font-weight: 600; cursor: pointer;
|
||||
}
|
||||
</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="eat-home.html">‹</a>
|
||||
<span class="title">订餐</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="order-layout">
|
||||
<!-- 左侧分类 -->
|
||||
<div class="category-sidebar">
|
||||
<div class="cat-item active">热菜</div>
|
||||
<div class="cat-item">凉菜</div>
|
||||
<div class="cat-item">主食</div>
|
||||
<div class="cat-item">汤品</div>
|
||||
<div class="cat-item">水果</div>
|
||||
<div class="cat-item">饮品</div>
|
||||
</div>
|
||||
<!-- 右侧菜品列表 -->
|
||||
<div class="menu-area">
|
||||
<div class="menu-item">
|
||||
<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>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<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>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<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>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<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>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<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>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 购物车栏 -->
|
||||
<div class="cart-bar">
|
||||
<div class="cart-icon-wrap">
|
||||
<span style="font-size:20px">🛒</span>
|
||||
<span class="badge">3</span>
|
||||
</div>
|
||||
<div class="cart-info">
|
||||
<div class="cart-total">¥38.00</div>
|
||||
<div class="cart-desc">已选 3 个餐品</div>
|
||||
</div>
|
||||
<a href="eat-order-confirm.html" style="text-decoration:none"><button class="cart-submit">去结算</button></a>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,114 @@
|
||||
<!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; }
|
||||
.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; }
|
||||
/* 业务样式 */
|
||||
.quick-actions {
|
||||
display: flex; gap: 10px; padding: 14px 16px 10px; background: #fff; margin-bottom: 8px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.quick-btn .qicon { font-size: 20px; }
|
||||
.dish-list { padding: 0 16px 16px; background: #fff; }
|
||||
.dish-list .list-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; padding-top: 12px; }
|
||||
.dish-item {
|
||||
display: flex; align-items: center; gap: 10px; padding: 10px 0;
|
||||
border-bottom: 0.5px solid #f0f0f0; cursor: pointer; text-decoration: none; color: inherit;
|
||||
}
|
||||
.dish-item:last-child { border-bottom: none; }
|
||||
.dish-item .icon-box {
|
||||
width: 44px; height: 44px; border-radius: 12px; background: #f5f5f5;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
|
||||
}
|
||||
.dish-item .info { flex: 1; min-width: 0; }
|
||||
.dish-item .name { font-size: 13px; font-weight: 600; }
|
||||
.dish-item .meta { font-size: 11px; color: #999; margin-top: 2px; }
|
||||
.dish-item .tag {
|
||||
font-size: 10px; padding: 2px 8px; border-radius: 8px; flex-shrink: 0;
|
||||
}
|
||||
.dish-item .arrow { font-size: 16px; color: #ccc; margin-left: 4px; }
|
||||
</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="eat-home.html">‹</a>
|
||||
<span class="title">今日食谱</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- 快捷操作 -->
|
||||
<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>
|
||||
</div>
|
||||
<!-- 推荐食谱列表 -->
|
||||
<div class="dish-list">
|
||||
<div class="list-title">今日推荐食谱</div>
|
||||
<a class="dish-item" href="eat-dish-detail.html">
|
||||
<div class="icon-box">🍗</div>
|
||||
<div class="info"><div class="name">宫保鸡丁</div><div class="meta">285kcal · ¥12</div></div>
|
||||
<span class="tag" style="background:#f6ffed;color:#52c41a">推荐</span><span class="arrow">›</span>
|
||||
</a>
|
||||
<a class="dish-item" href="eat-dish-detail.html">
|
||||
<div class="icon-box">🐟</div>
|
||||
<div class="info"><div class="name">清蒸鱼</div><div class="meta">142kcal · ¥18</div></div>
|
||||
<span class="tag" style="background:#f6ffed;color:#52c41a">推荐</span><span class="arrow">›</span>
|
||||
</a>
|
||||
<a class="dish-item" href="eat-dish-detail.html">
|
||||
<div class="icon-box">🥦</div>
|
||||
<div class="info"><div class="name">炒西兰花</div><div class="meta">68kcal · ¥8</div></div>
|
||||
<span class="tag" style="background:#f6ffed;color:#52c41a">推荐</span><span class="arrow">›</span>
|
||||
</a>
|
||||
<a class="dish-item" href="eat-dish-detail.html">
|
||||
<div class="icon-box">🍅</div>
|
||||
<div class="info"><div class="name">番茄炒蛋</div><div class="meta">168kcal · ¥8</div></div>
|
||||
<span class="tag" style="background:#fff7e6;color:#fa8c16">适量</span><span class="arrow">›</span>
|
||||
</a>
|
||||
<a class="dish-item" href="eat-dish-detail.html">
|
||||
<div class="icon-box">🍖</div>
|
||||
<div class="info"><div class="name">红烧肉</div><div class="meta">395kcal · ¥16</div></div>
|
||||
<span class="tag" style="background:#fff1f0;color:#f5222d">少选</span><span class="arrow">›</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,142 @@
|
||||
<!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 .publish {
|
||||
margin-left: auto; padding: 5px 14px; border-radius: 14px;
|
||||
background: #1677ff; color: #fff; font-size: 13px; font-weight: 600;
|
||||
border: none; cursor: pointer;
|
||||
}
|
||||
.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; }
|
||||
/* 业务样式 */
|
||||
.form-section { background: #fff; padding: 16px; margin-bottom: 8px; }
|
||||
.form-section .sec-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
|
||||
.form-field { margin-bottom: 14px; }
|
||||
.form-field .label { font-size: 13px; color: #333; font-weight: 500; margin-bottom: 6px; }
|
||||
.form-field input, .form-field textarea {
|
||||
width: 100%; border: 1px solid #e8e8e8; border-radius: 8px; padding: 10px 12px;
|
||||
font-size: 14px; outline: none; font-family: inherit; background: #fafafa;
|
||||
}
|
||||
.form-field textarea { height: 80px; resize: none; }
|
||||
.form-field input:focus, .form-field textarea:focus { border-color: #1677ff; background: #fff; }
|
||||
.cover-upload {
|
||||
width: 100%; height: 140px; border: 2px dashed #d9d9d9; border-radius: 12px;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
gap: 6px; color: #999; cursor: pointer;
|
||||
}
|
||||
.cover-upload .icon { font-size: 32px; }
|
||||
.cover-upload .text { font-size: 13px; }
|
||||
.tag-input { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.tag-chip {
|
||||
padding: 4px 10px; border-radius: 12px; background: #e6f4ff; color: #1677ff;
|
||||
font-size: 12px; display: flex; align-items: center; gap: 4px;
|
||||
}
|
||||
.tag-chip .remove { cursor: pointer; font-size: 14px; }
|
||||
.add-step-btn {
|
||||
width: 100%; padding: 10px; border: 1px dashed #1677ff; border-radius: 8px;
|
||||
background: #f0f7ff; color: #1677ff; font-size: 13px; cursor: pointer; text-align: center;
|
||||
}
|
||||
.step-edit { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
|
||||
.step-edit .num {
|
||||
width: 22px; height: 22px; border-radius: 50%; background: #1677ff; color: #fff;
|
||||
font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 10px;
|
||||
}
|
||||
.step-edit textarea {
|
||||
flex: 1; border: 1px solid #e8e8e8; border-radius: 8px; padding: 8px 10px;
|
||||
font-size: 13px; height: 44px; resize: none; outline: none; font-family: inherit;
|
||||
}
|
||||
</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>
|
||||
<button class="publish">发布</button>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- 封面上传 -->
|
||||
<div class="form-section">
|
||||
<div class="cover-upload">
|
||||
<span class="icon">📷</span>
|
||||
<span class="text">上传食谱封面图</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 基本信息 -->
|
||||
<div class="form-section">
|
||||
<div class="sec-title">基本信息</div>
|
||||
<div class="form-field">
|
||||
<div class="label">食谱名称</div>
|
||||
<input placeholder="给你的食谱起个名字" readonly>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<div class="label">简介</div>
|
||||
<textarea placeholder="简单描述一下这道菜的特点..." readonly></textarea>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<div class="label">标签</div>
|
||||
<div class="tag-input">
|
||||
<span class="tag-chip">低脂 <span class="remove">×</span></span>
|
||||
<span class="tag-chip">快手菜 <span class="remove">×</span></span>
|
||||
<span class="tag-chip">+ 添加标签</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 食材 -->
|
||||
<div class="form-section">
|
||||
<div class="sec-title">食材清单</div>
|
||||
<div class="form-field">
|
||||
<input placeholder="食材名称，如：鸡胸肉 150g" readonly>
|
||||
</div>
|
||||
<div class="add-step-btn">+ 添加食材</div>
|
||||
</div>
|
||||
<!-- 步骤 -->
|
||||
<div class="form-section">
|
||||
<div class="sec-title">制作步骤</div>
|
||||
<div class="step-edit">
|
||||
<div class="num">1</div>
|
||||
<textarea placeholder="描述第一步操作..." readonly></textarea>
|
||||
</div>
|
||||
<div class="step-edit">
|
||||
<div class="num">2</div>
|
||||
<textarea placeholder="描述第二步操作..." readonly></textarea>
|
||||
</div>
|
||||
<div class="add-step-btn">+ 添加步骤</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,121 @@
|
||||
<!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; }
|
||||
.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; }
|
||||
/* 业务样式 */
|
||||
.recipe-detail { background: #fff; margin-bottom: 8px; }
|
||||
.recipe-cover {
|
||||
height: 200px; background: linear-gradient(135deg,#f6ffed,#d9f7be);
|
||||
display: flex; align-items: center; justify-content: center; font-size: 64px;
|
||||
}
|
||||
.recipe-info { padding: 16px; }
|
||||
.recipe-info .title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
|
||||
.recipe-info .meta { font-size: 12px; color: #999; margin-bottom: 10px; }
|
||||
.recipe-info .tags { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.recipe-info .tag { padding: 3px 10px; border-radius: 10px; font-size: 11px; background: #f5f5f5; color: #666; }
|
||||
.section { background: #fff; padding: 16px; margin-bottom: 8px; }
|
||||
.section .sec-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
|
||||
.ingredient-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.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-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; }
|
||||
.action-bar {
|
||||
padding: 12px 16px; background: #fff; border-top: 0.5px solid #f0f0f0;
|
||||
display: flex; gap: 12px; flex-shrink: 0;
|
||||
}
|
||||
.action-bar .btn {
|
||||
flex: 1; height: 40px; border-radius: 20px; border: none; font-size: 14px;
|
||||
font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px;
|
||||
}
|
||||
.btn-like { background: #fff1f0; color: #f5222d; border: 1px solid #ffccc7 !important; }
|
||||
.btn-collect { background: #fff7e6; color: #fa8c16; border: 1px solid #ffd591 !important; }
|
||||
.btn-start { background: #1677ff; color: #fff; }
|
||||
</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="recipe-detail">
|
||||
<div class="recipe-cover">🥗</div>
|
||||
<div class="recipe-info">
|
||||
<div class="title">低脂鸡胸肉沙拉</div>
|
||||
<div class="meta">👤 营养师小王 · 15分钟 · 220kcal</div>
|
||||
<div class="tags">
|
||||
<span class="tag">低脂</span><span class="tag">高蛋白</span><span class="tag">减脂餐</span><span class="tag">快手菜</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="sec-title">食材清单</div>
|
||||
<div class="ingredient-list">
|
||||
<div class="ingredient-item"><span class="name">鸡胸肉</span><span class="amount">150g</span></div>
|
||||
<div class="ingredient-item"><span class="name">生菜</span><span class="amount">100g</span></div>
|
||||
<div class="ingredient-item"><span class="name">小番茄</span><span class="amount">6颗</span></div>
|
||||
<div class="ingredient-item"><span class="name">黄瓜</span><span class="amount">半根</span></div>
|
||||
<div class="ingredient-item"><span class="name">橄榄油</span><span class="amount">5ml</span></div>
|
||||
<div class="ingredient-item"><span class="name">黑胡椒</span><span class="amount">适量</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-like">❤️ 128</button>
|
||||
<button class="btn btn-collect">⭐ 收藏</button>
|
||||
<button class="btn btn-start">开始照做</button>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,123 @@
|
||||
<!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; }
|
||||
.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; }
|
||||
.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; }
|
||||
/* 业务样式 */
|
||||
.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;
|
||||
}
|
||||
.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>
|
||||
<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="page-content">
|
||||
<div class="make-header">
|
||||
<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>
|
||||
<!-- 热门食谱 -->
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,92 @@
|
||||
<!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; }
|
||||
.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; }
|
||||
/* 业务样式 */
|
||||
.profile-card { background: #fff; padding: 20px 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 14px; }
|
||||
.profile-card .avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg,#e6f4ff,#bae0ff); display: flex; align-items: center; justify-content: center; font-size: 28px; }
|
||||
.profile-card .info .name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
|
||||
.profile-card .info .meta { font-size: 12px; color: #999; }
|
||||
.section { background: #fff; margin-bottom: 8px; padding: 16px; }
|
||||
.section .sec-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #333; }
|
||||
.health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||||
.health-item { background: #f8f9fa; border-radius: 10px; padding: 12px; text-align: center; }
|
||||
.health-item .val { font-size: 20px; font-weight: 700; color: #1677ff; margin-bottom: 2px; }
|
||||
.health-item .lbl { font-size: 11px; color: #999; }
|
||||
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.tag-list .tag { padding: 5px 12px; border-radius: 14px; font-size: 12px; background: #f0f7ff; color: #1677ff; }
|
||||
.tag-list .tag.warn { background: #fff7e6; color: #fa8c16; }
|
||||
.goal-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 0.5px solid #f0f0f0; }
|
||||
.goal-item:last-child { border-bottom: none; }
|
||||
.goal-item .g-label { font-size: 13px; color: #333; }
|
||||
.goal-item .g-value { font-size: 13px; color: #1677ff; font-weight: 600; }
|
||||
</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="me-home.html">‹</a>
|
||||
<span class="title">健康档案</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="profile-card">
|
||||
<div class="avatar">👤</div>
|
||||
<div class="info">
|
||||
<div class="name">张三</div>
|
||||
<div class="meta">男 · 32岁 · 172cm · 68kg</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="sec-title">身体指标</div>
|
||||
<div class="health-grid">
|
||||
<div class="health-item"><div class="val">23.0</div><div class="lbl">BMI 正常</div></div>
|
||||
<div class="health-item"><div class="val">18.5%</div><div class="lbl">体脂率</div></div>
|
||||
<div class="health-item"><div class="val">1850</div><div class="lbl">基础代谢(kcal)</div></div>
|
||||
<div class="health-item"><div class="val">正常</div><div class="lbl">血压</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="sec-title">过敏/忌口</div>
|
||||
<div class="tag-list">
|
||||
<span class="tag warn">🥜 花生过敏</span>
|
||||
<span class="tag warn">🦐 海鲜过敏</span>
|
||||
<span class="tag">🌶️ 少辣</span>
|
||||
<span class="tag">🧂 低盐</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="sec-title">营养目标</div>
|
||||
<div class="goal-item"><span class="g-label">每日热量</span><span class="g-value">2000 kcal</span></div>
|
||||
<div class="goal-item"><span class="g-label">蛋白质</span><span class="g-value">≥60g</span></div>
|
||||
<div class="goal-item"><span class="g-label">膳食纤维</span><span class="g-value">≥25g</span></div>
|
||||
<div class="goal-item"><span class="g-label">饮水量</span><span class="g-value">≥2000ml</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,112 @@
|
||||
<!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: #1677ff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; color: #fff;
|
||||
}
|
||||
.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; }
|
||||
.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; }
|
||||
/* 业务样式 */
|
||||
.user-header {
|
||||
background: linear-gradient(135deg, #1677ff, #4096ff); padding: 24px 16px 20px; color: #fff;
|
||||
}
|
||||
.user-info { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
|
||||
.user-avatar {
|
||||
width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.2);
|
||||
display: flex; align-items: center; justify-content: center; font-size: 28px;
|
||||
}
|
||||
.user-name { font-size: 18px; font-weight: 700; }
|
||||
.user-dept { font-size: 12px; opacity: 0.8; margin-top: 2px; }
|
||||
.user-stats { display: flex; gap: 0; }
|
||||
.stat-item { flex: 1; text-align: center; }
|
||||
.stat-item .val { font-size: 18px; font-weight: 700; }
|
||||
.stat-item .label { font-size: 11px; opacity: 0.8; margin-top: 2px; }
|
||||
.stat-item + .stat-item { border-left: 1px solid rgba(255,255,255,0.2); }
|
||||
.menu-group { background: #fff; margin: 8px 0; border-radius: 0; }
|
||||
.menu-item {
|
||||
display: flex; align-items: center; gap: 12px; padding: 14px 16px;
|
||||
border-bottom: 0.5px solid #f5f5f5; text-decoration: none; color: #333;
|
||||
}
|
||||
.menu-item:last-child { border-bottom: none; }
|
||||
.menu-item .m-icon { font-size: 20px; width: 28px; text-align: center; }
|
||||
.menu-item .m-label { flex: 1; font-size: 14px; }
|
||||
.menu-item .m-arrow { font-size: 16px; color: #ccc; }
|
||||
.menu-item .m-badge {
|
||||
padding: 2px 8px; border-radius: 10px; background: #f5222d; color: #fff;
|
||||
font-size: 10px; font-weight: 600;
|
||||
}
|
||||
</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="page-content">
|
||||
<!-- 用户头部 -->
|
||||
<div class="user-header">
|
||||
<div class="user-info">
|
||||
<div class="user-avatar">👤</div>
|
||||
<div><div class="user-name">张三</div><div class="user-dept">长庆油田 · 采油一厂</div></div>
|
||||
</div>
|
||||
<div class="user-stats">
|
||||
<div class="stat-item"><div class="val">78</div><div class="label">营养评分</div></div>
|
||||
<div class="stat-item"><div class="val">23</div><div class="label">就餐天数</div></div>
|
||||
<div class="stat-item"><div class="val">5</div><div class="label">收藏食谱</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 菜单组 -->
|
||||
<div class="menu-group">
|
||||
<a class="menu-item" href="me-health.html"><span class="m-icon">💚</span><span class="m-label">健康档案</span><span class="m-arrow">›</span></a>
|
||||
<a class="menu-item" href="me-orders.html"><span class="m-icon">📋</span><span class="m-label">我的订单</span><span class="m-badge">2</span><span class="m-arrow">›</span></a>
|
||||
<a class="menu-item" href="me-wallet.html"><span class="m-icon">💰</span><span class="m-label">我的余额</span><span class="m-arrow">›</span></a>
|
||||
</div>
|
||||
<div class="menu-group">
|
||||
<a class="menu-item" href="make-home.html"><span class="m-icon">⭐</span><span class="m-label">收藏食谱</span><span class="m-arrow">›</span></a>
|
||||
<a class="menu-item" href="trace-query.html"><span class="m-icon">🔍</span><span class="m-label">扫码溯源</span><span class="m-arrow">›</span></a>
|
||||
<a class="menu-item" href="ask-history.html"><span class="m-icon">💬</span><span class="m-label">咨询记录</span><span class="m-arrow">›</span></a>
|
||||
</div>
|
||||
<div class="menu-group">
|
||||
<a class="menu-item" href="me-settings.html"><span class="m-icon">⚙️</span><span class="m-label">设置</span><span class="m-arrow">›</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<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" href="make-home.html"><span class="tab-icon">🍳</span>做</a>
|
||||
<a class="tab-item active" href="me-home.html"><span class="tab-icon">👤</span>我</a>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,147 @@
|
||||
<!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; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
.home-indicator { height: 34px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.home-indicator::after { content: ''; width: 134px; height: 5px; background: #000; border-radius: 3px; }
|
||||
|
||||
/* 订单状态区域 */
|
||||
.order-status { background: #52c41a; padding: 24px 16px; text-align: center; color: #fff; }
|
||||
.order-status .status-icon { font-size: 40px; margin-bottom: 8px; }
|
||||
.order-status .status-text { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
|
||||
.order-status .status-sub { font-size: 13px; opacity: 0.85; }
|
||||
|
||||
/* 取餐码 */
|
||||
.pickup-code { background: #fff; margin: 12px; border-radius: 12px; padding: 20px 16px; text-align: center; }
|
||||
.pickup-code .label { font-size: 13px; color: #999; margin-bottom: 8px; }
|
||||
.pickup-code .code { font-size: 36px; font-weight: 700; color: #333; letter-spacing: 4px; }
|
||||
|
||||
/* 餐厅信息 */
|
||||
.restaurant-info { background: #fff; margin: 0 12px 12px; border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
|
||||
.restaurant-info .icon { width: 36px; height: 36px; background: #fff3e0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
|
||||
.restaurant-info .name { font-size: 15px; font-weight: 600; color: #333; }
|
||||
|
||||
/* 订单商品 */
|
||||
.order-items { background: #fff; margin: 0 12px 12px; border-radius: 12px; padding: 16px; }
|
||||
.order-items .section-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 12px; }
|
||||
.order-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 0.5px solid #f5f5f5; }
|
||||
.order-item:last-child { border-bottom: none; }
|
||||
.order-item .item-name { font-size: 14px; color: #333; }
|
||||
.order-item .item-qty { font-size: 13px; color: #999; margin-left: 8px; }
|
||||
.order-item .item-price { font-size: 14px; color: #333; font-weight: 500; }
|
||||
|
||||
/* 价格汇总 */
|
||||
.price-summary { background: #fff; margin: 0 12px 12px; border-radius: 12px; padding: 16px; }
|
||||
.price-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; color: #666; }
|
||||
.price-row.total { color: #333; font-weight: 600; font-size: 16px; padding-top: 10px; border-top: 0.5px solid #f0f0f0; margin-top: 6px; }
|
||||
.price-row.total .val { color: #ff4d4f; }
|
||||
|
||||
/* 订单信息 */
|
||||
.order-info { background: #fff; margin: 0 12px 12px; border-radius: 12px; padding: 16px; }
|
||||
.order-info .section-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 12px; }
|
||||
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 13px; }
|
||||
.info-row .label { color: #999; }
|
||||
.info-row .value { color: #333; }
|
||||
|
||||
/* 溯源按钮 */
|
||||
.trace-btn { display: block; margin: 0 12px 20px; background: #1677ff; color: #fff; text-align: center; padding: 12px; border-radius: 12px; font-size: 15px; font-weight: 500; text-decoration: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">09:41</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M2 9l2-2 4 4 4-4 4 4 4-4 2 2" stroke="#000" stroke-width="2"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M1 21h2V9h-2zm5 0h2V5H6zm5 0h2V1h-2zm5 0h2V7h-2zm5 0h2V3h-2z" fill="#000"/></svg>
|
||||
<svg width="22" height="12" viewBox="0 0 22 12"><rect x="0" y="1" width="18" height="10" rx="2" stroke="#000" fill="none"/><rect x="1.5" y="2.5" width="13" height="7" rx="1" fill="#000"/><path d="M19 4.5v3a1.5 1.5 0 000-3z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="me-orders.html">‹</a>
|
||||
<span class="title">订单详情</span>
|
||||
</div>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<div class="page-content">
|
||||
<!-- 订单状态 -->
|
||||
<div class="order-status">
|
||||
<div class="status-icon">✔</div>
|
||||
<div class="status-text">已完成</div>
|
||||
<div class="status-sub">订单已完成，感谢您的用餐</div>
|
||||
</div>
|
||||
|
||||
<!-- 取餐码 -->
|
||||
<div class="pickup-code">
|
||||
<div class="label">取餐码</div>
|
||||
<div class="code">A-086</div>
|
||||
</div>
|
||||
|
||||
<!-- 餐厅信息 -->
|
||||
<div class="restaurant-info">
|
||||
<div class="icon">🍴</div>
|
||||
<div class="name">阳光食堂</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单商品列表 -->
|
||||
<div class="order-items">
|
||||
<div class="section-title">订单商品</div>
|
||||
<div class="order-item">
|
||||
<span><span class="item-name">低脂鸡胸肉沙拉</span><span class="item-qty">×1</span></span>
|
||||
<span class="item-price">¥18.0</span>
|
||||
</div>
|
||||
<div class="order-item">
|
||||
<span><span class="item-name">杂粮饭</span><span class="item-qty">×1</span></span>
|
||||
<span class="item-price">¥3.0</span>
|
||||
</div>
|
||||
<div class="order-item">
|
||||
<span><span class="item-name">紫菜蛋花汤</span><span class="item-qty">×1</span></span>
|
||||
<span class="item-price">¥7.5</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 价格汇总 -->
|
||||
<div class="price-summary">
|
||||
<div class="price-row"><span>商品小计</span><span>¥28.5</span></div>
|
||||
<div class="price-row"><span>优惠减免</span><span>-¥0</span></div>
|
||||
<div class="price-row total"><span>实付金额</span><span class="val">¥28.5</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<div class="order-info">
|
||||
<div class="section-title">订单信息</div>
|
||||
<div class="info-row"><span class="label">订单编号</span><span class="value">NT202605131042086</span></div>
|
||||
<div class="info-row"><span class="label">下单时间</span><span class="value">2026-05-13 10:42</span></div>
|
||||
<div class="info-row"><span class="label">支付方式</span><span class="value">微信支付</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 溯源链接 -->
|
||||
<a class="trace-btn" href="trace-detail.html">查看食材溯源信息</a>
|
||||
</div>
|
||||
|
||||
<!-- 底部指示器 -->
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,73 @@
|
||||
<!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; }
|
||||
.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; }
|
||||
/* 业务样式 */
|
||||
.order-tabs { display: flex; background: #fff; border-bottom: 0.5px solid #f0f0f0; margin-bottom: 8px; }
|
||||
.order-tabs .ot { flex: 1; text-align: center; padding: 12px 0; font-size: 13px; color: #666; position: relative; }
|
||||
.order-tabs .ot.active { color: #1677ff; font-weight: 600; }
|
||||
.order-tabs .ot.active::after { content: ''; position: absolute; bottom: 0; left: 30%; right: 30%; height: 2px; background: #1677ff; border-radius: 1px; }
|
||||
.order-card { margin: 0 12px 10px; background: #fff; border-radius: 10px; padding: 14px; text-decoration: none; color: inherit; display: block; }
|
||||
.order-card .card-top { display: flex; justify-content: space-between; margin-bottom: 10px; }
|
||||
.order-card .shop { font-size: 14px; font-weight: 600; }
|
||||
.order-card .status { font-size: 12px; color: #52c41a; font-weight: 500; }
|
||||
.order-card .status.pending { color: #fa8c16; }
|
||||
.order-card .items { font-size: 12px; color: #666; margin-bottom: 8px; line-height: 1.6; }
|
||||
.order-card .card-bottom { display: flex; justify-content: space-between; align-items: center; }
|
||||
.order-card .total { font-size: 14px; font-weight: 700; color: #f5222d; }
|
||||
.order-card .time { font-size: 11px; color: #999; }
|
||||
</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="me-home.html">‹</a>
|
||||
<span class="title">我的订单</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="order-tabs">
|
||||
<span class="ot active">全部</span>
|
||||
<span class="ot">待取餐</span>
|
||||
<span class="ot">已完成</span>
|
||||
<span class="ot">已取消</span>
|
||||
</div>
|
||||
<a class="order-card" href="me-order-detail.html">
|
||||
<div class="card-top"><span class="shop">🍽️ 阳光食堂 · 午餐</span><span class="status pending">待取餐</span></div>
|
||||
<div class="items">低脂鸡胸肉沙拉 ×1、杂粮饭 ×1、紫菜蛋花汤 ×1</div>
|
||||
<div class="card-bottom"><span class="total">¥ 28.5</span><span class="time">今天 11:32</span></div>
|
||||
</a>
|
||||
<a class="order-card" href="me-order-detail.html">
|
||||
<div class="card-top"><span class="shop">🍽️ 阳光食堂 · 早餐</span><span class="status">已完成</span></div>
|
||||
<div class="items">全麦三明治 ×1、鲜榨橙汁 ×1</div>
|
||||
<div class="card-bottom"><span class="total">¥ 15.0</span><span class="time">今天 07:45</span></div>
|
||||
</a>
|
||||
<a class="order-card" href="me-order-detail.html">
|
||||
<div class="card-top"><span class="shop">🍽️ 健康轻食 · 午餐</span><span class="status">已完成</span></div>
|
||||
<div class="items">三文鱼牛油果碗 ×1、蔬菜汁 ×1</div>
|
||||
<div class="card-bottom"><span class="total">¥ 42.0</span><span class="time">昨天 12:15</span></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,113 @@
|
||||
<!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; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
.settings-group { background: #fff; margin: 12px 0; }
|
||||
.settings-group:first-child { margin-top: 12px; }
|
||||
.settings-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 0.5px solid #f0f0f0; }
|
||||
.settings-item:last-child { border-bottom: none; }
|
||||
.settings-item .label { font-size: 15px; color: #333; }
|
||||
.settings-item .right { display: flex; align-items: center; gap: 8px; }
|
||||
.settings-item .value { font-size: 14px; color: #999; }
|
||||
.settings-item .value.green { color: #52c41a; }
|
||||
.settings-item .arrow { font-size: 16px; color: #ccc; }
|
||||
.toggle { width: 44px; height: 26px; border-radius: 13px; background: #e0e0e0; position: relative; cursor: pointer; transition: background 0.3s; }
|
||||
.toggle.on { background: #1677ff; }
|
||||
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.3s; }
|
||||
.toggle.on::after { transform: translateX(18px); }
|
||||
.logout-btn { margin: 24px 16px; padding: 14px; background: #fff; border: none; border-radius: 8px; font-size: 16px; color: #ff4d4f; cursor: pointer; text-align: center; width: calc(100% - 32px); }
|
||||
.home-indicator { height: 34px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; background: #f5f5f5; flex-shrink: 0; }
|
||||
.home-indicator::after { content: ''; width: 134px; height: 5px; background: #333; border-radius: 3px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">09:41</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2 22h20V2z"/></svg>
|
||||
<svg width="22" height="12" viewBox="0 0 22 12"><rect x="0" y="1" width="18" height="10" rx="2" stroke="#333" stroke-width="1.2" fill="none"/><rect x="1.5" y="2.5" width="13" height="7" rx="1" fill="#333"/><path d="M19.5 4.5v3a1.5 1.5 0 000-3z" fill="#333"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="me-home.html">‹</a>
|
||||
<span class="title">设置</span>
|
||||
</div>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<div class="page-content">
|
||||
<!-- 通知设置 -->
|
||||
<div class="settings-group">
|
||||
<div class="settings-item">
|
||||
<span class="label">订餐提醒</span>
|
||||
<div class="right"><span class="toggle on"></span></div>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span class="label">营养日报推送</span>
|
||||
<div class="right"><span class="toggle on"></span></div>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span class="label">优惠活动通知</span>
|
||||
<div class="right"><span class="toggle"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 账户设置 -->
|
||||
<div class="settings-group">
|
||||
<div class="settings-item">
|
||||
<span class="label">修改密码</span>
|
||||
<div class="right"><span class="arrow">›</span></div>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span class="label">绑定手机号</span>
|
||||
<div class="right"><span class="value">138****8888</span><span class="arrow">›</span></div>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span class="label">实名认证</span>
|
||||
<div class="right"><span class="value green">已认证</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 其他 -->
|
||||
<div class="settings-group">
|
||||
<div class="settings-item">
|
||||
<span class="label">清除缓存</span>
|
||||
<div class="right"><span class="value">12.3MB</span></div>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span class="label">关于我们</span>
|
||||
<div class="right"><span class="arrow">›</span></div>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span class="label">用户协议</span>
|
||||
<div class="right"><span class="arrow">›</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 退出登录 -->
|
||||
<button class="logout-btn">退出登录</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部指示器 -->
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!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; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
.balance-card { margin: 16px; padding: 24px; border-radius: 12px; background: linear-gradient(135deg, #1677ff, #69b4ff); color: #fff; }
|
||||
.balance-label { font-size: 14px; opacity: 0.85; margin-bottom: 8px; }
|
||||
.balance-amount { font-size: 36px; font-weight: 700; letter-spacing: -1px; }
|
||||
.balance-amount .symbol { font-size: 20px; font-weight: 500; margin-right: 4px; }
|
||||
.action-buttons { display: flex; gap: 12px; margin-top: 20px; }
|
||||
.action-btn { flex: 1; height: 36px; border-radius: 18px; border: none; font-size: 14px; font-weight: 500; cursor: pointer; }
|
||||
.action-btn.primary { background: #fff; color: #1677ff; }
|
||||
.action-btn.secondary { background: rgba(255,255,255,0.25); color: #fff; border: 1px solid rgba(255,255,255,0.5); }
|
||||
.section-title { font-size: 15px; font-weight: 600; color: #333; padding: 16px 16px 12px; }
|
||||
.transaction-list { background: #fff; margin: 0 16px; border-radius: 10px; overflow: hidden; }
|
||||
.transaction-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 0.5px solid #f5f5f5; }
|
||||
.transaction-item:last-child { border-bottom: none; }
|
||||
.transaction-info .transaction-name { font-size: 15px; color: #333; }
|
||||
.transaction-info .transaction-time { font-size: 12px; color: #999; margin-top: 4px; }
|
||||
.transaction-amount { font-size: 15px; font-weight: 500; }
|
||||
.transaction-amount.expense { color: #333; }
|
||||
.transaction-amount.income { color: #52c41a; }
|
||||
.home-indicator { height: 34px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; background: #f5f5f5; flex-shrink: 0; }
|
||||
.home-indicator::after { content: ''; width: 134px; height: 5px; background: #000; 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">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M2 9l10-7 10 7v11a2 2 0 01-2 2h-4v-6H8v6H4a2 2 0 01-2-2V9z" fill="#333"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M1 9l2-2c5.5-5.5 14-5.5 19.5 0l2 2M5 13l2-2c3.5-3.5 9-3.5 12.5 0l2 2M9 17l3-3 3 3" stroke="#333" stroke-width="2"/></svg>
|
||||
<svg width="20" height="12" viewBox="0 0 20 12"><rect x="0" y="1" width="16" height="10" rx="2" stroke="#333" fill="none" stroke-width="1.2"/><rect x="2" y="3" width="10" height="6" rx="1" fill="#333"/><path d="M17 4v4a2 2 0 002-2v0a2 2 0 00-2-2z" fill="#333"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="me-home.html">‹</a>
|
||||
<span class="title">我的余额</span>
|
||||
</div>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<div class="page-content">
|
||||
<!-- 余额卡片 -->
|
||||
<div class="balance-card">
|
||||
<div class="balance-label">当前余额</div>
|
||||
<div class="balance-amount"><span class="symbol">¥</span>256.50</div>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn primary">充值</button>
|
||||
<button class="action-btn secondary">提现</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最近交易 -->
|
||||
<div class="section-title">最近交易</div>
|
||||
<div class="transaction-list">
|
||||
<div class="transaction-item">
|
||||
<div class="transaction-info">
|
||||
<div class="transaction-name">午餐消费</div>
|
||||
<div class="transaction-time">今天 11:32</div>
|
||||
</div>
|
||||
<div class="transaction-amount expense">-¥28.5</div>
|
||||
</div>
|
||||
<div class="transaction-item">
|
||||
<div class="transaction-info">
|
||||
<div class="transaction-name">早餐消费</div>
|
||||
<div class="transaction-time">今天 07:45</div>
|
||||
</div>
|
||||
<div class="transaction-amount expense">-¥15.0</div>
|
||||
</div>
|
||||
<div class="transaction-item">
|
||||
<div class="transaction-info">
|
||||
<div class="transaction-name">充值</div>
|
||||
<div class="transaction-time">昨天</div>
|
||||
</div>
|
||||
<div class="transaction-amount income">+¥100.0</div>
|
||||
</div>
|
||||
<div class="transaction-item">
|
||||
<div class="transaction-info">
|
||||
<div class="transaction-name">午餐消费</div>
|
||||
<div class="transaction-time">昨天</div>
|
||||
</div>
|
||||
<div class="transaction-amount expense">-¥35.0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部指示器 -->
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,131 @@
|
||||
<!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; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 16px; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
.product-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
|
||||
.product-card .product-name { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
|
||||
.product-card .product-info { font-size: 13px; color: #666; line-height: 1.8; }
|
||||
.product-card .product-info span { display: inline-block; background: #f0f7ff; color: #1677ff; padding: 2px 8px; border-radius: 4px; margin-right: 8px; font-size: 12px; }
|
||||
.timeline-card { background: #fff; border-radius: 12px; padding: 20px 16px; margin-bottom: 16px; }
|
||||
.timeline-card .card-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
|
||||
.timeline-item { display: flex; position: relative; padding-left: 28px; padding-bottom: 24px; }
|
||||
.timeline-item:last-child { padding-bottom: 0; }
|
||||
.timeline-item::before { content: ''; position: absolute; left: 7px; top: 12px; bottom: 0; width: 2px; background: #e8e8e8; }
|
||||
.timeline-item:last-child::before { display: none; }
|
||||
.timeline-dot { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid; display: flex; align-items: center; justify-content: center; }
|
||||
.timeline-dot.green { border-color: #52c41a; background: #f6ffed; }
|
||||
.timeline-dot.blue { border-color: #1677ff; background: #e6f4ff; }
|
||||
.timeline-dot.orange { border-color: #fa8c16; background: #fff7e6; }
|
||||
.timeline-dot.purple { border-color: #722ed1; background: #f9f0ff; }
|
||||
.timeline-content .step-title { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
|
||||
.timeline-content .step-desc { font-size: 12px; color: #999; line-height: 1.6; }
|
||||
.cert-section { background: #fff; border-radius: 12px; padding: 16px; }
|
||||
.cert-section .card-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
|
||||
.cert-badges { display: flex; gap: 10px; flex-wrap: wrap; }
|
||||
.cert-badge { padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; }
|
||||
.cert-badge.organic { background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; }
|
||||
.cert-badge.green-food { background: #e6fffb; color: #08979c; border: 1px solid #87e8de; }
|
||||
.cert-badge.iso { background: #e6f4ff; color: #0958d9; border: 1px solid #91caff; }
|
||||
.home-indicator { height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #f5f5f5; }
|
||||
.home-indicator::after { content: ''; width: 134px; height: 5px; background: #000; 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">
|
||||
<svg width="16" height="12" viewBox="0 0 16 12"><path d="M1 3.5h1.5v5H1zM4 2h1.5v7H4zM7 1h1.5v10H7zM10 3h1.5v6H10z" fill="#000"/></svg>
|
||||
<svg width="15" height="12" viewBox="0 0 15 12"><path d="M7.5 2.5C5 2.5 2.7 3.5 1 5l1.4 1.4C3.8 5 5.5 4.2 7.5 4.2s3.7.8 5.1 2.2L14 5c-1.7-1.5-4-2.5-6.5-2.5zM7.5 6c-1.4 0-2.6.5-3.5 1.4l1.4 1.4c.6-.6 1.3-.9 2.1-.9s1.5.3 2.1.9l1.4-1.4C10.1 6.5 8.9 6 7.5 6zm0 3.5c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12"><rect x="0" y="1" width="22" height="10" rx="2" stroke="#000" stroke-width="1" fill="none"/><rect x="1.5" y="2.5" width="16" height="7" rx="1" fill="#000"/><path d="M23 4.5v3a1.5 1.5 0 000-3z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="javascript:history.back()">‹</a>
|
||||
<span class="title">溯源链路</span>
|
||||
</div>
|
||||
<!-- 页面内容 -->
|
||||
<div class="page-content">
|
||||
<!-- 产品信息卡片 -->
|
||||
<div class="product-card">
|
||||
<div class="product-name">有机西兰花</div>
|
||||
<div class="product-info">
|
||||
<div><span>批次号</span>BL20260512</div>
|
||||
<div style="margin-top:4px"><span>产地</span>山东寿光有机农场</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 溯源时间线 -->
|
||||
<div class="timeline-card">
|
||||
<div class="card-title">溯源链路</div>
|
||||
<!-- 种植 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot green"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="step-title">🌱 种植</div>
|
||||
<div class="step-desc">2026-03-15<br>山东寿光有机农场</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 检测 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot blue"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="step-title">🧪 检测</div>
|
||||
<div class="step-desc">2026-05-10<br>SGS检测中心 · 农残未检出</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 运输 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot orange"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="step-title">🚛 运输</div>
|
||||
<div class="step-desc">2026-05-11<br>冷链物流 · 全程4°C</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 入库 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot purple"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="step-title">🏪 入库</div>
|
||||
<div class="step-desc">2026-05-12<br>阳光食堂中央厨房</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 出餐 -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot green"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="step-title">🍽️ 出餐</div>
|
||||
<div class="step-desc">2026-05-12<br>阳光食堂</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 认证标识 -->
|
||||
<div class="cert-section">
|
||||
<div class="card-title">认证标识</div>
|
||||
<div class="cert-badges">
|
||||
<div class="cert-badge organic">有机认证</div>
|
||||
<div class="cert-badge green-food">绿色食品</div>
|
||||
<div class="cert-badge iso">ISO22000</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部指示器 -->
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!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; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
.scan-area { margin: 24px 20px; background: #fff; border-radius: 12px; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; }
|
||||
.scan-frame { width: 220px; height: 220px; border: 2px dashed #1677ff; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
|
||||
.scan-frame::before, .scan-frame::after { content: ''; position: absolute; width: 24px; height: 24px; border-color: #1677ff; border-style: solid; }
|
||||
.scan-frame::before { top: -2px; left: -2px; border-width: 3px 0 0 3px; border-radius: 8px 0 0 0; }
|
||||
.scan-frame::after { top: -2px; right: -2px; border-width: 3px 3px 0 0; border-radius: 0 8px 0 0; }
|
||||
.scan-frame .corner-bl, .scan-frame .corner-br { position: absolute; width: 24px; height: 24px; border-color: #1677ff; border-style: solid; }
|
||||
.scan-frame .corner-bl { bottom: -2px; left: -2px; border-width: 0 0 3px 3px; border-radius: 0 0 0 8px; }
|
||||
.scan-frame .corner-br { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; border-radius: 0 0 8px 0; }
|
||||
.camera-icon { font-size: 48px; color: #1677ff; margin-bottom: 12px; }
|
||||
.scan-hint { font-size: 14px; color: #666; margin-top: 16px; }
|
||||
.manual-section { margin: 0 20px 20px; background: #fff; border-radius: 12px; padding: 20px; }
|
||||
.manual-section .section-title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 12px; }
|
||||
.manual-input-row { display: flex; gap: 10px; }
|
||||
.manual-input-row input { flex: 1; height: 40px; border: 1px solid #e0e0e0; border-radius: 8px; padding: 0 12px; font-size: 14px; outline: none; }
|
||||
.manual-input-row input:focus { border-color: #1677ff; }
|
||||
.manual-input-row .search-btn { width: 64px; height: 40px; background: #1677ff; color: #fff; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; }
|
||||
.history-section { margin: 0 20px 20px; background: #fff; border-radius: 12px; padding: 20px; }
|
||||
.history-section .section-title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 12px; }
|
||||
.history-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 0.5px solid #f0f0f0; text-decoration: none; color: inherit; }
|
||||
.history-item:last-child { border-bottom: none; }
|
||||
.history-item .item-icon { width: 40px; height: 40px; background: #e8f5e9; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 12px; flex-shrink: 0; }
|
||||
.history-item .item-info { flex: 1; }
|
||||
.history-item .item-name { font-size: 15px; color: #333; font-weight: 500; }
|
||||
.history-item .item-batch { font-size: 12px; color: #999; margin-top: 4px; }
|
||||
.history-item .item-date { font-size: 12px; color: #bbb; flex-shrink: 0; }
|
||||
.history-item .arrow { color: #ccc; margin-left: 8px; font-size: 14px; }
|
||||
.home-indicator { height: 34px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; background: #f5f5f5; flex-shrink: 0; }
|
||||
.home-indicator::after { content: ''; width: 134px; height: 5px; background: #333; border-radius: 3px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">09:41</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2 22h20V2z"/></svg>
|
||||
<svg width="24" height="12" viewBox="0 0 24 12"><rect x="0" y="1" width="20" height="10" rx="2" stroke="#333" stroke-width="1" fill="none"/><rect x="1.5" y="2.5" width="14" height="7" rx="1" fill="#333"/><path d="M21 4v4a2 2 0 0 0 0-4z" fill="#333"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="me-home.html">‹</a>
|
||||
<span class="title">扫码溯源</span>
|
||||
</div>
|
||||
<!-- 页面内容 -->
|
||||
<div class="page-content">
|
||||
<!-- 扫码区域 -->
|
||||
<div class="scan-area">
|
||||
<div class="scan-frame">
|
||||
<span class="corner-bl"></span>
|
||||
<span class="corner-br"></span>
|
||||
<svg class="camera-icon" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
||||
</div>
|
||||
<p class="scan-hint">将二维码放入框内扫描</p>
|
||||
</div>
|
||||
<!-- 手动输入 -->
|
||||
<div class="manual-section">
|
||||
<div class="section-title">手动输入溯源码</div>
|
||||
<div class="manual-input-row">
|
||||
<input type="text" placeholder="请输入溯源码">
|
||||
<button class="search-btn">查询</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 最近扫描记录 -->
|
||||
<div class="history-section">
|
||||
<div class="section-title">最近扫描记录</div>
|
||||
<a class="history-item" href="trace-detail.html">
|
||||
<div class="item-icon">🥦</div>
|
||||
<div class="item-info">
|
||||
<div class="item-name">有机西兰花</div>
|
||||
<div class="item-batch">批次 BL20260512</div>
|
||||
</div>
|
||||
<span class="item-date">今天</span>
|
||||
<span class="arrow">›</span>
|
||||
</a>
|
||||
<a class="history-item" href="trace-detail.html">
|
||||
<div class="item-icon">🥚</div>
|
||||
<div class="item-info">
|
||||
<div class="item-name">散养土鸡蛋</div>
|
||||
<div class="item-batch">批次 EG20260511</div>
|
||||
</div>
|
||||
<span class="item-date">昨天</span>
|
||||
<span class="arrow">›</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部指示条 -->
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user