feat: 营养管理小程序新增个人中心子页面及导航页SITE_MAP补全
新增页面：me-account、me-favorites、me-logs、me-messages、me-order-detail-pending、me-vip 补注册至index.html：eat-cart、me-account、me-favorites、me-order-detail-pending 优化已有页面交互跳转与样式细节 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
冯普
@@ -54,16 +54,18 @@
|
||||
}
|
||||
.cover-upload .icon { font-size: 32px; }
|
||||
.cover-upload .text { font-size: 13px; }
|
||||
.cover-type-row {
|
||||
display: flex; gap: 10px; margin-top: 10px;
|
||||
/* 作品视频上传 */
|
||||
.video-upload {
|
||||
display: flex; align-items: center; gap: 12px; margin-top: 14px;
|
||||
}
|
||||
.cover-type-btn {
|
||||
flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
|
||||
padding: 10px 0; border-radius: 10px; border: 1px solid #e8e8e8;
|
||||
background: #fafafa; font-size: 13px; color: #333; cursor: pointer;
|
||||
.video-upload-box {
|
||||
width: 100px; height: 72px; border: 1.5px dashed #d9d9d9; border-radius: 10px;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
gap: 3px; background: #fafafa; cursor: pointer; color: #999; flex-shrink: 0;
|
||||
}
|
||||
.cover-type-btn .ct-icon { font-size: 18px; }
|
||||
.cover-type-btn:active { border-color: #1677ff; background: #f0f7ff; color: #1677ff; }
|
||||
.video-upload-box .vu-icon { font-size: 24px; }
|
||||
.video-upload-box .vu-text { font-size: 10px; }
|
||||
.video-upload-hint { font-size: 12px; color: #999; line-height: 1.5; }
|
||||
/* 步骤媒体上传 */
|
||||
.step-media-row {
|
||||
display: flex; gap: 8px; margin: 6px 0 0 30px;
|
||||
@@ -108,15 +110,23 @@
|
||||
<button class="publish">发布</button>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- 封面上传 -->
|
||||
<!-- 封面图上传 -->
|
||||
<div class="form-section">
|
||||
<div class="sec-title">封面图</div>
|
||||
<div class="cover-upload">
|
||||
<span class="icon">📷</span>
|
||||
<span class="text">上传食谱封面</span>
|
||||
<span class="icon">🖼️</span>
|
||||
<span class="text">上传食谱封面图</span>
|
||||
</div>
|
||||
<div class="cover-type-row">
|
||||
<button class="cover-type-btn"><span class="ct-icon">🖼️</span>上传图片</button>
|
||||
<button class="cover-type-btn"><span class="ct-icon">🎬</span>上传视频</button>
|
||||
</div>
|
||||
<!-- 作品视频上传 -->
|
||||
<div class="form-section">
|
||||
<div class="sec-title">作品视频</div>
|
||||
<div class="video-upload">
|
||||
<div class="video-upload-box">
|
||||
<span class="vu-icon">🎬</span>
|
||||
<span class="vu-text">上传视频</span>
|
||||
</div>
|
||||
<div class="video-upload-hint">可选，至多上传1个视频<br>建议时长不超过5分钟</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 基本信息 -->
|
||||
@@ -156,7 +166,6 @@
|
||||
</div>
|
||||
<div class="step-media-row">
|
||||
<div class="step-media-btn"><span class="sm-icon">🖼️</span><span class="sm-text">加图片</span></div>
|
||||
<div class="step-media-btn"><span class="sm-icon">🎬</span><span class="sm-text">加视频</span></div>
|
||||
</div>
|
||||
<div class="step-edit">
|
||||
<div class="num">2</div>
|
||||
@@ -164,7 +173,6 @@
|
||||
</div>
|
||||
<div class="step-media-row">
|
||||
<div class="step-media-btn"><span class="sm-icon">🖼️</span><span class="sm-text">加图片</span></div>
|
||||
<div class="step-media-btn"><span class="sm-icon">🎬</span><span class="sm-text">加视频</span></div>
|
||||
</div>
|
||||
<div class="add-step-btn">+ 添加步骤</div>
|
||||
</div>
|
||||
|
||||
@@ -109,7 +109,7 @@
|
||||
<div class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="make-home.html">‹</a>
|
||||
<a class="back" href="javascript:history.back()">‹</a>
|
||||
<span class="title">食谱详情</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
@@ -145,10 +145,7 @@
|
||||
<div class="step-item">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-text">平底锅少油煎至两面金黄，切片备用</div>
|
||||
<div class="step-media">
|
||||
<div class="media-box" style="background:#fff7e6">🍳</div>
|
||||
<div class="video-play"></div>
|
||||
</div>
|
||||
<div class="step-media"><div class="media-box" style="background:#fff7e6">🍳</div></div>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<div class="step-num">3</div>
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
|
||||
<!-- 四宫格入口 -->
|
||||
<div class="grid-nav">
|
||||
<a class="grid-nav-item" href="make-follow.html">
|
||||
<a class="grid-nav-item" href="make-popular.html?from=follow">
|
||||
<div class="nav-icon" style="background:#e6f4ff">📋</div>
|
||||
<span class="nav-label">照做食谱</span>
|
||||
</a>
|
||||
|
||||
@@ -31,6 +31,19 @@
|
||||
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 搜索栏 */
|
||||
.search-bar {
|
||||
padding: 10px 16px; background: #fff;
|
||||
}
|
||||
.search-input {
|
||||
width: 100%; height: 36px; border: none; border-radius: 18px;
|
||||
background: #f5f5f5; padding: 0 14px 0 36px; font-size: 14px;
|
||||
outline: none; font-family: inherit;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23bbb'%3E%3Ccircle cx='7' cy='7' r='5.5' stroke='%23bbb' stroke-width='1.5' fill='none'/%3E%3Cline x1='11' y1='11' x2='14.5' y2='14.5' stroke='%23bbb' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat; background-position: 12px center;
|
||||
}
|
||||
.search-input::placeholder { color: #bbb; }
|
||||
|
||||
/* 分类 Tab */
|
||||
.cat-tabs {
|
||||
display: flex; gap: 0; background: #fff; padding: 10px 16px 0;
|
||||
@@ -99,9 +112,13 @@
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="make-home.html">‹</a>
|
||||
<span class="title">热门创作</span>
|
||||
<span class="title" id="pageTitle">热门创作</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar">
|
||||
<input class="search-input" placeholder="搜索食谱、食材、作者..." readonly>
|
||||
</div>
|
||||
<!-- 分类 Tab -->
|
||||
<div class="cat-tabs">
|
||||
<button class="cat-tab active">全部</button>
|
||||
@@ -223,6 +240,13 @@
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
<script>
|
||||
/* 根据来源参数切换标题 */
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
if (params.get('from') === 'follow') {
|
||||
document.getElementById('pageTitle').textContent = '照做食谱';
|
||||
document.title = '照做食谱 | 智能餐养小程序';
|
||||
}
|
||||
|
||||
/* Tab 切换 */
|
||||
var tabs = document.querySelectorAll('.cat-tab');
|
||||
tabs.forEach(function(tab) {
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
<!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; color: #333;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.nav-back { font-size: 20px; color: #333; text-decoration: none; width: 32px; }
|
||||
.nav-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; color: #333; }
|
||||
.nav-placeholder { width: 32px; }
|
||||
.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; }
|
||||
/* 头像区域 */
|
||||
.avatar-section {
|
||||
background: #fff; padding: 30px 16px; display: flex; flex-direction: column;
|
||||
align-items: center; margin-bottom: 8px;
|
||||
}
|
||||
.avatar-wrap { position: relative; margin-bottom: 10px; }
|
||||
.avatar-img {
|
||||
width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #1677ff, #4096ff);
|
||||
display: flex; align-items: center; justify-content: center; font-size: 36px; color: #fff;
|
||||
}
|
||||
.avatar-edit {
|
||||
position: absolute; bottom: 0; right: 0; width: 24px; height: 24px;
|
||||
background: #fff; border-radius: 50%; display: flex; align-items: center;
|
||||
justify-content: center; font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
||||
cursor: pointer;
|
||||
}
|
||||
.avatar-tip { font-size: 12px; color: #999; }
|
||||
/* 信息列表 */
|
||||
.info-group { background: #fff; }
|
||||
.info-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 16px; border-bottom: 0.5px solid #f5f5f5;
|
||||
}
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
.info-label { font-size: 14px; color: #666; }
|
||||
.info-value { font-size: 14px; color: #333; font-weight: 500; display: flex; align-items: center; gap: 6px; }
|
||||
.info-value.gold { color: #d4a017; }
|
||||
.info-row.editable { cursor: pointer; }
|
||||
.edit-icon { font-size: 12px; font-style: normal; opacity: 0.6; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">09:41</span>
|
||||
<div class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" href="me-home.html">‹</a>
|
||||
<span class="nav-title">账号信息</span>
|
||||
<span class="nav-placeholder"></span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- 头像区域 -->
|
||||
<div class="avatar-section">
|
||||
<div class="avatar-wrap">
|
||||
<div class="avatar-img">👤</div>
|
||||
<span class="avatar-edit">📷</span>
|
||||
</div>
|
||||
<span class="avatar-tip">点击修改头像</span>
|
||||
</div>
|
||||
<!-- 信息列表 -->
|
||||
<div class="info-group">
|
||||
<div class="info-row"><span class="info-label">姓名</span><span class="info-value">张三</span></div>
|
||||
<div class="info-row editable" onclick="alert('【交互注释】打开手机号修改弹窗')">
|
||||
<span class="info-label">手机号</span>
|
||||
<span class="info-value">138****6789<i class="edit-icon">✏️</i></span>
|
||||
</div>
|
||||
<div class="info-row"><span class="info-label">工号</span><span class="info-value">CQ20180156</span></div>
|
||||
<div class="info-row"><span class="info-label">单位</span><span class="info-value">长庆油田</span></div>
|
||||
<div class="info-row"><span class="info-label">部门</span><span class="info-value">采油一厂</span></div>
|
||||
<div class="info-row"><span class="info-label">会员等级</span><span class="info-value gold">黄金会员</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!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; }
|
||||
/* 统计栏 */
|
||||
.fav-summary { padding: 12px 16px; background: #fff; border-bottom: 0.5px solid #f0f0f0; font-size: 13px; color: #666; }
|
||||
.fav-summary b { color: #1677ff; }
|
||||
/* 食谱列表 - 参照 make-popular 样式 */
|
||||
.recipe-list { background: #fff; padding: 0 16px; margin-top: 8px; }
|
||||
.recipe-item {
|
||||
display: flex; align-items: center; gap: 12px; padding: 14px 0;
|
||||
border-bottom: 0.5px solid #f0f0f0; text-decoration: none; color: inherit;
|
||||
}
|
||||
.recipe-item:last-child { border-bottom: none; }
|
||||
.recipe-item .avatar {
|
||||
width: 56px; height: 56px; border-radius: 12px; display: flex;
|
||||
align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0;
|
||||
}
|
||||
.recipe-item .content { flex: 1; min-width: 0; }
|
||||
.recipe-item .recipe-title {
|
||||
font-size: 14px; font-weight: 600; color: #1a1a1a;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.recipe-item .recipe-meta { font-size: 12px; color: #999; margin-top: 3px; }
|
||||
.recipe-item .recipe-stats { display: flex; gap: 10px; margin-top: 4px; }
|
||||
.recipe-item .stat { font-size: 11px; color: #bbb; }
|
||||
.recipe-item .stat.likes { color: #ff6b6b; }
|
||||
/* 取消收藏按钮 */
|
||||
.unfav-btn {
|
||||
padding: 5px 10px; border-radius: 12px; border: 1px solid #fde2e2;
|
||||
background: #fff; color: #f5222d; font-size: 11px; cursor: pointer;
|
||||
flex-shrink: 0; white-space: nowrap;
|
||||
}
|
||||
</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="fav-summary">共收藏 <b>5</b> 个食谱</div>
|
||||
<div class="recipe-list">
|
||||
<div class="recipe-item">
|
||||
<a href="make-follow.html" style="display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-decoration:none;color:inherit">
|
||||
<div class="avatar" style="background:#f6ffed">🥗</div>
|
||||
<div class="content">
|
||||
<div class="recipe-title">高蛋白健身餐：鸡胸肉沙拉</div>
|
||||
<div class="recipe-meta">健身博士阿强 · 320kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 198</span>
|
||||
<span class="stat">👁️ 1.2k</span>
|
||||
<span class="stat">📋 96</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<button class="unfav-btn" onclick="event.stopPropagation();alert('【交互注释】取消收藏')">取消收藏</button>
|
||||
</div>
|
||||
<div class="recipe-item">
|
||||
<a href="make-follow.html" style="display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-decoration:none;color:inherit">
|
||||
<div class="avatar" style="background:#e6f4ff">🐟</div>
|
||||
<div class="content">
|
||||
<div class="recipe-title">柠檬烤三文鱼（Omega-3 丰富）</div>
|
||||
<div class="recipe-meta">厨艺爱好者老张 · 280kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 143</span>
|
||||
<span class="stat">👁️ 860</span>
|
||||
<span class="stat">📋 65</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<button class="unfav-btn" onclick="event.stopPropagation();alert('【交互注释】取消收藏')">取消收藏</button>
|
||||
</div>
|
||||
<div class="recipe-item">
|
||||
<a href="make-follow.html" style="display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-decoration:none;color:inherit">
|
||||
<div class="avatar" style="background:#f6ffed">🥬</div>
|
||||
<div class="content">
|
||||
<div class="recipe-title">五彩素食餐：时蔬拼盘</div>
|
||||
<div class="recipe-meta">素食主义小美 · 120kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 112</span>
|
||||
<span class="stat">👁️ 680</span>
|
||||
<span class="stat">📋 45</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<button class="unfav-btn" onclick="event.stopPropagation();alert('【交互注释】取消收藏')">取消收藏</button>
|
||||
</div>
|
||||
<div class="recipe-item">
|
||||
<a href="make-follow.html" style="display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-decoration:none;color:inherit">
|
||||
<div class="avatar" style="background:#fff7e6">🍲</div>
|
||||
<div class="content">
|
||||
<div class="recipe-title">养胃南瓜小米粥</div>
|
||||
<div class="recipe-meta">养生大叔老陈 · 156kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 128</span>
|
||||
<span class="stat">👁️ 750</span>
|
||||
<span class="stat">📋 52</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<button class="unfav-btn" onclick="event.stopPropagation();alert('【交互注释】取消收藏')">取消收藏</button>
|
||||
</div>
|
||||
<div class="recipe-item">
|
||||
<a href="make-follow.html" style="display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-decoration:none;color:inherit">
|
||||
<div class="avatar" style="background:#fff1f0">🥩</div>
|
||||
<div class="content">
|
||||
<div class="recipe-title">低卡牛肉西兰花（减脂必备）</div>
|
||||
<div class="recipe-meta">减脂达人阿杰 · 245kcal/份</div>
|
||||
<div class="recipe-stats">
|
||||
<span class="stat likes">❤️ 98</span>
|
||||
<span class="stat">👁️ 620</span>
|
||||
<span class="stat">📋 38</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<button class="unfav-btn" onclick="event.stopPropagation();alert('【交互注释】取消收藏')">取消收藏</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -22,20 +22,43 @@
|
||||
.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; }
|
||||
.sec-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||||
.sec-header .sec-title { font-size: 14px; font-weight: 600; color: #333; }
|
||||
/* 身体指标 - 列表行 */
|
||||
.body-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 13px 0; border-bottom: 0.5px solid #f5f5f5; cursor: pointer;
|
||||
}
|
||||
.body-row:last-child { border-bottom: none; }
|
||||
.body-row .b-label { font-size: 14px; color: #333; }
|
||||
.body-row .b-right { display: flex; align-items: center; gap: 4px; }
|
||||
.body-row .b-val { font-size: 14px; color: #333; font-weight: 500; }
|
||||
.body-row .b-unit { font-size: 12px; color: #999; }
|
||||
.body-row .b-tag { font-size: 11px; color: #52c41a; margin-left: 4px; }
|
||||
.body-row .b-arrow { font-size: 14px; color: #ccc; margin-left: 2px; }
|
||||
/* 标签列表 */
|
||||
.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; }
|
||||
.tag { padding: 5px 12px; border-radius: 14px; font-size: 12px; background: #f0f7ff; color: #1677ff; }
|
||||
.tag.warn { background: #fff7e6; color: #fa8c16; }
|
||||
.tag.danger { background: #fff1f0; color: #f5222d; }
|
||||
.tag-add { padding: 5px 12px; border-radius: 14px; font-size: 12px; background: #fafafa; color: #999; border: 1px dashed #d9d9d9; cursor: pointer; }
|
||||
/* 疾病信息列表 */
|
||||
.disease-list { }
|
||||
.disease-item { padding: 12px 0; border-bottom: 0.5px solid #f0f0f0; }
|
||||
.disease-item:last-child { border-bottom: none; }
|
||||
.disease-item .d-label { font-size: 12px; color: #999; margin-bottom: 6px; }
|
||||
.disease-item .d-tags { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.disease-item .d-tag { padding: 4px 10px; border-radius: 12px; font-size: 12px; background: #fff1f0; color: #f5222d; }
|
||||
.disease-item .d-tag.med { background: #f0f7ff; color: #1677ff; }
|
||||
.disease-item .d-empty { font-size: 12px; color: #ccc; }
|
||||
/* 营养目标 */
|
||||
.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; }
|
||||
@@ -53,6 +76,7 @@
|
||||
<span class="title">健康档案</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- 用户卡片 -->
|
||||
<div class="profile-card">
|
||||
<div class="avatar">👤</div>
|
||||
<div class="info">
|
||||
@@ -60,26 +84,78 @@
|
||||
<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 class="sec-header"><span class="sec-title">身体指标</span></div>
|
||||
<div class="body-row" onclick="alert('【交互注释】编辑身高')">
|
||||
<span class="b-label">身高</span>
|
||||
<span class="b-right"><span class="b-val">172</span><span class="b-unit">cm</span><span class="b-arrow">›</span></span>
|
||||
</div>
|
||||
<div class="body-row" onclick="alert('【交互注释】编辑体重')">
|
||||
<span class="b-label">体重</span>
|
||||
<span class="b-right"><span class="b-val">68</span><span class="b-unit">kg</span><span class="b-arrow">›</span></span>
|
||||
</div>
|
||||
<div class="body-row" onclick="alert('【交互注释】查看BMI详情')">
|
||||
<span class="b-label">BMI</span>
|
||||
<span class="b-right"><span class="b-val">23.0</span><span class="b-tag">正常</span><span class="b-arrow">›</span></span>
|
||||
</div>
|
||||
<div class="body-row" onclick="alert('【交互注释】编辑体脂率')">
|
||||
<span class="b-label">体脂率</span>
|
||||
<span class="b-right"><span class="b-val">18.5%</span><span class="b-tag">标准</span><span class="b-arrow">›</span></span>
|
||||
</div>
|
||||
<div class="body-row" onclick="alert('【交互注释】编辑活动水平')">
|
||||
<span class="b-label">活动水平</span>
|
||||
<span class="b-right"><span class="b-val">中等</span><span class="b-unit">每周3-5次</span><span class="b-arrow">›</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="sec-title">过敏/忌口</div>
|
||||
<!-- 过敏信息 -->
|
||||
<div class="section" onclick="alert('【交互注释】进入过敏信息编辑页')" style="cursor:pointer;">
|
||||
<div class="sec-header"><span class="sec-title">过敏信息</span><span style="font-size:14px;color:#ccc;">›</span></div>
|
||||
<div class="tag-list">
|
||||
<span class="tag warn">🥜 花生过敏</span>
|
||||
<span class="tag warn">🦐 海鲜过敏</span>
|
||||
<span class="tag">🌶️ 少辣</span>
|
||||
<span class="tag">🧂 低盐</span>
|
||||
<span class="tag-add">+ 添加</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="sec-title">营养目标</div>
|
||||
<!-- 饮食禁忌 -->
|
||||
<div class="section" onclick="alert('【交互注释】进入饮食禁忌编辑页')" style="cursor:pointer;">
|
||||
<div class="sec-header"><span class="sec-title">饮食禁忌</span><span style="font-size:14px;color:#ccc;">›</span></div>
|
||||
<div class="tag-list">
|
||||
<span class="tag">🌶️ 少辣</span>
|
||||
<span class="tag">🧂 低盐</span>
|
||||
<span class="tag">🍬 控糖</span>
|
||||
<span class="tag-add">+ 添加</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 疾病信息 -->
|
||||
<div class="section" onclick="alert('【交互注释】进入疾病信息编辑页')" style="cursor:pointer;">
|
||||
<div class="sec-header"><span class="sec-title">疾病信息</span><span style="font-size:14px;color:#ccc;">›</span></div>
|
||||
<div class="disease-list">
|
||||
<div class="disease-item">
|
||||
<div class="d-label">疾病史</div>
|
||||
<div class="d-tags">
|
||||
<span class="d-tag">胃炎</span>
|
||||
<span class="d-tag">高尿酸</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="disease-item">
|
||||
<div class="d-label">家族病史</div>
|
||||
<div class="d-tags">
|
||||
<span class="d-tag">高血压</span>
|
||||
<span class="d-tag">糖尿病</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="disease-item">
|
||||
<div class="d-label">用药情况</div>
|
||||
<div class="d-tags">
|
||||
<span class="d-tag med">别嘌醇片</span><span class="d-tag med">依那普利</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 营养目标 -->
|
||||
<div class="section" onclick="alert('【交互注释】进入营养目标编辑页')" style="cursor:pointer;">
|
||||
<div class="sec-header"><span class="sec-title">营养目标</span><span style="font-size:14px;color:#ccc;">›</span></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>
|
||||
@@ -89,4 +165,4 @@
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@@ -35,22 +35,39 @@
|
||||
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;
|
||||
background: linear-gradient(135deg, #1677ff, #4096ff); padding: 20px 16px 0; color: #fff;
|
||||
}
|
||||
.user-info { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
|
||||
.user-top { display: flex; align-items: center; gap: 12px; }
|
||||
.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;
|
||||
width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.2);
|
||||
display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0;
|
||||
}
|
||||
.user-meta { flex: 1; }
|
||||
.user-name-row { display: flex; align-items: center; gap: 8px; }
|
||||
.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; }
|
||||
.vip-badge {
|
||||
padding: 1px 6px; border-radius: 8px; background: linear-gradient(135deg, #ffd700, #ffaa00);
|
||||
font-size: 10px; font-weight: 600; color: #7a4a00;
|
||||
}
|
||||
.user-dept { font-size: 12px; opacity: 0.8; margin-top: 3px; }
|
||||
.user-extra { display: flex; gap: 12px; margin-top: 4px; font-size: 11px; opacity: 0.85; }
|
||||
.user-arrow {
|
||||
width: 28px; display: flex; align-items: center; justify-content: center;
|
||||
font-size: 18px; opacity: 0.7; flex-shrink: 0; cursor: pointer;
|
||||
text-decoration: none; color: #fff;
|
||||
}
|
||||
/* 统计数字内嵌区域 */
|
||||
.user-stats {
|
||||
display: flex; margin-top: 16px; background: rgba(255,255,255,0.15);
|
||||
border-radius: 10px 10px 0 0; padding: 14px 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 .val { font-size: 17px; font-weight: 700; }
|
||||
.stat-item .label { font-size: 10px; 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;
|
||||
@@ -64,6 +81,13 @@
|
||||
padding: 2px 8px; border-radius: 10px; background: #f5222d; color: #fff;
|
||||
font-size: 10px; font-weight: 600;
|
||||
}
|
||||
/* 退出登录 */
|
||||
.logout-btn {
|
||||
display: block; width: calc(100% - 32px); margin: 24px auto 30px; padding: 13px 0;
|
||||
border: none; border-radius: 22px; background: #fff4f4; color: #f5222d;
|
||||
font-size: 15px; font-weight: 500; text-align: center; cursor: pointer;
|
||||
border: 1px solid #fde2e2; letter-spacing: 1px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -75,30 +99,40 @@
|
||||
<div class="page-content">
|
||||
<!-- 用户头部 -->
|
||||
<div class="user-header">
|
||||
<div class="user-info">
|
||||
<div class="user-top">
|
||||
<div class="user-avatar">👤</div>
|
||||
<div><div class="user-name">张三</div><div class="user-dept">长庆油田 · 采油一厂</div></div>
|
||||
<div class="user-meta">
|
||||
<div class="user-name-row">
|
||||
<span class="user-name">张三</span>
|
||||
<span class="vip-badge">黄金会员</span>
|
||||
</div>
|
||||
<div class="user-dept">长庆油田 · 采油一厂</div>
|
||||
<div class="user-extra">
|
||||
<span>积分 <b>1,280</b></span>
|
||||
<span>余额 <b>¥368.50</b></span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="user-arrow" href="me-account.html">›</a>
|
||||
</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 class="stat-item"><div class="val">18</div><div class="label">本月就餐(天)</div></div>
|
||||
<div class="stat-item"><div class="val">¥426</div><div class="label">本月消费</div></div>
|
||||
<div class="stat-item"><div class="val">82</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-favorites.html"><span class="m-icon">⭐</span><span class="m-label">收藏食谱</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-vip.html"><span class="m-icon">👑</span><span class="m-label">会员中心</span><span class="m-arrow">›</span></a>
|
||||
<a class="menu-item" href="me-messages.html"><span class="m-icon">🔔</span><span class="m-label">消息中心</span><span class="m-badge">5</span><span class="m-arrow">›</span></a>
|
||||
<a class="menu-item" href="me-logs.html"><span class="m-icon">📝</span><span class="m-label">操作日志</span><span class="m-arrow">›</span></a>
|
||||
<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>
|
||||
<button class="logout-btn">退出登录</button>
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item" href="eat-home.html"><span class="tab-icon">🍽️</span>吃</a>
|
||||
@@ -109,4 +143,4 @@
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>操作日志 | 智能餐养小程序</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #2a2a2a; display: flex; justify-content: center; align-items: flex-start;
|
||||
min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
padding: 24px 0 40px;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 390px; height: 844px; background: #fff; border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #e0e0e0;
|
||||
overflow: hidden; position: relative; display: flex; flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
padding: 0 16px; flex-shrink: 0; border-bottom: 0.5px solid #f0f0f0; position: relative;
|
||||
}
|
||||
.nav-back { font-size: 22px; color: #1677ff; cursor: pointer; text-decoration: none; line-height: 1; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 12px 16px; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
/* 日志卡片 */
|
||||
.log-card {
|
||||
background: #fff; border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
|
||||
display: flex; gap: 12px; align-items: flex-start;
|
||||
}
|
||||
.log-icon {
|
||||
width: 36px; height: 36px; border-radius: 50%; background: #f0f5ff;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.log-body { flex: 1; min-width: 0; }
|
||||
.log-title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.log-desc { font-size: 13px; color: #666; margin-bottom: 6px; line-height: 1.4; }
|
||||
.log-time { font-size: 12px; color: #bbb; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">09:41</span>
|
||||
<div class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" href="me-home.html">‹</a>
|
||||
<span class="nav-title">操作日志</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="log-card">
|
||||
<div class="log-icon">🛒</div>
|
||||
<div class="log-body">
|
||||
<div class="log-title">提交订单</div>
|
||||
<div class="log-desc">午餐套餐A（红烧牛肉+时蔬+米饭）</div>
|
||||
<div class="log-time">2025-05-14 11:30</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="log-card">
|
||||
<div class="log-icon">💳</div>
|
||||
<div class="log-body">
|
||||
<div class="log-title">支付成功</div>
|
||||
<div class="log-desc">订单金额 ¥28.00，余额支付</div>
|
||||
<div class="log-time">2025-05-14 11:30</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="log-card">
|
||||
<div class="log-icon">⭐</div>
|
||||
<div class="log-body">
|
||||
<div class="log-title">收藏食谱</div>
|
||||
<div class="log-desc">收藏了「低脂鸡胸肉沙拉」</div>
|
||||
<div class="log-time">2025-05-14 09:15</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="log-card">
|
||||
<div class="log-icon">📝</div>
|
||||
<div class="log-body">
|
||||
<div class="log-title">提交评价</div>
|
||||
<div class="log-desc">对5月13日晚餐订单评价：5星好评</div>
|
||||
<div class="log-time">2025-05-14 08:45</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="log-card">
|
||||
<div class="log-icon">🔑</div>
|
||||
<div class="log-body">
|
||||
<div class="log-title">账号登录</div>
|
||||
<div class="log-desc">微信授权登录，设备：iPhone 15 Pro</div>
|
||||
<div class="log-time">2025-05-14 08:30</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="log-card">
|
||||
<div class="log-icon">🛒</div>
|
||||
<div class="log-body">
|
||||
<div class="log-title">提交订单</div>
|
||||
<div class="log-desc">晚餐套餐B（清蒸鲈鱼+凉拌黄瓜+杂粮饭）</div>
|
||||
<div class="log-time">2025-05-13 17:20</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="log-card">
|
||||
<div class="log-icon">💳</div>
|
||||
<div class="log-body">
|
||||
<div class="log-title">支付成功</div>
|
||||
<div class="log-desc">订单金额 ¥32.00，余额支付</div>
|
||||
<div class="log-time">2025-05-13 17:20</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="log-card">
|
||||
<div class="log-icon">🎫</div>
|
||||
<div class="log-body">
|
||||
<div class="log-title">领取优惠券</div>
|
||||
<div class="log-desc">领取「满30减5」会员专属优惠券</div>
|
||||
<div class="log-time">2025-05-13 10:00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="log-card">
|
||||
<div class="log-icon">📋</div>
|
||||
<div class="log-body">
|
||||
<div class="log-title">健康档案更新</div>
|
||||
<div class="log-desc">更新了体重数据：72.5kg</div>
|
||||
<div class="log-time">2025-05-13 08:00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,151 @@
|
||||
<!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; }
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
height: 44px; background: #1677ff; display: flex; align-items: center;
|
||||
padding: 0 16px; flex-shrink: 0; color: #fff;
|
||||
}
|
||||
.nav-back { font-size: 20px; cursor: pointer; text-decoration: none; color: #fff; width: 32px; }
|
||||
.nav-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; margin-right: 32px; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
/* 消息列表 */
|
||||
.msg-list { padding: 8px 0; }
|
||||
.msg-item {
|
||||
display: flex; gap: 12px; padding: 14px 16px; background: #fff;
|
||||
margin-bottom: 1px; position: relative; text-decoration: none; color: inherit;
|
||||
}
|
||||
.msg-item.unread { background: #fafcff; }
|
||||
.msg-item.unread::before {
|
||||
content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
|
||||
width: 7px; height: 7px; background: #1677ff; border-radius: 50%;
|
||||
}
|
||||
.msg-icon {
|
||||
width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center;
|
||||
justify-content: center; font-size: 20px; flex-shrink: 0;
|
||||
}
|
||||
.msg-icon.system { background: #e6f4ff; }
|
||||
.msg-icon.order { background: #fff7e6; }
|
||||
.msg-icon.activity { background: #f6ffed; }
|
||||
.msg-icon.service { background: #fff0f6; }
|
||||
.msg-body { flex: 1; min-width: 0; }
|
||||
.msg-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
|
||||
.msg-title { font-size: 14px; font-weight: 500; color: #333; }
|
||||
.msg-item.unread .msg-title { font-weight: 600; color: #1a1a1a; }
|
||||
.msg-time { font-size: 11px; color: #bbb; flex-shrink: 0; }
|
||||
.msg-content { font-size: 12px; color: #999; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.msg-item.unread .msg-content { color: #666; }
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
display: none; flex-direction: column; align-items: center; justify-content: center;
|
||||
padding: 80px 0; color: #ccc;
|
||||
}
|
||||
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
|
||||
.empty-state .empty-text { font-size: 14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">09:41</span>
|
||||
<div class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" href="me-home.html">‹</a>
|
||||
<span class="nav-title">消息中心</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- 消息列表 -->
|
||||
<div class="msg-list" id="msgList">
|
||||
<!-- 未读 - 订单类 -->
|
||||
<a class="msg-item unread" data-cat="order">
|
||||
<div class="msg-icon order">📦</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-top"><span class="msg-title">订单配送通知</span><span class="msg-time">10:32</span></div>
|
||||
<div class="msg-content">您的午餐订单已由配送员取餐，预计11:45送达</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- 未读 - 系统类 -->
|
||||
<a class="msg-item unread" data-cat="system">
|
||||
<div class="msg-icon system">🔔</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-top"><span class="msg-title">积分变动提醒</span><span class="msg-time">09:15</span></div>
|
||||
<div class="msg-content">您今日消费获得12积分，当前累计1,280积分</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- 未读 - 订单类 -->
|
||||
<a class="msg-item unread" data-cat="order">
|
||||
<div class="msg-icon order">📋</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-top"><span class="msg-title">订单评价邀请</span><span class="msg-time">昨天</span></div>
|
||||
<div class="msg-content">您5月13日的晚餐订单还未评价，评价可获5积分</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- 未读 - 活动类 -->
|
||||
<a class="msg-item unread" data-cat="activity">
|
||||
<div class="msg-icon activity">🎉</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-top"><span class="msg-title">会员日活动</span><span class="msg-time">昨天</span></div>
|
||||
<div class="msg-content">本周五会员日，全场消费双倍积分，别错过哦</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- 未读 - 服务类 -->
|
||||
<a class="msg-item unread" data-cat="service">
|
||||
<div class="msg-icon service">💬</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-top"><span class="msg-title">营养师回复</span><span class="msg-time">5/12</span></div>
|
||||
<div class="msg-content">您咨询的低碳饮食方案已回复，点击查看详情</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- 已读 - 系统类 -->
|
||||
<a class="msg-item" data-cat="system">
|
||||
<div class="msg-icon system">📢</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-top"><span class="msg-title">系统维护通知</span><span class="msg-time">5/11</span></div>
|
||||
<div class="msg-content">系统将于5月15日凌晨2:00-4:00进行升级维护</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- 已读 - 活动类 -->
|
||||
<a class="msg-item" data-cat="activity">
|
||||
<div class="msg-icon activity">🏷️</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-top"><span class="msg-title">优惠券到账</span><span class="msg-time">5/10</span></div>
|
||||
<div class="msg-content">您的5月会员专属满30减5优惠券已发放</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- 已读 - 系统类 -->
|
||||
<a class="msg-item" data-cat="system">
|
||||
<div class="msg-icon system">🔔</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-top"><span class="msg-title">会员等级提升</span><span class="msg-time">5/8</span></div>
|
||||
<div class="msg-content">恭喜您升级为黄金会员，享9.5折消费优惠</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</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; }
|
||||
.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; }
|
||||
/* 取餐码区域 */
|
||||
.pickup-area {
|
||||
background: linear-gradient(135deg, #1677ff, #4096ff); padding: 20px 16px;
|
||||
text-align: center; color: #fff;
|
||||
}
|
||||
.pickup-status { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
|
||||
.pickup-hint { font-size: 12px; opacity: 0.8; margin-bottom: 12px; }
|
||||
.pickup-code-box {
|
||||
background: rgba(255,255,255,0.95); border-radius: 12px; padding: 16px;
|
||||
display: inline-block; min-width: 200px;
|
||||
}
|
||||
.pickup-label { font-size: 12px; color: #999; margin-bottom: 6px; }
|
||||
.pickup-code { font-size: 40px; font-weight: 800; color: #1677ff; letter-spacing: 6px; }
|
||||
/* 订单头部 */
|
||||
.order-header { background: #fff; padding: 14px 16px; border-bottom: 0.5px solid #f0f0f0; }
|
||||
.oh-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
|
||||
.oh-date { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 3px; }
|
||||
.oh-id { font-size: 11px; color: #999; }
|
||||
.oh-badge { font-size: 12px; padding: 3px 10px; border-radius: 12px; font-weight: 600; }
|
||||
.oh-stats { display: flex; gap: 0; padding: 10px 0; border-top: 0.5px solid #f5f5f5; border-bottom: 0.5px solid #f5f5f5; }
|
||||
.oh-stat { flex: 1; text-align: center; }
|
||||
.oh-stat .sv { font-size: 18px; font-weight: 800; }
|
||||
.oh-stat .sl { font-size: 10px; color: #999; margin-top: 1px; }
|
||||
.oh-tags { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
|
||||
.oh-tag { font-size: 11px; padding: 2px 8px; border-radius: 8px; }
|
||||
/* 菜品区域 */
|
||||
.dish-section { padding: 12px 16px 24px; }
|
||||
.dish-sec-title { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 10px; }
|
||||
.dish-card { background: #fff; border-radius: 12px; margin-bottom: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.dish-head { padding: 11px 14px; display: flex; align-items: center; gap: 10px; }
|
||||
.dish-icon { width: 42px; height: 42px; border-radius: 10px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
|
||||
.dish-info { flex: 1; }
|
||||
.dish-name-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
|
||||
.dish-name { font-size: 14px; font-weight: 600; }
|
||||
.dish-meta { font-size: 11px; color: #999; }
|
||||
.dish-price { font-size: 14px; font-weight: 700; color: #f5222d; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">11:35</span>
|
||||
<div class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></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="pickup-area">
|
||||
<div class="pickup-status">🔔 待取餐</div>
|
||||
<div class="pickup-hint">请凭取餐码到 A区中餐线 窗口取餐</div>
|
||||
<div class="pickup-code-box">
|
||||
<div class="pickup-label">取餐码</div>
|
||||
<div class="pickup-code">A-086</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 订单头部 -->
|
||||
<div class="order-header">
|
||||
<div class="oh-top">
|
||||
<div>
|
||||
<div class="oh-date">2026-05-14 午餐</div>
|
||||
<div class="oh-id">NM-20260514-032</div>
|
||||
</div>
|
||||
<span class="oh-badge" style="background:#fff7e6;color:#fa8c16">⏳ 待取餐</span>
|
||||
</div>
|
||||
<div class="oh-stats">
|
||||
<div class="oh-stat"><div class="sv" style="color:#fa8c16">—</div><div class="sl">营养评分</div></div>
|
||||
<div class="oh-stat"><div class="sv" style="color:#f5222d">¥28.5</div><div class="sl">消费金额</div></div>
|
||||
<div class="oh-stat"><div class="sv" style="color:#1677ff">3</div><div class="sl">菜品数</div></div>
|
||||
<div class="oh-stat"><div class="sv" style="color:#555">486</div><div class="sl">总热量kcal</div></div>
|
||||
</div>
|
||||
<div class="oh-tags">
|
||||
<span class="oh-tag" style="background:#e6f4ff;color:#1677ff">点餐取餐</span>
|
||||
<span class="oh-tag" style="background:#f5f5f5;color:#666">A区中餐线</span>
|
||||
<span class="oh-tag" style="background:#f5f5f5;color:#666">余额支付</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 菜品明细 -->
|
||||
<div class="dish-section">
|
||||
<div class="dish-sec-title">菜品明细</div>
|
||||
<div class="dish-card">
|
||||
<div class="dish-head">
|
||||
<div class="dish-icon">🥗</div>
|
||||
<div class="dish-info">
|
||||
<div class="dish-name-row"><span class="dish-name">低脂鸡胸肉沙拉</span></div>
|
||||
<div class="dish-meta">中份 · 150g · 186kcal</div>
|
||||
</div>
|
||||
<span class="dish-price">¥18.0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dish-card">
|
||||
<div class="dish-head">
|
||||
<div class="dish-icon">🍚</div>
|
||||
<div class="dish-info">
|
||||
<div class="dish-name-row"><span class="dish-name">杂粮饭</span></div>
|
||||
<div class="dish-meta">中份 · 180g · 220kcal</div>
|
||||
</div>
|
||||
<span class="dish-price">¥3.0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dish-card">
|
||||
<div class="dish-head">
|
||||
<div class="dish-icon">🍲</div>
|
||||
<div class="dish-info">
|
||||
<div class="dish-name-row"><span class="dish-name">紫菜蛋花汤</span></div>
|
||||
<div class="dish-meta">中份 · 200ml · 80kcal</div>
|
||||
</div>
|
||||
<span class="dish-price">¥7.5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -20,128 +20,173 @@
|
||||
.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; }
|
||||
.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-header { background: #fff; padding: 14px 16px; border-bottom: 0.5px solid #f0f0f0; }
|
||||
.oh-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
|
||||
.oh-date { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 3px; }
|
||||
.oh-id { font-size: 11px; color: #999; }
|
||||
.oh-badge { font-size: 12px; padding: 3px 10px; border-radius: 12px; background: #f6ffed; color: #52c41a; font-weight: 600; }
|
||||
.oh-stats { display: flex; gap: 0; padding: 10px 0; border-top: 0.5px solid #f5f5f5; border-bottom: 0.5px solid #f5f5f5; }
|
||||
.oh-stat { flex: 1; text-align: center; }
|
||||
.oh-stat .sv { font-size: 18px; font-weight: 800; }
|
||||
.oh-stat .sl { font-size: 10px; color: #999; margin-top: 1px; }
|
||||
.oh-tags { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
|
||||
.oh-tag { font-size: 11px; padding: 2px 8px; border-radius: 8px; }
|
||||
/* 菜品区域 */
|
||||
.dish-section { padding: 12px 16px 24px; }
|
||||
.dish-sec-title { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 10px; }
|
||||
.dish-card { background: #fff; border-radius: 12px; margin-bottom: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.dish-head { padding: 11px 14px; display: flex; align-items: center; gap: 10px; }
|
||||
.dish-icon { width: 42px; height: 42px; border-radius: 10px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
|
||||
.dish-info { flex: 1; }
|
||||
.dish-name-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
|
||||
.dish-name { font-size: 14px; font-weight: 600; }
|
||||
.dish-rec { font-size: 10px; padding: 1px 6px; border-radius: 6px; }
|
||||
.dish-meta { font-size: 11px; color: #999; }
|
||||
.dish-price { font-size: 14px; font-weight: 700; color: #f5222d; flex-shrink: 0; }
|
||||
/* 食材来源 */
|
||||
.ing-section { border-top: 0.5px solid #f5f5f5; }
|
||||
.ing-label { padding: 6px 14px 4px; font-size: 11px; color: #999; background: #fafafa; }
|
||||
.ing-row { padding: 8px 14px; display: flex; align-items: center; gap: 8px; border-bottom: 0.5px solid #f9f9f9; }
|
||||
.ing-row:last-child { border-bottom: none; }
|
||||
.ing-dot { width: 6px; height: 6px; border-radius: 50%; background: #d9d9d9; flex-shrink: 0; }
|
||||
.ing-info { flex: 1; min-width: 0; }
|
||||
.ing-name { font-size: 12px; font-weight: 500; color: #444; }
|
||||
.ing-code { font-size: 9px; color: #bbb; font-family: monospace; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.ing-ok { font-size: 10px; padding: 1px 5px; border-radius: 5px; background: #f6ffed; color: #52c41a; flex-shrink: 0; white-space: nowrap; }
|
||||
.ing-trace { padding: 3px 8px; border-radius: 8px; border: 1px solid #1677ff; background: #fff; color: #1677ff; font-size: 10px; cursor: pointer; flex-shrink: 0; white-space: nowrap; text-decoration: none; }
|
||||
/* 营养建议 */
|
||||
.advice-card { background: #fff; border-radius: 12px; padding: 12px 14px; margin: 0 16px 24px; }
|
||||
.advice-title { font-size: 12px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.advice-text { font-size: 12px; color: #fa8c16; line-height: 1.7; }
|
||||
</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 class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="me-orders.html">‹</a>
|
||||
<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 class="order-header">
|
||||
<div class="oh-top">
|
||||
<div>
|
||||
<div class="oh-date">2026-04-28 午餐</div>
|
||||
<div class="oh-id">NM-20260428-001</div>
|
||||
</div>
|
||||
<span class="oh-badge">✅ 已完成</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 class="oh-stats">
|
||||
<div class="oh-stat"><div class="sv" style="color:#fa8c16">88</div><div class="sl">营养评分</div></div>
|
||||
<div class="oh-stat"><div class="sv" style="color:#f5222d">¥28</div><div class="sl">消费金额</div></div>
|
||||
<div class="oh-stat"><div class="sv" style="color:#1677ff">3</div><div class="sl">菜品数</div></div>
|
||||
<div class="oh-stat"><div class="sv" style="color:#555">442</div><div class="sl">总热量kcal</div></div>
|
||||
</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 class="oh-tags">
|
||||
<span class="oh-tag" style="background:#e6f4ff;color:#1677ff">点餐取餐</span>
|
||||
<span class="oh-tag" style="background:#f5f5f5;color:#666">A区中餐线</span>
|
||||
<span class="oh-tag" style="background:#f5f5f5;color:#666">余额支付</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 class="dish-section">
|
||||
<div class="dish-sec-title">菜品明细 · 食材 · 溯源</div>
|
||||
<!-- 清蒸鱼 -->
|
||||
<div class="dish-card">
|
||||
<div class="dish-head">
|
||||
<div class="dish-icon">🐟</div>
|
||||
<div class="dish-info">
|
||||
<div class="dish-name-row">
|
||||
<span class="dish-name">清蒸鱼</span>
|
||||
<span class="dish-rec" style="background:#52c41a15;color:#52c41a">推荐</span>
|
||||
</div>
|
||||
<div class="dish-meta">中份 · 100g · 142kcal</div>
|
||||
</div>
|
||||
<span class="dish-price">¥18</span>
|
||||
</div>
|
||||
<div class="ing-section">
|
||||
<div class="ing-label">食材来源</div>
|
||||
<div class="ing-row">
|
||||
<div class="ing-dot"></div>
|
||||
<div class="ing-info"><div class="ing-name">草鱼</div><div class="ing-code">ST-EX-HS01-SF-CAYO-060K-20260414-001</div></div>
|
||||
<span class="ing-ok">✅合格</span>
|
||||
<a class="ing-trace" href="trace-detail.html">🔗溯源</a>
|
||||
</div>
|
||||
<div class="ing-row">
|
||||
<div class="ing-dot"></div>
|
||||
<div class="ing-info"><div class="ing-name">葱丝</div><div class="ing-code">NC-PROC-CGSI-20260422-01</div></div>
|
||||
<span class="ing-ok">✅合格</span>
|
||||
<a class="ing-trace" href="trace-detail.html">🔗溯源</a>
|
||||
</div>
|
||||
<div class="ing-row">
|
||||
<div class="ing-dot"></div>
|
||||
<div class="ing-info"><div class="ing-name">姜丝</div><div class="ing-code">NC-PROC-JIAS-20260422-01</div></div>
|
||||
<span class="ing-ok">✅合格</span>
|
||||
<a class="ing-trace" href="trace-detail.html">🔗溯源</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 炒时蔬 -->
|
||||
<div class="dish-card">
|
||||
<div class="dish-head">
|
||||
<div class="dish-icon">🥬</div>
|
||||
<div class="dish-info">
|
||||
<div class="dish-name-row">
|
||||
<span class="dish-name">炒时蔬</span>
|
||||
<span class="dish-rec" style="background:#52c41a15;color:#52c41a">推荐</span>
|
||||
</div>
|
||||
<div class="dish-meta">中份 · 80g · 68kcal</div>
|
||||
</div>
|
||||
<span class="dish-price">¥8</span>
|
||||
</div>
|
||||
<div class="ing-section">
|
||||
<div class="ing-label">食材来源</div>
|
||||
<div class="ing-row">
|
||||
<div class="ing-dot"></div>
|
||||
<div class="ing-info"><div class="ing-name">西兰花</div><div class="ing-code">ST-EX-LY01-VG-XLHU-080K-20260416-001</div></div>
|
||||
<span class="ing-ok">✅合格</span>
|
||||
<a class="ing-trace" href="trace-detail.html">🔗溯源</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 米饭 -->
|
||||
<div class="dish-card">
|
||||
<div class="dish-head">
|
||||
<div class="dish-icon">🍚</div>
|
||||
<div class="dish-info">
|
||||
<div class="dish-name-row">
|
||||
<span class="dish-name">米饭</span>
|
||||
<span class="dish-rec" style="background:#fa8c1615;color:#fa8c16">适量</span>
|
||||
</div>
|
||||
<div class="dish-meta">中份 · 180g · 232kcal</div>
|
||||
</div>
|
||||
<span class="dish-price">¥2</span>
|
||||
</div>
|
||||
<div class="ing-section">
|
||||
<div class="ing-label">食材来源</div>
|
||||
<div class="ing-row">
|
||||
<div class="ing-dot"></div>
|
||||
<div class="ing-info"><div class="ing-name">大米</div><div class="ing-code">ST-EX-LY02-DG-DAMI-1000-20260413-001</div></div>
|
||||
<span class="ing-ok">✅合格</span>
|
||||
<a class="ing-trace" href="trace-detail.html">🔗溯源</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 营养建议 -->
|
||||
<div class="advice-card" style="margin:0">
|
||||
<div class="advice-title">营养建议</div>
|
||||
<div class="advice-text">⚠ 本餐脂肪摄入偏高，建议下次适当减少荤菜；蔬菜摄入量不足，建议增加一份绿叶菜。</div>
|
||||
</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>
|
||||
</html>
|
||||
@@ -51,7 +51,7 @@
|
||||
<span class="ot">已完成</span>
|
||||
<span class="ot">已取消</span>
|
||||
</div>
|
||||
<a class="order-card" href="me-order-detail.html">
|
||||
<a class="order-card" href="me-order-detail-pending.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>
|
||||
|
||||
@@ -16,11 +16,11 @@
|
||||
.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-group { background: #fff; margin: 0 0 12px; }
|
||||
.group-title { padding: 12px 16px 0; font-size: 12px; color: #999; font-weight: 500; }
|
||||
.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 .label { font-size: 15px; color: #333; display: flex; align-items: center; gap: 4px; }
|
||||
.settings-item .right { display: flex; align-items: center; gap: 8px; }
|
||||
.settings-item .value { font-size: 14px; color: #999; }
|
||||
.settings-item .value.green { color: #52c41a; }
|
||||
@@ -29,7 +29,22 @@
|
||||
.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); }
|
||||
/* 提示气泡 */
|
||||
.help-icon {
|
||||
width: 16px; height: 16px; border-radius: 50%; background: #e8e8e8; display: inline-flex;
|
||||
align-items: center; justify-content: center; font-size: 10px; color: #999; cursor: pointer;
|
||||
position: relative; font-style: normal;
|
||||
}
|
||||
.help-icon .tooltip {
|
||||
display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
|
||||
background: #333; color: #fff; font-size: 11px; padding: 6px 10px; border-radius: 6px;
|
||||
white-space: nowrap; z-index: 10; font-weight: 400;
|
||||
}
|
||||
.help-icon .tooltip::after {
|
||||
content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
|
||||
border: 5px solid transparent; border-top-color: #333;
|
||||
}
|
||||
.help-icon:hover .tooltip, .help-icon:active .tooltip { display: block; }
|
||||
.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>
|
||||
@@ -55,7 +70,8 @@
|
||||
<!-- 页面内容 -->
|
||||
<div class="page-content">
|
||||
<!-- 通知设置 -->
|
||||
<div class="settings-group">
|
||||
<div class="settings-group" style="margin-top: 12px;">
|
||||
<div class="group-title">通知设置</div>
|
||||
<div class="settings-item">
|
||||
<span class="label">订餐提醒</span>
|
||||
<div class="right"><span class="toggle on"></span></div>
|
||||
@@ -70,24 +86,26 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 账户设置 -->
|
||||
<!-- 隐私与安全 -->
|
||||
<div class="settings-group">
|
||||
<div class="group-title">隐私与安全</div>
|
||||
<div class="settings-item">
|
||||
<span class="label">饮食数据共享<i class="help-icon">?<span class="tooltip">允许将您的饮食数据匿名用于营养研究</span></i></span>
|
||||
<div class="right"><span class="toggle"></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>
|
||||
<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="group-title">通用</div>
|
||||
<div class="settings-item">
|
||||
<span class="label">清除缓存</span>
|
||||
<div class="right"><span class="value">12.3MB</span></div>
|
||||
@@ -97,13 +115,10 @@
|
||||
<div class="right"><span class="arrow">›</span></div>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span class="label">用户协议</span>
|
||||
<span class="label">隐私协议</span>
|
||||
<div class="right"><span class="arrow">›</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 退出登录 -->
|
||||
<button class="logout-btn">退出登录</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部指示器 -->
|
||||
|
||||
@@ -0,0 +1,286 @@
|
||||
<!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; }
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
height: 44px; background: #1677ff; display: flex; align-items: center;
|
||||
padding: 0 16px; flex-shrink: 0; color: #fff;
|
||||
}
|
||||
.nav-back { font-size: 20px; cursor: pointer; text-decoration: none; color: #fff; width: 32px; }
|
||||
.nav-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; margin-right: 32px; }
|
||||
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
/* 会员头部区域 */
|
||||
.vip-header {
|
||||
background: linear-gradient(180deg, #1062d6 0%, #3a8ef7 100%); padding: 20px 16px 24px; color: #fff;
|
||||
position: relative; overflow: hidden; border-radius: 0 0 16px 16px;
|
||||
box-shadow: 0 4px 12px rgba(22,119,255,0.25);
|
||||
}
|
||||
.vip-header::before {
|
||||
content: ''; position: absolute; top: -30px; right: -30px; width: 120px; height: 120px;
|
||||
background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, transparent 70%); border-radius: 50%;
|
||||
}
|
||||
.vip-level-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
|
||||
.vip-crown { font-size: 28px; }
|
||||
.vip-level-name { font-size: 20px; font-weight: 700; color: #ffd700; }
|
||||
.vip-level-tag {
|
||||
padding: 2px 8px; border-radius: 10px; background: linear-gradient(135deg, #ffd700, #ffaa00);
|
||||
font-size: 10px; font-weight: 600; color: #5a3800;
|
||||
}
|
||||
/* 数据统计 */
|
||||
.vip-stats { display: flex; gap: 0; margin-bottom: 16px; }
|
||||
.vip-stat-item { flex: 1; text-align: center; }
|
||||
.vip-stat-item + .vip-stat-item { border-left: 1px solid rgba(255,255,255,0.15); }
|
||||
.vip-stat-item .val { font-size: 18px; font-weight: 700; color: #ffd700; }
|
||||
.vip-stat-item .label { font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 3px; }
|
||||
/* 升级进度条 */
|
||||
.upgrade-bar { background: rgba(255,255,255,0.12); border-radius: 10px; padding: 12px 14px; border: 0.5px solid rgba(255,255,255,0.1); }
|
||||
.upgrade-text { font-size: 12px; color: rgba(255,255,255,0.8); margin-bottom: 8px; }
|
||||
.upgrade-text b { color: #ffd700; }
|
||||
.progress-track { height: 6px; background: rgba(255,255,255,0.15); border-radius: 3px; overflow: hidden; }
|
||||
.progress-fill { height: 100%; background: linear-gradient(90deg, #ffd700, #ffaa00); border-radius: 3px; width: 64%; }
|
||||
.upgrade-labels { display: flex; justify-content: space-between; margin-top: 5px; font-size: 10px; color: rgba(255,255,255,0.5); }
|
||||
/* 等级切换 Tab */
|
||||
.level-tabs {
|
||||
display: flex; padding: 12px 16px 0; background: #fff; gap: 0; overflow-x: auto;
|
||||
border-bottom: 0.5px solid #f0f0f0;
|
||||
}
|
||||
.level-tabs::-webkit-scrollbar { display: none; }
|
||||
.level-tab {
|
||||
flex-shrink: 0; padding: 8px 14px; font-size: 13px; color: #999; cursor: pointer;
|
||||
border-bottom: 2px solid transparent; position: relative; white-space: nowrap;
|
||||
}
|
||||
.level-tab.active { color: #1a1a1a; font-weight: 600; border-bottom-color: #ffd700; }
|
||||
.level-tab .current-dot {
|
||||
position: absolute; top: 4px; right: 4px; width: 6px; height: 6px;
|
||||
background: #ffd700; border-radius: 50%;
|
||||
}
|
||||
/* 权益列表 */
|
||||
.benefits-section { padding: 16px; }
|
||||
.benefits-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 12px; }
|
||||
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
||||
.benefit-card {
|
||||
background: #fff; border-radius: 10px; padding: 16px 8px; text-align: center;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
.benefit-card.locked { opacity: 0.5; position: relative; }
|
||||
.benefit-card.locked::after {
|
||||
content: '🔒'; position: absolute; top: 6px; right: 6px; font-size: 10px;
|
||||
}
|
||||
.benefit-icon { font-size: 28px; margin-bottom: 6px; }
|
||||
.benefit-name { font-size: 12px; color: #333; font-weight: 500; margin-bottom: 3px; }
|
||||
.benefit-desc { font-size: 10px; color: #999; line-height: 1.3; }
|
||||
/* 积分规则入口 */
|
||||
.rules-entry {
|
||||
margin: 16px; padding: 14px 16px; background: #fff; border-radius: 10px;
|
||||
display: flex; align-items: center; justify-content: space-between; cursor: pointer;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
.rules-entry .r-left { display: flex; align-items: center; gap: 8px; }
|
||||
.rules-entry .r-icon { font-size: 18px; }
|
||||
.rules-entry .r-text { font-size: 14px; color: #333; }
|
||||
.rules-entry .r-arrow { font-size: 16px; color: #ccc; }
|
||||
/* 积分规则弹窗 */
|
||||
.rules-modal {
|
||||
display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.5); z-index: 100; justify-content: center; align-items: center;
|
||||
}
|
||||
.rules-modal.show { display: flex; }
|
||||
.rules-panel {
|
||||
width: 340px; max-height: 520px; background: #fff; border-radius: 14px;
|
||||
overflow: hidden; display: flex; flex-direction: column;
|
||||
}
|
||||
.rules-panel-header {
|
||||
padding: 16px; text-align: center; font-size: 16px; font-weight: 600;
|
||||
border-bottom: 0.5px solid #f0f0f0; position: relative;
|
||||
}
|
||||
.rules-panel-close {
|
||||
position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
|
||||
font-size: 18px; cursor: pointer; color: #999;
|
||||
}
|
||||
.rules-panel-body { padding: 16px; overflow-y: auto; flex: 1; }
|
||||
.rule-item { margin-bottom: 14px; }
|
||||
.rule-item-title { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 4px; }
|
||||
.rule-item-desc { font-size: 12px; color: #666; line-height: 1.6; }
|
||||
.rule-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 11px; }
|
||||
.rule-table th { background: #f9f9f9; padding: 8px 6px; text-align: center; color: #666; font-weight: 500; }
|
||||
.rule-table td { padding: 8px 6px; text-align: center; border-top: 0.5px solid #f0f0f0; color: #333; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">09:41</span>
|
||||
<div class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" href="me-home.html">‹</a>
|
||||
<span class="nav-title">会员中心</span>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- 会员信息头部 -->
|
||||
<div class="vip-header">
|
||||
<div class="vip-level-row">
|
||||
<span class="vip-crown">👑</span>
|
||||
<span class="vip-level-name">黄金会员</span>
|
||||
<span class="vip-level-tag">Lv.3</span>
|
||||
</div>
|
||||
<!-- 数据统计 -->
|
||||
<div class="vip-stats">
|
||||
<div class="vip-stat-item"><div class="val">¥4,260</div><div class="label">累计消费</div></div>
|
||||
<div class="vip-stat-item"><div class="val">1,280</div><div class="label">累计积分</div></div>
|
||||
<div class="vip-stat-item"><div class="val">Lv.3</div><div class="label">当前等级</div></div>
|
||||
</div>
|
||||
<!-- 升级进度 -->
|
||||
<div class="upgrade-bar">
|
||||
<div class="upgrade-text">再获得 <b>720</b> 积分即可升级为 <b>铂金会员</b></div>
|
||||
<div class="progress-track"><div class="progress-fill"></div></div>
|
||||
<div class="upgrade-labels"><span>黄金 1,280分</span><span>铂金 2,000分</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 等级切换 Tab -->
|
||||
<div class="level-tabs">
|
||||
<div class="level-tab" data-level="0">普通会员</div>
|
||||
<div class="level-tab" data-level="1">银卡会员</div>
|
||||
<div class="level-tab active" data-level="2">黄金会员<span class="current-dot"></span></div>
|
||||
<div class="level-tab" data-level="3">铂金会员</div>
|
||||
<div class="level-tab" data-level="4">钻石会员</div>
|
||||
</div>
|
||||
<!-- 权益列表 -->
|
||||
<div class="benefits-section">
|
||||
<div class="benefits-title">黄金会员权益</div>
|
||||
<div class="benefits-grid" id="benefitsGrid">
|
||||
<div class="benefit-card"><div class="benefit-icon">🎁</div><div class="benefit-name">生日礼包</div><div class="benefit-desc">生日当天赠送专属礼品</div></div>
|
||||
<div class="benefit-card"><div class="benefit-icon">💰</div><div class="benefit-name">消费折扣</div><div class="benefit-desc">全场9.5折优惠</div></div>
|
||||
<div class="benefit-card"><div class="benefit-icon">🎯</div><div class="benefit-name">积分加倍</div><div class="benefit-desc">消费积分1.5倍</div></div>
|
||||
<div class="benefit-card"><div class="benefit-icon">🚀</div><div class="benefit-name">优先配餐</div><div class="benefit-desc">高峰期优先出餐</div></div>
|
||||
<div class="benefit-card"><div class="benefit-icon">🎫</div><div class="benefit-name">专属优惠券</div><div class="benefit-desc">每月2张满减券</div></div>
|
||||
<div class="benefit-card"><div class="benefit-icon">📞</div><div class="benefit-name">专属客服</div><div class="benefit-desc">1对1营养咨询</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 积分规则入口 -->
|
||||
<div class="rules-entry" onclick="document.getElementById('rulesModal').classList.add('show')">
|
||||
<div class="r-left"><span class="r-icon">📖</span><span class="r-text">会员等级与积分规则</span></div>
|
||||
<span class="r-arrow">›</span>
|
||||
</div>
|
||||
<div style="height: 20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 积分规则弹窗 -->
|
||||
<div class="rules-modal" id="rulesModal">
|
||||
<div class="rules-panel">
|
||||
<div class="rules-panel-header">会员等级与积分规则<span class="rules-panel-close" onclick="document.getElementById('rulesModal').classList.remove('show')">✕</span></div>
|
||||
<div class="rules-panel-body">
|
||||
<div class="rule-item">
|
||||
<div class="rule-item-title">等级划分</div>
|
||||
<table class="rule-table">
|
||||
<tr><th>等级</th><th>所需积分</th><th>消费折扣</th><th>积分倍率</th></tr>
|
||||
<tr><td>普通会员</td><td>0</td><td>无</td><td>1x</td></tr>
|
||||
<tr><td>银卡会员</td><td>500</td><td>9.8折</td><td>1.2x</td></tr>
|
||||
<tr><td>黄金会员</td><td>1,000</td><td>9.5折</td><td>1.5x</td></tr>
|
||||
<tr><td>铂金会员</td><td>2,000</td><td>9折</td><td>2x</td></tr>
|
||||
<tr><td>钻石会员</td><td>5,000</td><td>8.5折</td><td>3x</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="rule-item">
|
||||
<div class="rule-item-title">积分获取</div>
|
||||
<div class="rule-item-desc">• 每消费1元获得1积分<br>• 完成营养评估额外奖励50积分<br>• 连续打卡7天奖励30积分<br>• 分享食谱被收藏奖励10积分/次</div>
|
||||
</div>
|
||||
<div class="rule-item">
|
||||
<div class="rule-item-title">积分使用</div>
|
||||
<div class="rule-item-desc">• 100积分可抵扣1元<br>• 积分可兑换专属优惠券<br>• 积分可兑换营养咨询服务</div>
|
||||
</div>
|
||||
<div class="rule-item">
|
||||
<div class="rule-item-title">等级保级</div>
|
||||
<div class="rule-item-desc">• 会员等级每季度评估一次<br>• 连续3个月无消费记录降一级<br>• 降级后权益即时调整</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab切换交互脚本 -->
|
||||
<script>
|
||||
// 各等级权益数据
|
||||
const levelData = [
|
||||
{ name: '普通会员', benefits: [
|
||||
{ icon: '🎁', name: '注册礼包', desc: '新用户注册赠送优惠券' },
|
||||
{ icon: '📋', name: '基础服务', desc: '在线点餐与查询' },
|
||||
{ icon: '📊', name: '营养报告', desc: '每月1次营养分析' }
|
||||
]},
|
||||
{ name: '银卡会员', benefits: [
|
||||
{ icon: '🎁', name: '生日礼包', desc: '生日当天赠小礼品' },
|
||||
{ icon: '💰', name: '消费折扣', desc: '全场9.8折优惠' },
|
||||
{ icon: '🎯', name: '积分加倍', desc: '消费积分1.2倍' },
|
||||
{ icon: '📊', name: '营养报告', desc: '每月2次营养分析' }
|
||||
]},
|
||||
{ name: '黄金会员', benefits: [
|
||||
{ icon: '🎁', name: '生日礼包', desc: '生日当天赠送专属礼品' },
|
||||
{ icon: '💰', name: '消费折扣', desc: '全场9.5折优惠' },
|
||||
{ icon: '🎯', name: '积分加倍', desc: '消费积分1.5倍' },
|
||||
{ icon: '🚀', name: '优先配餐', desc: '高峰期优先出餐' },
|
||||
{ icon: '🎫', name: '专属优惠券', desc: '每月2张满减券' },
|
||||
{ icon: '📞', name: '专属客服', desc: '1对1营养咨询' }
|
||||
]},
|
||||
{ name: '铂金会员', benefits: [
|
||||
{ icon: '🎁', name: '生日礼包', desc: '生日专属定制套餐' },
|
||||
{ icon: '💰', name: '消费折扣', desc: '全场9折优惠' },
|
||||
{ icon: '🎯', name: '积分加倍', desc: '消费积分2倍' },
|
||||
{ icon: '🚀', name: '优先配餐', desc: '专属快速通道' },
|
||||
{ icon: '🎫', name: '专属优惠券', desc: '每月4张满减券' },
|
||||
{ icon: '📞', name: '专属客服', desc: 'VIP营养师1对1' }
|
||||
]},
|
||||
{ name: '钻石会员', benefits: [
|
||||
{ icon: '🎁', name: '生日礼包', desc: '生日豪华定制套餐' },
|
||||
{ icon: '💰', name: '消费折扣', desc: '全场8.5折优惠' },
|
||||
{ icon: '🎯', name: '积分加倍', desc: '消费积分3倍' },
|
||||
{ icon: '🚀', name: '极速配餐', desc: '全时段最高优先级' },
|
||||
{ icon: '🎫', name: '无限优惠券', desc: '每月不限量优惠券' },
|
||||
{ icon: '📞', name: '私人营养师', desc: '专属营养方案定制' }
|
||||
]}
|
||||
];
|
||||
const currentLevel = 2; // 当前用户等级索引（黄金会员）
|
||||
const tabs = document.querySelectorAll('.level-tab');
|
||||
const grid = document.getElementById('benefitsGrid');
|
||||
const title = document.querySelector('.benefits-title');
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', function() {
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
const level = parseInt(this.dataset.level);
|
||||
renderBenefits(level);
|
||||
});
|
||||
});
|
||||
|
||||
function renderBenefits(level) {
|
||||
const data = levelData[level];
|
||||
title.textContent = data.name + '权益';
|
||||
const isLocked = level > currentLevel;
|
||||
grid.innerHTML = data.benefits.map(b =>
|
||||
`<div class="benefit-card${isLocked ? ' locked' : ''}"><div class="benefit-icon">${b.icon}</div><div class="benefit-name">${b.name}</div><div class="benefit-desc">${b.desc}</div></div>`
|
||||
).join('');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -3,10 +3,14 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>溯源详情 | 智能餐养小程序</title>
|
||||
<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; }
|
||||
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; }
|
||||
@@ -14,118 +18,285 @@
|
||||
.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 { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.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; }
|
||||
.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; }
|
||||
/* 顶部信息栏 */
|
||||
.trace-header { padding: 12px 16px 10px; background: #fff; border-bottom: 0.5px solid #f0f0f0; }
|
||||
.th-sub { font-size: 11px; color: #999; margin-bottom: 3px; }
|
||||
.th-code { font-size: 11px; font-family: monospace; color: #1677ff; word-break: break-all; margin-bottom: 8px; }
|
||||
.th-tags { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.th-tag { font-size: 11px; padding: 2px 8px; border-radius: 8px; }
|
||||
/* 时间轴 */
|
||||
.timeline { padding: 14px 16px 24px; }
|
||||
.tl-node { display: flex; gap: 10px; }
|
||||
.tl-left { display: flex; flex-direction: column; align-items: center; width: 30px; flex-shrink: 0; }
|
||||
.tl-dot {
|
||||
width: 30px; height: 30px; border-radius: 50%; border: 2px solid;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0;
|
||||
}
|
||||
.tl-line { width: 2px; flex: 1; min-height: 10px; margin: 3px 0; }
|
||||
.tl-right { flex: 1; padding-bottom: 10px; }
|
||||
.tl-card { background: #fff; border-radius: 10px; padding: 9px 11px; }
|
||||
.tl-stage { font-size: 11px; font-weight: 600; }
|
||||
.tl-ok { font-size: 10px; padding: 1px 5px; border-radius: 5px; background: #f6ffed; color: #52c41a; }
|
||||
.tl-title { font-size: 12px; font-weight: 600; color: #333; margin: 2px 0; }
|
||||
.tl-time { font-size: 10px; color: #999; margin-bottom: 3px; }
|
||||
.tl-detail { font-size: 11px; color: #666; line-height: 1.6; }
|
||||
.tl-code { font-size: 9px; color: #bbb; font-family: monospace; margin-top: 3px; word-break: break-all; }
|
||||
</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 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>
|
||||
<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 class="trace-header">
|
||||
<div class="th-sub">反向溯源 · 从取餐追溯至产地</div>
|
||||
<div class="th-code">ST-EX-XR01-MT-JXRJ-080K-20260415-002</div>
|
||||
<div class="th-tags">
|
||||
<span class="th-tag" style="background:#f6ffed;color:#52c41a">✅ 全程合格</span>
|
||||
<span class="th-tag" style="background:#e6f4ff;color:#1677ff">鸡胸肉</span>
|
||||
<span class="th-tag" style="background:#f5f5f5;color:#666">外采 · 鲜肉直供公司</span>
|
||||
<span class="th-tag" style="background:#f5f5f5;color:#666">14 个节点</span>
|
||||
</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 class="timeline">
|
||||
<!-- 1. 用户取餐 -->
|
||||
<div class="tl-node">
|
||||
<div class="tl-left">
|
||||
<div class="tl-dot" style="border-color:#52c41a;background:#52c41a1a">👤</div>
|
||||
<div class="tl-line" style="background:linear-gradient(#52c41a,#52c41a22)"></div>
|
||||
</div>
|
||||
<div class="tl-right">
|
||||
<div class="tl-card">
|
||||
<div style="display:flex;align-items:center;gap:5px;margin-bottom:3px"><span class="tl-stage" style="color:#52c41a">👤 用户取餐</span><span class="tl-ok">✅ 正常</span></div>
|
||||
<div class="tl-title">关联订单食材映射</div>
|
||||
<div class="tl-time">⏱ 2026-04-22 11:40 ~ 12:30</div>
|
||||
<div class="tl-detail">关联订单：SO20260422021#1、SO20260422087#2、SO20260422103#1</div>
|
||||
<div class="tl-code">ORD-20260422-021</div>
|
||||
</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>
|
||||
<!-- 2. 营养检验 -->
|
||||
<div class="tl-node">
|
||||
<div class="tl-left">
|
||||
<div class="tl-dot" style="border-color:#52c41a;background:#52c41a1a">🧪</div>
|
||||
<div class="tl-line" style="background:linear-gradient(#52c41a,#52c41a22)"></div>
|
||||
</div>
|
||||
<div class="tl-right">
|
||||
<div class="tl-card">
|
||||
<div style="display:flex;align-items:center;gap:5px;margin-bottom:3px"><span class="tl-stage" style="color:#52c41a">🧪 营养检验</span><span class="tl-ok">✅ 正常</span></div>
|
||||
<div class="tl-title">营养检测 · 成品抽检</div>
|
||||
<div class="tl-time">⏱ 2026-04-22 13:30</div>
|
||||
<div class="tl-detail">COOK-001 宫保鸡丁 · 热量：186kcal/100g · 蛋白质：18.2g · 脂肪：9.4g · 结论：达标</div>
|
||||
<div class="tl-code">NUT-20260422-001</div>
|
||||
</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>
|
||||
<!-- 3. 余量处置 -->
|
||||
<div class="tl-node">
|
||||
<div class="tl-left">
|
||||
<div class="tl-dot" style="border-color:#fa8c16;background:#fa8c161a">♻️</div>
|
||||
<div class="tl-line" style="background:linear-gradient(#fa8c16,#fa8c1622)"></div>
|
||||
</div>
|
||||
<div class="tl-right">
|
||||
<div class="tl-card">
|
||||
<div style="display:flex;align-items:center;gap:5px;margin-bottom:3px"><span class="tl-stage" style="color:#fa8c16">♻️ 余量处置</span><span class="tl-ok">✅ 正常</span></div>
|
||||
<div class="tl-title">余量处置 · 多餐线余量登记</div>
|
||||
<div class="tl-time">⏱ 2026-04-22 13:00 ~ 13:20</div>
|
||||
<div class="tl-detail">分支A：SERVE-001 余量0.3kg 冷藏留用 · 分支B：SERVE-007 余量0.1kg 废弃 · 经办人：李处置</div>
|
||||
<div class="tl-code">DISP-20260422-001</div>
|
||||
</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>
|
||||
<!-- 4. 上餐监控 -->
|
||||
<div class="tl-node">
|
||||
<div class="tl-left">
|
||||
<div class="tl-dot" style="border-color:#13c2c2;background:#13c2c21a">🍽️</div>
|
||||
<div class="tl-line" style="background:linear-gradient(#13c2c2,#13c2c222)"></div>
|
||||
</div>
|
||||
<div class="tl-right">
|
||||
<div class="tl-card">
|
||||
<div style="display:flex;align-items:center;gap:5px;margin-bottom:3px"><span class="tl-stage" style="color:#13c2c2">🍽️ 上餐监控</span><span class="tl-ok">✅ 正常</span></div>
|
||||
<div class="tl-title">上餐批次分支 · 多餐线分发</div>
|
||||
<div class="tl-time">⏱ 2026-04-22 11:30 ~ 12:00</div>
|
||||
<div class="tl-detail">分支A：SERVE-001 → A区中餐线 6.8kg · 分支B：SERVE-007 → B区中餐线 1.4kg</div>
|
||||
<div class="tl-code">SERVE-20260422-001</div>
|
||||
</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>
|
||||
<!-- 5. 按单烹制 -->
|
||||
<div class="tl-node">
|
||||
<div class="tl-left">
|
||||
<div class="tl-dot" style="border-color:#eb2f96;background:#eb2f961a">🍳</div>
|
||||
<div class="tl-line" style="background:linear-gradient(#eb2f96,#eb2f9622)"></div>
|
||||
</div>
|
||||
<div class="tl-right">
|
||||
<div class="tl-card">
|
||||
<div style="display:flex;align-items:center;gap:5px;margin-bottom:3px"><span class="tl-stage" style="color:#eb2f96">🍳 按单烹制</span><span class="tl-ok">✅ 正常</span></div>
|
||||
<div class="tl-title">烹制任务分支 · 多锅次烹制</div>
|
||||
<div class="tl-time">⏱ 2026-04-22 11:00 ~ 11:35</div>
|
||||
<div class="tl-detail">分支A：COOK-001 宫保鸡丁 张厨师 2锅 · 分支B：COOK-009 辣子鸡 王厨师 1锅</div>
|
||||
<div class="tl-code">COOK-20260422-001</div>
|
||||
</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>
|
||||
<!-- 6. 净菜组配 -->
|
||||
<div class="tl-node">
|
||||
<div class="tl-left">
|
||||
<div class="tl-dot" style="border-color:#eb2f96;background:#eb2f961a">🔪</div>
|
||||
<div class="tl-line" style="background:linear-gradient(#eb2f96,#eb2f9622)"></div>
|
||||
</div>
|
||||
<div class="tl-right">
|
||||
<div class="tl-card">
|
||||
<div style="display:flex;align-items:center;gap:5px;margin-bottom:3px"><span class="tl-stage" style="color:#eb2f96">🔪 净菜组配</span><span class="tl-ok">✅ 正常</span></div>
|
||||
<div class="tl-title">组配任务分支 · 分配至多道菜品</div>
|
||||
<div class="tl-time">⏱ 2026-04-22 10:20 ~ 10:40</div>
|
||||
<div class="tl-detail">分支A：CMB-001 宫保鸡丁 5.0kg · 分支B：CMB-006 辣子鸡 3.5kg</div>
|
||||
<div class="tl-code">CMB-20260422-001</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 7. 净菜进柜 -->
|
||||
<div class="tl-node">
|
||||
<div class="tl-left">
|
||||
<div class="tl-dot" style="border-color:#722ed1;background:#722ed11a">🗄️</div>
|
||||
<div class="tl-line" style="background:linear-gradient(#722ed1,#722ed122)"></div>
|
||||
</div>
|
||||
<div class="tl-right">
|
||||
<div class="tl-card">
|
||||
<div style="display:flex;align-items:center;gap:5px;margin-bottom:3px"><span class="tl-stage" style="color:#722ed1">🗄️ 净菜进柜</span><span class="tl-ok">✅ 正常</span></div>
|
||||
<div class="tl-title">净菜进柜 · 智能柜格口存放</div>
|
||||
<div class="tl-time">⏱ 2026-04-22 10:00 ~ 10:15</div>
|
||||
<div class="tl-detail">分支A：B区智能柜-1号 B1-03格口 4.2kg 3.8°C · 分支B：B2-01格口 4.3kg 4.0°C</div>
|
||||
<div class="tl-code">NC-CAB-JXRJ-20260422-01</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 8. 净菜内供 -->
|
||||
<div class="tl-node">
|
||||
<div class="tl-left">
|
||||
<div class="tl-dot" style="border-color:#fa8c16;background:#fa8c161a">🚚</div>
|
||||
<div class="tl-line" style="background:linear-gradient(#fa8c16,#fa8c1622)"></div>
|
||||
</div>
|
||||
<div class="tl-right">
|
||||
<div class="tl-card">
|
||||
<div style="display:flex;align-items:center;gap:5px;margin-bottom:3px"><span class="tl-stage" style="color:#fa8c16">🚚 净菜内供</span><span class="tl-ok">✅ 正常</span></div>
|
||||
<div class="tl-title">净菜内供分发 · 多厨房领用</div>
|
||||
<div class="tl-time">⏱ 2026-04-22 09:30 ~ 10:00</div>
|
||||
<div class="tl-detail">分支A：INT-001 → A区厨房 4.2kg · 分支B：INT-002 → B区厨房 4.3kg · 分支C：INT-009 → C区厨房 2.5kg</div>
|
||||
<div class="tl-code">NC-INT-JXRJ-20260422-01</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 9. 净菜入库 -->
|
||||
<div class="tl-node">
|
||||
<div class="tl-left">
|
||||
<div class="tl-dot" style="border-color:#13c2c2;background:#13c2c21a">📦</div>
|
||||
<div class="tl-line" style="background:linear-gradient(#13c2c2,#13c2c222)"></div>
|
||||
</div>
|
||||
<div class="tl-right">
|
||||
<div class="tl-card">
|
||||
<div style="display:flex;align-items:center;gap:5px;margin-bottom:3px"><span class="tl-stage" style="color:#13c2c2">📦 净菜入库</span><span class="tl-ok">✅ 正常</span></div>
|
||||
<div class="tl-title">净菜入库 · 拆分多批次入库</div>
|
||||
<div class="tl-time">⏱ 2026-04-22 09:10</div>
|
||||
<div class="tl-detail">分支A：NC-IN-008-A 5.1kg · A仓-肉禽区-01 · 分支B：NC-IN-008-B 3.4kg · 分支C：NC-IN-008-C 2.5kg</div>
|
||||
<div class="tl-code">NC-IN-JXRJ-20260422-01</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 10. 净菜加工 -->
|
||||
<div class="tl-node">
|
||||
<div class="tl-left">
|
||||
<div class="tl-dot" style="border-color:#13c2c2;background:#13c2c21a">🥬</div>
|
||||
<div class="tl-line" style="background:linear-gradient(#13c2c2,#13c2c222)"></div>
|
||||
</div>
|
||||
<div class="tl-right">
|
||||
<div class="tl-card">
|
||||
<div style="display:flex;align-items:center;gap:5px;margin-bottom:3px"><span class="tl-stage" style="color:#13c2c2">🥬 净菜加工</span><span class="tl-ok">✅ 正常</span></div>
|
||||
<div class="tl-title">净菜加工 · 切丁</div>
|
||||
<div class="tl-time">⏱ 2026-04-22 08:30 ~ 09:00</div>
|
||||
<div class="tl-detail">分支A：投入6kg→产出5.1kg · 分支B：投入4kg→产出3.4kg · 分支C：投入3kg→产出2.5kg</div>
|
||||
<div class="tl-code">NC-PROC-JXRJ-20260422-01</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 11. 毛菜存储 -->
|
||||
<div class="tl-node">
|
||||
<div class="tl-left">
|
||||
<div class="tl-dot" style="border-color:#722ed1;background:#722ed11a">🏪</div>
|
||||
<div class="tl-line" style="background:linear-gradient(#722ed1,#722ed122)"></div>
|
||||
</div>
|
||||
<div class="tl-right">
|
||||
<div class="tl-card">
|
||||
<div style="display:flex;align-items:center;gap:5px;margin-bottom:3px"><span class="tl-stage" style="color:#722ed1">🏪 毛菜存储</span><span class="tl-ok">✅ 正常</span></div>
|
||||
<div class="tl-title">毛菜存储 · B仓-肉类冷藏库</div>
|
||||
<div class="tl-time">⏱ 2026-04-15 11:00 ~ 04-22 08:00</div>
|
||||
<div class="tl-detail">存放区域：B仓-肉类区-01 · 温区：冷藏(0~4℃) · 在库量：15kg · 保质期至：2026-04-19</div>
|
||||
<div class="tl-code">ST-EX-XR01-MT-JXRJ-080K-20260415-002</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 12. 毛菜入库 -->
|
||||
<div class="tl-node">
|
||||
<div class="tl-left">
|
||||
<div class="tl-dot" style="border-color:#fa8c16;background:#fa8c161a">📥</div>
|
||||
<div class="tl-line" style="background:linear-gradient(#fa8c16,#fa8c1622)"></div>
|
||||
</div>
|
||||
<div class="tl-right">
|
||||
<div class="tl-card">
|
||||
<div style="display:flex;align-items:center;gap:5px;margin-bottom:3px"><span class="tl-stage" style="color:#fa8c16">📥 毛菜入库</span><span class="tl-ok">✅ 正常</span></div>
|
||||
<div class="tl-title">毛菜入库 · 鲜肉直供公司</div>
|
||||
<div class="tl-time">⏱ 2026-04-15 11:00</div>
|
||||
<div class="tl-detail">入库单号：IN-20260415-003 · 入库量：80kg · 存放区域：B仓-肉类区-01 · 操作类型：人工录入</div>
|
||||
<div class="tl-code">ST-EX-XR01-MT-JXRJ-080K-20260415-002</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 13. 卫生检测 -->
|
||||
<div class="tl-node">
|
||||
<div class="tl-left">
|
||||
<div class="tl-dot" style="border-color:#1677ff;background:#1677ff1a">🔬</div>
|
||||
<div class="tl-line" style="background:linear-gradient(#1677ff,#1677ff22)"></div>
|
||||
</div>
|
||||
<div class="tl-right">
|
||||
<div class="tl-card">
|
||||
<div style="display:flex;align-items:center;gap:5px;margin-bottom:3px"><span class="tl-stage" style="color:#1677ff">🔬 卫生检测</span><span class="tl-ok">✅ 正常</span></div>
|
||||
<div class="tl-title">卫生检测 · 瘦肉精</div>
|
||||
<div class="tl-time">⏱ 2026-04-15 10:30</div>
|
||||
<div class="tl-detail">检测项目：瘦肉精 · 检测值：未检出 · 报告：RPT-20260415-002 · 结论：合格</div>
|
||||
<div class="tl-code">ST-EX-XR01-MT-JXRJ-080K-20260415-002</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 14. 采供入库（最后一个节点无连线） -->
|
||||
<div class="tl-node">
|
||||
<div class="tl-left">
|
||||
<div class="tl-dot" style="border-color:#1677ff;background:#1677ff1a">🛒</div>
|
||||
</div>
|
||||
<div class="tl-right" style="padding-bottom:0">
|
||||
<div class="tl-card">
|
||||
<div style="display:flex;align-items:center;gap:5px;margin-bottom:3px"><span class="tl-stage" style="color:#1677ff">🛒 采供入库</span><span class="tl-ok">✅ 正常</span></div>
|
||||
<div class="tl-title">采购入库 · 鲜肉直供公司</div>
|
||||
<div class="tl-time">⏱ 2026-04-15 09:15</div>
|
||||
<div class="tl-detail">采购单号：PO-20260415-002 · 入库量：80kg · 供应商：鲜肉直供公司 · 验收人：王验收</div>
|
||||
<div class="tl-code">ST-EX-XR01-MT-JXRJ-080K-20260415-002</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部指示器 -->
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@@ -6,7 +6,11 @@
|
||||
<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; }
|
||||
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; }
|
||||
@@ -16,96 +20,113 @@
|
||||
.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; }
|
||||
.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; }
|
||||
/* 搜索栏 */
|
||||
.search-bar { padding: 16px 16px 12px; background: #fff; border-bottom: 0.5px solid #f0f0f0; }
|
||||
.search-row { display: flex; gap: 8px; align-items: center; }
|
||||
.search-input {
|
||||
flex: 1; height: 40px; border: 1px solid #d9d9d9; border-radius: 20px;
|
||||
padding: 0 14px; font-size: 13px; outline: none;
|
||||
}
|
||||
.search-input:focus { border-color: #1677ff; }
|
||||
.scan-btn {
|
||||
height: 40px; padding: 0 16px; border-radius: 20px; border: none;
|
||||
background: #1677ff; color: #fff; font-size: 13px; font-weight: 600;
|
||||
cursor: pointer; white-space: nowrap;
|
||||
}
|
||||
.search-hint { font-size: 11px; color: #bbb; margin-top: 8px; padding-left: 4px; }
|
||||
/* 扫码记录 */
|
||||
.record-section { padding: 12px 16px 24px; }
|
||||
.record-title { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 10px; }
|
||||
.record-card {
|
||||
background: #fff; border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
.rc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
|
||||
.rc-left { display: flex; align-items: center; gap: 6px; }
|
||||
.rc-ing { font-size: 13px; font-weight: 600; }
|
||||
.rc-dish { font-size: 11px; color: #999; }
|
||||
.rc-ok { font-size: 11px; padding: 2px 8px; border-radius: 8px; background: #f6ffed; color: #52c41a; }
|
||||
.rc-code { font-size: 10px; color: #bbb; font-family: monospace; margin-bottom: 6px; word-break: break-all; }
|
||||
.rc-bottom { display: flex; align-items: center; justify-content: space-between; }
|
||||
.rc-time { font-size: 11px; color: #bbb; }
|
||||
.rc-trace {
|
||||
padding: 3px 10px; border-radius: 8px; border: 1px solid #1677ff;
|
||||
background: #fff; color: #1677ff; font-size: 11px; 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">
|
||||
<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 class="icons"><span>📶</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<a class="back" href="me-home.html">‹</a>
|
||||
<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 class="search-bar">
|
||||
<div class="search-row">
|
||||
<input class="search-input" placeholder="输入或扫描食材溯源码" />
|
||||
<button class="scan-btn" onclick="alert('【交互注释】调起摄像头扫码')">📷 扫码</button>
|
||||
</div>
|
||||
<p class="scan-hint">将二维码放入框内扫描</p>
|
||||
<div class="search-hint">支持食材溯源码（如 ST-EX-XR01-MT-JXRJ-...）</div>
|
||||
</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 class="record-section">
|
||||
<div class="record-title">📋 最近扫码记录（食材维度）</div>
|
||||
<div class="record-card">
|
||||
<div class="rc-top">
|
||||
<div class="rc-left"><span class="rc-ing">鸡胸肉</span><span class="rc-dish">用于 宫保鸡丁</span></div>
|
||||
<span class="rc-ok">✅ 合格</span>
|
||||
</div>
|
||||
<div class="rc-code">ST-EX-XR01-MT-JXRJ-080K-20260415-002</div>
|
||||
<div class="rc-bottom">
|
||||
<span class="rc-time">昨日 11:32</span>
|
||||
<a class="rc-trace" href="trace-detail.html">🔗 溯源链路</a>
|
||||
</div>
|
||||
</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 class="record-card">
|
||||
<div class="rc-top">
|
||||
<div class="rc-left"><span class="rc-ing">草鱼</span><span class="rc-dish">用于 清蒸鱼</span></div>
|
||||
<span class="rc-ok">✅ 合格</span>
|
||||
</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 class="rc-code">ST-EX-HS01-SF-CAYO-060K-20260414-001</div>
|
||||
<div class="rc-bottom">
|
||||
<span class="rc-time">昨日 11:34</span>
|
||||
<a class="rc-trace" href="trace-detail.html">🔗 溯源链路</a>
|
||||
</div>
|
||||
<span class="item-date">昨天</span>
|
||||
<span class="arrow">›</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="record-card">
|
||||
<div class="rc-top">
|
||||
<div class="rc-left"><span class="rc-ing">西兰花</span><span class="rc-dish">用于 炒西兰花</span></div>
|
||||
<span class="rc-ok">✅ 合格</span>
|
||||
</div>
|
||||
<div class="rc-code">ST-EX-LY01-VG-XLHU-080K-20260416-001</div>
|
||||
<div class="rc-bottom">
|
||||
<span class="rc-time">前天 12:10</span>
|
||||
<a class="rc-trace" href="trace-detail.html">🔗 溯源链路</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-card">
|
||||
<div class="rc-top">
|
||||
<div class="rc-left"><span class="rc-ing">花生</span><span class="rc-dish">用于 宫保鸡丁</span></div>
|
||||
<span class="rc-ok">✅ 合格</span>
|
||||
</div>
|
||||
<div class="rc-code">ST-EX-LY02-NU-HUSR-050K-20260413-004</div>
|
||||
<div class="rc-bottom">
|
||||
<span class="rc-time">前天 11:30</span>
|
||||
<a class="rc-trace" href="trace-detail.html">🔗 溯源链路</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部指示条 -->
|
||||
<div class="home-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Reference in New Issue
Block a user