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