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.
 
 

1446 lines
47 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">
<title>青核 Youthome - 话题详情</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="../colors_and_type.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
:root {
/* 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: 64px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--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.03);
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-blur: blur(20px);
--glass-border: rgba(255, 255, 255, 0.3);
}
html, body {
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'SF Pro Display', 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif;
background: var(--youth-bg-page);
color: var(--youth-text-primary);
min-height: 100vh;
overflow-x: hidden;
}
/* ===== App容器 - 固定高度 ===== */
.app-container {
width: 375px;
height: 812px;
margin: 0 auto;
background: var(--youth-bg-page);
position: relative;
overflow: hidden;
}
/* ===== 状态栏 ===== */
.status-bar {
height: 24px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
font-size: 12px;
font-weight: 600;
color: white;
position: relative;
z-index: 30;
background: transparent;
}
.status-bar .right-icons {
display: flex;
align-items: center;
gap: 6px;
}
.status-bar svg {
width: 16px;
height: 16px;
}
/* ===== 顶部导航栏(毛玻璃悬浮) ===== */
.top-nav {
position: absolute;
top: 24px;
left: 0;
right: 0;
height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px;
z-index: 25;
background: transparent;
transition: all 0.3s ease;
}
.top-nav.scrolled {
background: var(--youth-bg-glass);
backdrop-filter: var(--youth-glass-blur) var(--youth-glass-saturate);
-webkit-backdrop-filter: var(--youth-glass-blur) var(--youth-glass-saturate);
border-bottom: 1px solid var(--youth-glass-border);
}
.nav-icon-btn {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--youth-radius-full);
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.35);
cursor: pointer;
transition: all 0.2s ease;
color: white;
}
.top-nav.scrolled .nav-icon-btn {
background: var(--youth-bg-card);
border-color: var(--youth-border-light);
color: var(--youth-text-primary);
}
.nav-icon-btn:active {
transform: scale(0.92);
}
.nav-title {
flex: 1;
text-align: center;
font-size: 16px;
font-weight: 600;
color: white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 8px;
opacity: 0;
transition: opacity 0.3s ease;
}
.top-nav.scrolled .nav-title {
opacity: 1;
color: var(--youth-text-primary);
}
.nav-right-group {
display: flex;
align-items: center;
gap: 6px;
}
/* ===== 滚动内容区 ===== */
.scroll-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.scroll-content::-webkit-scrollbar {
display: none;
}
/* ===== 话题头部区域 ===== */
.topic-header {
background: linear-gradient(160deg, #3FD5CE 0%, #26C2BB 40%, #1FA39E 100%);
padding: 68px 20px 24px;
position: relative;
overflow: hidden;
}
.topic-header::before {
content: '';
position: absolute;
top: -60px;
right: -40px;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
border-radius: 50%;
}
.topic-header::after {
content: '';
position: absolute;
bottom: -30px;
left: -20px;
width: 140px;
height: 140px;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
border-radius: 50%;
}
.topic-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--youth-radius-full);
font-size: 11px;
color: white;
font-weight: 500;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.topic-title {
font-size: 26px;
font-weight: 700;
color: white;
line-height: 1.25;
margin-bottom: 8px;
position: relative;
z-index: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.topic-desc {
font-size: 13px;
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
margin-bottom: 16px;
position: relative;
z-index: 1;
}
/* 数据行 */
.topic-stats {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 16px;
position: relative;
z-index: 1;
}
.stat-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
position: relative;
}
.stat-col:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.3);
}
.stat-value {
font-size: 18px;
font-weight: 700;
color: white;
line-height: 1.2;
}
.stat-label {
font-size: 11px;
color: rgba(255, 255, 255, 0.8);
}
/* 操作按钮 */
.topic-actions {
display: flex;
align-items: center;
gap: 10px;
position: relative;
z-index: 1;
}
.btn-join {
flex: 1;
height: 42px;
border-radius: var(--youth-radius-full);
background: white;
color: var(--youth-teal-600);
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
position: relative;
overflow: hidden;
}
.btn-join::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
pointer-events: none;
}
.btn-join:active {
transform: scale(0.97);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.btn-join.joined {
background: rgba(255, 255, 255, 0.2);
color: white;
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: none;
}
.btn-favorite {
width: 42px;
height: 42px;
border-radius: var(--youth-radius-full);
background: transparent;
border: 1.5px solid rgba(255, 255, 255, 0.6);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.btn-favorite:active {
transform: scale(0.92);
}
.btn-favorite.favorited {
background: rgba(255, 255, 255, 0.25);
border-color: white;
}
.btn-favorite.favorited svg {
fill: white;
}
.btn-share-outline {
width: 42px;
height: 42px;
border-radius: var(--youth-radius-full);
background: transparent;
border: 1.5px solid rgba(255, 255, 255, 0.6);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.btn-share-outline:active {
transform: scale(0.92);
}
/* ===== 分类Tab ===== */
.topic-tabs-wrapper {
background: var(--youth-bg-page);
position: sticky;
top: 0;
z-index: 20;
border-bottom: 1px solid var(--youth-border-light);
}
.topic-tabs {
display: flex;
align-items: center;
padding: 0 16px;
height: 44px;
gap: 24px;
}
.topic-tab {
position: relative;
font-size: 14px;
font-weight: 500;
color: var(--youth-text-tertiary);
cursor: pointer;
padding: 10px 0;
transition: all 0.2s ease;
flex-shrink: 0;
}
.topic-tab.active {
color: var(--youth-text-primary);
font-weight: 600;
font-size: 15px;
}
.topic-tab.active::after {
content: '';
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 3px;
background: var(--youth-gradient-primary);
border-radius: 2px;
}
/* ===== 动态列表 ===== */
.post-list {
padding: 12px 16px 100px;
display: flex;
flex-direction: column;
gap: 12px;
}
.post-card {
background: var(--youth-bg-card);
border-radius: var(--youth-radius-lg);
padding: 14px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid var(--youth-border-light);
}
.post-card:active {
transform: scale(0.99);
}
.post-card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.post-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 13px;
flex-shrink: 0;
}
.avatar-teal { background: linear-gradient(135deg, #54CAC5 0%, #26C2BB 100%); }
.avatar-orange { background: linear-gradient(135deg, #FFC58A 0%, #FF9F45 100%); }
.avatar-purple { background: linear-gradient(135deg, #B8A0E0 0%, #7B61FF 100%); }
.post-user-info {
flex: 1;
min-width: 0;
}
.post-nickname {
font-size: 13px;
font-weight: 600;
color: var(--youth-text-primary);
line-height: 1.2;
margin-bottom: 2px;
}
.post-meta-row {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--youth-text-tertiary);
}
.post-school {
display: flex;
align-items: center;
gap: 2px;
}
.post-school svg {
width: 10px;
height: 10px;
color: var(--youth-primary);
}
.post-content {
font-size: 13px;
line-height: 1.5;
color: var(--youth-text-primary);
margin-bottom: 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-content.with-image {
margin-bottom: 0;
}
.post-with-image {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.post-with-image .post-content {
flex: 1;
margin-bottom: 0;
-webkit-line-clamp: 3;
}
.post-thumbnail {
width: 72px;
height: 72px;
border-radius: var(--youth-radius-md);
flex-shrink: 0;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.thumb-1 { background: linear-gradient(135deg, #A8E6E2 0%, #26C2BB 100%); }
.thumb-2 { background: linear-gradient(135deg, #FFD9A8 0%, #FF9F45 100%); }
.thumb-3 { background: linear-gradient(135deg, #C8B8F0 0%, #7B61FF 100%); }
.post-thumbnail span {
font-size: 28px;
opacity: 0.6;
}
.post-actions {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 8px;
border-top: 1px solid var(--youth-border-light);
}
.post-action-item {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--youth-text-tertiary);
cursor: pointer;
transition: color 0.2s ease;
}
.post-action-item:active {
color: var(--youth-primary);
}
.post-action-item svg {
width: 15px;
height: 15px;
}
.post-action-item.liked {
color: #FF6B6B;
}
.post-action-item.liked svg {
fill: #FF6B6B;
stroke: #FF6B6B;
}
.post-action-item.collected {
color: #FFB980;
}
.post-action-item.collected svg {
fill: #FFB980;
stroke: #FFB980;
}
/* ===== 发布浮动按钮 ===== */
.fab-post {
position: absolute;
right: 20px;
bottom: 40px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--youth-gradient-primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
box-shadow: 0 8px 24px rgba(38, 194, 187, 0.4);
transition: all 0.2s ease;
z-index: 22;
border: none;
}
.fab-post::before {
content: '';
position: absolute;
top: 2px;
left: 6px;
right: 6px;
height: 40%;
background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 100%);
border-radius: 50% 50% 40% 40%;
pointer-events: none;
}
.fab-post:active {
transform: scale(0.92);
box-shadow: 0 4px 12px rgba(38, 194, 187, 0.3);
}
.fab-post svg {
width: 24px;
height: 24px;
position: relative;
z-index: 1;
}
/* ===== 底部安全区域 ===== */
.safe-area-bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
background: var(--youth-bg-page);
z-index: 21;
}
/* ===== 分享弹窗 ===== */
.share-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
z-index: 998;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.share-modal-overlay.show {
opacity: 1;
visibility: visible;
}
.share-modal {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--youth-bg-card);
border-radius: 20px 20px 0 0;
z-index: 999;
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
padding: 12px 20px 28px;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}
.share-modal.show {
transform: translateY(0);
}
.share-modal-handle {
width: 36px;
height: 4px;
background: var(--youth-gray-300);
border-radius: 2px;
margin: 0 auto 16px;
}
.share-modal-title {
font-size: 15px;
font-weight: 600;
color: var(--youth-text-primary);
text-align: center;
margin-bottom: 16px;
}
.share-options {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.share-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
transition: all 0.2s ease;
}
.share-option:active {
transform: scale(0.92);
}
.share-option-icon {
width: 48px;
height: 48px;
border-radius: var(--youth-radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
background: var(--youth-bg-input);
}
.share-option-label {
font-size: 11px;
color: var(--youth-text-secondary);
}
.share-cancel-btn {
width: 100%;
height: 44px;
border-radius: var(--youth-radius-full);
background: var(--youth-bg-input);
color: var(--youth-text-primary);
font-size: 14px;
font-weight: 500;
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
.share-cancel-btn:active {
background: var(--youth-bg-hover);
}
/* ===== 更多选项弹窗 ===== */
.more-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
z-index: 998;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.more-modal-overlay.show {
opacity: 1;
visibility: visible;
}
.more-modal {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--youth-bg-card);
border-radius: 20px 20px 0 0;
z-index: 999;
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
padding: 12px 20px 28px;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}
.more-modal.show {
transform: translateY(0);
}
.more-modal-handle {
width: 36px;
height: 4px;
background: var(--youth-gray-300);
border-radius: 2px;
margin: 0 auto 16px;
}
.more-options-list {
display: flex;
flex-direction: column;
gap: 0;
}
.more-option {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 4px;
border-bottom: 1px solid var(--youth-border-light);
cursor: pointer;
transition: background 0.2s ease;
}
.more-option:last-child {
border-bottom: none;
}
.more-option:active {
background: var(--youth-bg-hover);
}
.more-option-icon {
width: 32px;
height: 32px;
border-radius: var(--youth-radius-md);
background: var(--youth-primary-bg);
display: flex;
align-items: center;
justify-content: center;
color: var(--youth-primary);
flex-shrink: 0;
}
.more-option-icon svg {
width: 16px;
height: 16px;
}
.more-option-text {
flex: 1;
font-size: 14px;
color: var(--youth-text-primary);
}
.more-option-arrow {
color: var(--youth-text-quaternary);
}
.more-option-arrow svg {
width: 16px;
height: 16px;
}
.more-cancel-btn {
width: 100%;
height: 44px;
border-radius: var(--youth-radius-full);
background: var(--youth-bg-input);
color: var(--youth-text-primary);
font-size: 14px;
font-weight: 500;
border: none;
cursor: pointer;
margin-top: 12px;
transition: all 0.2s ease;
}
.more-cancel-btn:active {
background: var(--youth-bg-hover);
}
/* 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="app-container" id="appContainer" style="height: 1108px;">
<!-- 状态栏 -->
<div class="status-bar" id="statusBar">
<span>9:41</span>
<div class="right-icons">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3a4.237 4.237 0 00-6 0zm-4-4l2 2a7.074 7.074 0 0110 0l2-2C15.14 9.14 8.87 9.14 5 13z"></path>
</svg>
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z"></path>
</svg>
</div>
</div>
<!-- 顶部导航栏 -->
<div class="top-nav" id="topNav">
<button class="nav-icon-btn" data-dom-id="btn-back" id="btnBack">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</button>
<span class="nav-title" data-dom-id="topic-title" id="navTopicTitle">#期末加油打卡挑战</span>
<div class="nav-right-group">
<button class="nav-icon-btn" data-dom-id="btn-more" id="btnMore">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
<circle cx="5" cy="12" r="2"></circle>
<circle cx="12" cy="12" r="2"></circle>
<circle cx="19" cy="12" r="2"></circle>
</svg>
</button>
</div>
</div>
<!-- 滚动内容区 -->
<div class="scroll-content" id="scrollContent">
<!-- 话题头部 -->
<div class="topic-header">
<div class="topic-badge">
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
校园热门话题
</div>
<h1 class="topic-title" data-dom-id="topic-title" id="topicTitle">#期末加油打卡挑战</h1>
<p class="topic-desc" data-dom-id="topic-desc" id="topicDesc">
一起打卡期末复习,互相监督,冲个好成绩!<span class="icon-svg icon-book-open"><svg 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></span>
</p>
<!-- 数据行 -->
<div class="topic-stats">
<div class="stat-col">
<span class="stat-value" data-dom-id="stat-participants" id="statParticipants">12.8万</span>
<span class="stat-label">参与人数</span>
</div>
<div class="stat-col">
<span class="stat-value" data-dom-id="stat-posts" id="statPosts">56.3万</span>
<span class="stat-label">动态数</span>
</div>
<div class="stat-col">
<span class="stat-value" data-dom-id="stat-views" id="statViews">320万</span>
<span class="stat-label">浏览量</span>
</div>
</div>
<!-- 操作按钮 -->
<div class="topic-actions">
<button class="btn-join" data-dom-id="btn-join-topic" id="btnJoinTopic">
+ 参与话题
</button>
<button class="btn-share-outline" data-dom-id="btn-share" id="btnShareHeader">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
</svg>
</button>
<button class="btn-favorite" data-dom-id="btn-favorite-topic" id="btnFavoriteTopic">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</button>
</div>
</div>
<!-- 分类Tab -->
<div class="topic-tabs-wrapper">
<div class="topic-tabs">
<div class="topic-tab active" data-dom-id="tab-hot" id="tabHot">最热</div>
<div class="topic-tab" data-dom-id="tab-new" id="tabNew">最新</div>
<div class="topic-tab" data-dom-id="tab-school" id="tabSchool">本校</div>
</div>
</div>
<!-- 动态列表 -->
<div class="post-list">
<!-- 动态卡片1 -->
<div class="post-card" data-dom-id="post-card-1" id="postCard1">
<div class="post-card-header">
<div class="post-avatar avatar-teal">小</div>
<div class="post-user-info">
<div class="post-nickname">小林同学</div>
<div class="post-meta-row">
<span class="post-school">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
清华大学
</span>
<span>·</span>
<span>2小时前</span>
</div>
</div>
</div>
<div class="post-with-image">
<div class="post-content with-image">Day7 图书馆打卡,今天效率超高<span class="icon-svg icon-dumbbell"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6.5 6.5 11 11"></path><path d="m21 21-1-1"></path><path d="m3 3 1 1"></path><path d="m18 22 4-4"></path><path d="m2 6 4-4"></path><path d="m3 10 7-7"></path><path d="m14 21 7-7"></path></svg></span> 终于把高数第三章看完了,例题也都做了一遍,感觉理解得比之前好多了!明天继续加油~</div>
<div class="post-thumbnail thumb-1">
<span><span class="icon-svg icon-book-open"></span></span>
</div>
</div>
<div class="post-actions">
<div class="post-action-item liked" id="postLike1">
<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
<span id="postLikeCount1">256</span>
</div>
<div class="post-action-item" id="postComment1">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
<span>38</span>
</div>
<div class="post-action-item" id="postCollect1">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
<span id="postCollectCount1">42</span>
</div>
</div>
</div>
<!-- 动态卡片2 -->
<div class="post-card" data-dom-id="post-card-2" id="postCard2">
<div class="post-card-header">
<div class="post-avatar avatar-orange">晴</div>
<div class="post-user-info">
<div class="post-nickname">晴天小雨</div>
<div class="post-meta-row">
<span class="post-school">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
北京大学
</span>
<span>·</span>
<span>4小时前</span>
</div>
</div>
</div>
<div class="post-content">期末倒计时10天,高数复习中... 头秃预警<span class="icon-svg icon-brain"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"></path><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"></path><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"></path></svg></span> 有没有小伙伴分享一下高数复习技巧呀?感觉好多知识点都记不住<span class="icon-svg icon-frown"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M16 16s-1.5-2-4-2-4 2-4 2"></path><line x1="9" x2="9.01" y1="9" y2="9"></line><line x1="15" x2="15.01" y1="9" y2="9"></line></svg></span></div>
<div class="post-actions">
<div class="post-action-item" id="postLike2">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
<span id="postLikeCount2">189</span>
</div>
<div class="post-action-item" id="postComment2">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
<span>24</span>
</div>
<div class="post-action-item" id="postCollect2">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
<span id="postCollectCount2">31</span>
</div>
</div>
</div>
<!-- 动态卡片3 -->
<div class="post-card" data-dom-id="post-card-3" id="postCard3">
<div class="post-card-header">
<div class="post-avatar avatar-purple">阿</div>
<div class="post-user-info">
<div class="post-nickname">阿杰学长</div>
<div class="post-meta-row">
<span class="post-school">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
复旦大学
</span>
<span>·</span>
<span>6小时前</span>
</div>
</div>
</div>
<div class="post-content">有没有一起去图书馆自习的搭子?<span class="icon-svg icon-map-pin"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path><circle cx="12" cy="10" r="3"></circle></svg></span> 学校图书馆三楼靠窗位置,一起复习互相监督!一个人真的太容易摸鱼了<span class="icon-svg icon-smile"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" x2="9.01" y1="9" y2="9"></line><line x1="15" x2="15.01" y1="9" y2="9"></line></svg></span></div>
<div class="post-actions">
<div class="post-action-item" id="postLike3">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
<span id="postLikeCount3">98</span>
</div>
<div class="post-action-item" id="postComment3">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
<span>56</span>
</div>
<div class="post-action-item" id="postCollect3">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
<span id="postCollectCount3">15</span>
</div>
</div>
</div>
</div>
</div>
<!-- 发布话题动态浮动按钮 -->
<button class="fab-post" data-dom-id="btn-post-topic" id="btnPostTopic">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 20h9"></path>
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
</svg>
</button>
<!-- 底部安全区域 -->
<div class="safe-area-bottom"></div>
<!-- 分享弹窗遮罩 -->
<div class="share-modal-overlay" id="shareOverlay"></div>
<!-- 分享弹窗 -->
<div class="share-modal" id="shareModal">
<div class="share-modal-handle"></div>
<div class="share-modal-title">分享话题</div>
<div class="share-options">
<div class="share-option">
<div class="share-option-icon"><span class="icon-svg icon-message-circle"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path></svg></span></div>
<span class="share-option-label">微信好友</span>
</div>
<div class="share-option">
<div class="share-option-icon">🌐</div>
<span class="share-option-label">朋友圈</span>
</div>
<div class="share-option">
<div class="share-option-icon"><span class="icon-svg icon-message-circle"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path></svg></span></div>
<span class="share-option-label">QQ好友</span>
</div>
<div class="share-option">
<div class="share-option-icon"><span class="icon-svg icon-link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></span></div>
<span class="share-option-label">复制链接</span>
</div>
</div>
<button class="share-cancel-btn" id="btnShareCancel">取消</button>
</div>
<!-- 更多选项弹窗遮罩 -->
<div class="more-modal-overlay" id="moreOverlay"></div>
<!-- 更多选项弹窗 -->
<div class="more-modal" id="moreModal">
<div class="more-modal-handle"></div>
<div class="more-options-list">
<div class="more-option">
<div class="more-option-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</div>
<span class="more-option-text">收藏话题</span>
<span class="more-option-arrow">
<svg 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="more-option">
<div class="more-option-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
</div>
<span class="more-option-text">举报话题</span>
<span class="more-option-arrow">
<svg 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="more-option">
<div class="more-option-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
</svg>
</div>
<span class="more-option-text">分享话题</span>
<span class="more-option-arrow">
<svg 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>
<button class="more-cancel-btn" id="btnMoreCancel">取消</button>
</div>
</div>
<script>// ===== 主题初始化 =====
const html = document.documentElement;
// ===== 返回按钮 =====
document.getElementById('btnBack').addEventListener('click', function() {
// 返回上一页(feed-home或搜索页)
if (document.referrer && document.referrer.includes('search')) {
window.location.href = 'search-result.html';
} else {
window.location.href = 'feed-home.html';
}
});
// ===== 参与话题按钮 =====
const btnJoinTopic = document.getElementById('btnJoinTopic');
let isJoined = false;
btnJoinTopic.addEventListener('click', function() {
isJoined = !isJoined;
if (isJoined) {
btnJoinTopic.textContent = '已参与 ✓';
btnJoinTopic.classList.add('joined');
} else {
btnJoinTopic.textContent = '+ 参与话题';
btnJoinTopic.classList.remove('joined');
}
});
// ===== 收藏话题按钮 =====
const btnFavoriteTopic = document.getElementById('btnFavoriteTopic');
let isFavorited = false;
btnFavoriteTopic.addEventListener('click', function() {
isFavorited = !isFavorited;
if (isFavorited) {
btnFavoriteTopic.classList.add('favorited');
} else {
btnFavoriteTopic.classList.remove('favorited');
}
});
// ===== 分类Tab切换 =====
const tabs = document.querySelectorAll('.topic-tab');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
tabs.forEach(t => t.classList.remove('active'));
this.classList.add('active');
});
});
// ===== 动态卡片点击跳转 =====
document.getElementById('postCard1').addEventListener('click', function() {
window.location.href = 'post-detail.html';
});
document.getElementById('postCard2').addEventListener('click', function() {
window.location.href = 'post-detail.html';
});
document.getElementById('postCard3').addEventListener('click', function() {
window.location.href = 'post-detail.html';
});
// ===== 发布话题动态按钮 =====
document.getElementById('btnPostTopic').addEventListener('click', function() {
// 带话题参数跳转到发布页
window.location.href = 'post-create.html?topic=%23%E6%9C%9F%E6%9C%AB%E5%8A%A0%E6%B2%B9%E6%89%93%E5%8D%A1%E6%8C%91%E6%88%98';
});
// ===== 分享弹窗 =====
const shareModal = document.getElementById('shareModal');
const shareOverlay = document.getElementById('shareOverlay');
const btnShareNav = document.getElementById('btnShareNav');
const btnShareHeader = document.getElementById('btnShareHeader');
const btnShareCancel = document.getElementById('btnShareCancel');
function openShareModal() {
shareOverlay.classList.add('show');
shareModal.classList.add('show');
}
function closeShareModal() {
shareOverlay.classList.remove('show');
shareModal.classList.remove('show');
}
btnShareNav.addEventListener('click', openShareModal);
btnShareHeader.addEventListener('click', openShareModal);
btnShareCancel.addEventListener('click', closeShareModal);
shareOverlay.addEventListener('click', closeShareModal);
// ===== 更多选项弹窗 =====
const moreModal = document.getElementById('moreModal');
const moreOverlay = document.getElementById('moreOverlay');
const btnMore = document.getElementById('btnMore');
const btnMoreCancel = document.getElementById('btnMoreCancel');
function openMoreModal() {
moreOverlay.classList.add('show');
moreModal.classList.add('show');
}
function closeMoreModal() {
moreOverlay.classList.remove('show');
moreModal.classList.remove('show');
}
btnMore.addEventListener('click', openMoreModal);
btnMoreCancel.addEventListener('click', closeMoreModal);
moreOverlay.addEventListener('click', closeMoreModal);
// ===== 页面滚动导航栏毛玻璃效果 =====
const scrollContent = document.getElementById('scrollContent');
const topNav = document.getElementById('topNav');
const statusBar = document.getElementById('statusBar');
scrollContent.addEventListener('scroll', function() {
const scrollTop = scrollContent.scrollTop;
const headerHeight = 200; // 话题头部高度估算
if (scrollTop > headerHeight - 68) {
topNav.classList.add('scrolled');
statusBar.style.color = 'var(--youth-text-primary)';
} else {
topNav.classList.remove('scrolled');
statusBar.style.color = 'white';
}
});
// ===== 动态卡片点赞 =====
const postLikes = [
{ id: 'postLike1', countId: 'postLikeCount1', liked: true, count: 256 },
{ id: 'postLike2', countId: 'postLikeCount2', liked: false, count: 189 },
{ id: 'postLike3', countId: 'postLikeCount3', liked: false, count: 98 }
];
postLikes.forEach(item => {
const el = document.getElementById(item.id);
if (el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
item.liked = !item.liked;
const icon = this.querySelector('svg');
const countEl = document.getElementById(item.countId);
if (item.liked) {
this.classList.add('liked');
icon.setAttribute('fill', 'currentColor');
item.count++;
} else {
this.classList.remove('liked');
icon.setAttribute('fill', 'none');
item.count--;
}
countEl.textContent = item.count;
});
}
});
// ===== 动态卡片收藏 =====
const postCollects = [
{ id: 'postCollect1', countId: 'postCollectCount1', collected: false, count: 42 },
{ id: 'postCollect2', countId: 'postCollectCount2', collected: false, count: 31 },
{ id: 'postCollect3', countId: 'postCollectCount3', collected: false, count: 15 }
];
postCollects.forEach(item => {
const el = document.getElementById(item.id);
if (el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
item.collected = !item.collected;
const icon = this.querySelector('svg');
const countEl = document.getElementById(item.countId);
if (item.collected) {
this.classList.add('collected');
icon.setAttribute('fill', 'currentColor');
item.count++;
} else {
this.classList.remove('collected');
icon.setAttribute('fill', 'none');
item.count--;
}
countEl.textContent = item.count;
});
}
});
// ===== 评论按钮点击(阻止冒泡) =====
document.querySelectorAll('[id^="postComment"]').forEach(el => {
el.addEventListener('click', function(e) {
e.stopPropagation();
window.location.href = 'post-detail.html#comments';
});
});</script>
</body>
</html>