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