💻 代码预览 · 小草生鲜到家

1<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>分类 · 小草生鲜到家</title><link rel="stylesheet" href="style.css"></head><body>
2<div class="header"><span class="back" onclick="history.back()">‹</span><h1>全部分类</h1><span class="right">🔍</span></div>
3<div class="cat-wrap">
4  <div class="cat-side" id="cat-side"></div>
5  <div class="cat-main" id="cat-main"></div>
6</div>
7<div class="cart-bar" id="cart-bar" style="display:none" onclick="location.href='cart.html'">
8  <span class="cb-icon">🛒<span class="cb-count" id="cb-count" style="display:none">0</span></span>
9  <span class="cb-total">合计 <b id="cb-total">¥0.00</b></span>
10  <span class="cb-btn">去结算</span>
11</div>
12<script src="data.js"></script><script src="app.js"></script>
13<script>
14let curCat='all';
15function renderSide(){
16  $('#cat-side').innerHTML=CATS.map(c=>'<a class="'+(c.id===curCat?'active':'')+'" data-cat="'+c.id+'">'+c.name+'</a>').join('');
17  $$('#cat-side a').forEach(a=>a.onclick=()=>{curCat=a.dataset.cat;renderSide();renderMain()});
18}
19function renderMain(){
20  const list=GOODS.filter(g=>curCat==='all'||g.cat===curCat);
21  $('#cat-main').innerHTML='<div style="display:flex;justify-content:space-between;font-size:12px;color:#93a58b;margin-bottom:10px"><span>共'+list.length+'件商品</span><span>按销量 ▾</span></div>'+
22  list.map(g=>`
23    <div class="menu-item" onclick="location.href='detail.html?id=${g.id}'">
24      <div class="mi-img">${g.emoji}</div>
25      <div class="mi-body">
26        <div class="mi-name">${g.name} ${g.tag==='hot'?'<span class="badge badge-hot">热销</span>':''}${g.tag==='new'?'<span class="badge badge-new">新品</span>':''}${g.tag==='sale'?'<span class="badge badge-sale">特价</span>':''}</div>
27        <div class="mi-desc">${g.desc}</div><div class="mi-spec">${g.origin}</div>
28        <div class="mi-foot"><span class="mi-price"><em>¥</em>${g.price}<span class="unit">${g.unit}</span></span><span class="gc-add" onclick="event.stopPropagation();addToCart(${g.id})">+</span></div>
29      </div>
30    </div>`).join('')||'<div class="empty">暂无商品</div>';
31}
32renderSide();renderMain();
33function refreshBar(){
34  const c=cartCount();const bar=$('#cart-bar');
35  bar.style.display=c?'flex':'none';
36  $('#cb-count').textContent=c;$('#cb-count').style.display=c?'flex':'none';
37  $('#cb-total').textContent=fmt(cartTotal());
38}
39refreshBar();
40</script>
41</body></html>