directory.html · 约 3059 字符
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="navbar"><span class="back" onclick="location.href='index.html'">‹</span>12 <span class="ttl">校友通讯录</span></div>1314 <div style="padding:10px 14px 0;font-size:12px;color:var(--muted)">共 '+ALUMNI.length+' 位校友 · 按届别 / 专业 / 地域筛选</div>1516 <div class="filters" id="f1">17 <div class="f on" data-k="year" data-v="全部">全部届别</div>18 <div class="f" data-k="year" data-v="2015级">2015级</div>19 <div class="f" data-k="year" data-v="2016级">2016级</div>20 <div class="f" data-k="year" data-v="2017级">2017级</div>21 <div class="f" data-k="year" data-v="2018级">2018级</div>22 <div class="f" data-k="year" data-v="2019级">2019级</div>23 <div class="f" data-k="year" data-v="2020级">2020级</div>24 <div class="f" data-k="year" data-v="2021级">2021级</div>25 </div>26 <div class="filters" id="f2" style="padding-top:0">27 <div class="f on" data-k="city" data-v="全部">全部地域</div>28 <div class="f" data-k="city" data-v="北京">北京</div>29 <div class="f" data-k="city" data-v="上海">上海</div>30 <div class="f" data-k="city" data-v="深圳">深圳</div>31 <div class="f" data-k="city" data-v="广州">广州</div>32 <div class="f" data-k="city" data-v="杭州">杭州</div>33 <div class="f" data-k="city" data-v="成都">成都</div>34 </div>3536 <div id="list"></div>37</div>38<div class="tabbar" id="tabbar"></div>3940<script src="data.js"></script>41<script src="app.js"></script>42<script>43var f = { year:'全部', city:'全部' };44function alcard(a){45 return '<div class="alcard"><div class="av" style="background:'+a.av+'">'+a.name[0]+'</div>'+46 '<div style="flex:1;min-width:0"><div class="nm">'+a.name+'</div>'+47 '<div class="info">'+a.year+' · '+a.major+' · '+a.city+'</div>'+48 '<div><span class="tag">'+a.tag+'</span></div>'+49 '<div class="info" style="margin-top:6px">'+esc(a.sign)+'</div></div>'+50 '<button class="btn btn-ghost" style="flex:0 0 auto;align-self:center" onclick="toast(\'已发送好友申请\')">加好友</button></div>';51}52function render(){53 var list = ALUMNI.filter(function(a){54 return (f.year==='全部'||a.year===f.year) && (f.city==='全部'||a.city===f.city);55 });56 document.getElementById('list').innerHTML = list.length57 ? list.map(alcard).join('')58 : '<div class="empty">没有匹配的校友，试试调整筛选条件</div>';59}60function bind(id){61 document.getElementById(id).addEventListener('click', function(e){62 var x=e.target.closest('.f'); if(!x) return;63 [].forEach.call(this.children,function(c){c.classList.remove('on');}); x.classList.add('on');64 f[x.dataset.k]=x.dataset.v; render();65 });66}67bind('f1'); bind('f2'); render(); renderTab('dir');68</script>69</body>70</html>71