544f77c0ce
本次更新包含多项功能优化与兼容性修复： 1. iOS/鸿蒙端添加加密出口合规配置，跳过App Store审核问卷 2. 新增学习计划设置页路由与国际化支持 3. 修复鸿蒙端剪贴板粘贴不工作问题，安装标准剪贴板拦截器 4. 优化收藏功能：兼容复合ID、添加状态同步与触觉反馈 5. 修复鸿蒙端相册保存兼容性，统一使用系统分享降级方案 6. 优化搜索快捷方式跳转逻辑，避免白屏问题 7. 更新本地化资源，新增闲情逸致、学习计划等模块翻译 8. 修复节气日期表排序与跨年边界问题 9. 优化设备信息页面显示，新增系统版本号展示 10. 重构文件传输二维码逻辑，使用纯URL提升兼容性 11. 优化设置项布局，避免文本溢出问题 12. 修复登录页记住账户功能，新增隐私协议守卫 13. 更新macOS依赖库，替换flutter_secure_storage为darwin版本
1123 lines
42 KiB
HTML
1123 lines
42 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>学习计划页面设计预览 - iOS 26 风格</title>
|
||
<style>
|
||
:root {
|
||
/* 亮色主题 */
|
||
--bg-primary: #F2F2F7;
|
||
--bg-secondary: #FFFFFF;
|
||
--bg-elevated: rgba(255,255,255,0.82);
|
||
--bg-card: #FFFFFF;
|
||
--text-primary: #1C1C1E;
|
||
--text-secondary: #8E8E93;
|
||
--text-hint: #C7C7CC;
|
||
--accent: #007AFF;
|
||
--accent-light: #5AC8FA;
|
||
--green: #34C759;
|
||
--orange: #FF9500;
|
||
--red: #FF3B30;
|
||
--purple: #AF52DE;
|
||
--separator: rgba(60,60,67,0.12);
|
||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
|
||
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
|
||
--shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
|
||
--radius-sm: 8px;
|
||
--radius-md: 12px;
|
||
--radius-lg: 16px;
|
||
--radius-xl: 20px;
|
||
--font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
|
||
}
|
||
|
||
[data-theme="dark"] {
|
||
--bg-primary: #000000;
|
||
--bg-secondary: #1C1C1E;
|
||
--bg-elevated: rgba(28,28,30,0.82);
|
||
--bg-card: #1C1C1E;
|
||
--text-primary: #FFFFFF;
|
||
--text-secondary: #98989D;
|
||
--text-hint: #48484A;
|
||
--accent: #0A84FF;
|
||
--accent-light: #64D2FF;
|
||
--green: #30D158;
|
||
--orange: #FF9F0A;
|
||
--red: #FF453A;
|
||
--purple: #BF5AF2;
|
||
--separator: rgba(84,84,88,0.65);
|
||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
|
||
--shadow-md: 0 4px 12px rgba(0,0,0,0.3);
|
||
--shadow-lg: 0 8px 30px rgba(0,0,0,0.4);
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: var(--font-family);
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
min-height: 100vh;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
/* 顶部导航栏 */
|
||
.nav-bar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
backdrop-filter: blur(20px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||
background: var(--bg-elevated);
|
||
border-bottom: 0.5px solid var(--separator);
|
||
padding: 12px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.nav-title svg { width: 20px; height: 20px; fill: var(--accent); }
|
||
|
||
.nav-actions { display: flex; gap: 16px; align-items: center; }
|
||
.nav-btn {
|
||
width: 32px; height: 32px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
border: none; background: none; cursor: pointer;
|
||
border-radius: 50%;
|
||
transition: background 0.2s;
|
||
}
|
||
.nav-btn:hover { background: var(--separator); }
|
||
.nav-btn svg { width: 22px; height: 22px; fill: var(--accent); }
|
||
|
||
/* 主题切换按钮 */
|
||
.theme-toggle {
|
||
position: fixed;
|
||
bottom: 24px;
|
||
right: 24px;
|
||
z-index: 999;
|
||
width: 48px; height: 48px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: var(--accent);
|
||
color: #fff;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
box-shadow: var(--shadow-lg);
|
||
display: flex; align-items: center; justify-content: center;
|
||
transition: transform 0.3s;
|
||
}
|
||
.theme-toggle:hover { transform: scale(1.1); }
|
||
|
||
/* 页面容器 */
|
||
.page-container {
|
||
max-width: 680px;
|
||
margin: 0 auto;
|
||
padding: 0 16px 100px;
|
||
}
|
||
|
||
/* 段落标题 */
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 24px 0 12px;
|
||
}
|
||
.section-title {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.3px;
|
||
}
|
||
.section-action {
|
||
font-size: 15px;
|
||
color: var(--accent);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
border: none; background: none;
|
||
}
|
||
|
||
/* 阅读目标卡片 */
|
||
.reading-goal-card {
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-xl);
|
||
padding: 20px;
|
||
box-shadow: var(--shadow-sm);
|
||
border: 0.5px solid var(--separator);
|
||
margin-top: 16px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.reading-goal-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--green));
|
||
border-radius: 3px 3px 0 0;
|
||
}
|
||
.goal-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
}
|
||
.goal-title {
|
||
display: flex; align-items: center; gap: 8px;
|
||
font-size: 17px; font-weight: 600;
|
||
}
|
||
.goal-title svg { width: 18px; height: 18px; fill: var(--accent); }
|
||
.goal-edit-btn {
|
||
width: 28px; height: 28px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: var(--separator);
|
||
display: flex; align-items: center; justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
.goal-edit-btn svg { width: 14px; height: 14px; fill: var(--accent); }
|
||
|
||
.goal-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
}
|
||
.goal-metric {
|
||
background: var(--bg-primary);
|
||
border-radius: var(--radius-md);
|
||
padding: 12px;
|
||
}
|
||
.goal-metric-label {
|
||
display: flex; align-items: center; gap: 4px;
|
||
font-size: 11px; color: var(--text-secondary);
|
||
margin-bottom: 8px;
|
||
}
|
||
.goal-metric-label svg { width: 12px; height: 12px; fill: var(--text-secondary); }
|
||
.goal-metric-label svg.complete { fill: var(--green); }
|
||
.goal-metric-label span.complete { color: var(--green); }
|
||
.goal-progress-bar {
|
||
height: 4px;
|
||
background: var(--separator);
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
margin-bottom: 4px;
|
||
}
|
||
.goal-progress-fill {
|
||
height: 100%;
|
||
border-radius: 2px;
|
||
transition: width 0.6s ease;
|
||
}
|
||
.goal-progress-fill.accent { background: var(--accent); }
|
||
.goal-progress-fill.green { background: var(--green); }
|
||
.goal-metric-value {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--text-hint);
|
||
}
|
||
|
||
/* 计划卡片 */
|
||
.plan-card {
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-xl);
|
||
padding: 16px;
|
||
box-shadow: var(--shadow-sm);
|
||
border: 0.5px solid var(--separator);
|
||
margin-bottom: 12px;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
cursor: pointer;
|
||
}
|
||
.plan-card:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
.plan-card.completed {
|
||
border-color: rgba(52,199,89,0.3);
|
||
}
|
||
.plan-main-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
}
|
||
|
||
/* 进度环 */
|
||
.progress-ring {
|
||
width: 56px; height: 56px;
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
}
|
||
.progress-ring svg { transform: rotate(-90deg); }
|
||
.progress-ring-bg { stroke: var(--separator); }
|
||
.progress-ring-fg { transition: stroke-dashoffset 0.6s ease; }
|
||
.progress-ring-label {
|
||
position: absolute;
|
||
top: 50%; left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
}
|
||
.progress-ring-label svg { width: 20px; height: 20px; fill: var(--green); }
|
||
|
||
.plan-info { flex: 1; min-width: 0; }
|
||
.plan-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-bottom: 2px;
|
||
}
|
||
.plan-icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||
.plan-icon svg { width: 16px; height: 16px; fill: var(--text-primary); }
|
||
.plan-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.streak-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
padding: 2px 6px;
|
||
border-radius: 6px;
|
||
background: rgba(255,149,0,0.12);
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
color: var(--orange);
|
||
flex-shrink: 0;
|
||
}
|
||
.streak-badge svg { width: 10px; height: 10px; fill: var(--orange); }
|
||
.plan-subtitle {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 8px;
|
||
}
|
||
.plan-progress-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.plan-progress-text {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
}
|
||
.plan-progress-text.completed { color: var(--green); }
|
||
.plan-progress-text.active { color: var(--accent); }
|
||
.plan-progress-bar {
|
||
flex: 1;
|
||
height: 4px;
|
||
background: var(--separator);
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
}
|
||
.plan-progress-fill {
|
||
height: 100%;
|
||
border-radius: 2px;
|
||
transition: width 0.6s ease;
|
||
}
|
||
|
||
.plan-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
margin-top: 12px;
|
||
padding-top: 12px;
|
||
border-top: 0.5px solid var(--separator);
|
||
}
|
||
.plan-btn {
|
||
padding: 6px 12px;
|
||
border-radius: var(--radius-sm);
|
||
border: none;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.plan-btn:hover { opacity: 0.8; }
|
||
.plan-btn.primary {
|
||
background: rgba(0,122,255,0.12);
|
||
color: var(--accent);
|
||
}
|
||
.plan-btn.secondary {
|
||
background: var(--separator);
|
||
color: var(--text-secondary);
|
||
}
|
||
.plan-btn.primary svg, .plan-btn.secondary svg {
|
||
width: 12px; height: 12px;
|
||
vertical-align: -1px;
|
||
margin-right: 2px;
|
||
}
|
||
.plan-btn.primary svg { fill: var(--accent); }
|
||
.plan-btn.secondary svg { fill: var(--text-secondary); }
|
||
|
||
/* 添加计划卡片 */
|
||
.add-card {
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-xl);
|
||
padding: 20px;
|
||
border: 1.5px dashed var(--accent);
|
||
opacity: 0.7;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
transition: opacity 0.2s, background 0.2s;
|
||
margin-bottom: 12px;
|
||
}
|
||
.add-card:hover { opacity: 1; background: rgba(0,122,255,0.04); }
|
||
.add-card svg { width: 22px; height: 22px; fill: var(--accent); }
|
||
.add-card span { font-size: 15px; font-weight: 600; color: var(--accent); }
|
||
|
||
/* 空状态 */
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 80px 24px;
|
||
text-align: center;
|
||
}
|
||
.empty-icon {
|
||
width: 80px; height: 80px;
|
||
background: linear-gradient(135deg, var(--accent), var(--accent-light));
|
||
border-radius: 24px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
margin-bottom: 24px;
|
||
box-shadow: 0 4px 20px rgba(0,122,255,0.25);
|
||
}
|
||
.empty-icon svg { width: 40px; height: 40px; fill: #fff; }
|
||
.empty-title {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
}
|
||
.empty-subtitle {
|
||
font-size: 15px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.5;
|
||
margin-bottom: 32px;
|
||
}
|
||
.empty-btn {
|
||
padding: 14px 32px;
|
||
border-radius: 14px;
|
||
border: none;
|
||
background: var(--accent);
|
||
color: #fff;
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
box-shadow: 0 4px 16px rgba(0,122,255,0.3);
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
display: flex; align-items: center; gap: 6px;
|
||
}
|
||
.empty-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,122,255,0.35); }
|
||
.empty-btn svg { width: 18px; height: 18px; fill: #fff; }
|
||
|
||
/* 底部Sheet */
|
||
.sheet-overlay {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(0,0,0,0.4);
|
||
z-index: 200;
|
||
display: none;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
}
|
||
.sheet-overlay.active { display: flex; }
|
||
.sheet {
|
||
width: 100%;
|
||
max-width: 680px;
|
||
max-height: 70vh;
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
||
padding: 8px 20px 32px;
|
||
overflow-y: auto;
|
||
animation: slideUp 0.35s cubic-bezier(0.32,0.72,0,1);
|
||
}
|
||
@keyframes slideUp {
|
||
from { transform: translateY(100%); }
|
||
to { transform: translateY(0); }
|
||
}
|
||
.sheet-handle {
|
||
width: 36px; height: 4px;
|
||
background: var(--text-hint);
|
||
border-radius: 2px;
|
||
margin: 8px auto 20px;
|
||
}
|
||
.sheet-title {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
margin-bottom: 20px;
|
||
}
|
||
.sheet-label {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* 模板网格 */
|
||
.template-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||
gap: 10px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.template-item {
|
||
padding: 12px;
|
||
border-radius: var(--radius-md);
|
||
border: 1.5px solid var(--separator);
|
||
cursor: pointer;
|
||
transition: border-color 0.2s, background 0.2s;
|
||
}
|
||
.template-item:hover { border-color: var(--accent); }
|
||
.template-item.selected {
|
||
border-color: var(--accent);
|
||
background: rgba(0,122,255,0.06);
|
||
}
|
||
.template-item-title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
display: flex; align-items: center; gap: 4px;
|
||
margin-bottom: 2px;
|
||
}
|
||
.template-item-title svg { width: 14px; height: 14px; }
|
||
.template-item-desc {
|
||
font-size: 10px;
|
||
color: var(--text-hint);
|
||
}
|
||
|
||
/* 每日目标选择器 */
|
||
.goal-selector {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.goal-selector-btn {
|
||
width: 36px; height: 36px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: var(--separator);
|
||
display: flex; align-items: center; justify-content: center;
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
color: var(--text-primary);
|
||
transition: background 0.2s;
|
||
}
|
||
.goal-selector-btn:hover { background: var(--text-hint); }
|
||
.goal-selector-value {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
min-width: 80px;
|
||
text-align: center;
|
||
}
|
||
|
||
.sheet-create-btn {
|
||
width: 100%;
|
||
padding: 16px;
|
||
border-radius: 14px;
|
||
border: none;
|
||
background: var(--accent);
|
||
color: #fff;
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
display: flex; align-items: center; justify-content: center; gap: 6px;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.sheet-create-btn:hover { opacity: 0.9; }
|
||
.sheet-create-btn svg { width: 18px; height: 18px; fill: #fff; }
|
||
|
||
/* 计划详情Sheet */
|
||
.detail-stat {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 0;
|
||
border-bottom: 0.5px solid var(--separator);
|
||
}
|
||
.detail-stat:last-child { border-bottom: none; }
|
||
.detail-stat-label {
|
||
display: flex; align-items: center; gap: 6px;
|
||
font-size: 15px; color: var(--text-secondary);
|
||
}
|
||
.detail-stat-label svg { width: 16px; height: 16px; fill: var(--text-secondary); }
|
||
.detail-stat-value {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
}
|
||
.detail-records {
|
||
margin-top: 16px;
|
||
}
|
||
.detail-record {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 6px 0;
|
||
}
|
||
.detail-record-left {
|
||
display: flex; align-items: center; gap: 4px;
|
||
font-size: 13px;
|
||
}
|
||
.detail-record-left svg { width: 12px; height: 12px; fill: var(--green); }
|
||
.detail-record-date {
|
||
font-size: 10px;
|
||
color: var(--text-hint);
|
||
}
|
||
|
||
/* 页面切换标签 */
|
||
.page-tabs {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin: 16px 0;
|
||
flex-wrap: wrap;
|
||
}
|
||
.page-tab {
|
||
padding: 8px 16px;
|
||
border-radius: 20px;
|
||
border: 1.5px solid var(--separator);
|
||
background: var(--bg-card);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
color: var(--text-secondary);
|
||
}
|
||
.page-tab.active {
|
||
background: var(--accent);
|
||
color: #fff;
|
||
border-color: var(--accent);
|
||
}
|
||
.page-tab:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
|
||
|
||
/* 隐藏/显示区域 */
|
||
.page-section { display: none; }
|
||
.page-section.active { display: block; }
|
||
|
||
/* 响应式 */
|
||
@media (max-width: 640px) {
|
||
.template-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.goal-grid { grid-template-columns: 1fr 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- 导航栏 -->
|
||
<div class="nav-bar">
|
||
<div style="display:flex;align-items:center;gap:8px;">
|
||
<button class="nav-btn" style="width:auto;padding:0 4px;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round"><path d="M15 18l-6-6 6-6"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="nav-title">
|
||
<svg viewBox="0 0 24 24"><path d="M21 4H3a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h1v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zM11 17H7v-2h4v2zm6 0h-4v-2h4v2zm2-4H5V8h14v5z"/></svg>
|
||
学习计划
|
||
</div>
|
||
<div class="nav-actions">
|
||
<button class="nav-btn" onclick="openSheet('detail-sheet')" title="设置">
|
||
<svg viewBox="0 0 24 24"><path d="M19.14 12.94a7.07 7.07 0 0 0 .06-.94 7.07 7.07 0 0 0-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96a7.04 7.04 0 0 0-1.62-.94l-.36-2.54a.48.48 0 0 0-.48-.41h-3.84a.48.48 0 0 0-.48.41l-.36 2.54a7.04 7.04 0 0 0-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87a.48.48 0 0 0 .12.61l2.03 1.58a7.2 7.2 0 0 0 0 1.88l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32a.49.49 0 0 0 .59.22l2.39-.96c.5.38 1.04.7 1.62.94l.36 2.54a.48.48 0 0 0 .48.41h3.84a.48.48 0 0 0 .48-.41l.36-2.54a7.04 7.04 0 0 0 1.62-.94l2.39.96a.49.49 0 0 0 .59-.22l1.92-3.32a.49.49 0 0 0-.12-.61l-2.03-1.58zM12 15.5A3.5 3.5 0 1 1 12 8.5a3.5 3.5 0 0 1 0 7z"/></svg>
|
||
</button>
|
||
<button class="nav-btn" onclick="openSheet('create-sheet')" title="添加">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 页面切换标签 -->
|
||
<div class="page-container">
|
||
<div class="page-tabs">
|
||
<button class="page-tab active" onclick="switchPage('plan-list')">计划列表</button>
|
||
<button class="page-tab" onclick="switchPage('empty-state')">空状态</button>
|
||
<button class="page-tab" onclick="switchPage('create-sheet-view')">创建计划</button>
|
||
<button class="page-tab" onclick="switchPage('detail-sheet-view')">计划详情</button>
|
||
</div>
|
||
|
||
<!-- 计划列表 -->
|
||
<div id="plan-list" class="page-section active">
|
||
<!-- 阅读目标卡片 -->
|
||
<div class="reading-goal-card">
|
||
<div class="goal-header">
|
||
<div class="goal-title">
|
||
<svg viewBox="0 0 24 24"><path d="M21 4H3a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h1v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zM11 17H7v-2h4v2zm6 0h-4v-2h4v2zm2-4H5V8h14v5z"/></svg>
|
||
阅读目标
|
||
</div>
|
||
<button class="goal-edit-btn" onclick="openSheet('goal-sheet')">
|
||
<svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="goal-grid">
|
||
<div class="goal-metric">
|
||
<div class="goal-metric-label">
|
||
<svg viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
|
||
<span>今日浏览</span>
|
||
</div>
|
||
<div class="goal-progress-bar"><div class="goal-progress-fill accent" style="width:70%"></div></div>
|
||
<div class="goal-metric-value">7/10</div>
|
||
</div>
|
||
<div class="goal-metric">
|
||
<div class="goal-metric-label">
|
||
<svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
|
||
<span>今日收藏</span>
|
||
</div>
|
||
<div class="goal-progress-bar"><div class="goal-progress-fill accent" style="width:100%"></div></div>
|
||
<div class="goal-metric-value" style="color:var(--green)">3/3</div>
|
||
</div>
|
||
<div class="goal-metric">
|
||
<div class="goal-metric-label">
|
||
<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z"/></svg>
|
||
<span>今日笔记</span>
|
||
</div>
|
||
<div class="goal-progress-bar"><div class="goal-progress-fill accent" style="width:0%"></div></div>
|
||
<div class="goal-metric-value">0/1</div>
|
||
</div>
|
||
<div class="goal-metric">
|
||
<div class="goal-metric-label">
|
||
<svg class="complete" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||
<span class="complete">连续签到</span>
|
||
</div>
|
||
<div class="goal-progress-bar"><div class="goal-progress-fill green" style="width:57%"></div></div>
|
||
<div class="goal-metric-value">4/7</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 计划卡片1 - 进行中 -->
|
||
<div class="section-header">
|
||
<div class="section-title">进行中</div>
|
||
</div>
|
||
|
||
<div class="plan-card" onclick="openSheet('detail-sheet')">
|
||
<div class="plan-main-row">
|
||
<div class="progress-ring">
|
||
<svg width="56" height="56" viewBox="0 0 56 56">
|
||
<circle cx="28" cy="28" r="24" fill="none" stroke-width="4" class="progress-ring-bg"/>
|
||
<circle cx="28" cy="28" r="24" fill="none" stroke-width="4" stroke="var(--accent)" stroke-linecap="round"
|
||
stroke-dasharray="150.8" stroke-dashoffset="60.32" class="progress-ring-fg"/>
|
||
</svg>
|
||
<div class="progress-ring-label" style="color:var(--accent)">60%</div>
|
||
</div>
|
||
<div class="plan-info">
|
||
<div class="plan-title-row">
|
||
<div class="plan-icon"><svg viewBox="0 0 24 24" style="fill:#4A90D9"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg></div>
|
||
<span class="plan-title">每日五首诗</span>
|
||
<span class="streak-badge"><svg viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>7天</span>
|
||
</div>
|
||
<div class="plan-subtitle">每天阅读5首古诗词，积少成多</div>
|
||
<div class="plan-progress-row">
|
||
<span class="plan-progress-text active">今日 3/5</span>
|
||
<div class="plan-progress-bar">
|
||
<div class="plan-progress-fill" style="width:60%;background:var(--accent)"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="plan-actions">
|
||
<button class="plan-btn primary" onclick="event.stopPropagation()">
|
||
<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
|
||
完成1条
|
||
</button>
|
||
<button class="plan-btn secondary" onclick="event.stopPropagation()">更多</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 计划卡片2 - 已完成 -->
|
||
<div class="plan-card completed" onclick="openSheet('detail-sheet')">
|
||
<div class="plan-main-row">
|
||
<div class="progress-ring">
|
||
<svg width="56" height="56" viewBox="0 0 56 56">
|
||
<circle cx="28" cy="28" r="24" fill="none" stroke-width="4" class="progress-ring-bg"/>
|
||
<circle cx="28" cy="28" r="24" fill="none" stroke-width="4" stroke="var(--green)" stroke-linecap="round"
|
||
stroke-dasharray="150.8" stroke-dashoffset="0" class="progress-ring-fg"/>
|
||
</svg>
|
||
<div class="progress-ring-label">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="plan-info">
|
||
<div class="plan-title-row">
|
||
<div class="plan-icon"><svg viewBox="0 0 24 24" style="fill:#EF5350"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg></div>
|
||
<span class="plan-title">成语达人</span>
|
||
<span class="streak-badge"><svg viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>3天</span>
|
||
</div>
|
||
<div class="plan-subtitle">每天学习5个成语，丰富表达</div>
|
||
<div class="plan-progress-row">
|
||
<span class="plan-progress-text completed">今日 5/5</span>
|
||
<div class="plan-progress-bar">
|
||
<div class="plan-progress-fill" style="width:100%;background:var(--green)"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="plan-actions">
|
||
<button class="plan-btn secondary" onclick="event.stopPropagation()">更多</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 计划卡片3 - 进行中 -->
|
||
<div class="plan-card" onclick="openSheet('detail-sheet')">
|
||
<div class="plan-main-row">
|
||
<div class="progress-ring">
|
||
<svg width="56" height="56" viewBox="0 0 56 56">
|
||
<circle cx="28" cy="28" r="24" fill="none" stroke-width="4" class="progress-ring-bg"/>
|
||
<circle cx="28" cy="28" r="24" fill="none" stroke-width="4" stroke="var(--orange)" stroke-linecap="round"
|
||
stroke-dasharray="150.8" stroke-dashoffset="100.53" class="progress-ring-fg"/>
|
||
</svg>
|
||
<div class="progress-ring-label" style="color:var(--orange)">33%</div>
|
||
</div>
|
||
<div class="plan-info">
|
||
<div class="plan-title-row">
|
||
<div class="plan-icon"><svg viewBox="0 0 24 24" style="fill:#D4A843"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z"/></svg></div>
|
||
<span class="plan-title">名言积累</span>
|
||
</div>
|
||
<div class="plan-subtitle">每天3句名言，启迪智慧</div>
|
||
<div class="plan-progress-row">
|
||
<span class="plan-progress-text active">今日 1/3</span>
|
||
<div class="plan-progress-bar">
|
||
<div class="plan-progress-fill" style="width:33%;background:var(--orange)"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="plan-actions">
|
||
<button class="plan-btn primary" style="background:rgba(255,149,0,0.12);color:var(--orange)" onclick="event.stopPropagation()">
|
||
<svg viewBox="0 0 24 24" style="fill:var(--orange)"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
|
||
完成1条
|
||
</button>
|
||
<button class="plan-btn secondary" onclick="event.stopPropagation()">更多</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加计划卡片 -->
|
||
<div class="add-card" onclick="openSheet('create-sheet')">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
|
||
<span>添加新计划</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 空状态 -->
|
||
<div id="empty-state" class="page-section">
|
||
<div class="empty-state">
|
||
<div class="empty-icon">
|
||
<svg viewBox="0 0 24 24"><path d="M21 4H3a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h1v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zM11 17H7v-2h4v2zm6 0h-4v-2h4v2zm2-4H5V8h14v5z"/></svg>
|
||
</div>
|
||
<div class="empty-title">开始你的学习之旅</div>
|
||
<div class="empty-subtitle">制定学习计划，每日坚持<br>积少成多，收获满满</div>
|
||
<button class="empty-btn" onclick="openSheet('create-sheet')">
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
创建第一个计划
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 创建计划Sheet（内嵌展示） -->
|
||
<div id="create-sheet-view" class="page-section">
|
||
<div style="background:var(--bg-card);border-radius:var(--radius-xl);padding:20px;border:0.5px solid var(--separator);">
|
||
<div style="width:36px;height:4px;background:var(--text-hint);border-radius:2px;margin:0 auto 20px;"></div>
|
||
<div class="sheet-title">创建学习计划</div>
|
||
<div class="sheet-label">选择模板</div>
|
||
<div class="template-grid">
|
||
<div class="template-item selected">
|
||
<div class="template-item-title">
|
||
<svg viewBox="0 0 24 24" style="fill:#4A90D9"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>
|
||
每日五首诗
|
||
</div>
|
||
<div class="template-item-desc">每天阅读5首古诗词，积少成多</div>
|
||
</div>
|
||
<div class="template-item">
|
||
<div class="template-item-title">
|
||
<svg viewBox="0 0 24 24" style="fill:#4A90D9"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>
|
||
诗词轻量计划
|
||
</div>
|
||
<div class="template-item-desc">每天3首诗，轻松坚持</div>
|
||
</div>
|
||
<div class="template-item">
|
||
<div class="template-item-title">
|
||
<svg viewBox="0 0 24 24" style="fill:#EF5350"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
|
||
成语达人
|
||
</div>
|
||
<div class="template-item-desc">每天学习5个成语，丰富表达</div>
|
||
</div>
|
||
<div class="template-item">
|
||
<div class="template-item-title">
|
||
<svg viewBox="0 0 24 24" style="fill:#D4A843"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z"/></svg>
|
||
名言积累
|
||
</div>
|
||
<div class="template-item-desc">每天3句名言，启迪智慧</div>
|
||
</div>
|
||
<div class="template-item">
|
||
<div class="template-item-title">
|
||
<svg viewBox="0 0 24 24" style="fill:#5C6BC0"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/></svg>
|
||
经典通读
|
||
</div>
|
||
<div class="template-item-desc">每周精读一篇经典名句</div>
|
||
</div>
|
||
<div class="template-item">
|
||
<div class="template-item-title">
|
||
<svg viewBox="0 0 24 24" style="fill:#26A69A"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
混合学习
|
||
</div>
|
||
<div class="template-item-desc">每天5条混合内容，全面发展</div>
|
||
</div>
|
||
</div>
|
||
<div class="sheet-label">每日目标</div>
|
||
<div class="goal-selector">
|
||
<button class="goal-selector-btn">−</button>
|
||
<div class="goal-selector-value">5 条/天</div>
|
||
<button class="goal-selector-btn">+</button>
|
||
</div>
|
||
<button class="sheet-create-btn">
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
创建计划
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 计划详情Sheet（内嵌展示） -->
|
||
<div id="detail-sheet-view" class="page-section">
|
||
<div style="background:var(--bg-card);border-radius:var(--radius-xl);padding:20px;border:0.5px solid var(--separator);">
|
||
<div style="width:36px;height:4px;background:var(--text-hint);border-radius:2px;margin:0 auto 20px;"></div>
|
||
<div class="sheet-title">每日五首诗</div>
|
||
<div class="detail-stat">
|
||
<div class="detail-stat-label">
|
||
<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>
|
||
总完成
|
||
</div>
|
||
<div class="detail-stat-value">42 条</div>
|
||
</div>
|
||
<div class="detail-stat">
|
||
<div class="detail-stat-label">
|
||
<svg viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67z"/></svg>
|
||
连续天数
|
||
</div>
|
||
<div class="detail-stat-value">7 天</div>
|
||
</div>
|
||
<div class="detail-stat">
|
||
<div class="detail-stat-label">
|
||
<svg viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z"/></svg>
|
||
开始日期
|
||
</div>
|
||
<div class="detail-stat-value">6/1</div>
|
||
</div>
|
||
<div class="detail-stat">
|
||
<div class="detail-stat-label">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>
|
||
每日目标
|
||
</div>
|
||
<div class="detail-stat-value">5 条</div>
|
||
</div>
|
||
<div class="detail-records">
|
||
<div class="sheet-label" style="margin-top:16px;">最近记录</div>
|
||
<div class="detail-record">
|
||
<div class="detail-record-left">
|
||
<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
|
||
完成1条
|
||
</div>
|
||
<div class="detail-record-date">6/17</div>
|
||
</div>
|
||
<div class="detail-record">
|
||
<div class="detail-record-left">
|
||
<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
|
||
完成1条
|
||
</div>
|
||
<div class="detail-record-date">6/16</div>
|
||
</div>
|
||
<div class="detail-record">
|
||
<div class="detail-record-left">
|
||
<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
|
||
完成1条
|
||
</div>
|
||
<div class="detail-record-date">6/15</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 创建计划Sheet（弹出层） -->
|
||
<div class="sheet-overlay" id="create-sheet" onclick="closeSheet(event, 'create-sheet')">
|
||
<div class="sheet" onclick="event.stopPropagation()">
|
||
<div class="sheet-handle"></div>
|
||
<div class="sheet-title">创建学习计划</div>
|
||
<div class="sheet-label">选择模板</div>
|
||
<div class="template-grid">
|
||
<div class="template-item selected" onclick="selectTemplate(this)">
|
||
<div class="template-item-title">
|
||
<svg viewBox="0 0 24 24" style="fill:#4A90D9"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>
|
||
每日五首诗
|
||
</div>
|
||
<div class="template-item-desc">每天阅读5首古诗词，积少成多</div>
|
||
</div>
|
||
<div class="template-item" onclick="selectTemplate(this)">
|
||
<div class="template-item-title">
|
||
<svg viewBox="0 0 24 24" style="fill:#4A90D9"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>
|
||
诗词轻量计划
|
||
</div>
|
||
<div class="template-item-desc">每天3首诗，轻松坚持</div>
|
||
</div>
|
||
<div class="template-item" onclick="selectTemplate(this)">
|
||
<div class="template-item-title">
|
||
<svg viewBox="0 0 24 24" style="fill:#EF5350"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
|
||
成语达人
|
||
</div>
|
||
<div class="template-item-desc">每天学习5个成语，丰富表达</div>
|
||
</div>
|
||
<div class="template-item" onclick="selectTemplate(this)">
|
||
<div class="template-item-title">
|
||
<svg viewBox="0 0 24 24" style="fill:#D4A843"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z"/></svg>
|
||
名言积累
|
||
</div>
|
||
<div class="template-item-desc">每天3句名言，启迪智慧</div>
|
||
</div>
|
||
<div class="template-item" onclick="selectTemplate(this)">
|
||
<div class="template-item-title">
|
||
<svg viewBox="0 0 24 24" style="fill:#5C6BC0"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/></svg>
|
||
经典通读
|
||
</div>
|
||
<div class="template-item-desc">每周精读一篇经典名句</div>
|
||
</div>
|
||
<div class="template-item" onclick="selectTemplate(this)">
|
||
<div class="template-item-title">
|
||
<svg viewBox="0 0 24 24" style="fill:#26A69A"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
混合学习
|
||
</div>
|
||
<div class="template-item-desc">每天5条混合内容，全面发展</div>
|
||
</div>
|
||
</div>
|
||
<div class="sheet-label">每日目标</div>
|
||
<div class="goal-selector">
|
||
<button class="goal-selector-btn">−</button>
|
||
<div class="goal-selector-value">5 条/天</div>
|
||
<button class="goal-selector-btn">+</button>
|
||
</div>
|
||
<button class="sheet-create-btn" onclick="closeSheetDirect('create-sheet')">
|
||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
创建计划
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 计划详情Sheet（弹出层） -->
|
||
<div class="sheet-overlay" id="detail-sheet" onclick="closeSheet(event, 'detail-sheet')">
|
||
<div class="sheet" onclick="event.stopPropagation()">
|
||
<div class="sheet-handle"></div>
|
||
<div class="sheet-title">每日五首诗</div>
|
||
<div class="detail-stat">
|
||
<div class="detail-stat-label">
|
||
<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>
|
||
总完成
|
||
</div>
|
||
<div class="detail-stat-value">42 条</div>
|
||
</div>
|
||
<div class="detail-stat">
|
||
<div class="detail-stat-label">
|
||
<svg viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67z"/></svg>
|
||
连续天数
|
||
</div>
|
||
<div class="detail-stat-value">7 天</div>
|
||
</div>
|
||
<div class="detail-stat">
|
||
<div class="detail-stat-label">
|
||
<svg viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z"/></svg>
|
||
开始日期
|
||
</div>
|
||
<div class="detail-stat-value">6/1</div>
|
||
</div>
|
||
<div class="detail-stat">
|
||
<div class="detail-stat-label">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>
|
||
每日目标
|
||
</div>
|
||
<div class="detail-stat-value">5 条</div>
|
||
</div>
|
||
<div class="detail-records">
|
||
<div class="sheet-label" style="margin-top:16px;">最近记录</div>
|
||
<div class="detail-record">
|
||
<div class="detail-record-left">
|
||
<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
|
||
完成1条
|
||
</div>
|
||
<div class="detail-record-date">6/17</div>
|
||
</div>
|
||
<div class="detail-record">
|
||
<div class="detail-record-left">
|
||
<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
|
||
完成1条
|
||
</div>
|
||
<div class="detail-record-date">6/16</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 阅读目标设置Sheet -->
|
||
<div class="sheet-overlay" id="goal-sheet" onclick="closeSheet(event, 'goal-sheet')">
|
||
<div class="sheet" onclick="event.stopPropagation()">
|
||
<div class="sheet-handle"></div>
|
||
<div class="sheet-title">设置阅读目标</div>
|
||
<div class="sheet-label">每日浏览</div>
|
||
<input type="range" min="1" max="50" value="10" style="width:100%;accent-color:var(--accent);">
|
||
<div style="text-align:center;font-weight:600;color:var(--accent);margin:8px 0 20px;">10</div>
|
||
<div class="sheet-label">每日收藏</div>
|
||
<input type="range" min="1" max="20" value="3" style="width:100%;accent-color:var(--accent);">
|
||
<div style="text-align:center;font-weight:600;color:var(--accent);margin:8px 0 20px;">3</div>
|
||
<div class="sheet-label">每日笔记</div>
|
||
<input type="range" min="1" max="10" value="1" style="width:100%;accent-color:var(--accent);">
|
||
<div style="text-align:center;font-weight:600;color:var(--accent);margin:8px 0 20px;">1</div>
|
||
<div class="sheet-label">连续签到</div>
|
||
<input type="range" min="3" max="30" value="7" style="width:100%;accent-color:var(--accent);">
|
||
<div style="text-align:center;font-weight:600;color:var(--accent);margin:8px 0 20px;">7</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主题切换 -->
|
||
<button class="theme-toggle" onclick="toggleTheme()" title="切换主题">🌓</button>
|
||
|
||
<script>
|
||
function toggleTheme() {
|
||
const body = document.body;
|
||
const isDark = body.getAttribute('data-theme') === 'dark';
|
||
body.setAttribute('data-theme', isDark ? '' : 'dark');
|
||
}
|
||
|
||
function switchPage(id) {
|
||
document.querySelectorAll('.page-section').forEach(s => s.classList.remove('active'));
|
||
document.querySelectorAll('.page-tab').forEach(t => t.classList.remove('active'));
|
||
document.getElementById(id).classList.add('active');
|
||
event.target.classList.add('active');
|
||
}
|
||
|
||
function openSheet(id) {
|
||
document.getElementById(id).classList.add('active');
|
||
}
|
||
|
||
function closeSheet(e, id) {
|
||
if (e.target === e.currentTarget) {
|
||
document.getElementById(id).classList.remove('active');
|
||
}
|
||
}
|
||
|
||
function closeSheetDirect(id) {
|
||
document.getElementById(id).classList.remove('active');
|
||
}
|
||
|
||
function selectTemplate(el) {
|
||
el.parentElement.querySelectorAll('.template-item').forEach(t => t.classList.remove('selected'));
|
||
el.classList.add('selected');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|