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.
 
 

1658 lines
54 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 16px;
font-size: 12px;
font-weight: 600;
color: var(--youth-text-primary);
position: relative;
z-index: 30;
}
.status-bar .right-icons {
display: flex;
align-items: center;
gap: 6px;
}
/* ===== 顶部导航栏(毛玻璃悬浮) ===== */
.top-nav {
position: absolute;
top: 24px;
left: 0;
right: 0;
height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
z-index: 25;
background: transparent;
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
transition: all 0.3s ease;
}
.top-nav.scrolled {
background: var(--youth-glass-bg);
backdrop-filter: blur(var(--youth-glass-blur));
-webkit-backdrop-filter: blur(var(--youth-glass-blur));
border-bottom: 1px solid var(--youth-glass-border);
}
.nav-icon-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--youth-radius-full);
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.2s ease;
color: var(--youth-text-primary);
}
.top-nav.scrolled .nav-icon-btn {
background: var(--youth-secondary);
border-color: var(--youth-border-light);
}
.nav-icon-btn:active {
transform: scale(0.92);
}
.nav-user-area {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
margin: 0 6px;
}
.nav-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--youth-gradient-primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 12px;
border: 2px solid rgba(255, 255, 255, 0.5);
}
.nav-user-info {
display: flex;
flex-direction: column;
gap: 1px;
}
.nav-nickname {
font-size: 12px;
font-weight: 600;
color: var(--youth-text-primary);
line-height: 1.2;
}
.nav-school {
font-size: 10px;
color: var(--youth-muted-foreground);
display: flex;
align-items: center;
gap: 2px;
}
.nav-follow-btn {
padding: 5px 10px;
font-size: 11px;
font-weight: 600;
border-radius: var(--youth-radius-full);
background: var(--youth-gradient-primary);
color: white;
border: none;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: var(--youth-shadow-soft);
}
.nav-follow-btn.followed {
background: var(--youth-secondary);
color: var(--youth-muted-foreground);
box-shadow: none;
}
.nav-follow-btn:active {
transform: scale(0.95);
}
/* ===== 滚动内容区 ===== */
.scroll-content {
position: absolute;
top: 24px;
left: 0;
right: 0;
bottom: 56px;
overflow: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.scroll-content::-webkit-scrollbar {
display: none;
}
/* ===== 动态头部信息 ===== */
.post-header {
padding: 50px 16px 10px;
}
.post-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--youth-muted-foreground);
margin-bottom: 8px;
}
.post-meta .topic-link {
color: var(--youth-primary);
font-weight: 500;
}
.post-text {
font-size: 14px;
line-height: 1.5;
color: var(--youth-text-primary);
font-weight: 400;
margin-bottom: 10px;
}
/* ===== 图片九宫格 ===== */
.image-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
border-radius: var(--youth-radius-lg);
overflow: hidden;
margin-bottom: 10px;
}
.image-item {
aspect-ratio: 1;
border-radius: 6px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.image-1 { background: linear-gradient(135deg, #54CAC5 0%, #26C2BB 50%, #1FA8A2 100%); }
.image-2 { background: linear-gradient(135deg, #FFC58A 0%, #FFB980 50%, #E8A06B 100%); }
.image-3 { background: linear-gradient(135deg, #B8A0E0 0%, #A08BD0 50%, #8B78C0 100%); }
.image-4 { background: linear-gradient(135deg, #F0A5C0 0%, #E090B0 50%, #D07BA0 100%); }
.image-5 { background: linear-gradient(135deg, #7DD090 0%, #68C07D 50%, #58B06D 100%); }
.image-6 { background: linear-gradient(135deg, #7FA0D8 0%, #6D8FCC 50%, #5D7FC0 100%); }
.image-7 { background: linear-gradient(135deg, #FFD870 0%, #FFCC4D 50%, #E8B53A 100%); }
.image-8 { background: linear-gradient(135deg, #F09090 0%, #E8A0A0 50%, #D88080 100%); }
.image-9 { background: linear-gradient(135deg, #26C2BB 0%, #54CAC5 30%, #7ED6D2 70%, #A5E3E0 100%); }
.image-decoration {
position: absolute;
font-size: 28px;
opacity: 0.3;
}
/* ===== 话题标签 ===== */
.topic-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.topic-tag {
font-size: 11px;
color: var(--youth-primary);
font-weight: 500;
background: var(--youth-accent);
padding: 3px 8px;
border-radius: var(--youth-radius-full);
}
/* ===== 位置信息 ===== */
.location-row {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--youth-muted-foreground);
margin-bottom: 10px;
}
.location-row svg {
color: var(--youth-primary);
width: 14px;
height: 14px;
}
/* ===== 数据统计栏 ===== */
.stats-bar {
display: flex;
align-items: center;
justify-content: space-around;
padding: 10px 0;
border-top: 1px solid var(--youth-border-light);
border-bottom: 1px solid var(--youth-border-light);
margin-bottom: 10px;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.stat-number {
font-size: 14px;
font-weight: 700;
color: var(--youth-text-primary);
}
.stat-label {
font-size: 10px;
color: var(--youth-muted-foreground);
}
/* ===== 互动按钮栏 ===== */
.action-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-bottom: 12px;
}
.action-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 10px 4px;
border-radius: var(--youth-radius-lg);
background: var(--youth-gradient-card);
border: 1px solid var(--youth-border-light);
box-shadow: var(--shadow-card), var(--youth-inset-soft);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.action-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
border-radius: var(--youth-radius-lg) var(--youth-radius-lg) 0 0;
pointer-events: none;
}
.action-btn:active {
transform: scale(0.95);
box-shadow: var(--youth-inset-soft);
}
.action-btn.liked {
background: linear-gradient(135deg, #FFE5E5 0%, #F5D4D4 100%);
border-color: transparent;
}
.action-btn.liked .action-icon {
color: #E8A0A0;
}
.action-btn.liked .action-text {
color: #E8A0A0;
}
.action-btn.collected {
background: linear-gradient(135deg, #FFF5E5 0%, #FFECD4 100%);
border-color: transparent;
}
.action-btn.collected .action-icon {
color: #FFB980;
}
.action-btn.collected .action-text {
color: #FFB980;
}
.action-btn.gift-btn {
background: linear-gradient(135deg, #E8A0C0 0%, #B890D8 50%, #90A8D8 100%);
border-color: transparent;
}
.action-btn.gift-btn .action-icon,
.action-btn.gift-btn .action-text {
color: white;
}
.action-icon {
width: 20px;
height: 20px;
color: var(--youth-text-primary);
transition: all 0.2s ease;
}
.action-text {
font-size: 10px;
font-weight: 500;
color: var(--youth-muted-foreground);
transition: all 0.2s ease;
}
/* ===== 评论区 ===== */
.comments-section {
padding: 0 16px 12px;
}
.comments-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.comments-title {
font-size: 13px;
font-weight: 600;
color: var(--youth-text-primary);
}
.comments-sort {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--youth-primary);
font-weight: 500;
cursor: pointer;
}
.comment-item {
display: flex;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid var(--youth-border-light);
}
.comment-item:last-child {
border-bottom: none;
}
.comment-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 11px;
}
.comment-avatar-1 { background: linear-gradient(135deg, #54CAC5 0%, #26C2BB 100%); }
.comment-avatar-2 { background: linear-gradient(135deg, #FFC58A 0%, #FFB980 100%); }
.comment-avatar-3 { background: linear-gradient(135deg, #B8A0E0 0%, #A08BD0 100%); }
.comment-content {
flex: 1;
min-width: 0;
}
.comment-top {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 3px;
}
.comment-nickname {
font-size: 12px;
font-weight: 600;
color: var(--youth-text-primary);
}
.hot-badge {
font-size: 9px;
font-weight: 600;
color: white;
background: linear-gradient(135deg, #FFB980 0%, #E8A06B 100%);
padding: 1px 5px;
border-radius: 4px;
line-height: 1.2;
}
.comment-text {
font-size: 12px;
line-height: 1.4;
color: var(--youth-text-primary);
margin-bottom: 5px;
}
.comment-bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
.comment-time {
font-size: 10px;
color: var(--youth-muted-foreground);
}
.comment-actions {
display: flex;
align-items: center;
gap: 10px;
}
.comment-action {
display: flex;
align-items: center;
gap: 2px;
font-size: 10px;
color: var(--youth-muted-foreground);
cursor: pointer;
transition: color 0.2s ease;
}
.comment-action.liked {
color: #E8A0A0;
}
.comment-action svg {
width: 12px;
height: 12px;
}
.reply-toggle {
font-size: 11px;
color: var(--youth-primary);
cursor: pointer;
margin-top: 6px;
display: flex;
align-items: center;
gap: 3px;
}
/* ===== 底部输入栏 ===== */
.bottom-input-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 56px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
background: var(--youth-glass-bg);
backdrop-filter: blur(var(--youth-glass-blur));
-webkit-backdrop-filter: blur(var(--youth-glass-blur));
border-top: 1px solid var(--youth-glass-border);
z-index: 20;
}
.comment-input-wrapper {
flex: 1;
position: relative;
}
.comment-input {
width: 100%;
height: 36px;
padding: 0 14px;
font-size: 13px;
color: var(--youth-text-primary);
background: var(--youth-input);
border: 1px solid var(--youth-border-light);
border-radius: var(--youth-radius-full);
box-shadow: var(--youth-inset-input);
outline: none;
transition: all 0.2s ease;
}
.comment-input:focus {
border-color: var(--youth-primary);
box-shadow: var(--youth-inset-input), 0 0 0 3px rgba(38, 194, 187, 0.15);
}
.comment-input::placeholder {
color: var(--youth-gray-400);
}
.emoji-btn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--youth-gray-400);
cursor: pointer;
transition: color 0.2s ease;
}
.emoji-btn:active {
color: var(--youth-primary);
}
.send-btn {
width: 36px;
height: 44px;
border-radius: 50%;
background: var(--youth-gradient-primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
border: none;
cursor: pointer;
box-shadow: var(--youth-shadow-soft);
transition: all 0.2s ease;
flex-shrink: 0;
}
.send-btn:active {
transform: scale(0.92);
}
.send-btn svg {
width: 16px;
height: 44px;
}
/* ===== 礼物弹窗 ===== */
.gift-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;
}
.gift-modal-overlay.show {
opacity: 1;
visibility: visible;
}
.gift-modal {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--youth-glass-bg);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border-radius: 20px 20px 0 0;
border: 1px solid var(--youth-glass-border);
border-bottom: none;
z-index: 999;
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
max-height: 70%;
overflow-y: auto;
scrollbar-width: none;
}
.gift-modal::-webkit-scrollbar {
display: none;
}
.gift-modal.show {
transform: translateY(0);
}
.gift-modal-handle {
width: 32px;
height: 3px;
background: var(--youth-gray-300);
border-radius: 2px;
margin: 8px auto 0;
}
.gift-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px 10px;
}
.gift-modal-title {
font-size: 15px;
font-weight: 700;
color: var(--youth-text-primary);
}
.gift-balance {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--youth-muted-foreground);
}
.gift-balance .balance-value {
color: var(--youth-primary);
font-weight: 600;
}
.gift-close-btn {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--youth-secondary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--youth-muted-foreground);
transition: all 0.2s ease;
}
.gift-close-btn:active {
transform: scale(0.9);
}
/* ===== 礼物分类Tab ===== */
.gift-tabs {
display: flex;
gap: 6px;
padding: 0 16px 12px;
}
.gift-tab {
padding: 5px 14px;
font-size: 12px;
font-weight: 500;
border-radius: var(--youth-radius-full);
background: var(--youth-secondary);
color: var(--youth-muted-foreground);
cursor: pointer;
transition: all 0.2s ease;
}
.gift-tab.active {
background: var(--youth-gradient-primary);
color: white;
box-shadow: var(--youth-shadow-soft);
}
/* ===== 礼物网格 ===== */
.gift-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 0 16px 14px;
}
.gift-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 10px 4px;
border-radius: var(--youth-radius-lg);
background: var(--youth-gradient-card);
border: 2px solid transparent;
box-shadow: var(--shadow-card);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.gift-item.selected {
border-color: var(--youth-primary);
background: var(--youth-accent);
box-shadow: var(--youth-shadow-soft);
}
.gift-item:active {
transform: scale(0.95);
}
.gift-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
position: relative;
}
.gift-icon::after {
content: '';
position: absolute;
bottom: -3px;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 6px;
background: rgba(0, 0, 0, 0.1);
border-radius: 50%;
filter: blur(3px);
}
.gift-name {
font-size: 11px;
font-weight: 500;
color: var(--youth-text-primary);
}
.gift-price {
display: flex;
align-items: center;
gap: 2px;
font-size: 10px;
color: var(--youth-primary);
font-weight: 600;
}
.gift-price svg {
width: 10px;
height: 10px;
}
/* ===== 立体礼物图标 ===== */
.gift-heart-icon {
position: relative;
width: 32px;
height: 28px;
filter: drop-shadow(0 3px 6px rgba(232, 160, 160, 0.4));
}
.gift-heart-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 32px;
height: 28px;
background: linear-gradient(135deg, #F5B8B8 0%, #E8A0A0 50%, #D88888 100%);
clip-path: path('M16 26 C16 26 3 17 3 9 C3 5 7 2 11 2 C13.5 2 16 3.5 16 6 C16 3.5 18.5 2 21 2 C25 2 29 5 29 9 C29 17 16 26 16 26 Z');
}
.gift-heart-icon::after {
content: '';
position: absolute;
top: 3px;
left: 5px;
width: 11px;
height: 8px;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
border-radius: 50%;
transform: rotate(-20deg);
}
/* ===== 数量选择 ===== */
.gift-quantity {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 12px 16px;
border-top: 1px solid var(--youth-border-light);
}
.qty-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--youth-gradient-card);
border: 1px solid var(--youth-border-light);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow-card), var(--youth-inset-soft);
transition: all 0.2s ease;
color: var(--youth-text-primary);
font-size: 16px;
font-weight: 600;
}
.qty-btn:active {
transform: scale(0.9);
box-shadow: var(--youth-inset-soft);
}
.qty-value {
font-size: 16px;
font-weight: 700;
color: var(--youth-text-primary);
min-width: 32px;
text-align: center;
}
/* ===== 赠送按钮 ===== */
.gift-send-section {
padding: 10px 16px 18px;
}
.gift-send-btn {
width: 100%;
height: 42px;
border-radius: var(--youth-radius-lg);
background: var(--youth-gradient-primary);
color: white;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
box-shadow: var(--youth-shadow-soft);
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.gift-send-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%);
border-radius: var(--youth-radius-lg) var(--youth-radius-lg) 0 0;
pointer-events: none;
}
.gift-send-btn:active {
transform: scale(0.98);
}
/* ===== 点赞动画 ===== */
@keyframes heartPop {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
.heart-pop {
animation: heartPop 0.3s ease;
}
@keyframes numberBump {
0% { transform: translateY(0); }
50% { transform: translateY(-4px); }
100% { transform: translateY(0); }
}
.number-bump {
animation: numberBump 0.3s ease;
}
/* 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: 1057px;">
<!-- 状态栏 -->
<div class="status-bar">
<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>
<div class="nav-user-area">
<div class="nav-avatar">小</div>
<div class="nav-user-info">
<div class="nav-nickname">小林同学</div>
<div class="nav-school">
<svg width="11" height="11" 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>
</div>
<button class="nav-follow-btn" data-dom-id="btn-follow" id="btnFollow">+ 关注</button>
</div>
<div style="display:flex;align-items:center;gap:6px;">
<button class="nav-icon-btn" data-dom-id="btn-more" id="btnMore">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<circle cx="12" cy="5" r="2"></circle>
<circle cx="12" cy="12" r="2"></circle>
<circle cx="12" cy="19" r="2"></circle>
</svg>
</button>
</div>
</div>
<!-- 滚动内容区 -->
<div class="scroll-content" id="scrollContent">
<!-- 动态头部 -->
<div class="post-header">
<div class="post-meta">
<span>2小时前</span>
<span>·</span>
<span class="topic-link">#校园日常</span>
</div>
<div class="post-text">
今天的西操场日落真的太美了!🌅 考完试出来散散步,刚好碰到这一幕。期末周压力再大,看到这样的风景也觉得被治愈了。大家期末加油呀!<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>
<br><br>
操场上还有好多人在跑步、打球,青春的感觉真好~ 下学期一定要多出来运动,不能再宅在图书馆了哈哈哈
</div>
<!-- 图片九宫格 -->
<div class="image-grid">
<div class="image-item image-1">
<span class="image-decoration">
</span>
</div>
<div class="image-item image-2">
</div>
<div class="image-item image-3">
</div>
<div class="image-item image-4">
</div>
<div class="image-item image-5">
<span class="image-decoration"></span>
</div>
<div class="image-item image-6">
<span class="image-decoration"></span>
</div>
<div class="image-item image-7">
<span class="image-decoration"></span>
</div>
<div class="image-item image-8">
<span class="image-decoration"></span>
</div>
<div class="image-item image-9">
</div>
</div>
<!-- 话题标签 -->
<div class="topic-tags">
</div>
<!-- 位置信息 -->
<div class="location-row">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path>
</svg>
<span>清华大学西操场</span>
</div>
<!-- 数据统计栏 -->
<div class="stats-bar">
<div class="stat-item">
<span class="stat-number" id="likeCount">256</span>
<span class="stat-label">点赞</span>
</div>
<div class="stat-item">
<span class="stat-number">38</span>
<span class="stat-label">评论</span>
</div>
<div class="stat-item">
<span class="stat-number" id="collectCount">42</span>
<span class="stat-label">收藏</span>
</div>
<div class="stat-item">
<span class="stat-number">1.2k</span>
<span class="stat-label">浏览</span>
</div>
</div>
<!-- 互动按钮栏 -->
<div class="action-bar">
<button class="action-btn" data-dom-id="btn-like" id="btnLike">
<svg class="action-icon" 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 class="action-text">点赞</span>
</button>
<button class="action-btn" data-dom-id="btn-comment" id="btnComment">
<svg class="action-icon" 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 class="action-text">评论</span>
</button>
<button class="action-btn" data-dom-id="btn-collect" id="btnCollect">
<svg class="action-icon" 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 class="action-text">收藏</span>
</button>
<button class="action-btn gift-btn" data-dom-id="btn-gift" id="btnGift">
<svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 12 20 22 4 22 4 12"></polyline>
<rect x="2" y="7" width="20" height="5"></rect>
<line x1="12" y1="22" x2="12" y2="7"></line>
<path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
<path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
</svg>
<span class="action-text">礼物</span>
</button>
</div>
</div>
<!-- 评论区 -->
<div class="comments-section">
<div class="comments-header">
<span class="comments-title">全部评论(38)</span>
<div class="comments-sort">
<span>最热</span>
<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="6 9 12 15 18 9"></polyline>
</svg>
</div>
</div>
<!-- 评论1 - 热门 -->
<div class="comment-item">
<div class="comment-avatar comment-avatar-1">阿</div>
<div class="comment-content">
<div class="comment-top">
<span class="comment-nickname">阿杰学长</span>
<span class="hot-badge">热</span>
</div>
<div class="comment-text">西操场的日落永远不会让人失望!考完试一起去跑步吧 <span class="icon-svg icon-person-running"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 4h1.5a1.5 1.5 0 0 1 0 3H13"></path><path d="M15.5 10a2 2 0 1 1 0 4"></path><path d="m6 21 1-7 4-4"></path><path d="M13 14l-3 3-1-5"></path><path d="M12 5h4"></path><path d="m14 21 2-5h3"></path></svg></span>‍♂️</div>
<div class="comment-bottom">
<span class="comment-time">1小时前</span>
<div class="comment-actions">
<div class="comment-action liked" id="commentLike1">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path>
</svg>
<span>128</span>
</div>
<div class="comment-action">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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>回复</span>
</div>
</div>
</div>
<div class="reply-toggle">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
查看2条回复
</div>
</div>
</div>
<!-- 评论2 -->
<div class="comment-item">
<div class="comment-avatar comment-avatar-2">晴</div>
<div class="comment-content">
<div class="comment-top">
<span class="comment-nickname">晴天小雨</span>
</div>
<div class="comment-text">拍得好好看!是用什么相机拍的呀 <span class="icon-svg icon-camera"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"></path><circle cx="12" cy="13" r="3"></circle></svg></span></div>
<div class="comment-bottom">
<span class="comment-time">45分钟前</span>
<div class="comment-actions">
<div class="comment-action" id="commentLike2">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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>56</span>
</div>
<div class="comment-action">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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>回复</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部评论输入栏 -->
<div class="bottom-input-bar">
<div class="comment-input-wrapper">
<input type="text" class="comment-input" data-dom-id="comment-input" id="commentInput" placeholder="说点什么...">
<div class="emoji-btn">
<svg width="20" height="20" 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" y1="9" x2="9.01" y2="9"></line>
<line x1="15" y1="9" x2="15.01" y2="9"></line>
</svg>
</div>
</div>
<button class="send-btn" data-dom-id="btn-send" id="btnSend">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
</button>
</div>
<!-- 礼物弹窗遮罩 -->
<div class="gift-modal-overlay" id="giftOverlay"></div>
<!-- 礼物弹窗 -->
<div class="gift-modal" data-dom-id="gift-modal" id="giftModal">
<div class="gift-modal-handle"></div>
<div class="gift-modal-header">
<div>
<div class="gift-modal-title">送礼物</div>
<div class="gift-balance">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"></path>
</svg>
<span>余额:</span>
<span class="balance-value">1280 青核积分</span>
</div>
</div>
<button class="gift-close-btn" data-dom-id="btn-gift-close" id="btnGiftClose">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<!-- 礼物分类Tab -->
<div class="gift-tabs">
<div class="gift-tab active">热门</div>
<div class="gift-tab">虚拟</div>
<div class="gift-tab">实物</div>
</div>
<!-- 礼物网格 -->
<div class="gift-grid">
<div class="gift-item selected" data-dom-id="gift-heart" data-gift-id="heart" data-price="10">
<div class="gift-icon">
<div class="gift-heart-icon"></div>
</div>
<div class="gift-name">小心心</div>
<div class="gift-price">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"></path>
</svg>
10
</div>
</div>
<div class="gift-item" data-dom-id="gift-milktea" data-gift-id="milktea" data-price="50">
<div class="gift-icon" style="font-size: 36px;">🧋</div>
<div class="gift-name">奶茶</div>
<div class="gift-price">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"></path>
</svg>
50
</div>
</div>
<div class="gift-item" data-dom-id="gift-flower" data-gift-id="flower" data-price="30">
<div class="gift-icon" style="font-size: 36px;">🌸</div>
<div class="gift-name">小花花</div>
<div class="gift-price">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"></path>
</svg>
30
</div>
</div>
<div class="gift-item" data-dom-id="gift-rocket" data-gift-id="rocket" data-price="200">
<div class="gift-icon" style="font-size: 36px;">🚀</div>
<div class="gift-name">火箭</div>
<div class="gift-price">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"></path>
</svg>
200
</div>
</div>
<div class="gift-item" data-dom-id="gift-trophy" data-gift-id="trophy" data-price="500">
<div class="gift-icon" style="font-size: 36px;"><span class="icon-svg icon-trophy"><svg 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></span></div>
<div class="gift-name">奖杯</div>
<div class="gift-price">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"></path>
</svg>
500
</div>
</div>
<div class="gift-item" data-dom-id="gift-crown" data-gift-id="crown" data-price="1000">
<div class="gift-icon" style="font-size: 36px;"><span class="icon-svg icon-crown"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z"></path><path d="M5 21h14"></path></svg></span></div>
<div class="gift-name">皇冠</div>
<div class="gift-price">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"></path>
</svg>
1000
</div>
</div>
</div>
<!-- 数量选择 -->
<div class="gift-quantity">
<button class="qty-btn" id="qtyMinus">−</button>
<span class="qty-value" id="qtyValue">1</span>
<button class="qty-btn" id="qtyPlus">+</button>
</div>
<!-- 赠送按钮 -->
<div class="gift-send-section">
<button class="gift-send-btn" data-dom-id="btn-gift-send" id="btnGiftSend">
赠送 · 10 积分
</button>
</div>
</div>
</div>
<script>// ===== 主题切换 =====
const html = document.documentElement;
// ===== 返回按钮 =====
document.getElementById('btnBack').addEventListener('click', function() {
window.location.href = 'feed-home.html';
});
// ===== 关注按钮 =====
const btnFollow = document.getElementById('btnFollow');
let isFollowed = false;
btnFollow.addEventListener('click', function() {
isFollowed = !isFollowed;
if (isFollowed) {
btnFollow.textContent = '已关注';
btnFollow.classList.add('followed');
} else {
btnFollow.textContent = '+ 关注';
btnFollow.classList.remove('followed');
}
});
// ===== 更多按钮 =====
document.getElementById('btnMore').addEventListener('click', function() {
// 更多操作菜单占位
});
// ===== 点赞按钮 =====
const btnLike = document.getElementById('btnLike');
const likeCount = document.getElementById('likeCount');
let isLiked = false;
let likeNum = 256;
btnLike.addEventListener('click', function() {
isLiked = !isLiked;
const icon = btnLike.querySelector('.action-icon');
if (isLiked) {
btnLike.classList.add('liked');
icon.setAttribute('fill', 'currentColor');
likeNum++;
} else {
btnLike.classList.remove('liked');
icon.setAttribute('fill', 'none');
likeNum--;
}
likeCount.textContent = likeNum;
likeCount.classList.add('number-bump');
icon.classList.add('heart-pop');
setTimeout(() => {
likeCount.classList.remove('number-bump');
icon.classList.remove('heart-pop');
}, 300);
});
// ===== 收藏按钮 =====
const btnCollect = document.getElementById('btnCollect');
const collectCount = document.getElementById('collectCount');
let isCollected = false;
let collectNum = 42;
btnCollect.addEventListener('click', function() {
isCollected = !isCollected;
const icon = btnCollect.querySelector('.action-icon');
if (isCollected) {
btnCollect.classList.add('collected');
icon.setAttribute('fill', 'currentColor');
collectNum++;
} else {
btnCollect.classList.remove('collected');
icon.setAttribute('fill', 'none');
collectNum--;
}
collectCount.textContent = collectNum;
collectCount.classList.add('number-bump');
icon.classList.add('heart-pop');
setTimeout(() => {
collectCount.classList.remove('number-bump');
icon.classList.remove('heart-pop');
}, 300);
});
// ===== 评论按钮(滚动到评论区) =====
document.getElementById('btnComment').addEventListener('click', function() {
const commentsSection = document.querySelector('.comments-section');
document.getElementById('scrollContent').scrollTo({
top: commentsSection.offsetTop - 60,
behavior: 'smooth'
});
});
// ===== 礼物弹窗 =====
const btnGift = document.getElementById('btnGift');
const giftModal = document.getElementById('giftModal');
const giftOverlay = document.getElementById('giftOverlay');
const btnGiftClose = document.getElementById('btnGiftClose');
function openGiftModal() {
giftOverlay.classList.add('show');
giftModal.classList.add('show');
document.getElementById('scrollContent').style.overflow = 'hidden';
}
function closeGiftModal() {
giftOverlay.classList.remove('show');
giftModal.classList.remove('show');
document.getElementById('scrollContent').style.overflow = 'auto';
}
btnGift.addEventListener('click', openGiftModal);
btnGiftClose.addEventListener('click', closeGiftModal);
giftOverlay.addEventListener('click', closeGiftModal);
// ===== 礼物选择 =====
const giftItems = document.querySelectorAll('.gift-item');
let selectedGiftPrice = 10;
let quantity = 1;
giftItems.forEach(item => {
item.addEventListener('click', function() {
giftItems.forEach(i => i.classList.remove('selected'));
this.classList.add('selected');
selectedGiftPrice = parseInt(this.dataset.price);
updateGiftSendBtn();
});
});
// ===== 数量加减 =====
const qtyMinus = document.getElementById('qtyMinus');
const qtyPlus = document.getElementById('qtyPlus');
const qtyValue = document.getElementById('qtyValue');
qtyMinus.addEventListener('click', function() {
if (quantity > 1) {
quantity--;
qtyValue.textContent = quantity;
updateGiftSendBtn();
}
});
qtyPlus.addEventListener('click', function() {
if (quantity < 99) {
quantity++;
qtyValue.textContent = quantity;
updateGiftSendBtn();
}
});
function updateGiftSendBtn() {
const total = selectedGiftPrice * quantity;
document.getElementById('btnGiftSend').textContent = `赠送 · ${total} 积分`;
}
// ===== 赠送按钮 =====
document.getElementById('btnGiftSend').addEventListener('click', function() {
const btn = this;
const originalText = btn.textContent;
btn.textContent = '赠送成功!';
btn.style.background = 'linear-gradient(135deg, #34C759 0%, #30B850 100%)';
setTimeout(() => {
btn.textContent = originalText;
btn.style.background = '';
closeGiftModal();
}, 1000);
});
// ===== 评论发送 =====
const commentInput = document.getElementById('commentInput');
const btnSend = document.getElementById('btnSend');
function sendComment() {
const text = commentInput.value.trim();
if (text) {
// 简单的发送反馈
commentInput.value = '';
btnSend.style.transform = 'scale(0.9)';
setTimeout(() => {
btnSend.style.transform = '';
}, 150);
}
}
btnSend.addEventListener('click', sendComment);
commentInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendComment();
}
});
// ===== 页面滚动导航栏毛玻璃效果 =====
const scrollContent = document.getElementById('scrollContent');
const topNav = document.getElementById('topNav');
scrollContent.addEventListener('scroll', function() {
const scrollTop = scrollContent.scrollTop;
if (scrollTop > 20) {
topNav.classList.add('scrolled');
} else {
topNav.classList.remove('scrolled');
}
});
// ===== 评论点赞 =====
const commentLikeBtns = [
{ id: 'commentLike1', liked: true, count: 128 },
{ id: 'commentLike2', liked: false, count: 56 },
{ id: 'commentLike3', liked: false, count: 42 }
];
commentLikeBtns.forEach(item => {
const el = document.getElementById(item.id);
if (el) {
el.addEventListener('click', function() {
item.liked = !item.liked;
if (item.liked) {
item.count++;
this.classList.add('liked');
const svg = this.querySelector('svg');
svg.setAttribute('fill', 'currentColor');
svg.setAttribute('stroke', 'none');
} else {
item.count--;
this.classList.remove('liked');
const svg = this.querySelector('svg');
svg.setAttribute('fill', 'none');
svg.setAttribute('stroke', 'currentColor');
}
this.querySelector('span').textContent = item.count;
});
}
});
// ===== 礼物分类Tab切换 =====
const giftTabs = document.querySelectorAll('.gift-tab');
giftTabs.forEach(tab => {
tab.addEventListener('click', function() {
giftTabs.forEach(t => t.classList.remove('active'));
this.classList.add('active');
});
});</script>
</body>
</html>