merge: 解决 CLAUDE.md 合并冲突
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -14,4 +14,12 @@
|
||||
- 新增页面时必须同步更新 `index.html` 的 `SITE_MAP`
|
||||
|
||||
## 用户纠正记录
|
||||
（暂无记录）
|
||||
|
||||
### 2026-05-15 | 批量操作覆盖已完成修改（严重）
|
||||
- **事故**：在 11d3464 提交中，批量处理多个页面时，对 arc-employee/arc-unit/arc-algo.html 的已完成修改被后续写入操作意外覆盖，导致用户工作丢失。
|
||||
- **根因**：在同一会话中处理大量文件时，重新写入文件未保护先前已完成的修改。
|
||||
- **强制规则**：
|
||||
1. 对文件执行写入/编辑操作前，必须确认不会覆盖该文件中已完成的其他修改
|
||||
2. 批量处理多文件时，每个文件的修改必须基于当前最新内容（先读后改），禁止使用缓存的旧版本内容写入
|
||||
3. 提交前必须用 `git diff --staged` 检查所有待提交文件的变更是否符合预期，确保没有意外回退
|
||||
4. 若一个文件在同一会话中被多次修改，最终提交前必须完整审查该文件的累计变更
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!-- Last updated: 2026-05-14 | Commit: 53ba505 -->
|
||||
<!-- Last updated: 2026-05-15 | Commit: 26ad1d1 -->
|
||||
|
||||
# 项目约束
|
||||
|
||||
@@ -31,6 +31,16 @@
|
||||
- 新增原型页面时，必须同步在 `index.html` 的 `SITE_MAP` 中添加对应条目
|
||||
- PRD 文档生成后需要在导航页对应的一级菜单卡片左下角加上 PRD 文档的跳转逻辑
|
||||
|
||||
## 文件写入安全（严重事故教训 2026-05-15）
|
||||
|
||||
> **绝对禁止**：批量操作时覆盖已完成的文件修改。
|
||||
|
||||
- 对文件执行写入/编辑前，**必须先读取该文件当前最新内容**，禁止使用内存中缓存的旧版本写入
|
||||
- 批量处理多文件时，每个文件独立「读取→修改→写入」，不得跨文件复用旧内容
|
||||
- 同一会话中若一个文件被多次修改，后续修改必须基于前次修改后的最新状态
|
||||
- **提交前必须执行 `git diff --staged` 审查**，确认所有变更符合预期、无意外回退
|
||||
- 若发现 diff 中出现非预期的删除或回退，必须立即中止提交并向用户报告
|
||||
|
||||
## 记忆体系（会话启动必读）
|
||||
|
||||
> **强制规则**：每次新会话启动时，必须先读取本项目的记忆体系索引，再按需加载关键记忆文件，然后才能开始处理用户请求。长会话中若上下文被压缩，同样需要重新加载。
|
||||
|
||||
@@ -722,6 +722,7 @@ const SITE_MAP = [
|
||||
{label:'菜品详情', file:'eat-dish-detail.html'},
|
||||
{label:'订餐', file:'eat-order.html'},
|
||||
{label:'订单确认', file:'eat-order-confirm.html'},
|
||||
{label:'购物车', file:'eat-cart.html'},
|
||||
{label:'就餐记录', file:'eat-meal-record.html'},
|
||||
{label:'AI营养助手', file:'ask-home.html'},
|
||||
{label:'AI对话', file:'ask-chat.html'},
|
||||
@@ -736,8 +737,14 @@ const SITE_MAP = [
|
||||
{label:'健康档案', file:'me-health.html'},
|
||||
{label:'我的订单', file:'me-orders.html'},
|
||||
{label:'订单详情', file:'me-order-detail.html'},
|
||||
{label:'订单详情-待处理', file:'me-order-detail-pending.html'},
|
||||
{label:'我的收藏', file:'me-favorites.html'},
|
||||
{label:'我的余额', file:'me-wallet.html'},
|
||||
{label:'会员中心', file:'me-vip.html'},
|
||||
{label:'消息中心', file:'me-messages.html'},
|
||||
{label:'操作日志', file:'me-logs.html'},
|
||||
{label:'设置', file:'me-settings.html'},
|
||||
{label:'账户管理', file:'me-account.html'},
|
||||
{label:'扫码溯源', file:'trace-query.html'},
|
||||
{label:'溯源链路', file:'trace-detail.html'}
|
||||
] },
|
||||
|
||||
@@ -44,12 +44,40 @@
|
||||
.page-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 日期栏 */
|
||||
.date-bar {
|
||||
background: #fff; padding: 12px 16px 14px; text-align: center;
|
||||
/* 筛选栏 */
|
||||
.filter-bar {
|
||||
background: #fff; padding: 10px 16px; display: flex;
|
||||
align-items: center; justify-content: space-between;
|
||||
border-bottom: 0.5px solid #f0f0f0;
|
||||
}
|
||||
.date-text { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.canteen-selector {
|
||||
display: flex; align-items: center; gap: 4px; cursor: pointer;
|
||||
font-size: 15px; font-weight: 600; color: #1a1a1a; position: relative;
|
||||
}
|
||||
.canteen-selector .arrow { font-size: 10px; color: #999; transition: transform 0.2s; }
|
||||
.canteen-selector.open .arrow { transform: rotate(180deg); }
|
||||
.canteen-dropdown {
|
||||
position: absolute; top: 100%; left: 0; margin-top: 8px;
|
||||
background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.12);
|
||||
min-width: 140px; z-index: 100; overflow: hidden; display: none;
|
||||
}
|
||||
.canteen-dropdown.show { display: block; }
|
||||
.canteen-option {
|
||||
padding: 12px 16px; font-size: 14px; color: #333; cursor: pointer;
|
||||
border-bottom: 0.5px solid #f5f5f5;
|
||||
}
|
||||
.canteen-option:last-child { border-bottom: none; }
|
||||
.canteen-option:active { background: #f5f5f5; }
|
||||
.canteen-option.selected { color: #1677ff; font-weight: 600; }
|
||||
.date-picker {
|
||||
display: flex; align-items: center; gap: 6px; cursor: pointer;
|
||||
}
|
||||
.date-picker input {
|
||||
border: none; background: none; font-size: 14px; color: #1a1a1a;
|
||||
font-weight: 500; width: 120px; text-align: right; cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
.date-picker .cal-icon { font-size: 16px; color: #1677ff; }
|
||||
|
||||
/* 餐次 Tab */
|
||||
.meal-tabs {
|
||||
@@ -138,14 +166,26 @@
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" href="eat-recipe.html">‹</a>
|
||||
<div class="nav-title">今日食谱</div>
|
||||
<div class="nav-action">📅</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<div class="page-content">
|
||||
<!-- 日期 -->
|
||||
<div class="date-bar">
|
||||
<div class="date-text" id="dateText"></div>
|
||||
<!-- 筛选栏：食堂 + 日期 -->
|
||||
<div class="filter-bar">
|
||||
<div class="canteen-selector" id="canteenSelector">
|
||||
<span class="canteen-name" id="canteenName">一号食堂</span>
|
||||
<span class="arrow">▼</span>
|
||||
<div class="canteen-dropdown" id="canteenDropdown">
|
||||
<div class="canteen-option selected" data-val="一号食堂">一号食堂</div>
|
||||
<div class="canteen-option" data-val="二号食堂">二号食堂</div>
|
||||
<div class="canteen-option" data-val="三号食堂">三号食堂</div>
|
||||
<div class="canteen-option" data-val="清真食堂">清真食堂</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="date-picker">
|
||||
<input type="date" id="dateInput">
|
||||
<span class="cal-icon">📅</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 餐次切换 -->
|
||||
@@ -368,11 +408,37 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 动态设置今日日期 */
|
||||
/* 日期控件默认当天 */
|
||||
var now = new Date();
|
||||
var weekDays = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
|
||||
var dateStr = now.getFullYear() + '年' + (now.getMonth()+1) + '月' + now.getDate() + '日 ' + weekDays[now.getDay()];
|
||||
document.getElementById('dateText').textContent = dateStr;
|
||||
var y = now.getFullYear(), m = String(now.getMonth()+1).padStart(2,'0'), d = String(now.getDate()).padStart(2,'0');
|
||||
document.getElementById('dateInput').value = y + '-' + m + '-' + d;
|
||||
|
||||
/* 食堂选择器 */
|
||||
var selector = document.getElementById('canteenSelector');
|
||||
var dropdown = document.getElementById('canteenDropdown');
|
||||
var nameEl = document.getElementById('canteenName');
|
||||
|
||||
selector.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
selector.classList.toggle('open');
|
||||
dropdown.classList.toggle('show');
|
||||
});
|
||||
|
||||
document.querySelectorAll('.canteen-option').forEach(function(opt) {
|
||||
opt.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
document.querySelectorAll('.canteen-option').forEach(function(o){ o.classList.remove('selected'); });
|
||||
opt.classList.add('selected');
|
||||
nameEl.textContent = opt.dataset.val;
|
||||
selector.classList.remove('open');
|
||||
dropdown.classList.remove('show');
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', function() {
|
||||
selector.classList.remove('open');
|
||||
dropdown.classList.remove('show');
|
||||
});
|
||||
|
||||
/* 餐次 Tab 切换 */
|
||||
var tabs = document.querySelectorAll('.meal-tab');
|
||||
|
||||
@@ -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>
|
||||
@@ -112,10 +112,7 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
.form-item input,.form-item select,.form-item textarea{height:36px;padding:0 12px;border:1px solid #e8e8e8;border-radius:4px;font-size:13px;outline:none;}
|
||||
.form-item input:focus,.form-item select:focus,.form-item textarea:focus{border-color:#1890FF;}
|
||||
.form-item textarea{height:80px;padding:8px 12px;resize:vertical;}
|
||||
/* 操作列固定右侧 */
|
||||
thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;}
|
||||
thead th:last-child{background:#FAFAFA;}
|
||||
tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
${CSS_RULE}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -153,60 +150,19 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon blue">🤖</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">3</div>
|
||||
<div class="stat-card__label">在用模型数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon green">📦</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">12</div>
|
||||
<div class="stat-card__label">历史版本</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon orange">🎯</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">91.2%</div>
|
||||
<div class="stat-card__label">推荐准确率</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon green">⚡</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">48ms</div>
|
||||
<div class="stat-card__label">平均响应</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>模型名称</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入模型名称">
|
||||
<label>文档名称</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入文档名称">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>适用场景</label>
|
||||
<label>制作年份</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>营养计算</option>
|
||||
<option>菜品推荐</option>
|
||||
<option>慢病预警</option>
|
||||
<option>指标监测</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>状态</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>运行中</option>
|
||||
<option>已停用</option>
|
||||
<option selected>2026年</option>
|
||||
<option>2025年</option>
|
||||
<option>2024年</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
@@ -215,7 +171,9 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary" onclick="openModal()">➕ 新增版本</button>
|
||||
<button class="btn btn-primary" onclick="openModal()">+ 新增</button>
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
@@ -227,111 +185,113 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>模型名称</th>
|
||||
<th>版本号</th>
|
||||
<th>适用场景</th>
|
||||
<th>上线时间</th>
|
||||
<th>准确率</th>
|
||||
<th>响应时间</th>
|
||||
<th>状态</th>
|
||||
<th>文档名称</th>
|
||||
<th>文档描述</th>
|
||||
<th>制作机构</th>
|
||||
<th>制作人</th>
|
||||
<th>制作年份</th>
|
||||
<th>上传日期</th>
|
||||
<th>附件</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>营养摄入计算模型</td>
|
||||
<td>v2.3.1</td>
|
||||
<td>营养计算</td>
|
||||
<td>营养摄入计算模型说明书</td>
|
||||
<td>基于用户体征数据和膳食记录，计算每日营养素摄入量</td>
|
||||
<td>营养研究院</td>
|
||||
<td>张博士</td>
|
||||
<td>2026</td>
|
||||
<td>2026-02-15</td>
|
||||
<td>93.5%</td>
|
||||
<td>32ms</td>
|
||||
<td><span class="tag tag-green">运行中</span></td>
|
||||
<td class="td-actions"><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
<td><a class="link">预览</a> <a class="link">下载</a></td>
|
||||
<td><a class="link" onclick="openModal()">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>个性化推荐引擎</td>
|
||||
<td>v1.8.0</td>
|
||||
<td>菜品推荐</td>
|
||||
<td>个性化推荐引擎技术文档</td>
|
||||
<td>根据员工营养档案和饮食偏好，智能推荐每餐菜品组合</td>
|
||||
<td>AI算法中心</td>
|
||||
<td>李工</td>
|
||||
<td>2026</td>
|
||||
<td>2026-01-20</td>
|
||||
<td>88.7%</td>
|
||||
<td>65ms</td>
|
||||
<td><span class="tag tag-green">运行中</span></td>
|
||||
<td class="td-actions"><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
<td><a class="link">预览</a> <a class="link">下载</a></td>
|
||||
<td><a class="link" onclick="openModal()">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>慢病风险评估模型</td>
|
||||
<td>v1.2.4</td>
|
||||
<td>慢病预警</td>
|
||||
<td>慢病风险评估模型白皮书</td>
|
||||
<td>综合分析长期饮食数据与体检指标，评估慢性病风险等级</td>
|
||||
<td>健康管理部</td>
|
||||
<td>王主任</td>
|
||||
<td>2025</td>
|
||||
<td>2025-12-01</td>
|
||||
<td>91.2%</td>
|
||||
<td>48ms</td>
|
||||
<td><span class="tag tag-green">运行中</span></td>
|
||||
<td class="td-actions"><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
<td><a class="link">预览</a> <a class="link">下载</a></td>
|
||||
<td><a class="link" onclick="openModal()">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>营养摄入计算模型</td>
|
||||
<td>v2.2.0</td>
|
||||
<td>营养计算</td>
|
||||
<td>食材营养成分识别算法</td>
|
||||
<td>通过图像识别和数据库匹配，自动获取食材营养成分信息</td>
|
||||
<td>AI算法中心</td>
|
||||
<td>赵工</td>
|
||||
<td>2025</td>
|
||||
<td>2025-10-10</td>
|
||||
<td>90.1%</td>
|
||||
<td>38ms</td>
|
||||
<td><span class="tag tag-gray">已停用</span></td>
|
||||
<td class="td-actions"><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
<td><a class="link">预览</a> <a class="link">下载</a></td>
|
||||
<td><a class="link" onclick="openModal()">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>个性化推荐引擎</td>
|
||||
<td>v1.7.2</td>
|
||||
<td>菜品推荐</td>
|
||||
<td>膳食平衡评分模型规范</td>
|
||||
<td>基于中国居民膳食指南，对每日膳食结构进行综合评分</td>
|
||||
<td>营养研究院</td>
|
||||
<td>刘博士</td>
|
||||
<td>2025</td>
|
||||
<td>2025-09-05</td>
|
||||
<td>85.3%</td>
|
||||
<td>72ms</td>
|
||||
<td><span class="tag tag-gray">已停用</span></td>
|
||||
<td class="td-actions"><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
<td><a class="link">预览</a> <a class="link">下载</a></td>
|
||||
<td><a class="link" onclick="openModal()">编辑</a> <a class="link" style="color:var(--danger)">删除</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 12 条</span>
|
||||
<span>显示 5 条，共 5 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 新增算法版本弹窗 -->
|
||||
<!-- 新增算法模型弹窗 -->
|
||||
<div class="modal-overlay" id="modalOverlay" style="display:none;">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">新增算法版本</span>
|
||||
<span class="modal-title">新增算法模型</span>
|
||||
<span class="modal-close" onclick="closeModal()">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-grid">
|
||||
<div class="form-item">
|
||||
<label>模型名称<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入模型名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>版本号<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入版本号">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>适用场景</label>
|
||||
<select><option value="">请选择</option><option>营养计算</option><option>菜品推荐</option><option>慢病预警</option><option>指标监测</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>上线时间</label>
|
||||
<input type="date">
|
||||
<div class="form-item full">
|
||||
<label>文档名称<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入文档名称">
|
||||
</div>
|
||||
<div class="form-item full">
|
||||
<label>模型描述</label>
|
||||
<textarea placeholder="请输入模型描述"></textarea>
|
||||
<label>文档描述</label>
|
||||
<textarea placeholder="请输入文档描述"></textarea>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>制作机构<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入制作机构">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>制作人<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入制作人">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>制作年份<span class="required">*</span></label>
|
||||
<select><option value="">请选择年份</option><option>2026</option><option>2025</option><option>2024</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>上传附件</label>
|
||||
<input type="file">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -36,38 +36,17 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.mi{display:inline-block;width:20px;text-align:center;filter:grayscale(1);opacity:0.65;margin-right:2px;}
|
||||
.sidebar-item.active .mi{opacity:0.9;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:#fff;color:var(--danger);border:1px solid var(--danger);}.btn-danger:hover{background:#fff1f0;}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__actions{display:flex;gap:8px;align-items:center;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
|
||||
/* 统计卡片 */
|
||||
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
|
||||
@@ -82,27 +61,29 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
|
||||
/* 操作栏 */
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
/* 模态弹窗 */
|
||||
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.45);z-index:1000;display:flex;align-items:center;justify-content:center;}
|
||||
.modal{background:#fff;border-radius:8px;width:520px;max-height:80vh;overflow-y:auto;box-shadow:0 4px 12px rgba(0,0,0,0.15);}
|
||||
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #e8e8e8;}
|
||||
.modal-title{font-size:16px;font-weight:600;color:#262626;}
|
||||
.modal-close{font-size:22px;cursor:pointer;color:#8c8c8c;line-height:1;}
|
||||
.modal-close:hover{color:#262626;}
|
||||
.modal-body{padding:24px;}
|
||||
.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e8e8e8;}
|
||||
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
|
||||
.form-item{display:flex;flex-direction:column;gap:4px;}
|
||||
.form-item.full{grid-column:1/-1;}
|
||||
.form-item label{font-size:13px;color:#8c8c8c;}
|
||||
.form-item label .required{color:#ff4d4f;margin-left:2px;}
|
||||
.form-item input,.form-item select,.form-item textarea{height:36px;padding:0 12px;border:1px solid #e8e8e8;border-radius:4px;font-size:13px;outline:none;}
|
||||
.form-item input:focus,.form-item select:focus,.form-item textarea:focus{border-color:#1890FF;}
|
||||
.form-item textarea{height:80px;padding:8px 12px;resize:vertical;}
|
||||
/* 操作列固定右侧 */
|
||||
thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;}
|
||||
thead th:last-child{background:#FAFAFA;}
|
||||
tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
|
||||
/* 表格 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;-webkit-overflow-scrolling:touch;}
|
||||
table{width:100%;border-collapse:collapse;min-width:100%;white-space:nowrap;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}.link:hover{color:#40a9ff;}
|
||||
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
${CSS_RULE}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -146,28 +127,28 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="stat-card__icon blue">👤</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">1,280</div>
|
||||
<div class="stat-card__label">归档员工数</div>
|
||||
<div class="stat-card__label">监控员工数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon green">📊</div>
|
||||
<div class="stat-card__icon green">📅</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">38,400</div>
|
||||
<div class="stat-card__label">本月新增记录</div>
|
||||
<div class="stat-card__value">132</div>
|
||||
<div class="stat-card__label">本年已监控天数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon orange">📅</div>
|
||||
<div class="stat-card__icon orange">📊</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">12个月</div>
|
||||
<div class="stat-card__label">数据覆盖周期</div>
|
||||
<div class="stat-card__value">86.5%</div>
|
||||
<div class="stat-card__label">营养达标率</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon green">💾</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">2.4GB</div>
|
||||
<div class="stat-card__label">数据总量</div>
|
||||
<div class="stat-card__value">96.2%</div>
|
||||
<div class="stat-card__label">数据覆盖率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -175,11 +156,20 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名/工号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名或工号">
|
||||
<label>姓名/工号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入姓名或工号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>部门</label>
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>长庆油田总部</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属部门</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>研发部</option>
|
||||
@@ -190,17 +180,11 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>时间范围</label>
|
||||
<input class="filter-input" type="date">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>营养素类型</label>
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>热量</option>
|
||||
<option>蛋白质</option>
|
||||
<option>脂肪</option>
|
||||
<option>碳水</option>
|
||||
<option selected>2026年</option>
|
||||
<option>2025年</option>
|
||||
<option>2024年</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
@@ -209,93 +193,65 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary">📊 生成本月归档</button>
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
<button class="btn btn-default">🔍 高级筛选</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">员工营养数据</div>
|
||||
<div class="table-card__title">员工营养监控数据（2026年）</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>员工工号</th>
|
||||
<th>姓名</th>
|
||||
<th>部门</th>
|
||||
<th>归档周期</th>
|
||||
<th>性别</th>
|
||||
<th>年龄</th>
|
||||
<th>员工工号</th>
|
||||
<th>所属单位</th>
|
||||
<th>所属部门</th>
|
||||
<th>用餐天数</th>
|
||||
<th>用餐次数</th>
|
||||
<th>热量均值(kcal)</th>
|
||||
<th>蛋白质均值(g)</th>
|
||||
<th>脂肪均值(g)</th>
|
||||
<th>碳水均值(g)</th>
|
||||
<th>数据完整度</th>
|
||||
<th>营养达标率</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>EMP001</td>
|
||||
<td>张伟</td>
|
||||
<td>研发部</td>
|
||||
<td>2026-03</td>
|
||||
<td>2,156</td>
|
||||
<td>78.3</td>
|
||||
<td>72.1</td>
|
||||
<td>285.4</td>
|
||||
<td><span class="tag tag-green">98%</span></td>
|
||||
<td class="td-actions"><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
<td>张伟</td><td>男</td><td>32</td><td>EMP001</td><td>长庆油田总部</td><td>研发部</td>
|
||||
<td>132</td><td>386</td><td>2,156</td><td>78.3</td><td>72.1</td><td>285.4</td>
|
||||
<td><span class="tag tag-green">92%</span></td>
|
||||
<td><a class="link" href="arc-employee-detail.html?id=EMP001">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EMP002</td>
|
||||
<td>李娜</td>
|
||||
<td>市场部</td>
|
||||
<td>2026-03</td>
|
||||
<td>1,842</td>
|
||||
<td>65.2</td>
|
||||
<td>58.7</td>
|
||||
<td>241.3</td>
|
||||
<td><span class="tag tag-green">95%</span></td>
|
||||
<td class="td-actions"><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
<td>李娜</td><td>女</td><td>28</td><td>EMP002</td><td>长庆油田总部</td><td>市场部</td>
|
||||
<td>128</td><td>372</td><td>1,842</td><td>65.2</td><td>58.7</td><td>241.3</td>
|
||||
<td><span class="tag tag-green">89%</span></td>
|
||||
<td><a class="link" href="arc-employee-detail.html?id=EMP002">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EMP003</td>
|
||||
<td>王磊</td>
|
||||
<td>运营部</td>
|
||||
<td>2026-03</td>
|
||||
<td>2,380</td>
|
||||
<td>85.6</td>
|
||||
<td>89.2</td>
|
||||
<td>312.1</td>
|
||||
<td><span class="tag tag-orange">87%</span></td>
|
||||
<td class="td-actions"><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EMP004</td>
|
||||
<td>赵敏</td>
|
||||
<td>财务部</td>
|
||||
<td>2026-03</td>
|
||||
<td>1,720</td>
|
||||
<td>58.4</td>
|
||||
<td>52.3</td>
|
||||
<td>228.6</td>
|
||||
<td><span class="tag tag-green">100%</span></td>
|
||||
<td class="td-actions"><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EMP005</td>
|
||||
<td>陈刚</td>
|
||||
<td>人事部</td>
|
||||
<td>2026-03</td>
|
||||
<td>2,050</td>
|
||||
<td>72.1</td>
|
||||
<td>68.4</td>
|
||||
<td>270.2</td>
|
||||
<td>王磊</td><td>男</td><td>35</td><td>EMP003</td><td>采油一厂</td><td>运营部</td>
|
||||
<td>125</td><td>358</td><td>2,380</td><td>85.6</td><td>89.2</td><td>312.1</td>
|
||||
<td><span class="tag tag-orange">76%</span></td>
|
||||
<td class="td-actions"><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
<td><a class="link" href="arc-employee-detail.html?id=EMP003">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>赵敏</td><td>女</td><td>30</td><td>EMP004</td><td>采油二厂</td><td>财务部</td>
|
||||
<td>131</td><td>390</td><td>1,720</td><td>58.4</td><td>52.3</td><td>228.6</td>
|
||||
<td><span class="tag tag-green">95%</span></td>
|
||||
<td><a class="link" href="arc-employee-detail.html?id=EMP004">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>陈刚</td><td>男</td><td>41</td><td>EMP005</td><td>长庆油田总部</td><td>人事部</td>
|
||||
<td>120</td><td>345</td><td>2,050</td><td>72.1</td><td>68.4</td><td>270.2</td>
|
||||
<td><span class="tag tag-orange">78%</span></td>
|
||||
<td><a class="link" href="arc-employee-detail.html?id=EMP005">查看详情</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -315,46 +271,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 员工营养数据弹窗 -->
|
||||
<div class="modal-overlay" id="modalOverlay" style="display:none;">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">员工营养数据</span>
|
||||
<span class="modal-close" onclick="closeModal()">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-grid">
|
||||
<div class="form-item">
|
||||
<label>员工工号<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入员工工号">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>姓名<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入姓名">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>部门</label>
|
||||
<select><option>请选择</option><option>研发部</option><option>市场部</option><option>运营部</option><option>财务部</option><option>人事部</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>归档周期</label>
|
||||
<input type="date">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏交互脚本 -->
|
||||
<script>
|
||||
// 模态弹窗控制
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
// 侧边栏菜单项点击高亮
|
||||
document.querySelectorAll('.sidebar-item').forEach(function(item) {
|
||||
item.addEventListener('click', function() {
|
||||
@@ -362,6 +279,23 @@ document.querySelectorAll('.sidebar-item').forEach(function(item) {
|
||||
this.classList.add('active');
|
||||
});
|
||||
});
|
||||
// URL参数回显到筛选框
|
||||
(function(){
|
||||
var params = new URLSearchParams(location.search);
|
||||
var unit = params.get('unit');
|
||||
var dept = params.get('dept');
|
||||
var selects = document.querySelectorAll('.filter-select');
|
||||
if(unit && selects[0]){
|
||||
for(var i=0;i<selects[0].options.length;i++){
|
||||
if(selects[0].options[i].text === unit){ selects[0].selectedIndex = i; break; }
|
||||
}
|
||||
}
|
||||
if(dept && selects[1]){
|
||||
for(var i=0;i<selects[1].options.length;i++){
|
||||
if(selects[1].options[i].text === dept){ selects[1].selectedIndex = i; break; }
|
||||
}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -80,6 +80,13 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
.tag-gray{background:#F5F5F5;color:#999;}
|
||||
/* 链接 */
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}.link:hover{color:#40a9ff;}
|
||||
/* TAB栏 */
|
||||
.tab-bar{display:flex;gap:0;padding:0 24px;border-bottom:1px solid var(--border);}
|
||||
.tab-item{padding:12px 20px;font-size:var(--font-sm);cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;font-weight:500;}
|
||||
.tab-item:hover{color:var(--primary);}
|
||||
.tab-item.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;}
|
||||
.tab-panel{display:none;}
|
||||
.tab-panel.active{display:block;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
@@ -102,10 +109,6 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
.form-item input,.form-item select,.form-item textarea{height:36px;padding:0 12px;border:1px solid #e8e8e8;border-radius:4px;font-size:13px;outline:none;}
|
||||
.form-item input:focus,.form-item select:focus,.form-item textarea:focus{border-color:#1890FF;}
|
||||
.form-item textarea{height:80px;padding:8px 12px;resize:vertical;}
|
||||
/* 操作列固定右侧 */
|
||||
thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;}
|
||||
thead th:last-child{background:#FAFAFA;}
|
||||
tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -143,62 +146,31 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<!-- 主内容区域 -->
|
||||
<div class="main">
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon blue">🏢</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">12</div>
|
||||
<div class="stat-card__label">归档单位数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon green">📋</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">36份</div>
|
||||
<div class="stat-card__label">本季度报表</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon orange">📈</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">82.4%</div>
|
||||
<div class="stat-card__label">平均达标率</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon green">📅</div>
|
||||
<div class="stat-card__info">
|
||||
<div class="stat-card__value">今日</div>
|
||||
<div class="stat-card__label">最近更新</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TAB切换 -->
|
||||
<div class="tab-bar" style="background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:var(--shadow-sm);margin-bottom:0;">
|
||||
<div class="tab-item active" onclick="switchTab(0)">二级单位</div>
|
||||
<div class="tab-item" onclick="switchTab(1)">三级单位</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-bar" style="border-radius:0 0 var(--radius-md) var(--radius-md);margin-top:0;">
|
||||
<div class="filter-item">
|
||||
<label>单位名称</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入单位名称">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>报表周期</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>日报</option>
|
||||
<option>周报</option>
|
||||
<option>月报</option>
|
||||
<option>季报</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
<option>油田总部机关</option>
|
||||
<option>勘探开发研究院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>报表类型</label>
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>日报</option>
|
||||
<option>周报</option>
|
||||
<option>月报</option>
|
||||
<option>季报</option>
|
||||
<option selected>2026年</option>
|
||||
<option>2025年</option>
|
||||
<option>2024年</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
@@ -207,7 +179,6 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary">📊 生成报表</button>
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
</div>
|
||||
@@ -215,136 +186,94 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">单位报表数据</div>
|
||||
<div class="table-card__title">单位营养监控数据（2026年）</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>单位名称</th>
|
||||
<th>报表类型</th>
|
||||
<th>统计周期</th>
|
||||
<th>就餐人次</th>
|
||||
<th>热量达标率</th>
|
||||
<th>蛋白质达标率</th>
|
||||
<th>三减达标率</th>
|
||||
<th>生成时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>研发部</td>
|
||||
<td><span class="tag tag-blue">月报</span></td>
|
||||
<td>2026-03</td>
|
||||
<td>3,840</td>
|
||||
<td>88%</td>
|
||||
<td>85%</td>
|
||||
<td>79%</td>
|
||||
<td>2026-04-01</td>
|
||||
<td class="td-actions"><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>市场部</td>
|
||||
<td><span class="tag tag-blue">月报</span></td>
|
||||
<td>2026-03</td>
|
||||
<td>2,160</td>
|
||||
<td>82%</td>
|
||||
<td>78%</td>
|
||||
<td>83%</td>
|
||||
<td>2026-04-01</td>
|
||||
<td class="td-actions"><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>运营部</td>
|
||||
<td><span class="tag tag-gray">周报</span></td>
|
||||
<td>第14周</td>
|
||||
<td>960</td>
|
||||
<td>75%</td>
|
||||
<td>72%</td>
|
||||
<td>68%</td>
|
||||
<td>2026-04-07</td>
|
||||
<td class="td-actions"><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>财务部</td>
|
||||
<td><span class="tag tag-orange">季报</span></td>
|
||||
<td>2026-Q1</td>
|
||||
<td>1,440</td>
|
||||
<td>91%</td>
|
||||
<td>89%</td>
|
||||
<td>86%</td>
|
||||
<td>2026-04-01</td>
|
||||
<td class="td-actions"><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>人事部</td>
|
||||
<td><span class="tag tag-blue">月报</span></td>
|
||||
<td>2026-03</td>
|
||||
<td>720</td>
|
||||
<td>85%</td>
|
||||
<td>81%</td>
|
||||
<td>77%</td>
|
||||
<td>2026-04-01</td>
|
||||
<td class="td-actions"><a class="link" onclick="openModal()">查看详情</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 36 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 单位报表数据弹窗 -->
|
||||
<div class="modal-overlay" id="modalOverlay" style="display:none;">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">单位报表数据</span>
|
||||
<span class="modal-close" onclick="closeModal()">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-grid">
|
||||
<div class="form-item">
|
||||
<label>单位名称<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入单位名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>报表类型</label>
|
||||
<select><option>请选择</option><option>日报</option><option>周报</option><option>月报</option><option>季报</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>统计开始日期</label>
|
||||
<input type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>统计结束日期</label>
|
||||
<input type="date">
|
||||
</div>
|
||||
<!-- 二级单位表格 -->
|
||||
<div class="tab-panel active" id="tab-0">
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>单位名称</th>
|
||||
<th>在册人数</th>
|
||||
<th>用餐人数</th>
|
||||
<th>用餐总次数</th>
|
||||
<th>人均年用餐数</th>
|
||||
<th>热量均值(kcal)</th>
|
||||
<th>人均营养评分</th>
|
||||
<th>营养达标率</th>
|
||||
<th>数据覆盖率</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>采油一厂</td><td>420</td><td><a class="link" href="arc-employee.html?unit=采油一厂">398</a></td><td>52,680</td><td>132</td><td>2,180</td><td>82</td><td><span class="tag tag-green">91%</span></td><td>94.8%</td></tr>
|
||||
<tr><td>采油二厂</td><td>380</td><td><a class="link" href="arc-employee.html?unit=采油二厂">356</a></td><td>46,920</td><td>132</td><td>2,210</td><td>79</td><td><span class="tag tag-green">88%</span></td><td>93.7%</td></tr>
|
||||
<tr><td>采气一厂</td><td>260</td><td><a class="link" href="arc-employee.html?unit=采气一厂">245</a></td><td>31,850</td><td>130</td><td>2,150</td><td>72</td><td><span class="tag tag-orange">79%</span></td><td>94.2%</td></tr>
|
||||
<tr><td>油田总部机关</td><td>150</td><td><a class="link" href="arc-employee.html?unit=油田总部机关">148</a></td><td>19,240</td><td>130</td><td>1,980</td><td>86</td><td><span class="tag tag-green">93%</span></td><td>98.7%</td></tr>
|
||||
<tr><td>勘探开发研究院</td><td>70</td><td><a class="link" href="arc-employee.html?unit=勘探开发研究院">65</a></td><td>8,450</td><td>130</td><td>2,050</td><td>78</td><td><span class="tag tag-green">86%</span></td><td>92.9%</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 8 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||||
<button class="btn btn-primary">确定</button>
|
||||
|
||||
<!-- 三级单位表格 -->
|
||||
<div class="tab-panel" id="tab-1">
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>部门名称</th>
|
||||
<th>所属二级单位</th>
|
||||
<th>在册人数</th>
|
||||
<th>用餐人数</th>
|
||||
<th>用餐总次数</th>
|
||||
<th>人均年用餐数</th>
|
||||
<th>热量均值(kcal)</th>
|
||||
<th>人均营养评分</th>
|
||||
<th>营养达标率</th>
|
||||
<th>数据覆盖率</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>研发部</td><td>采油一厂</td><td>85</td><td><a class="link" href="arc-employee.html?unit=采油一厂&dept=研发部">82</a></td><td>10,824</td><td>132</td><td>2,156</td><td>84</td><td><span class="tag tag-green">92%</span></td><td>96.5%</td></tr>
|
||||
<tr><td>运营部</td><td>采油一厂</td><td>120</td><td><a class="link" href="arc-employee.html?unit=采油一厂&dept=运营部">112</a></td><td>14,560</td><td>130</td><td>2,380</td><td>71</td><td><span class="tag tag-orange">76%</span></td><td>93.3%</td></tr>
|
||||
<tr><td>市场部</td><td>采油一厂</td><td>95</td><td><a class="link" href="arc-employee.html?unit=采油一厂&dept=市场部">90</a></td><td>11,700</td><td>130</td><td>1,842</td><td>80</td><td><span class="tag tag-green">89%</span></td><td>94.7%</td></tr>
|
||||
<tr><td>财务部</td><td>采油二厂</td><td>60</td><td><a class="link" href="arc-employee.html?unit=采油二厂&dept=财务部">58</a></td><td>7,540</td><td>130</td><td>1,720</td><td>87</td><td><span class="tag tag-green">95%</span></td><td>96.7%</td></tr>
|
||||
<tr><td>人事部</td><td>采油二厂</td><td>45</td><td><a class="link" href="arc-employee.html?unit=采油二厂&dept=人事部">42</a></td><td>5,460</td><td>130</td><td>2,050</td><td>73</td><td><span class="tag tag-orange">78%</span></td><td>93.3%</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>显示 5 条，共 24 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">...</button>
|
||||
<button class="page-btn">5</button>
|
||||
<button class="page-btn">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏交互脚本 -->
|
||||
<script>
|
||||
// 模态弹窗控制
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
// 侧边栏当前页高亮
|
||||
/* TAB切换 */
|
||||
function switchTab(idx) {
|
||||
document.querySelectorAll('.tab-item').forEach(function(t, i) { t.classList.toggle('active', i === idx); });
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p, i) { p.classList.toggle('active', i === idx); });
|
||||
}
|
||||
/* 侧边栏当前页高亮 */
|
||||
(function(){
|
||||
var current = location.pathname.split('/').pop();
|
||||
document.querySelectorAll('.sidebar-item').forEach(function(item){
|
||||
|
||||
Reference in New Issue
Block a user