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