r74/detail.html · 约 2697 字符
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 <header class="top">
12 <div class="top-l">社员 · 阿紫</div>
13 <div class="top-r">社团详情</div>
14 </header>
15 <main class="main">
16<div class="cover">🎸</div>
17<div class="card">
18 <div class="row"><div class="nm" style="font-size:16px;font-weight:800">回声乐队</div>
19 <div><span class="tag">🎤 招新中</span></div></div>
20 <div class="row" style="margin-top:10px"><div class="avatar">紫</div><div class="info" style="flex:1"><div class="nm" style="font-size:13px">社长 · 林墨</div><div class="muted">成立于 2023 · 成员 82 人</div></div>
21 <button class="btn sm">关注</button></div>
22</div>
23<div class="card">
24 <div class="sec-title"><span class="em">📖</span> 社团简介</div>
25 <div class="muted" style="line-height:1.7">回声乐队成立于 2023 年，专注独立摇滚与电子现场。每周三、五晚排练，承办校园音乐节，曾亮相市青年音乐展演。我们欢迎吉他手、鼓手与任何热爱现场的人加入。</div>
26</div>
27<div class="card">
28 <div class="sec-title"><span class="em">📊</span> 数据概览</div>
29 <div class="grid">
30 <div class="kpi"><div class="n">82</div><div class="l">成员数</div></div>
31 <div class="kpi"><div class="n">14</div><div class="l">本季活动</div></div>
32 <div class="kpi"><div class="n">¥3.2k</div><div class="l">经费余额</div></div>
33 <div class="kpi"><div class="n">4.9</div><div class="l">活跃评分</div></div>
34 </div>
35</div>
36<div class="card">
37 <div class="sec-title"><span class="em">🎫</span> 近期活动（3）</div>
38 <div class="pin">🎤 夏日音乐节 · 07-20</div> <div class="pin">🎸 开放麦 · 07-26</div>
39</div>
40<div class="row" style="gap:8px;margin:4px 2px 12px">
41 <a class="btn flex" style="flex:1;text-decoration:none;text-align:center" href="join.html">申请加入</a>
42 <a class="btn line flex" style="flex:1;text-decoration:none;text-align:center" href="event.html">活动报名</a>
43</div>
44</main>
45 <nav class="nav"><a class="" href="home.html"><span class="ic">🏠</span>首页</a><a class=" on" href="detail.html"><span class="ic">📋</span>社团</a><a class="" href="event.html"><span class="ic">🎫</span>活动</a><a class="" href="member.html"><span class="ic">👥</span>成员</a><a class="" href="notice.html"><span class="ic">📢</span>通知</a></nav>
46</div>
47<script></script>
48</body>
49</html>