小草二手闲置_H5/list.html · 约 2281 字符
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="filter-row" id="cat-row">
4 ${CATS.map(c=>'<span class="filter-chip'+(c.id==='all'?' sel':'')+'" data-id="'+c.id+'">'+c.emoji+' '+c.name+'</span>').join('')}
5</div>
6<div class="filter-row" style="margin-top:8px">
7 <span class="filter-chip sel">综合</span><span class="filter-chip">最新发布</span><span class="filter-chip">价格↓</span><span class="filter-chip">距离近</span><span class="filter-chip">仅看同城</span>
8</div>
9<div id="goods-list"></div>
10<div style="height:80px"></div>
11<div class="tabbar">
12 <a href="index.html"><span class="icon">🏠</span>首页</a>
13 <a class="active" href="list.html"><span class="icon">🧭</span>逛逛</a>
14 <a href="sell.html"><span class="icon">➕</span>发布</a>
15 <a href="orders.html"><span class="icon">📋</span>订单</a>
16 <a href="mine.html"><span class="icon">👤</span>我的</a>
17</div>
18<script src="data.js"></script><script src="app.js"></script>
19<script>
20let curCat='all';
21function render(){
22 const list=curCat==='all'?GOODS:GOODS.filter(g=>g.cat===curCat);
23 $('#goods-list').innerHTML=list.map(g=>`
24 <div class="goods-card" style="margin-bottom:10px" onclick="location.href='detail.html?id=${g.id}'">
25 <div class="gc-img">${g.emoji}${g.hot?'<span class="badge badge-hot gc-tag">同城</span>':''}</div>
26 <div class="gc-body"><div class="gc-name">${g.name}</div><div class="gc-desc">${g.cond} · 距你${g.dist} · 原价 ${fmt(g.origin)}</div>
27 <div class="gc-foot"><span class="gc-price"><em>¥</em>${g.price}</span><span class="gc-meta">${g.tags.join(' / ')}</span></div></div>
28 </div>`).join('')||'<div class="empty">该分类暂无闲置</div>';
29}
30$$('#cat-row span').forEach(c=>c.onclick=()=>{curCat=c.dataset.id;$$('#cat-row span').forEach(x=>x.classList.remove('sel'));c.classList.add('sel');render()});
31render();
32</script>
33</body></html>