小草牛肉坊_H5/trace.html · 约 3148 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8"/>
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
6<title>溯源中心 · 小草牛肉坊</title>
7<link rel="stylesheet" href="style.css"/>
8</head>
9<body>
10
11<header class="header"><a class="back" onclick="history.back()">‹</a><h1>溯源中心</h1><span class="right"></span></header>
12<div class="scan-box">
13 <div class="sb-emoji">📷</div>
14 <div class="sb-title">扫一扫 · 全程溯源</div>
15 <div class="sb-sub">扫描包装袋上的溯源二维码，查看牛只来源 / 检疫 / 冷链轨迹</div>
16 <div class="sb-btn" data-toast="相机已开启，请对准二维码">扫码溯源</div>
17</div>
18<div class="trace-batch">
19 <div class="tb-no">当前批次：20260812-A018</div>
20 <div class="tb-name">🥩 秘制酱香牛腱 · 批次 0812</div>
21</div>
22<div class="section-title">🏞️ 产地与原料</div>
23<div class="trace-grid">
24 <div class="trace-item">养殖基地<b>内蒙古锡林郭勒草原牧场</b></div>
25 <div class="trace-item">牛只品种<b>西门塔尔牛</b></div>
26 <div class="trace-item">屠宰日期<b>2026-08-10</b></div>
27 <div class="trace-item">检疫证号<b>陕检字2026-08121</b></div>
28 <div class="trace-item">加工工艺<b>古法 12 小时卤制 · 真空锁鲜</b></div>
29 <div class="trace-item">保质期<b>常温 180 天 / 冷藏 9 个月</b></div>
30</div>
31<div class="section-title">🚚 冷链轨迹</div>
32<div class="timeline" id="tlList"></div>
33<div class="section-title">🧪 检验报告（第三方）</div>
34<div class="card" style="margin-top:0">
35 <table class="report-table" id="rpTable"></table>
36</div>
37<div class="card" style="text-align:center">
38 <div style="font-size:13px;font-weight:700;margin-bottom:6px">📢 品质承诺</div>
39 <div style="font-size:12px;color:#9c8b7c;line-height:1.8">拒绝注水牛肉 · 拒绝来源不明肉 · 拒绝合成肉<br/>假一赔十 · 全程可溯 · 安心每一口</div>
40</div>
41
42
43<nav class="tabbar"><a class=" active" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="category.html"><span class="icon">🍖</span>分类</a><a class="" href="cart.html"><span class="icon">🛒</span>购物车</a><a class="" href="member.html"><span class="icon">👑</span>会员</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
44<script src="data.js"></script>
45<script>
46 var tl = document.getElementById('tlList');
47 var h = '';
48 window.DATA.timeline.forEach(function (t) {
49 var cls = t.now ? 'now' : (t.done ? 'done' : '');
50 h += '<div class="tl-item ' + cls + '"><div class="tl-dot"></div><div>'
51 + '<div class="tl-title">' + t.title + '</div><div class="tl-time">' + t.time + '</div></div></div>';
52 });
53 tl.innerHTML = h;
54 var rp = document.getElementById('rpTable');
55 var h2 = '';
56 window.DATA.reportRows.forEach(function (r) {
57 h2 += '<tr><td>' + r[0] + '</td><td>' + r[1] + '</td><td>' + r[2] + '</td></tr>';
58 });
59 rp.innerHTML = h2;
60</script>
61<script src="app.js"></script>
62</body>
63</html>