activity_detail.html · 约 4261 字符
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='activities.html'">‹</span>12 <span class="ttl">活动详情</span></div>1314 <div class="detail-hero" id="hero"><div class="ov"></div><div class="ht" id="ht"></div></div>1516 <div class="ky" id="ky"></div>1718 <div class="sect"><div class="lab">📖 活动介绍</div><div id="desc" style="font-size:13.5px;line-height:1.7;color:#444"></div></div>1920 <div class="sect"><div class="lab">🗓️ 行程安排</div><div class="timeline" id="agenda"></div></div>2122 <div class="sect"><div class="lab">✅ 已报名校友</div>23 <div class="avatars" id="avatars"></div></div>2425 <div class="sect"><div class="lab">📷 活动相册</div><div class="pimgs" id="gallery" style="display:flex;gap:8px"></div></div>2627 <div class="sect"><div class="lab">💬 活动评论</div><div id="comments"></div></div>28</div>2930<div class="fixbar" id="fixbar"></div>3132<script src="data.js"></script>33<script src="app.js"></script>34<script>35var a = A_GET(param('id')) || ACTIVITIES[0];36document.getElementById('hero').style.background = a.grad;37document.getElementById('ht').innerHTML = '<div class="big">'+a.emoji+'</div>'+38 '<div class="dt">'+esc(a.title)+'</div><div class="ds">'+a.cat+' · '+a.tag+'</div>';39document.getElementById('ky').innerHTML =40 '<div class="k"><div class="ki">🕒</div><div><div class="kl">时间</div><div class="kv">'+a.time+'</div></div></div>'+41 '<div class="k"><div class="ki">📍</div><div><div class="kl">地点</div><div class="kv">'+a.location+'</div></div></div>'+42 '<div class="k"><div class="ki">👥</div><div><div class="kl">名额</div><div class="kv">'+a.joined+' / '+a.limit+'</div></div></div>'+43 '<div class="k"><div class="ki">💰</div><div><div class="kl">费用</div><div class="kv">'+(a.fee>0?'¥'+a.fee:'免费')+'</div></div></div>';44document.getElementById('desc').textContent = a.desc;45document.getElementById('agenda').innerHTML = a.agenda.map(function(g){46 return '<div class="tl"><div class="tt">'+g.t+'</div><div class="tx">'+esc(g.x)+'</div></div>';47}).join('');48document.getElementById('avatars').innerHTML = a.joinedNames.map(function(n,i){49 var colors=['#6366f1','#0ea5e9','#f59e0b','#10b981','#ec4899','#8b5cf6'];50 return '<div class="av" style="background:'+colors[i%colors.length]+'">'+n+'</div>';51}).join('') + '<div class="av" style="background:#eef1f5;color:#888">+'+(a.joined-a.joinedNames.length)+'</div>';52document.getElementById('gallery').innerHTML = a.gallery.map(function(e){53 return '<div class="im" style="width:72px;height:72px;border-radius:10px;background:'+a.grad+';display:flex;align-items:center;justify-content:center;font-size:34px">'+e+'</div>';54}).join('');55document.getElementById('comments').innerHTML = a.comments.map(function(c){56 return '<div class="cmt"><div class="av" style="background:#6366f1">'+c.u[0]+'</div>'+57 '<div><div class="nm">'+esc(c.u)+'</div><div class="tx">'+esc(c.t)+'</div>'+58 '<div class="lk">👍 '+c.lk+'</div></div></div>';59}).join('') || '<div class="empty">还没有评论，抢沙发～</div>';6061function renderFix(){62 var signed = isSigned(a.id);63 document.getElementById('fixbar').innerHTML = signed64 ? '<button class="btn btn-ghost btn-lg" style="flex:1" onclick="cancelSign()">已报名 · 取消</button>'+65 '<button class="btn btn-pri btn-lg" style="flex:1" onclick="showQR()">📱 签到二维码</button>'66 : '<button class="btn btn-acc btn-lg btn-block" onclick="doSign()">'+(a.fee>0?('立即报名 · ¥'+a.fee):'立即报名 · 免费')+'</button>';67}68function doSign(){69 toggleSign(a.id); toast('报名成功！已加入「我的活动」');70 var el=document.querySelector('.join'); if(el) el.textContent='已报 '+(a.joined+1)+'/'+a.limit;71 renderFix();72}73function cancelSign(){ toggleSign(a.id); toast('已取消报名'); renderFix(); }74function showQR(){ toast('请向现场工作人员出示此码签到'); }75renderFix();76</script>77</body>78</html>79