💻 代码预览 · 小草兼职通

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>
8  <span class="filter-chip">日结</span>
9  <span class="filter-chip">周结</span>
10  <span class="filter-chip">距离最近</span>
11  <span class="filter-chip">薪资最高</span>
12</div>
13<div id="job-list"></div>
14<div style="height:80px"></div>
15<div class="tabbar">
16  <a href="index.html"><span class="icon">🏠</span>首页</a>
17  <a class="active" href="jobs.html"><span class="icon">💼</span>岗位</a>
18  <a href="apps.html"><span class="icon">📋</span>报名</a>
19  <a href="wallet.html"><span class="icon">💰</span>钱包</a>
20  <a href="mine.html"><span class="icon">👤</span>我的</a>
21</div>
22<script src="data.js"></script><script src="app.js"></script>
23<script>
24let curCat='all';
25function render(){
26  const list=curCat==='all'?JOBS:JOBS.filter(j=>j.cat===curCat);
27  $('#job-list').innerHTML=list.map(j=>`
28    <div class="job-card" onclick="location.href='detail.html?id=${j.id}'">
29      <div class="jc-head">
30        <div>
31          <div class="jc-name">${j.emoji} ${j.name} ${j.tag==='hot'?'<span class="badge badge-hot">急招</span>':j.tag==='new'?'<span class="badge badge-new">新岗位</span>':''}</div>
32          <div class="jc-meta"><span>📍 ${j.dist}</span><span>🕐 ${j.time}</span><span>${j.company}</span></div>
33        </div>
34        <div class="jc-salary"><em>¥</em>${j.salary}<small style="font-size:11px;font-weight:400;color:#b08a6c">/${j.unit}</small></div>
35      </div>
36      <div class="jc-tags"><span class="tag">${j.pay}</span><span class="tag">缺${j.count}人</span></div>
37      <div class="jc-foot"><span>${j.req}</span><span class="jc-apply">查看详情</span></div>
38    </div>`).join('');
39}
40$$('#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()});
41render();
42</script>
43</body></html>