You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

905 lines
31 KiB

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../colors_and_type.css">
<title>青核 Youthome - 社团发现</title>
<style>
:root {
--youth-primary: #26C2BB;
--youth-primary-light: #54CAC5;
--primary-dark: #1DA9A3;
--primary-bg: #E6F7F6;
--bg-page: #F7F8FA;
--bg-card: #FFFFFF;
--text-title: #1F1F1F;
--text-body: #595959;
--text-muted: #8C8C8C;
--youth-border-light: #E8E8E8;
--youth-warning: #FAAD14;
--danger: #F5222D;
/* =====================================================
* Traework 设计系统 - 组件规范
* 圆角 / 间距 / 阴影 / 高度
* ===================================================== */
--radius-xs: 4px;
--radius-sm: 8px; /* 按钮、输入框 */
--radius-md: 12px; /* 卡片 */
--radius-lg: 16px; /* 标签、弹窗 */
--radius-xl: 20px;
--radius-full: 9999px;
/* 组件高度 */
--height-btn: 44px;
--height-input: 44px;
--height-nav-bottom: 64px;
/* 间距(4px 基础栅格) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-page-x: 16px;
--space-card: 16px;
/* 柔和弥散阴影 */
--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);
--shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.06);
--shadow-btn: 0 2px 8px rgba(38, 194, 187, 0.25);
--shadow-btn-hover: 0 4px 16px rgba(38, 194, 187, 0.35);
--shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.12);
--shadow-float: 0 4px 24px rgba(0, 0, 0, 0.08);
/* 内阴影浮雕(输入框) */
--shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.04);
--shadow-inset-focus: inset 0 1px 3px rgba(38, 194, 187, 0.08);
/* 毛玻璃 */
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-blur: blur(20px);
--glass-border: rgba(255, 255, 255, 0.3);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'SF Pro Display', sans-serif;
background: var(--youth-bg-page);
color: var(--youth-text-secondary);
overflow-x: hidden;}
.page-container {
width: 375px;
height: 812px;
margin: 0 auto;
background: var(--youth-bg-page);
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
}
.status-bar {
height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
font-size: 15px;
font-weight: 600;
color: var(--youth-text-primary);
flex-shrink: 0;
}
/* 头部渐变 */
.header-gradient {
background: linear-gradient(135deg, var(--youth-primary) 0%, var(--youth-primary-light) 100%);
padding-bottom: 60px;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.header-gradient::before {
content: '';
position: absolute;
top: -40px;
right: -20px;
width: 160px;
height: 160px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
}
.header-gradient::after {
content: '';
position: absolute;
bottom: -60px;
left: -30px;
width: 120px;
height: 120px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
}
.top-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px;
height: 44px;
position: relative;
z-index: 2;
}
.nav-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
cursor: pointer;
border: none;
background: transparent;
}
.nav-title { font-size: 17px; font-weight: 700; color: #fff; }
.header-stats {
display: flex;
justify-content: space-around;
padding: 8px 16px 0;
position: relative;
z-index: 2;
}
.stat-item {
text-align: center;
color: #fff;
}
.stat-num {
font-size: 20px;
font-weight: 800;
line-height: 1;
}
.stat-label {
font-size: 11px;
opacity: 0.85;
margin-top: 3px;
}
/* 搜索框 */
.search-wrap {
margin: 0 16px;
margin-top: -44px;
position: relative;
z-index: 10;
flex-shrink: 0;
}
.search-bar {
display: flex;
align-items: center;
gap: 8px;
background: var(--youth-bg-card);
border-radius: 8px;
padding: 10px 14px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
cursor: pointer;
}
.search-bar svg { flex-shrink: 0; color: var(--youth-text-tertiary); }
.search-placeholder {
flex: 1;
font-size: 13px;
color: var(--youth-text-tertiary);
}
/* 分类入口 */
.category-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
padding: 14px 16px 6px;
flex-shrink: 0;
}
.cat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
}
.cat-icon {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.cat-icon svg { color: #fff; }
.cat-icon.c1 { background: linear-gradient(135deg, #FF9A8B, #FF6A88); }
.cat-icon.c2 { background: linear-gradient(135deg, #60A5FA, #3B82F6); }
.cat-icon.c3 { background: linear-gradient(135deg, #34D399, #10B981); }
.cat-icon.c4 { background: linear-gradient(135deg, #A78BFA, #8B5CF6); }
.cat-icon.c5 { background: linear-gradient(135deg, #FBBF24, #F59E0B); }
.cat-name {
font-size: 11px;
color: var(--youth-text-primary);
font-weight: 500;
}
/* 滚动区域 */
.scroll-area {
flex: 1;
overflow-y: auto;
padding-bottom: 20px;
}
.scroll-area::-webkit-scrollbar { display: none; }
/* Section 标题 */
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 16px 10px;
}
.section-title {
font-size: 15px;
font-weight: 700;
color: var(--youth-text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.section-title .title-icon {
width: 18px;
height: 18px;
}
.section-more {
font-size: 12px;
color: var(--youth-text-tertiary);
display: flex;
align-items: center;
gap: 2px;
cursor: pointer;
}
/* 热门排行 */
.hot-rank {
margin: 0 16px 12px;
background: var(--youth-bg-card);
border-radius: 14px;
padding: 6px 0;
overflow: hidden;
}
.rank-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
cursor: pointer;
}
.rank-item:active { background: var(--youth-bg-page); }
.rank-num {
width: 22px;
font-size: 15px;
font-weight: 800;
text-align: center;
flex-shrink: 0;
}
.rank-num.r1 { color: #FF6B35; }
.rank-num.r2 { color: #FF8C42; }
.rank-num.r3 { color: #FFB347; }
.rank-num.rn { color: var(--youth-text-tertiary); font-weight: 600; }
.rank-avatar {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rank-avatar svg { color: #fff; }
.rank-avatar.a1 { background: linear-gradient(135deg, #FF9A8B, #FF6A88); }
.rank-avatar.a2 { background: linear-gradient(135deg, #26C2BB, #54CAC5); }
.rank-avatar.a3 { background: linear-gradient(135deg, #A8B5FF, #6366F1); }
.rank-avatar.a4 { background: linear-gradient(135deg, #FFD666, #FAAD14); }
.rank-avatar.a5 { background: linear-gradient(135deg, #34D399, #10B981); }
.rank-info { flex: 1; min-width: 0; }
.rank-name {
font-size: 14px;
font-weight: 600;
color: var(--youth-text-primary);
margin-bottom: 3px;
}
.rank-meta {
font-size: 11px;
color: var(--youth-text-tertiary);
}
.rank-hot {
font-size: 11px;
color: var(--youth-danger-500);
font-weight: 600;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 4px;
}
.hot-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--youth-danger-500);
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
/* 推荐社团卡片 */
.recommend-list {
padding: 0 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.club-card {
background: var(--youth-bg-card);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.club-card:active { transform: scale(0.99); }
.club-cover {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.club-cover svg { color: rgba(255,255,255,0.9); }
.club-cover.c1 { background: linear-gradient(135deg, #FF9A8B 0%, #FF6A88 50%, #FF5E7E 100%); }
.club-cover.c2 { background: linear-gradient(135deg, #26C2BB 0%, #54CAC5 50%, #3DDAD4 100%); }
.club-cover.c3 { background: linear-gradient(135deg, #A8B5FF 0%, #818CF8 50%, #6366F1 100%); }
.club-cover.c4 { background: linear-gradient(135deg, #FFD666 0%, #FFB703 50%, #FA8C16 100%); }
.club-tag {
position: absolute;
top: 10px;
left: 10px;
padding: 3px 8px;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(10px);
color: #fff;
font-size: 10px;
font-weight: 600;
border-radius: 8px;
}
.club-members {
position: absolute;
bottom: 10px;
right: 10px;
padding: 3px 8px;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(10px);
color: #fff;
font-size: 10px;
font-weight: 500;
border-radius: 8px;
display: flex;
align-items: center;
gap: 4px;
}
.club-members svg { color: #fff; }
.club-body {
padding: 12px 14px;
}
.club-name-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.club-name {
font-size: 15px;
font-weight: 700;
color: var(--youth-text-primary);
}
.join-btn {
padding: 4px 14px;
background: var(--youth-primary);
color: #fff;
border: none;
border-radius: 14px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
}
.join-btn.joined {
background: var(--youth-bg-page);
color: var(--youth-text-tertiary);
border: 1px solid var(--youth-border-light);
}
.club-desc {
font-size: 12px;
color: var(--youth-text-secondary);
line-height: 1.5;
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.club-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.club-tag-sm {
padding: 2px 8px;
background: var(--youth-primary-bg);
color: var(--youth-primary);
font-size: 10px;
font-weight: 500;
border-radius: 6px;
}
/* 新建社团悬浮按钮 */
.fab-btn {
position: absolute;
right: 16px;
bottom: 80px;
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, var(--youth-primary), var(--youth-primary-light));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
cursor: pointer;
box-shadow: 0 6px 20px rgba(38, 194, 187, 0.4);
z-index: 20;
transition: all 0.2s ease;
}
.fab-btn:active { transform: scale(0.95); }
/* 底部导航 */
.bottom-tab {
display: flex;
padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
background: var(--youth-bg-card);
border-top: 1px solid var(--youth-border-light);
flex-shrink: 0;
}
.tab-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 4px 0;
cursor: pointer;
}
.tab-item .tab-icon {
opacity: 0.5;
color: var(--youth-text-secondary);
}
.tab-item .label {
font-size: 10px;
color: var(--youth-text-tertiary);
}
.tab-item.active .tab-icon { opacity: 1; color: var(--youth-primary); }
.tab-item.active .label { color: var(--youth-primary); font-weight: 600; }
/* SVG 图标统一尺寸 */
.icon-svg {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
vertical-align: middle;
line-height: 1;
}
.icon-svg svg {
width: 100%;
height: 100%;
stroke: currentColor;
}
/* 侧栏图标 */
.sidebar-icon .icon-svg { width: 22px; height: 22px; font-size: 22px; }
/* 社团logo图标 */
.club-logo .icon-svg { width: 28px; height: 28px; font-size: 28px; color: #fff; }
/* 头图大图标 */
.hero-icon .icon-svg { width: 56px; height: 56px; font-size: 56px; opacity: 0.3; }
/* meta 小图标 */
.club-meta .icon-svg { width: 12px; height: 12px; font-size: 12px; }
/* 分类选择网格图标 */
.cat-option .icon-svg { width: 26px; height: 26px; font-size: 26px; }
/* logo预览图标 */
.logo-preview .icon-svg { width: 40px; height: 40px; font-size: 40px; color: #fff; }
/* 提示图标 */
.notice-icon .icon-svg { width: 18px; height: 18px; font-size: 18px; }
</style>
</head>
<body>
<div class="page-container" data-dom-id="page-container">
<div class="header-gradient">
<div class="status-bar" style="color:#fff;">
<span>9:41</span>
<div style="display:flex;align-items:center;gap:6px;">
<svg width="17" height="11" viewBox="0 0 17 11" fill="#fff"><rect x="0" y="7" width="3" height="4" rx="0.5"></rect><rect x="4.5" y="5" width="3" height="6" rx="0.5"></rect><rect x="9" y="2.5" width="3" height="8.5" rx="0.5"></rect><rect x="13.5" y="0" width="3" height="11" rx="0.5"></rect></svg>
<svg width="25" height="12" viewBox="0 0 25 12"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#fff" opacity="0.5"></rect><rect x="2" y="2" width="18" height="8" rx="1.5" fill="#fff"></rect><rect x="22.5" y="4" width="1.5" height="4" rx="0.5" fill="#fff" opacity="0.5"></rect></svg>
</div>
</div>
<div class="top-nav">
<button class="nav-btn" onclick="goBack()">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
</button>
<div class="nav-title">社团发现</div>
<button class="nav-btn" onclick="goMyClubs()">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</button>
</div>
<div class="header-stats">
<div class="stat-item">
<div class="stat-num">128</div>
<div class="stat-label">校园社团</div>
</div>
<div class="stat-item">
<div class="stat-num">12.5k</div>
<div class="stat-label">活跃成员</div>
</div>
<div class="stat-item">
<div class="stat-num">36</div>
<div class="stat-label">本周活动</div>
</div>
<div class="stat-item">
<div class="stat-num">5</div>
<div class="stat-label">我的社团</div>
</div>
</div>
</div>
<!-- 搜索框 -->
<div class="search-wrap">
<div class="search-bar" onclick="goSearch()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<span class="search-placeholder">搜索社团名称、活动、兴趣标签</span>
</div>
</div>
<!-- 分类入口 -->
<div class="category-grid">
<div class="cat-item" onclick="goCategory('学术')">
<div class="cat-icon c1">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
</div>
<span class="cat-name">学术科技</span>
</div>
<div class="cat-item" onclick="goCategory('文艺')">
<div class="cat-icon c2">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path></svg>
</div>
<span class="cat-name">文化艺术</span>
</div>
<div class="cat-item" onclick="goCategory('体育')">
<div class="cat-icon c3">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path><path d="M4 22h16"></path><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"></path></svg>
</div>
<span class="cat-name">体育运动</span>
</div>
<div class="cat-item" onclick="goCategory('公益')">
<div class="cat-icon c4">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg>
</div>
<span class="cat-name">公益志愿</span>
</div>
<div class="cat-item" onclick="goCategory('兴趣')">
<div class="cat-icon c5">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="11" x2="10" y2="13"></line><line x1="4" y1="14" x2="6" y2="15"></line><path d="M12 19V5a3 3 0 0 1 3-3h1a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4"></path><path d="M15 11v.2a4.7 4.7 0 0 1-.93 2.84 5 5 0 0 1-.93 1c-.71.53-1.41.96-2.14 1.46l-.67.47c-.7.49-1.31 1.09-1.79 1.79a3.97 3.97 0 0 0-.72 2.04V21a2 2 0 0 0 2 2h4.28a2 2 0 0 0 1.8-1.12l.92-1.84A6.2 6.2 0 0 0 20 13.68v-.96"></path></svg>
</div>
<span class="cat-name">兴趣娱乐</span>
</div>
</div>
<div class="scroll-area">
<!-- 热门排行 -->
<div class="section-header">
<div class="section-title">
<svg class="title-icon" viewBox="0 0 24 24" fill="none" stroke="#FF6B35" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg>
热门社团榜
</div>
<span class="section-more" onclick="goRank()">
完整榜单
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
</span>
</div>
<div class="hot-rank">
<div class="rank-item" onclick="goClub('桌游社')">
<div class="rank-avatar a1">
</div>
<div class="rank-info">
<div class="rank-name">北大桌游社</div>
<div class="rank-meta">1,286 人 · 本周新增 128 人</div>
</div>
<div class="rank-hot">
<span class="hot-dot"></span>
98.5k
</div>
</div>
<div class="rank-item" onclick="goClub('摄影协会')">
<div class="rank-avatar a2">
</div>
<div class="rank-info">
<div class="rank-name">光影摄影协会</div>
<div class="rank-meta">956 人 · 本周新增 86 人</div>
</div>
<div class="rank-hot">
<span class="hot-dot"></span>
76.2k
</div>
</div>
<div class="rank-item" onclick="goClub('辩论队')">
<div class="rank-avatar a3">
</div>
<div class="rank-info">
<div class="rank-name">辩论与演讲协会</div>
<div class="rank-meta">742 人 · 本周新增 52 人</div>
</div>
<div class="rank-hot">
<span class="hot-dot"></span>
54.8k
</div>
</div>
<div class="rank-item" onclick="goClub('街舞社')">
<div class="rank-avatar a4">
</div>
<div class="rank-info">
<div class="rank-name">Soul Crew 街舞社</div>
<div class="rank-meta">628 人 · 本周新增 45 人</div>
</div>
<div class="rank-hot" style="color:var(--youth-warning);">
42.1k
</div>
</div>
<div class="rank-item" onclick="goClub('志愿者')">
<div class="rank-avatar a5">
</div>
<div class="rank-info">
<div class="rank-name">青年志愿者协会</div>
<div class="rank-meta">1,024 人 · 本周新增 38 人</div>
</div>
<div class="rank-hot" style="color:var(--youth-warning);">
38.6k
</div>
</div>
</div>
<!-- 为你推荐 -->
<div class="section-header">
<div class="section-title">
<svg class="title-icon" viewBox="0 0 24 24" fill="none" stroke="#FFD700" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v3"></path><path d="M12 18v3"></path><path d="M3 12h3"></path><path d="M18 12h3"></path><path d="m5.6 5.6 2.1 2.1"></path><path d="m16.3 16.3 2.1 2.1"></path><path d="m5.6 18.4 2.1-2.1"></path><path d="m16.3 7.7 2.1-2.1"></path></svg>
为你推荐
</div>
<span class="section-more" onclick="refreshRecommend()">
换一批
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
</span>
</div>
<div class="recommend-list">
<div class="club-card" onclick="goClub('音乐社')">
<div class="club-cover c1">
<span class="club-tag">兴趣娱乐</span>
<span class="club-members">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
486 人
</span>
</div>
<div class="club-body">
<div class="club-name-row">
<span class="club-name">吉他社</span>
<button class="join-btn" onclick="event.stopPropagation(); joinClub(this)">+ 加入</button>
</div>
<div class="club-desc">零基础也能学!每周五晚琴房练琴,每月举办校园音乐派对,一起用音乐点燃青春。</div>
<div class="club-tags">
<span class="club-tag-sm">音乐</span>
<span class="club-tag-sm">零基础</span>
<span class="club-tag-sm">演出</span>
</div>
</div>
</div>
<div class="club-card" onclick="goClub('创业')">
<div class="club-cover c2">
<span class="club-tag">学术科技</span>
<span class="club-members">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
324 人
</span>
</div>
<div class="club-body">
<div class="club-name-row">
<span class="club-name">创业者协会</span>
<button class="join-btn joined" onclick="event.stopPropagation(); joinClub(this)">已加入</button>
</div>
<div class="club-desc">汇聚校园创客,提供创业指导、项目孵化、投资人对接资源,助你实现创业梦想。</div>
<div class="club-tags">
<span class="club-tag-sm">创业</span>
<span class="club-tag-sm">竞赛</span>
<span class="club-tag-sm">孵化</span>
</div>
</div>
</div>
<div class="club-card" onclick="goClub('动漫社')">
<div class="club-cover c3">
<span class="club-tag">文化艺术</span>
<span class="club-members">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
612 人
</span>
</div>
<div class="club-body">
<div class="club-name-row">
<span class="club-name">动漫协会</span>
<button class="join-btn" onclick="event.stopPropagation(); joinClub(this)">+ 加入</button>
</div>
<div class="club-desc">ACG爱好者聚集地!定期举办漫展、Cosplay、番剧观影会,一起玩转二次元。</div>
<div class="club-tags">
<span class="club-tag-sm">动漫</span>
<span class="club-tag-sm">Cosplay</span>
<span class="club-tag-sm">漫展</span>
</div>
</div>
</div>
<div class="club-card" onclick="goClub('篮球')">
<div class="club-cover c4">
<span class="club-tag">体育运动</span>
<span class="club-members">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
558 人
</span>
</div>
<div class="club-body">
<div class="club-name-row">
<span class="club-name">篮球协会</span>
<button class="join-btn" onclick="event.stopPropagation(); joinClub(this)">+ 加入</button>
</div>
<div class="club-desc">篮球爱好者的天堂!每周约球、院系联赛、NBA观赛派对,等你来战!</div>
<div class="club-tags">
<span class="club-tag-sm">篮球</span>
<span class="club-tag-sm">比赛</span>
<span class="club-tag-sm">约球</span>
</div>
</div>
</div>
</div>
<div style="text-align:center;padding:20px;color:var(--youth-text-tertiary);font-size:12px;">
— 没有找到喜欢的?创建一个吧 —
</div>
</div>
<!-- 悬浮按钮 -->
<div class="fab-btn" onclick="goCreate()">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</div>
<!-- 底部Tab -->
</div>
<script> icon.innerHTML = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>';
}
}
function goBack() { window.history.back(); }
function goSearch() { alert('搜索社团'); }
function goMyClubs() { alert('我的社团'); }
function goCategory(name) { alert(name + '分类'); }
function goRank() { alert('完整榜单'); }
function goClub(name) { alert(name + '详情'); }
function goCreate() { alert('创建社团'); }
function refreshRecommend() { alert('换一批推荐'); }
function switchTab(tab) { /* tab switch */ }
function joinClub(btn) {
if (btn.classList.contains('joined')) {
btn.classList.remove('joined');
btn.textContent = '+ 加入';
} else {
btn.classList.add('joined');
btn.textContent = '已加入';
}
}</script>
</body>
</html>