132 lines
4.9 KiB
HTML
132 lines
4.9 KiB
HTML
<!-- 食品溯源页 -->
|
|
<style>
|
|
.clt-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px 16px;background:#fff;border-radius:var(--g-radius);box-shadow:var(--g-shadow-sm);flex-wrap:wrap;}
|
|
.clt-toolbar .g-select,.clt-toolbar .g-input{height:34px;font-size:13px;}
|
|
.clt-toolbar .g-input{min-width:200px;}
|
|
.clt-mono{font-family:'Courier New',monospace;font-size:12px;color:var(--g-text-secondary);}
|
|
.clt-trace-code{font-family:'Courier New',monospace;font-size:12px;color:var(--primary);cursor:pointer;}
|
|
.clt-trace-code:hover{text-decoration:underline;}
|
|
</style>
|
|
|
|
<!-- 筛选栏 -->
|
|
<div class="clt-toolbar">
|
|
<select class="g-select">
|
|
<option>全部分类</option>
|
|
<option>肉类</option>
|
|
<option>蔬菜</option>
|
|
<option>水产</option>
|
|
<option>调料</option>
|
|
<option>粮油</option>
|
|
</select>
|
|
<select class="g-select">
|
|
<option>全部供应商</option>
|
|
<option>鑫达肉业</option>
|
|
<option>湖北水产</option>
|
|
<option>绿源农场</option>
|
|
<option>鲁花集团</option>
|
|
<option>贵州老干妈</option>
|
|
<option>五常米业</option>
|
|
</select>
|
|
<input class="g-input" placeholder="搜索食材名称" style="margin-left:auto;">
|
|
</div>
|
|
|
|
<!-- 表格 -->
|
|
<div class="g-card">
|
|
<table class="g-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="g-tag g-tag-red">肉类</span></td>
|
|
<td>鑫达肉业</td>
|
|
<td>山东</td>
|
|
<td class="clt-mono">BN20260210001</td>
|
|
<td>2026-02-10</td>
|
|
<td>2026-02-17</td>
|
|
<td><span class="clt-trace-code">TC80261001</span></td>
|
|
<td><a class="g-action" href="javascript:;">查看</a><a class="g-action" href="javascript:;" style="margin-left:8px;">打印</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>小龙虾</td>
|
|
<td><span class="g-tag g-tag-blue">水产</span></td>
|
|
<td>湖北水产</td>
|
|
<td>湖北</td>
|
|
<td class="clt-mono">BN20260209003</td>
|
|
<td>2026-02-09</td>
|
|
<td>2026-02-14</td>
|
|
<td><span class="clt-trace-code">TC80261002</span></td>
|
|
<td><a class="g-action" href="javascript:;">查看</a><a class="g-action" href="javascript:;" style="margin-left:8px;">打印</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>生菜</td>
|
|
<td><span class="g-tag g-tag-green">蔬菜</span></td>
|
|
<td>绿源农场</td>
|
|
<td>北京</td>
|
|
<td class="clt-mono">BN20260213001</td>
|
|
<td>2026-02-13</td>
|
|
<td>2026-02-18</td>
|
|
<td><span class="clt-trace-code">TC80261003</span></td>
|
|
<td><a class="g-action" href="javascript:;">查看</a><a class="g-action" href="javascript:;" style="margin-left:8px;">打印</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>花生油</td>
|
|
<td><span class="g-tag g-tag-orange">粮油</span></td>
|
|
<td>鲁花集团</td>
|
|
<td>山东</td>
|
|
<td class="clt-mono">BN20260110005</td>
|
|
<td>2026-01-10</td>
|
|
<td>2027-01-10</td>
|
|
<td><span class="clt-trace-code">TC80261004</span></td>
|
|
<td><a class="g-action" href="javascript:;">查看</a><a class="g-action" href="javascript:;" style="margin-left:8px;">打印</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>老干妈</td>
|
|
<td><span class="g-tag g-tag-purple">调料</span></td>
|
|
<td>贵州老干妈</td>
|
|
<td>贵州</td>
|
|
<td class="clt-mono">BN20260205008</td>
|
|
<td>2026-02-05</td>
|
|
<td>2027-02-05</td>
|
|
<td><span class="clt-trace-code">TC80261005</span></td>
|
|
<td><a class="g-action" href="javascript:;">查看</a><a class="g-action" href="javascript:;" style="margin-left:8px;">打印</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>大米</td>
|
|
<td><span class="g-tag g-tag-orange">粮油</span></td>
|
|
<td>五常米业</td>
|
|
<td>黑龙江</td>
|
|
<td class="clt-mono">BN20260201010</td>
|
|
<td>2026-02-01</td>
|
|
<td>2026-08-01</td>
|
|
<td><span class="clt-trace-code">TC80261006</span></td>
|
|
<td><a class="g-action" href="javascript:;">查看</a><a class="g-action" href="javascript:;" style="margin-left:8px;">打印</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="g-pagination" style="margin-top:16px;">
|
|
<button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
|
|
<button class="g-page-btn active">1</button>
|
|
<button class="g-page-btn">2</button>
|
|
<button class="g-page-btn">3</button>
|
|
<button class="g-page-btn"><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
|
|
</div>
|
|
|
|
<script>
|
|
if(typeof lucide!=='undefined'){lucide.createIcons();}
|
|
</script>
|