activities.html · 约 2475 字符
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<div class="app">11 <div class="topbar">12 <div class="brand"><span class="logo">👍</span> 拇指校友活动网</div>13 <div class="search">🔍 <input id="kw" placeholder="搜索活动关键词"></div>14 </div>1516 <div class="filters" id="cats">17 <div class="f on" data-c="全部">全部</div>18 <div class="f" data-c="线上">线上</div>19 <div class="f" data-c="线下">线下</div>20 <div class="f" data-c="热门">热门</div>21 <div class="f" data-c="招聘">招聘</div>22 <div class="f" data-c="运动">运动</div>23 <div class="f" data-c="公益">公益</div>24 <div class="f" data-c="聚会">聚会</div>25 <div class="f" data-c="讲座">讲座</div>26 </div>2728 <div id="list"></div>29</div>30<div class="tabbar" id="tabbar"></div>3132<script src="data.js"></script>33<script src="app.js"></script>34<script>35var curCat = '全部', curKw = '';36function acard(a){37 return '<a class="acard" href="activity_detail.html?id='+a.id+'">'+38 '<div class="cover" style="background:'+a.grad+'">'+a.emoji+'</div>'+39 '<div class="body"><div class="tt">'+esc(a.title)+'</div>'+40 '<div class="meta"><span class="chip '+(a.tag==="热门"?"hot":"")+'">'+a.tag+'</span>'+41 '<span class="m">🕒 '+a.time+'</span></div>'+42 '<div class="foot"><span class="join">已报 '+a.joined+'/'+a.limit+' 人</span>'+43 '<span class="fee'+(a.fee>0?'':' free')+'">'+(a.fee>0?'¥'+a.fee:'免费')+'</span></div></div></a>';44}45function render(){46 var list = A_BY_CAT(curCat);47 if (curKw){ list = list.filter(function(a){ return a.title.indexOf(curKw)>=0 || a.desc.indexOf(curKw)>=0; }); }48 document.getElementById('list').innerHTML = list.length49 ? list.map(acard).join('')50 : '<div class="empty">没有匹配的活动，换个关键词试试～</div>';51}52document.getElementById('cats').addEventListener('click', function(e){53 var f = e.target.closest('.f'); if(!f) return;54 [].forEach.call(this.children, function(c){ c.classList.remove('on'); });55 f.classList.add('on'); curCat = f.dataset.c; render();56});57document.getElementById('kw').addEventListener('input', function(){ curKw = this.value.trim(); render(); });58render(); renderTab('act');59</script>60</body>61</html>62