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
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>
|
|
|