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.
 
 
 
 

2206 lines
70 KiB

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频详情 - 青核 Youthome</title>
<script>
if (new URLSearchParams(location.search).has('video')) {
document.documentElement.classList.add('profile-video-route-pending');
}
</script>
<style>
.profile-video-route-pending .main-area { visibility: hidden; }
.profile-video-detail .video-center-play,
.profile-video-detail .video-controls,
.profile-video-detail .video-top-left,
.profile-video-detail .video-top-right,
.profile-video-detail .video-actions,
.profile-video-detail .comments-section,
.profile-video-detail .content-right,
.profile-video-detail .author-stats,
.profile-video-detail .author-card .follow-btn { display: none !important; }
.profile-video-detail .profile-video-unavailable {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
color: #fff;
font-size: 16px;
z-index: 6;
}
</style>
<link rel="stylesheet" href="../css/design-system.css">
<style>
/* ============================================================
视频详情页 · 浅色主题 · 青核 Youthome
============================================================ */
/* ===== 全局布局 ===== */
.app {
width: 1920px
max-width: 100%;
overflow: hidden;;
min-height: 100vh;
margin: 0 auto;
display: flex;
position: relative;
background: var(--bg-page);
}
/* ===== 侧边栏 ===== */
.sidebar {
width: var(--sidebar-width);
height: 100vh;
background: var(--bg-card);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
flex-shrink: 0;
z-index: 20;
position: sticky;
top: 0;
}
.sidebar-logo {
padding: 24px 20px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--border-light);
cursor: pointer;
flex-shrink: 0;
}
.sidebar-logo-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, var(--primary-light), var(--primary));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 16px;
font-weight: 700;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(23, 176, 207, 0.25);
}
.sidebar-logo-text .main {
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
}
.sidebar-logo-text .sub {
font-size: 11px;
color: var(--text-tertiary);
display: block;
margin-top: 2px;
}
/* ===== 发布按钮 ===== */
.sidebar-publish {
padding: 16px 12px 8px;
flex-shrink: 0;
}
.publish-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
background: var(--primary);
color: #fff;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all .2s ease;
box-shadow: 0 4px 12px rgba(23, 176, 207, 0.25);
}
.publish-btn:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(23, 176, 207, 0.35);
}
.publish-btn svg {
width: 20px;
height: 20px;
}
.publish-btn .publish-arrow {
width: 16px;
height: 16px;
opacity: 0.8;
transition: transform .2s;
}
.publish-btn:hover .publish-arrow {
transform: translateY(1px);
}
.publish-dropdown {
display: none;
margin-top: 6px;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.sidebar-publish:hover .publish-dropdown {
display: block;
}
.publish-option {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
transition: background .15s;
}
.publish-option:hover {
background: var(--bg-hover);
}
.publish-option svg {
width: 22px;
height: 22px;
color: var(--primary);
flex-shrink: 0;
}
.publish-option-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.publish-option-desc {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 2px;
}
/* ===== 导航 ===== */
.sidebar-nav {
flex: 1;
padding: 8px 12px 16px 12px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.nav-section-title {
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
padding: 12px 12px 8px;
letter-spacing: 0.05em;
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
height: 44px;
padding: 0 12px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all .15s ease;
}
.nav-item:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.nav-item.active {
background: var(--primary-bg);
color: var(--primary);
font-weight: 600;
}
.nav-item svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.nav-item-label {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
}
.nav-badge {
min-width: 18px;
height: 18px;
padding: 0 5px;
background: #FF4D4F;
color: #fff;
font-size: 11px;
font-weight: 600;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* ===== 侧边栏底部用户卡片 ===== */
.sidebar-footer {
padding: 12px 12px 16px;
border-top: 1px solid var(--border-light);
flex-shrink: 0;
}
.sidebar-user {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
border-radius: 10px;
cursor: pointer;
transition: background .15s;
}
.sidebar-user:hover {
background: var(--bg-hover);
}
.sidebar-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-light), var(--primary));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 13px;
font-weight: 600;
overflow: hidden;
flex-shrink: 0;
}
.sidebar-user-info {
flex: 1;
min-width: 0;
}
.sidebar-user-name {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.sidebar-user-desc {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 1px;
}
.sidebar-user-arrow {
width: 16px;
height: 16px;
color: var(--text-tertiary);
flex-shrink: 0;
}
/* ===== 主内容区 ===== */
.main-area {
flex: 1;
display: flex;
min-width: 0;
background: var(--bg-page);
padding: 24px;
gap: 24px;
}
/* ===== 左侧主内容 ===== */
.content-left {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
/* ===== 视频播放器 ===== */
.video-player-wrap {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 14px;
overflow: hidden;
background: #1a1a2e;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.video-player-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 20%, rgba(23, 176, 207, 0.2) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(125, 216, 212, 0.15) 0%, transparent 50%),
linear-gradient(135deg, #1a2a3a 0%, #0d1b2a 50%, #1a2a3a 100%);
}
.video-player-pattern {
position: absolute;
inset: 0;
opacity: 0.3;
background-image:
radial-gradient(circle at 25% 35%, rgba(23, 176, 207, 0.3) 0%, transparent 8%),
radial-gradient(circle at 75% 65%, rgba(125, 216, 212, 0.2) 0%, transparent 10%),
radial-gradient(circle at 50% 80%, rgba(23, 176, 207, 0.15) 0%, transparent 12%);
}
.video-center-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s ease;
z-index: 5;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.video-center-play:hover {
transform: translate(-50%, -50%) scale(1.1);
background: rgba(23, 176, 207, 0.4);
border-color: var(--primary);
}
.video-center-play svg {
width: 36px;
height: 36px;
color: #fff;
margin-left: 4px;
}
/* 视频控制栏 */
.video-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px 20px 16px;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
z-index: 5;
}
.video-progress-bar {
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
cursor: pointer;
margin-bottom: 12px;
}
.video-progress-fill {
width: 38%;
height: 100%;
background: var(--primary);
border-radius: 2px;
position: relative;
}
.video-progress-fill::after {
content: '';
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
background: var(--bg-card);
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.video-controls-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.video-controls-left,
.video-controls-right {
display: flex;
align-items: center;
gap: 16px;
}
.video-control-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #fff;
transition: color .15s;
}
.video-control-btn:hover {
color: var(--primary);
}
.video-control-btn svg {
width: 20px;
height: 20px;
}
.video-time {
font-size: 13px;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
.video-quality {
font-size: 13px;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
cursor: pointer;
padding: 2px 8px;
border-radius: 4px;
transition: background .15s;
}
.video-quality:hover {
background: rgba(255, 255, 255, 0.15);
}
/* 视频左上角标签 */
.video-top-left {
position: absolute;
top: 16px;
left: 16px;
z-index: 5;
display: flex;
align-items: center;
gap: 8px;
}
.video-top-tag {
padding: 4px 12px;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(6px);
border-radius: 14px;
font-size: 12px;
font-weight: 500;
color: #fff;
display: flex;
align-items: center;
gap: 6px;
}
.video-top-tag svg {
width: 14px;
height: 14px;
color: var(--primary);
}
/* 视频右上角 */
.video-top-right {
position: absolute;
top: 16px;
right: 16px;
z-index: 5;
display: flex;
gap: 8px;
}
.video-top-icon-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #fff;
transition: all .15s;
}
.video-top-icon-btn:hover {
background: rgba(23, 176, 207, 0.6);
}
.video-top-icon-btn svg {
width: 18px;
height: 18px;
}
/* ===== 视频信息卡片 ===== */
.video-info-card {
background: var(--bg-card);
border-radius: 14px;
padding: 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
border: 1px solid var(--border-light);
}
.video-title {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.4;
margin-bottom: 14px;
}
.video-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
}
.video-meta-left {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.video-meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-tertiary);
}
.video-meta-item svg {
width: 16px;
height: 16px;
}
.video-topics {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.video-topic-tag {
padding: 3px 12px;
background: var(--primary-bg);
color: var(--primary);
border-radius: 8px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all .15s;
}
.video-topic-tag:hover {
background: var(--primary-lighter);
}
/* 操作栏 */
.video-actions {
display: flex;
align-items: center;
gap: 8px;
padding-top: 16px;
border-top: 1px solid var(--border-light);
}
.action-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all .15s;
background: var(--bg-page);
border: 1px solid transparent;
}
.action-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.action-btn.active {
color: var(--primary);
background: var(--primary-bg);
}
.action-btn.active svg {
fill: var(--primary);
}
.action-btn svg {
width: 18px;
height: 18px;
}
.action-btn .count {
font-weight: 600;
}
/* ===== 作者卡片 ===== */
.author-card {
background: var(--bg-card);
border-radius: 14px;
padding: 20px 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
border: 1px solid var(--border-light);
display: flex;
align-items: center;
gap: 16px;
}
.author-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-light), var(--primary));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
font-weight: 700;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(23, 176, 207, 0.2);
}
.author-info {
flex: 1;
min-width: 0;
}
.author-name {
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.author-verify {
width: 16px;
height: 16px;
color: var(--primary);
}
.author-school {
font-size: 12px;
color: var(--text-tertiary);
margin-top: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.author-school svg {
width: 14px;
height: 14px;
}
.author-stats {
font-size: 12px;
color: var(--text-tertiary);
margin-top: 6px;
}
.author-stats strong {
color: var(--text-primary);
font-weight: 600;
}
.follow-btn {
height: 36px;
padding: 0 20px;
background: var(--primary);
color: #fff;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all .2s ease;
display: flex;
align-items: center;
gap: 4px;
box-shadow: 0 2px 8px rgba(23, 176, 207, 0.25);
flex-shrink: 0;
}
.follow-btn:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(23, 176, 207, 0.3);
}
.follow-btn.followed {
background: var(--bg-hover);
color: var(--text-secondary);
box-shadow: none;
}
.follow-btn svg {
width: 16px;
height: 16px;
}
/* ===== 视频描述 ===== */
.video-desc {
background: var(--bg-card);
border-radius: 14px;
padding: 20px 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
border: 1px solid var(--border-light);
font-size: 14px;
color: var(--text-secondary);
line-height: 1.8;
}
.video-desc-title {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 10px;
}
/* ===== 评论区 ===== */
.comments-section {
background: var(--bg-card);
border-radius: 14px;
padding: 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
border: 1px solid var(--border-light);
}
.comments-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.comments-title {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
}
.comments-count {
font-size: 14px;
color: var(--text-tertiary);
font-weight: 400;
margin-left: 8px;
}
.comment-tabs {
display: flex;
gap: 4px;
background: var(--bg-page);
padding: 4px;
border-radius: 10px;
}
.comment-tab {
padding: 6px 18px;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
border-radius: 8px;
cursor: pointer;
transition: all .15s ease;
}
.comment-tab:hover {
color: var(--text-primary);
}
.comment-tab.active {
background: var(--bg-card);
color: var(--primary);
font-weight: 600;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
/* 评论输入 */
.comment-input-area {
display: flex;
gap: 12px;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-light);
}
.comment-input-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-light), var(--primary));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
font-weight: 600;
flex-shrink: 0;
}
.comment-input-wrap {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.comment-textarea {
width: 100%;
min-height: 72px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 10px;
font-size: 14px;
color: var(--text-primary);
background: var(--bg-page);
resize: none;
transition: all .15s ease;
font-family: inherit;
line-height: 1.6;
}
.comment-textarea:hover {
border-color: var(--text-tertiary);
background: var(--bg-card);
}
.comment-textarea:focus {
border-color: var(--primary);
background: var(--bg-card);
box-shadow: 0 0 0 3px rgba(23, 176, 207, 0.1);
outline: none;
}
.comment-textarea::placeholder {
color: var(--text-placeholder);
}
.comment-input-actions {
display: flex;
align-items: center;
justify-content: space-between;
}
.comment-input-tools {
display: flex;
gap: 4px;
}
.comment-tool-btn {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-tertiary);
transition: all .15s;
}
.comment-tool-btn:hover {
background: var(--bg-hover);
color: var(--primary);
}
.comment-tool-btn svg {
width: 18px;
height: 18px;
}
.comment-submit-btn {
height: 34px;
padding: 0 22px;
background: var(--primary);
color: #fff;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all .15s;
box-shadow: 0 2px 6px rgba(23, 176, 207, 0.2);
}
.comment-submit-btn:hover {
background: var(--primary-hover);
}
/* 评论列表 */
.comment-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.comment-item {
display: flex;
gap: 12px;
}
.comment-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
font-weight: 600;
}
.comment-body {
flex: 1;
min-width: 0;
}
.comment-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.comment-name {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.comment-author-badge {
padding: 1px 6px;
background: var(--primary-bg);
color: var(--primary);
font-size: 10px;
border-radius: 4px;
font-weight: 600;
}
.comment-time {
font-size: 12px;
color: var(--text-tertiary);
}
.comment-text {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.7;
word-break: break-word;
}
.comment-footer {
display: flex;
align-items: center;
gap: 16px;
margin-top: 8px;
font-size: 12px;
color: var(--text-tertiary);
}
.comment-action {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
transition: color .15s;
padding: 2px 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
}
.comment-action:hover {
color: var(--primary);
}
.comment-action.liked {
color: var(--primary);
}
.comment-action.liked svg {
fill: var(--primary);
}
.comment-action svg {
width: 14px;
height: 14px;
}
/* 子回复 */
.sub-replies {
margin-top: 12px;
padding: 12px 16px;
background: var(--bg-page);
border-radius: 10px;
}
.sub-reply {
display: flex;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid var(--border-light);
}
.sub-reply:last-child {
border-bottom: none;
padding-bottom: 0;
}
.sub-reply:first-child {
padding-top: 0;
}
.sub-reply-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 11px;
font-weight: 600;
}
.sub-reply-body {
flex: 1;
min-width: 0;
}
.sub-reply-name {
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
}
.sub-reply-text {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.6;
}
.sub-reply-footer {
display: flex;
gap: 14px;
margin-top: 4px;
font-size: 11px;
color: var(--text-tertiary);
}
.view-more-replies {
font-size: 12px;
color: var(--primary);
cursor: pointer;
margin-top: 10px;
font-weight: 500;
transition: opacity .15s;
}
.view-more-replies:hover {
opacity: 0.8;
}
/* ===== 右侧边栏 ===== */
.content-right {
width: 320px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 20px;
position: sticky;
top: 24px;
height: fit-content;
}
.side-card {
background: var(--bg-card);
border-radius: 14px;
padding: 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
border: 1px solid var(--border-light);
}
.side-card-title {
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
.side-card-title .more {
font-size: 12px;
font-weight: 400;
color: var(--text-tertiary);
cursor: pointer;
transition: color .15s;
}
.side-card-title .more:hover {
color: var(--primary);
}
/* 相关视频列表 */
.related-video-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.related-video-item {
display: flex;
gap: 12px;
cursor: pointer;
transition: opacity .15s;
}
.related-video-item:hover {
opacity: 0.85;
}
.related-video-thumb {
width: 120px;
height: 68px;
border-radius: 8px;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.related-video-thumb svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
color: rgba(255, 255, 255, 0.9);
opacity: 0;
transition: opacity .2s;
}
.related-video-item:hover .related-video-thumb svg {
opacity: 1;
}
.related-video-duration {
position: absolute;
bottom: 4px;
right: 4px;
padding: 1px 6px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 10px;
border-radius: 3px;
font-weight: 500;
}
.related-video-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2px 0;
}
.related-video-title {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.related-video-meta {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--text-tertiary);
}
.related-video-views {
display: flex;
align-items: center;
gap: 3px;
}
.related-video-views svg {
width: 12px;
height: 12px;
}
/* 推荐关注 */
.recommend-user-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.recommend-user-item {
display: flex;
align-items: center;
gap: 12px;
}
.recommend-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 16px;
font-weight: 600;
}
.recommend-info {
flex: 1;
min-width: 0;
}
.recommend-name {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 6px;
}
.recommend-name svg {
width: 14px;
height: 14px;
color: var(--primary);
}
.recommend-desc {
font-size: 12px;
color: var(--text-tertiary);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.recommend-follow-btn {
width: 56px;
height: 28px;
border-radius: 8px;
background: var(--primary-bg);
color: var(--primary);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all .15s;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
}
.recommend-follow-btn:hover {
background: var(--primary);
color: #fff;
}
.recommend-follow-btn.followed {
background: var(--bg-hover);
color: var(--text-tertiary);
}
.recommend-follow-btn svg {
width: 12px;
height: 12px;
}
</style>
<link rel="stylesheet" href="../css/web-refresh.css?v=20261020-brand-color">
</head>
<body>
<div class="app">
<!-- ===== 左侧边栏 ===== -->
<aside class="sidebar">
<!-- Logo -->
<div class="sidebar-logo">
<div class="sidebar-logo-icon">青</div>
<div class="sidebar-logo-text">
<span class="main">青核 Youthome</span>
<span class="sub">校园青年社交平台</span>
</div>
</div>
<!-- 发布按钮 -->
<div class="sidebar-publish">
<div class="publish-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
发布内容
<svg class="publish-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="publish-dropdown">
<div class="publish-option">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
<line x1="8" y1="21" x2="16" y2="21"></line>
<line x1="12" y1="17" x2="12" y2="21"></line>
</svg>
<div>
<div class="publish-option-title">发布视频</div>
<div class="publish-option-desc">分享你的精彩瞬间</div>
</div>
</div>
<div class="publish-option">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 19l7-7 3 3-7 7-3-3z"></path>
<path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path>
<path d="M2 2l7.586 7.586"></path>
<circle cx="11" cy="11" r="2"></circle>
</svg>
<div>
<div class="publish-option-title">发布动态</div>
<div class="publish-option-desc">记录校园生活点滴</div>
</div>
</div>
<div class="publish-option">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<div>
<div class="publish-option-title">发起活动</div>
<div class="publish-option-desc">组织有趣的校园活动</div>
</div>
</div>
</div>
</div>
<!-- 导航菜单 -->
<nav class="sidebar-nav">
<div class="nav-section-title">探索</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
<span class="nav-item-label">首页</span>
</div>
<div class="nav-item active">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="23 7 16 12 23 17 23 7"></polygon>
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
</svg>
<span class="nav-item-label">视频广场</span>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="4"></circle>
<path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path>
</svg>
<span class="nav-item-label">动态</span>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
</svg>
<span class="nav-item-label">话题广场</span>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<span class="nav-item-label">活动中心</span>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
<span class="nav-item-label">校园圈</span>
</div>
<div class="nav-section-title">我的</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
</svg>
<span class="nav-item-label">消息<span class="nav-badge">5</span></span>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
<span class="nav-item-label">我的收藏</span>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<span class="nav-item-label">个人主页</span>
</div>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
<span class="nav-item-label">设置</span>
</div>
</nav>
<!-- 底部用户卡片 -->
<div class="sidebar-footer">
<div class="sidebar-user">
<div class="sidebar-avatar">夏</div>
<div class="sidebar-user-info">
<div class="sidebar-user-name">林小夏</div>
<div class="sidebar-user-desc">复旦大学 · 大二</div>
</div>
<svg class="sidebar-user-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</div>
</div>
</aside>
<!-- ===== 主内容区 ===== -->
<main class="main-area">
<!-- 左侧主要内容 -->
<div class="content-left">
<!-- 视频播放器 -->
<div class="video-player-wrap">
<div class="video-player-bg"></div>
<div class="video-player-pattern"></div>
<!-- 左上角标签 -->
<div class="video-top-left">
<div class="video-top-tag">
<svg viewBox="0 0 24 24" fill="currentColor">
<polygon points="23 7 16 12 23 17 23 7"></polygon>
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
</svg>
校园音乐
</div>
</div>
<!-- 右上角按钮 -->
<div class="video-top-right">
<div class="video-top-icon-btn" title="画中画">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<rect x="12" y="12" width="8" height="7" rx="1" ry="1"></rect>
</svg>
</div>
<div class="video-top-icon-btn" title="全屏">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
</svg>
</div>
</div>
<!-- 中央播放按钮 -->
<div class="video-center-play">
<svg viewBox="0 0 24 24" fill="currentColor">
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>
</div>
<!-- 控制栏 -->
<div class="video-controls">
<div class="video-progress-bar">
<div class="video-progress-fill"></div>
</div>
<div class="video-controls-row">
<div class="video-controls-left">
<div class="video-control-btn" title="播放/暂停">
<svg viewBox="0 0 24 24" fill="currentColor">
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>
</div>
<div class="video-control-btn" title="下一个">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="19 20 9 12 19 4 19 20"></polygon>
<line x1="5" y1="19" x2="5" y2="5"></line>
</svg>
</div>
<div class="video-control-btn" title="音量">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
<path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
</svg>
</div>
<span class="video-time">01:02 / 02:45</span>
</div>
<div class="video-controls-right">
<span class="video-quality">1080P</span>
<div class="video-control-btn" title="字幕">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="5" width="20" height="14" rx="2"></rect>
<path d="M6 13h4M14 13h4M6 17h2M16 17h2"></path>
</svg>
</div>
<div class="video-control-btn" title="倍速">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
</div>
<div class="video-control-btn" title="更多">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="12" cy="5" r="1"></circle>
<circle cx="12" cy="19" r="1"></circle>
</svg>
</div>
</div>
</div>
</div>
</div>
<!-- 视频信息卡片 -->
<div class="video-info-card">
<h1 class="video-title">校园十佳歌手大赛现场回顾 | 这才是青春该有的样子</h1>
<div class="video-meta-row">
<div class="video-meta-left">
<div class="video-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
12.8万次播放
</div>
<div class="video-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
发布于 2024-05-20
</div>
<div class="video-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
</svg>
原创视频
</div>
</div>
<div class="video-topics">
<span class="video-topic-tag">#校园十佳歌手</span>
<span class="video-topic-tag">#青春校园</span>
<span class="video-topic-tag">#音乐现场</span>
</div>
</div>
<!-- 操作栏 -->
<div class="video-actions">
<div class="action-btn active" onclick="this.classList.toggle('active')">
<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 class="count">3,256</span>
<span>点赞</span>
</div>
<div class="action-btn">
<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 class="count">256</span>
<span>评论</span>
</div>
<div class="action-btn" onclick="this.classList.toggle('active')">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
<span class="count">892</span>
<span>收藏</span>
</div>
<div class="action-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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>
<span>分享</span>
</div>
<div class="action-btn" style="margin-left: auto;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path>
<line x1="4" y1="22" x2="4" y2="15"></line>
</svg>
<span>投币</span>
</div>
</div>
</div>
<!-- 作者卡片 -->
<div class="author-card">
<div class="author-avatar">文</div>
<div class="author-info">
<div class="author-name">
文艺部官方账号
<svg class="author-verify" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2z"/>
</svg>
</div>
<div class="author-school">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 10v6M2 10l10-5 10 5-10 5z"></path>
<path d="M6 12v5c3 3 9 3 12 0v-5"></path>
</svg>
复旦大学学生会文艺部
</div>
<div class="author-stats">
<strong>12.5万</strong> 粉丝 · <strong>368</strong> 作品
</div>
</div>
<button class="follow-btn" onclick="this.classList.toggle('followed'); this.innerHTML = this.classList.contains('followed') ? '已关注' : '+ 关注';">
+ 关注
</button>
</div>
<!-- 视频描述 -->
<div class="video-desc">
<div class="video-desc-title">视频简介</div>
<p>
2024年度校园十佳歌手大赛决赛现场完整版回顾!来自全校各院系的20位选手经过三轮激烈角逐,最终诞生了新一届的校园十佳歌手。
</p>
<p style="margin-top: 10px;">
从海选到决赛,历时两个月的音乐盛宴终于落下帷幕。感谢每一位参赛选手带来的精彩表演,感谢所有台前幕后工作人员的辛勤付出,也感谢每一位到场观众的热情支持。青春不散场,我们明年再见!
</p>
<p style="margin-top: 10px;">
📍 地点:大学礼堂<br>
🎵 原创主题曲:《青春的答案》<br>
📸 更多照片请关注官方账号后续发布
</p>
</div>
<!-- 评论区 -->
<div class="comments-section">
<div class="comments-header">
<div class="comments-title">
评论
<span class="comments-count">256</span>
</div>
<div class="comment-tabs">
<div class="comment-tab active" onclick="switchCommentTab(this)">热门</div>
<div class="comment-tab" onclick="switchCommentTab(this)">最新</div>
</div>
</div>
<!-- 评论输入 -->
<div class="comment-input-area">
<div class="comment-input-avatar">夏</div>
<div class="comment-input-wrap">
<textarea class="comment-textarea" placeholder="说点什么吧,友善发言,理性讨论~"></textarea>
<div class="comment-input-actions">
<div class="comment-input-tools">
<div class="comment-tool-btn" title="表情">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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 class="comment-tool-btn" title="图片">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
</div>
<div class="comment-tool-btn" title="@用户">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="4"></circle>
<path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path>
</svg>
</div>
</div>
<button class="comment-submit-btn">发布评论</button>
</div>
</div>
</div>
<!-- 评论列表 -->
<div class="comment-list">
<!-- 评论1 -->
<div class="comment-item">
<div class="comment-avatar" style="background: linear-gradient(135deg, #FFD4A3, #FF9F45);">李</div>
<div class="comment-body">
<div class="comment-head">
<span class="comment-name">李思琪</span>
<span class="comment-author-badge">作者</span>
<span class="comment-time">2小时前</span>
</div>
<div class="comment-text">谢谢大家的支持!会继续努力唱歌的🎤 原创歌曲《青春的答案》已经上线啦,希望大家喜欢~ 也欢迎大家来网易云音乐搜索收听完整版哦!</div>
<div class="comment-footer">
<div class="comment-action liked" onclick="this.classList.toggle('liked')">
<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>
892
</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>
回复
</div>
</div>
<!-- 子回复 -->
<div class="sub-replies">
<div class="sub-reply">
<div class="sub-reply-avatar" style="background: linear-gradient(135deg, #73D3E6, #17B0CF);">青</div>
<div class="sub-reply-body">
<div class="sub-reply-name">小青同学</div>
<div class="sub-reply-text">思琪学姐唱得太好听了!决赛现场太稳了😭 单曲循环中</div>
<div class="sub-reply-footer">
<span>1小时前</span>
<span>128赞</span>
</div>
</div>
</div>
<div class="sub-reply">
<div class="sub-reply-avatar" style="background: linear-gradient(135deg, #95E1B5, #52C41A);">音</div>
<div class="sub-reply-body">
<div class="sub-reply-name">音乐爱好者</div>
<div class="sub-reply-text">原创真的太厉害了!词曲都很有感觉,副歌部分直接起鸡皮疙瘩</div>
<div class="sub-reply-footer">
<span>45分钟前</span>
<span>56赞</span>
</div>
</div>
</div>
<div class="view-more-replies">查看全部 12 条回复 ></div>
</div>
</div>
</div>
<!-- 评论2 -->
<div class="comment-item">
<div class="comment-avatar" style="background: linear-gradient(135deg, #95E1B5, #52C41A);">张</div>
<div class="comment-body">
<div class="comment-head">
<span class="comment-name">张同学_</span>
<span class="comment-time">3小时前</span>
</div>
<div class="comment-text">现场氛围真的绝了!明年一定要抢到票!今年没抢到只能看直播呜呜呜,大家都是怎么抢到票的呀,有什么技巧吗?求分享!</div>
<div class="comment-footer">
<div class="comment-action" onclick="this.classList.toggle('liked')">
<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>
456
</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>
回复
</div>
</div>
</div>
</div>
<!-- 评论3 -->
<div class="comment-item">
<div class="comment-avatar" style="background: linear-gradient(135deg, #FFB3D9, #EB2F96);">鹿</div>
<div class="comment-body">
<div class="comment-head">
<span class="comment-name">小鹿同学</span>
<span class="comment-time">5小时前</span>
</div>
<div class="comment-text">第二名唱的那首英文歌也超好听!有人知道歌名吗?求!!声音太有磁性了,循环了一整天</div>
<div class="comment-footer">
<div class="comment-action" onclick="this.classList.toggle('liked')">
<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>
234
</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>
回复
</div>
</div>
</div>
</div>
<!-- 评论4 -->
<div class="comment-item">
<div class="comment-avatar" style="background: linear-gradient(135deg, #D4B5FF, #9254DE);">考</div>
<div class="comment-body">
<div class="comment-head">
<span class="comment-name">考研学姐</span>
<span class="comment-time">昨天</span>
</div>
<div class="comment-text">好怀念啊,去年我也参加了十佳歌手,一转眼都毕业半年了。青春真的好短暂,好好珍惜校园时光吧学弟学妹们🥺 工作了以后才发现学生时代是最美好的</div>
<div class="comment-footer">
<div class="comment-action" onclick="this.classList.toggle('liked')">
<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>
178
</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>
回复
</div>
</div>
</div>
</div>
<!-- 评论5 -->
<div class="comment-item">
<div class="comment-avatar" style="background: linear-gradient(135deg, #B5D8FF, #4A90FF);">体</div>
<div class="comment-body">
<div class="comment-head">
<span class="comment-name">体育部</span>
<span class="comment-time">昨天</span>
</div>
<div class="comment-text">太精彩了!校运会也期待大家的参与哦🏃‍♂️ 报名通道下周开启,欢迎各位运动健将踊跃报名~ 具体信息请关注体育部官方账号</div>
<div class="comment-footer">
<div class="comment-action" onclick="this.classList.toggle('liked')">
<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>
89
</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>
回复
</div>
</div>
</div>
</div>
<!-- 评论6 -->
<div class="comment-item">
<div class="comment-avatar" style="background: linear-gradient(135deg, #FFE58F, #FAAD14);">吃</div>
<div class="comment-body">
<div class="comment-head">
<span class="comment-name">吃货小分队</span>
<span class="comment-time">2天前</span>
</div>
<div class="comment-text">唱得也太好了吧!!!循环播放中🔁 请问还会有返场演出吗?太想去现场看了,这次没抢到票真的太遗憾了</div>
<div class="comment-footer">
<div class="comment-action" onclick="this.classList.toggle('liked')">
<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>
56
</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>
回复
</div>
</div>
</div>
</div>
<!-- 评论7 -->
<div class="comment-item">
<div class="comment-avatar" style="background: linear-gradient(135deg, #81ECEC, #00B894);">舞</div>
<div class="comment-body">
<div class="comment-head">
<span class="comment-name">街舞社小舞</span>
<span class="comment-time">2天前</span>
</div>
<div class="comment-text">开场舞是我们社的!大家觉得怎么样💃 辛苦排练了一个月呢,能在这么大的舞台上表演真的超开心!欢迎大家来街舞社玩呀~</div>
<div class="comment-footer">
<div class="comment-action" onclick="this.classList.toggle('liked')">
<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>
203
</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>
回复
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧边栏 -->
<aside class="content-right">
<!-- 相关视频 -->
<div class="side-card">
<div class="side-card-title">
相关视频
<span class="more">更多 ></span>
</div>
<div class="related-video-list">
<div class="related-video-item">
<div class="related-video-thumb" style="background: linear-gradient(135deg, #89f7fe, #66a6ff);">
<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
<span class="related-video-duration">01:20</span>
</div>
<div class="related-video-info">
<div class="related-video-title">校运会精彩瞬间混剪 | 青春的样子就是奔跑</div>
<div class="related-video-meta">
<span>体育部</span>
<div class="related-video-views">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
18.9万
</div>
</div>
</div>
</div>
<div class="related-video-item">
<div class="related-video-thumb" style="background: linear-gradient(135deg, #ffecd2, #fcb69f);">
<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
<span class="related-video-duration">03:56</span>
</div>
<div class="related-video-info">
<div class="related-video-title">社团招新 | 街舞社2024秋季宣传片 超燃现场</div>
<div class="related-video-meta">
<span>街舞社</span>
<div class="related-video-views">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
3.7万
</div>
</div>
</div>
</div>
<div class="related-video-item">
<div class="related-video-thumb" style="background: linear-gradient(135deg, #d299c2, #fef9d7);">
<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
<span class="related-video-duration">04:08</span>
</div>
<div class="related-video-info">
<div class="related-video-title">校园音乐节现场 | 乐队表演合集 超燃现场</div>
<div class="related-video-meta">
<span>音乐协会</span>
<div class="related-video-views">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
6.2万
</div>
</div>
</div>
</div>
<div class="related-video-item">
<div class="related-video-thumb" style="background: linear-gradient(135deg, #a8edea, #fed6e3);">
<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
<span class="related-video-duration">02:34</span>
</div>
<div class="related-video-info">
<div class="related-video-title">毕业季 | 致我们一起走过的青春 泪目了</div>
<div class="related-video-meta">
<span>毕业季特辑</span>
<div class="related-video-views">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
12.5万
</div>
</div>
</div>
</div>
<div class="related-video-item">
<div class="related-video-thumb" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
<span class="related-video-duration">00:45</span>
</div>
<div class="related-video-info">
<div class="related-video-title">食堂新品测评 | 第三食堂麻辣香锅 绝绝子</div>
<div class="related-video-meta">
<span>李明</span>
<div class="related-video-views">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
25.6万
</div>
</div>
</div>
</div>
<div class="related-video-item">
<div class="related-video-thumb" style="background: linear-gradient(135deg, #84fab0, #8fd3f4);">
<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
<span class="related-video-duration">05:12</span>
</div>
<div class="related-video-info">
<div class="related-video-title">Vlog | 复旦校园的一天是怎样的 带你逛逛</div>
<div class="related-video-meta">
<span>林小夏</span>
<div class="related-video-views">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
8.3万
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 推荐关注 -->
<div class="side-card">
<div class="side-card-title">
推荐关注
<span class="more">换一批</span>
</div>
<div class="recommend-user-list">
<div class="recommend-user-item">
<div class="recommend-avatar" style="background: linear-gradient(135deg, #FFD4A3, #FF9F45);">音</div>
<div class="recommend-info">
<div class="recommend-name">
音乐协会
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2z"/>
</svg>
</div>
<div class="recommend-desc">用音乐点亮校园生活</div>
</div>
<button class="recommend-follow-btn" onclick="this.classList.toggle('followed'); this.innerHTML = this.classList.contains('followed') ? '已关注' : '+ 关注';">
+ 关注
</button>
</div>
<div class="recommend-user-item">
<div class="recommend-avatar" style="background: linear-gradient(135deg, #D4B5FF, #9254DE);">舞</div>
<div class="recommend-info">
<div class="recommend-name">
街舞社
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2z"/>
</svg>
</div>
<div class="recommend-desc">Keep dancing, keep dreaming</div>
</div>
<button class="recommend-follow-btn" onclick="this.classList.toggle('followed'); this.innerHTML = this.classList.contains('followed') ? '已关注' : '+ 关注';">
+ 关注
</button>
</div>
<div class="recommend-user-item">
<div class="recommend-avatar" style="background: linear-gradient(135deg, #95E1B5, #52C41A);">摄</div>
<div class="recommend-info">
<div class="recommend-name">摄影协会</div>
<div class="recommend-desc">用镜头记录每一个精彩瞬间</div>
</div>
<button class="recommend-follow-btn" onclick="this.classList.toggle('followed'); this.innerHTML = this.classList.contains('followed') ? '已关注' : '+ 关注';">
+ 关注
</button>
</div>
</div>
</div>
</aside>
</main>
</div>
<script>
// 评论标签切换
function switchCommentTab(el) {
const tabs = el.parentElement.querySelectorAll('.comment-tab');
tabs.forEach(t => t.classList.remove('active'));
el.classList.add('active');
}
// 评论点赞切换
document.querySelectorAll('.comment-action').forEach(el => {
if (el.querySelector('path')) {
// 已通过 onclick 内联处理
}
});
</script>
<script src="../js/web-local-data.js?v=20261016-local" defer></script>
<script src="../js/web-api.js?v=20261020-api" defer></script>
<script src="../js/web-shell.js?v=20261013-profile-routing" defer></script>
</body>
</html>