5a49d20c8a
本次提交包含多项核心更新： 1. 全量替换项目内所有xianyan.app域名变更为s2ss.com，包含配置文件、路由、隐私政策等 2. 重构图表库从fl_chart迁移至syncfusion_flutter_charts，优化图表渲染效果 3. 新增宽屏分屏布局支持，包含右侧面板注册表与可拖拽分割线 4. 完善触觉反馈服务与认证感知Mixin，修复多处内存泄漏问题 5. 合并勋章墙与金币记录入口至成就中心，简化个人中心导航 6. 新增收藏与时间线数据合并导入功能 7. 修复多处UI样式问题，统一主题颜色使用规范 8. 新增日历同步与跨平台触觉反馈依赖库 9. 修复BotToast初始化流程，避免路由切换时的弹窗崩溃
917 lines
28 KiB
HTML
917 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1440">
|
||
<title>闲言 - 首页宽屏布局</title>
|
||
<style>
|
||
:root {
|
||
--primary: #007AFF;
|
||
--primary-light: rgba(0,122,255,0.12);
|
||
--secondary: #5856D6;
|
||
--background: #FAFAFA;
|
||
--surface: #FFFFFF;
|
||
--surface-secondary: #F2F2F7;
|
||
--text: #1C1C1E;
|
||
--text-secondary: #8E8E93;
|
||
--text-tertiary: #AEAEB2;
|
||
--separator: rgba(60,60,67,0.12);
|
||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||
--radius-sm: 4px;
|
||
--radius-md: 8px;
|
||
--radius-lg: 12px;
|
||
--radius-xl: 16px;
|
||
--space-1: 4px;
|
||
--space-2: 8px;
|
||
--space-3: 16px;
|
||
--space-4: 24px;
|
||
--space-5: 32px;
|
||
--font-family: -apple-system, system-ui, 'SF Pro Display', 'Segoe UI', sans-serif;
|
||
--nav-width: 72px;
|
||
--glass-bg: rgba(255,255,255,0.72);
|
||
--glass-border: rgba(255,255,255,0.36);
|
||
--glass-blur: 20px;
|
||
--card-bg: rgba(255,255,255,0.8);
|
||
--red: #FF3B30;
|
||
--orange: #FF9500;
|
||
--green: #34C759;
|
||
--teal: #5AC8FA;
|
||
}
|
||
|
||
[data-theme="dark"] {
|
||
--background: #1A1A2E;
|
||
--surface: #16213E;
|
||
--surface-secondary: #0F3460;
|
||
--text: #F5F5F7;
|
||
--text-secondary: #98989D;
|
||
--text-tertiary: #636366;
|
||
--separator: rgba(84,84,88,0.65);
|
||
--glass-bg: rgba(30,30,50,0.72);
|
||
--glass-border: rgba(60,60,80,0.36);
|
||
--card-bg: rgba(30,30,50,0.8);
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: var(--font-family);
|
||
background: var(--background);
|
||
color: var(--text);
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
transition: background 0.3s, color 0.3s;
|
||
}
|
||
|
||
.app-shell {
|
||
display: flex;
|
||
height: 100vh;
|
||
width: 100%;
|
||
}
|
||
|
||
.nav-sidebar {
|
||
width: var(--nav-width);
|
||
min-width: var(--nav-width);
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(var(--glass-blur));
|
||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||
border-right: 1px solid var(--separator);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: var(--space-4) 0;
|
||
gap: var(--space-2);
|
||
z-index: 10;
|
||
}
|
||
|
||
.nav-logo {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: var(--radius-lg);
|
||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
margin-bottom: var(--space-4);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.nav-item {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: var(--radius-lg);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
font-size: 10px;
|
||
color: var(--text-secondary);
|
||
gap: 2px;
|
||
text-decoration: none;
|
||
position: relative;
|
||
}
|
||
|
||
.nav-item .nav-icon { font-size: 22px; line-height: 1; }
|
||
.nav-item .nav-label { font-size: 9px; font-weight: 500; }
|
||
|
||
.nav-item:hover { background: var(--primary-light); color: var(--primary); }
|
||
.nav-item.active {
|
||
background: var(--primary-light);
|
||
color: var(--primary);
|
||
}
|
||
.nav-item.active::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -12px;
|
||
width: 3px;
|
||
height: 20px;
|
||
background: var(--primary);
|
||
border-radius: 0 2px 2px 0;
|
||
}
|
||
|
||
.nav-spacer { flex: 1; }
|
||
|
||
.nav-theme-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: var(--surface-secondary);
|
||
color: var(--text);
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s;
|
||
}
|
||
.nav-theme-btn:hover { background: var(--primary-light); }
|
||
|
||
.content-area {
|
||
flex: 1;
|
||
display: flex;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.master-panel {
|
||
width: 40%;
|
||
min-width: 320px;
|
||
max-width: 600px;
|
||
background: var(--background);
|
||
border-right: 1px solid var(--separator);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.master-header {
|
||
padding: var(--space-3) var(--space-4);
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(var(--glass-blur));
|
||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||
border-bottom: 1px solid var(--separator);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 5;
|
||
}
|
||
|
||
.master-title {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.5px;
|
||
}
|
||
|
||
.master-subtitle {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
margin-top: var(--space-1);
|
||
}
|
||
|
||
.master-search {
|
||
margin-top: var(--space-3);
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
height: 36px;
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--separator);
|
||
background: var(--surface-secondary);
|
||
color: var(--text);
|
||
padding: 0 var(--space-3);
|
||
font-size: 14px;
|
||
font-family: var(--font-family);
|
||
outline: none;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.search-input:focus { border-color: var(--primary); }
|
||
.search-input::placeholder { color: var(--text-tertiary); }
|
||
|
||
.filter-chips {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
padding: var(--space-2) var(--space-4);
|
||
overflow-x: auto;
|
||
}
|
||
.chip {
|
||
padding: var(--space-1) var(--space-3);
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
border: 1px solid var(--separator);
|
||
background: var(--surface);
|
||
color: var(--text-secondary);
|
||
transition: all 0.2s;
|
||
}
|
||
.chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
|
||
.chip:hover:not(.active) { background: var(--primary-light); color: var(--primary); }
|
||
|
||
.sentence-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: var(--space-2) var(--space-3);
|
||
}
|
||
|
||
.sentence-card {
|
||
background: var(--card-bg);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-4);
|
||
margin-bottom: var(--space-3);
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
border: 1px solid var(--separator);
|
||
position: relative;
|
||
}
|
||
.sentence-card:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
.sentence-card.selected {
|
||
border-color: var(--primary);
|
||
background: var(--primary-light);
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
.card-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
color: #fff;
|
||
}
|
||
|
||
.card-author { font-size: 14px; font-weight: 600; }
|
||
.card-time { font-size: 11px; color: var(--text-tertiary); margin-left: auto; }
|
||
|
||
.card-content {
|
||
font-size: 15px;
|
||
line-height: 1.6;
|
||
color: var(--text);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
.card-tags {
|
||
display: flex;
|
||
gap: var(--space-1);
|
||
margin-bottom: var(--space-2);
|
||
flex-wrap: wrap;
|
||
}
|
||
.card-tag {
|
||
font-size: 11px;
|
||
padding: 2px var(--space-2);
|
||
border-radius: 10px;
|
||
background: var(--primary-light);
|
||
color: var(--primary);
|
||
}
|
||
|
||
.card-actions {
|
||
display: flex;
|
||
gap: var(--space-4);
|
||
color: var(--text-secondary);
|
||
font-size: 12px;
|
||
}
|
||
.card-action {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
cursor: pointer;
|
||
transition: color 0.2s;
|
||
}
|
||
.card-action:hover { color: var(--primary); }
|
||
.card-action.liked { color: var(--red); }
|
||
|
||
.divider-handle {
|
||
width: 6px;
|
||
cursor: col-resize;
|
||
background: var(--separator);
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background 0.2s;
|
||
flex-shrink: 0;
|
||
}
|
||
.divider-handle:hover { background: var(--primary); }
|
||
.divider-handle::after {
|
||
content: '···';
|
||
color: var(--text-tertiary);
|
||
font-size: 10px;
|
||
writing-mode: vertical-lr;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.detail-panel {
|
||
flex: 1;
|
||
min-width: 400px;
|
||
background: var(--background);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.detail-header {
|
||
padding: var(--space-3) var(--space-4);
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(var(--glass-blur));
|
||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||
border-bottom: 1px solid var(--separator);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.detail-header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.detail-back {
|
||
display: none;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: var(--surface-secondary);
|
||
color: var(--primary);
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.detail-title { font-size: 17px; font-weight: 600; }
|
||
|
||
.detail-actions {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
}
|
||
.detail-action-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: var(--surface-secondary);
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s;
|
||
}
|
||
.detail-action-btn:hover { background: var(--primary-light); color: var(--primary); }
|
||
|
||
.detail-content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: var(--space-4);
|
||
}
|
||
|
||
.detail-author-section {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
margin-bottom: var(--space-5);
|
||
}
|
||
|
||
.detail-avatar {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
color: #fff;
|
||
}
|
||
|
||
.detail-author-info { flex: 1; }
|
||
.detail-author-name { font-size: 18px; font-weight: 600; }
|
||
.detail-author-bio { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
|
||
|
||
.follow-btn {
|
||
padding: var(--space-1) var(--space-4);
|
||
border-radius: 20px;
|
||
border: none;
|
||
background: var(--primary);
|
||
color: #fff;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
font-family: var(--font-family);
|
||
}
|
||
.follow-btn:hover { opacity: 0.85; }
|
||
|
||
.detail-sentence {
|
||
font-size: 22px;
|
||
line-height: 1.7;
|
||
font-weight: 500;
|
||
margin-bottom: var(--space-4);
|
||
padding: var(--space-4);
|
||
background: var(--card-bg);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: var(--radius-xl);
|
||
border: 1px solid var(--separator);
|
||
}
|
||
|
||
.detail-meta {
|
||
display: flex;
|
||
gap: var(--space-4);
|
||
margin-bottom: var(--space-4);
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
}
|
||
.detail-meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
.detail-interaction {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
margin-bottom: var(--space-5);
|
||
padding: var(--space-3);
|
||
background: var(--card-bg);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: var(--radius-xl);
|
||
border: 1px solid var(--separator);
|
||
}
|
||
|
||
.interaction-btn {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-2) 0;
|
||
border-radius: var(--radius-lg);
|
||
border: none;
|
||
background: var(--surface-secondary);
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
font-family: var(--font-family);
|
||
}
|
||
.interaction-btn:hover { background: var(--primary-light); color: var(--primary); }
|
||
.interaction-btn.liked { background: rgba(255,59,48,0.1); color: var(--red); }
|
||
|
||
.comment-section { margin-top: var(--space-3); }
|
||
.comment-section-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
.comment-item {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
padding: var(--space-3) 0;
|
||
border-bottom: 1px solid var(--separator);
|
||
}
|
||
.comment-avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: var(--surface-secondary);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
.comment-body { flex: 1; }
|
||
.comment-name { font-size: 13px; font-weight: 600; }
|
||
.comment-text { font-size: 14px; line-height: 1.5; margin-top: 2px; }
|
||
.comment-time { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
|
||
|
||
.comment-input-area {
|
||
padding: var(--space-3);
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(var(--glass-blur));
|
||
border-top: 1px solid var(--separator);
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
}
|
||
.comment-input {
|
||
flex: 1;
|
||
height: 36px;
|
||
border-radius: 18px;
|
||
border: 1px solid var(--separator);
|
||
background: var(--surface-secondary);
|
||
color: var(--text);
|
||
padding: 0 var(--space-3);
|
||
font-size: 14px;
|
||
font-family: var(--font-family);
|
||
outline: none;
|
||
}
|
||
.comment-input:focus { border-color: var(--primary); }
|
||
.comment-send {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: var(--primary);
|
||
color: #fff;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
::-webkit-scrollbar { width: 6px; }
|
||
::-webkit-scrollbar-track { background: transparent; }
|
||
::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: 3px; }
|
||
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
|
||
</style>
|
||
</head>
|
||
<body data-theme="light">
|
||
|
||
<div class="app-shell">
|
||
<nav class="nav-sidebar">
|
||
<div class="nav-logo">💬</div>
|
||
<a class="nav-item active" href="widescreen-home.html" title="闲言">
|
||
<span class="nav-icon">💬</span>
|
||
<span class="nav-label">闲言</span>
|
||
</a>
|
||
<a class="nav-item" href="widescreen-discover.html" title="发现">
|
||
<span class="nav-icon">🧭</span>
|
||
<span class="nav-label">发现</span>
|
||
</a>
|
||
<a class="nav-item" href="widescreen-profile.html" title="我的">
|
||
<span class="nav-icon">👤</span>
|
||
<span class="nav-label">我的</span>
|
||
</a>
|
||
<div class="nav-spacer"></div>
|
||
<button class="nav-theme-btn" onclick="toggleTheme()" title="切换主题">🌙</button>
|
||
</nav>
|
||
|
||
<div class="content-area">
|
||
<div class="master-panel" id="masterPanel">
|
||
<div class="master-header">
|
||
<div class="master-title">闲言</div>
|
||
<div class="master-subtitle">发现有趣的句子与灵感</div>
|
||
<div class="master-search">
|
||
<input class="search-input" type="text" placeholder="🔍 搜索句子、作者...">
|
||
</div>
|
||
</div>
|
||
<div class="filter-chips">
|
||
<span class="chip active">推荐</span>
|
||
<span class="chip">最新</span>
|
||
<span class="chip">热门</span>
|
||
<span class="chip">关注</span>
|
||
<span class="chip">古诗词</span>
|
||
<span class="chip">现代诗</span>
|
||
<span class="chip">名言</span>
|
||
</div>
|
||
<div class="sentence-list" id="sentenceList">
|
||
<div class="sentence-card selected" onclick="selectCard(this, 0)">
|
||
<div class="card-header">
|
||
<div class="card-avatar">🌙</div>
|
||
<span class="card-author">李白</span>
|
||
<span class="card-time">3分钟前</span>
|
||
</div>
|
||
<div class="card-content">长风破浪会有时，直挂云帆济沧海。人生不如意十之八九，但那又如何？风浪越大，我越强。</div>
|
||
<div class="card-tags">
|
||
<span class="card-tag">古诗词</span>
|
||
<span class="card-tag">励志</span>
|
||
</div>
|
||
<div class="card-actions">
|
||
<span class="card-action liked" onclick="event.stopPropagation()">❤️ 2.3k</span>
|
||
<span class="card-action">💬 186</span>
|
||
<span class="card-action">🔗 分享</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sentence-card" onclick="selectCard(this, 1)">
|
||
<div class="card-header">
|
||
<div class="card-avatar" style="background:linear-gradient(135deg,#FF9500,#FF3B30)">🍂</div>
|
||
<span class="card-author">苏轼</span>
|
||
<span class="card-time">15分钟前</span>
|
||
</div>
|
||
<div class="card-content">竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。回首向来萧瑟处，归去，也无风雨也无晴。</div>
|
||
<div class="card-tags">
|
||
<span class="card-tag">宋词</span>
|
||
<span class="card-tag">豁达</span>
|
||
</div>
|
||
<div class="card-actions">
|
||
<span class="card-action">🤍 1.8k</span>
|
||
<span class="card-action">💬 92</span>
|
||
<span class="card-action">🔗 分享</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sentence-card" onclick="selectCard(this, 2)">
|
||
<div class="card-header">
|
||
<div class="card-avatar" style="background:linear-gradient(135deg,#34C759,#007AFF)">🌿</div>
|
||
<span class="card-author">王维</span>
|
||
<span class="card-time">1小时前</span>
|
||
</div>
|
||
<div class="card-content">行到水穷处，坐看云起时。世间万物皆有定数，不必强求，顺其自然便是最好的活法。</div>
|
||
<div class="card-tags">
|
||
<span class="card-tag">禅意</span>
|
||
<span class="card-tag">山水</span>
|
||
</div>
|
||
<div class="card-actions">
|
||
<span class="card-action">🤍 956</span>
|
||
<span class="card-action">💬 45</span>
|
||
<span class="card-action">🔗 分享</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sentence-card" onclick="selectCard(this, 3)">
|
||
<div class="card-header">
|
||
<div class="card-avatar" style="background:linear-gradient(135deg,#5856D6,#FF2D55)">🌸</div>
|
||
<span class="card-author">李清照</span>
|
||
<span class="card-time">2小时前</span>
|
||
</div>
|
||
<div class="card-content">寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急！</div>
|
||
<div class="card-tags">
|
||
<span class="card-tag">宋词</span>
|
||
<span class="card-tag">婉约</span>
|
||
</div>
|
||
<div class="card-actions">
|
||
<span class="card-action">🤍 1.2k</span>
|
||
<span class="card-action">💬 78</span>
|
||
<span class="card-action">🔗 分享</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sentence-card" onclick="selectCard(this, 4)">
|
||
<div class="card-header">
|
||
<div class="card-avatar" style="background:linear-gradient(135deg,#5AC8FA,#34C759)">🏔️</div>
|
||
<span class="card-author">辛弃疾</span>
|
||
<span class="card-time">3小时前</span>
|
||
</div>
|
||
<div class="card-content">醉里挑灯看剑，梦回吹角连营。八百里分麾下炙，五十弦翻塞外声，沙场秋点兵。</div>
|
||
<div class="card-tags">
|
||
<span class="card-tag">豪放</span>
|
||
<span class="card-tag">军旅</span>
|
||
</div>
|
||
<div class="card-actions">
|
||
<span class="card-action">🤍 876</span>
|
||
<span class="card-action">💬 34</span>
|
||
<span class="card-action">🔗 分享</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sentence-card" onclick="selectCard(this, 5)">
|
||
<div class="card-header">
|
||
<div class="card-avatar" style="background:linear-gradient(135deg,#FF9500,#FFCC00)">🌅</div>
|
||
<span class="card-author">海子</span>
|
||
<span class="card-time">5小时前</span>
|
||
</div>
|
||
<div class="card-content">从明天起，做一个幸福的人，喂马、劈柴、周游世界。从明天起，关心粮食和蔬菜。我有一所房子，面朝大海，春暖花开。</div>
|
||
<div class="card-tags">
|
||
<span class="card-tag">现代诗</span>
|
||
<span class="card-tag">理想</span>
|
||
</div>
|
||
<div class="card-actions">
|
||
<span class="card-action">🤍 3.1k</span>
|
||
<span class="card-action">💬 256</span>
|
||
<span class="card-action">🔗 分享</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="divider-handle" id="divider"></div>
|
||
|
||
<div class="detail-panel" id="detailPanel">
|
||
<div class="detail-header">
|
||
<div class="detail-header-left">
|
||
<button class="detail-back">‹</button>
|
||
<span class="detail-title">句子详情</span>
|
||
</div>
|
||
<div class="detail-actions">
|
||
<button class="detail-action-btn" title="收藏">⭐</button>
|
||
<button class="detail-action-btn" title="更多">⋯</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-content" id="detailContent">
|
||
<div class="detail-author-section">
|
||
<div class="detail-avatar">🌙</div>
|
||
<div class="detail-author-info">
|
||
<div class="detail-author-name">李白</div>
|
||
<div class="detail-author-bio">唐代浪漫主义诗人 · 诗仙</div>
|
||
</div>
|
||
<button class="follow-btn">+ 关注</button>
|
||
</div>
|
||
|
||
<div class="detail-sentence" id="detailSentence">
|
||
长风破浪会有时，直挂云帆济沧海。人生不如意十之八九，但那又如何？风浪越大，我越强。
|
||
</div>
|
||
|
||
<div class="detail-meta">
|
||
<div class="detail-meta-item">📅 2026年5月29日</div>
|
||
<div class="detail-meta-item">👁️ 12.5k 浏览</div>
|
||
<div class="detail-meta-item">🏷️ 古诗词 · 励志</div>
|
||
</div>
|
||
|
||
<div class="detail-interaction">
|
||
<button class="interaction-btn liked">❤️ 2.3k</button>
|
||
<button class="interaction-btn">💬 186</button>
|
||
<button class="interaction-btn">🔗 分享</button>
|
||
<button class="interaction-btn">⭐ 收藏</button>
|
||
</div>
|
||
|
||
<div class="comment-section">
|
||
<div class="comment-section-title">💬 精选评论</div>
|
||
|
||
<div class="comment-item">
|
||
<div class="comment-avatar">🦋</div>
|
||
<div class="comment-body">
|
||
<div class="comment-name">清风明月</div>
|
||
<div class="comment-text">每次读到这句诗，都感觉充满了力量！李白的诗就是有这样的魔力 ✨</div>
|
||
<div class="comment-time">2小时前 · 👍 128</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comment-item">
|
||
<div class="comment-avatar">🎋</div>
|
||
<div class="comment-body">
|
||
<div class="comment-name">竹林七贤</div>
|
||
<div class="comment-text">直挂云帆济沧海，何等的豪迈气概！这才是真正的诗仙风范</div>
|
||
<div class="comment-time">3小时前 · 👍 86</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comment-item">
|
||
<div class="comment-avatar">🌊</div>
|
||
<div class="comment-body">
|
||
<div class="comment-name">沧海一声笑</div>
|
||
<div class="comment-text">风浪越大我越强，这话说得太对了！人生就是要迎难而上 💪</div>
|
||
<div class="comment-time">5小时前 · 👍 52</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comment-item">
|
||
<div class="comment-avatar">📖</div>
|
||
<div class="comment-body">
|
||
<div class="comment-name">书虫日记</div>
|
||
<div class="comment-text">结合了古诗词和现代感悟，这种表达方式很新颖</div>
|
||
<div class="comment-time">6小时前 · 👍 34</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comment-input-area">
|
||
<input class="comment-input" type="text" placeholder="写下你的想法...">
|
||
<button class="comment-send">↑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const sentences = [
|
||
{
|
||
avatar: '🌙', author: '李白', bio: '唐代浪漫主义诗人 · 诗仙', gradient: '',
|
||
content: '长风破浪会有时，直挂云帆济沧海。人生不如意十之八九，但那又如何？风浪越大，我越强。',
|
||
tags: '古诗词 · 励志', date: '2026年5月29日', views: '12.5k', likes: '2.3k', comments: '186', liked: true
|
||
},
|
||
{
|
||
avatar: '🍂', author: '苏轼', bio: '北宋文学家 · 东坡居士', gradient: 'linear-gradient(135deg,#FF9500,#FF3B30)',
|
||
content: '竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。回首向来萧瑟处，归去，也无风雨也无晴。',
|
||
tags: '宋词 · 豁达', date: '2026年5月29日', views: '8.7k', likes: '1.8k', comments: '92', liked: false
|
||
},
|
||
{
|
||
avatar: '🌿', author: '王维', bio: '唐代诗人 · 诗佛', gradient: 'linear-gradient(135deg,#34C759,#007AFF)',
|
||
content: '行到水穷处，坐看云起时。世间万物皆有定数，不必强求，顺其自然便是最好的活法。',
|
||
tags: '禅意 · 山水', date: '2026年5月29日', views: '6.3k', likes: '956', comments: '45', liked: false
|
||
},
|
||
{
|
||
avatar: '🌸', author: '李清照', bio: '宋代女词人 · 易安居士', gradient: 'linear-gradient(135deg,#5856D6,#FF2D55)',
|
||
content: '寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急！',
|
||
tags: '宋词 · 婉约', date: '2026年5月28日', views: '9.1k', likes: '1.2k', comments: '78', liked: false
|
||
},
|
||
{
|
||
avatar: '🏔️', author: '辛弃疾', bio: '南宋豪放派词人', gradient: 'linear-gradient(135deg,#5AC8FA,#34C759)',
|
||
content: '醉里挑灯看剑，梦回吹角连营。八百里分麾下炙，五十弦翻塞外声，沙场秋点兵。',
|
||
tags: '豪放 · 军旅', date: '2026年5月28日', views: '5.8k', likes: '876', comments: '34', liked: false
|
||
},
|
||
{
|
||
avatar: '🌅', author: '海子', bio: '当代诗人 · 面朝大海', gradient: 'linear-gradient(135deg,#FF9500,#FFCC00)',
|
||
content: '从明天起，做一个幸福的人，喂马、劈柴、周游世界。从明天起，关心粮食和蔬菜。我有一所房子，面朝大海，春暖花开。',
|
||
tags: '现代诗 · 理想', date: '2026年5月27日', views: '15.2k', likes: '3.1k', comments: '256', liked: false
|
||
}
|
||
];
|
||
|
||
function selectCard(el, idx) {
|
||
document.querySelectorAll('.sentence-card').forEach(c => c.classList.remove('selected'));
|
||
el.classList.add('selected');
|
||
const s = sentences[idx];
|
||
document.getElementById('detailSentence').textContent = s.content;
|
||
document.querySelector('.detail-avatar').textContent = s.avatar;
|
||
document.querySelector('.detail-author-name').textContent = s.author;
|
||
document.querySelector('.detail-author-bio').textContent = s.bio;
|
||
document.querySelector('.detail-meta').innerHTML = `
|
||
<div class="detail-meta-item">📅 ${s.date}</div>
|
||
<div class="detail-meta-item">👁️ ${s.views} 浏览</div>
|
||
<div class="detail-meta-item">🏷️ ${s.tags}</div>
|
||
`;
|
||
const likeIcon = s.liked ? '❤️' : '🤍';
|
||
document.querySelector('.detail-interaction').innerHTML = `
|
||
<button class="interaction-btn ${s.liked ? 'liked' : ''}">${likeIcon} ${s.likes}</button>
|
||
<button class="interaction-btn">💬 ${s.comments}</button>
|
||
<button class="interaction-btn">🔗 分享</button>
|
||
<button class="interaction-btn">⭐ 收藏</button>
|
||
`;
|
||
}
|
||
|
||
function toggleTheme() {
|
||
const body = document.body;
|
||
const btn = document.querySelector('.nav-theme-btn');
|
||
if (body.dataset.theme === 'light') {
|
||
body.dataset.theme = 'dark';
|
||
btn.textContent = '☀️';
|
||
} else {
|
||
body.dataset.theme = 'light';
|
||
btn.textContent = '🌙';
|
||
}
|
||
}
|
||
|
||
const divider = document.getElementById('divider');
|
||
const masterPanel = document.getElementById('masterPanel');
|
||
let isDragging = false;
|
||
|
||
divider.addEventListener('mousedown', (e) => {
|
||
isDragging = true;
|
||
document.body.style.cursor = 'col-resize';
|
||
document.body.style.userSelect = 'none';
|
||
});
|
||
|
||
document.addEventListener('mousemove', (e) => {
|
||
if (!isDragging) return;
|
||
const navWidth = 72;
|
||
const newWidth = e.clientX - navWidth;
|
||
if (newWidth >= 320 && newWidth <= 600) {
|
||
masterPanel.style.width = newWidth + 'px';
|
||
}
|
||
});
|
||
|
||
document.addEventListener('mouseup', () => {
|
||
isDragging = false;
|
||
document.body.style.cursor = '';
|
||
document.body.style.userSelect = '';
|
||
});
|
||
|
||
document.querySelectorAll('.chip').forEach(chip => {
|
||
chip.addEventListener('click', () => {
|
||
document.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
|
||
chip.classList.add('active');
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|