483 lines
15 KiB
HTML
483 lines
15 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>{{title}} - 卡若派对纪要</title>
|
||
<style>
|
||
/* ===== 非101风格：简约编辑风，结构同 meeting.html ===== */
|
||
:root {
|
||
--accent: #475569;
|
||
--accent-soft: #e2e8f0;
|
||
--white: #ffffff;
|
||
--bg-page: #f8fafc;
|
||
--text-primary: #0f172a;
|
||
--text-secondary: #475569;
|
||
--text-muted: #64748b;
|
||
--border: #e2e8f0;
|
||
--border-strong: #cbd5e1;
|
||
--key-bg: #f1f5f9;
|
||
--key-border: #cbd5e1;
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
background: var(--bg-page);
|
||
min-height: 100vh;
|
||
color: var(--text-primary);
|
||
line-height: 1.65;
|
||
}
|
||
|
||
.container { max-width: 1120px; margin: 0 auto; padding: 32px 28px; }
|
||
|
||
.section-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 18px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 2px solid var(--border);
|
||
font-size: 1.2rem;
|
||
font-weight: 800;
|
||
color: var(--text-primary);
|
||
}
|
||
.section-head .section-num {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32px;
|
||
height: 32px;
|
||
color: var(--accent);
|
||
background: var(--accent-soft);
|
||
border: 2px solid var(--border-strong);
|
||
border-radius: 8px;
|
||
font-size: 0.95rem;
|
||
font-weight: 800;
|
||
}
|
||
.section-head .section-num.blue,
|
||
.section-head .section-num.orange,
|
||
.section-head .section-num.green,
|
||
.section-head .section-num.purple { color: var(--accent); background: var(--accent-soft); border-color: var(--border-strong); }
|
||
.section-head .section-icon { font-size: 1.25rem; opacity: 0.85; }
|
||
|
||
.header {
|
||
background: var(--white);
|
||
border-radius: 12px;
|
||
border: 1px solid var(--border);
|
||
padding: 32px 36px 24px;
|
||
margin-bottom: 28px;
|
||
box-shadow: none;
|
||
}
|
||
.header h1 {
|
||
font-size: 1.75rem;
|
||
font-weight: 800;
|
||
color: var(--text-primary);
|
||
margin-bottom: 12px;
|
||
line-height: 1.3;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.header .subtitle {
|
||
font-size: 0.95rem;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 18px;
|
||
max-width: 720px;
|
||
line-height: 1.55;
|
||
}
|
||
.header .nav-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
|
||
.header .nav-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
background: var(--accent-soft);
|
||
color: var(--text-secondary);
|
||
padding: 8px 14px;
|
||
border-radius: 20px;
|
||
font-size: 0.82rem;
|
||
font-weight: 600;
|
||
border: 1px solid var(--border);
|
||
}
|
||
.header .nav-tag .nav-icon { font-size: 1rem; }
|
||
.header .meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
font-size: 0.88rem;
|
||
color: var(--text-muted);
|
||
padding-top: 12px;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
|
||
.speakers-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 16px;
|
||
margin-bottom: 32px;
|
||
}
|
||
.speaker-card {
|
||
background: var(--white);
|
||
border-radius: 12px;
|
||
border: 1px solid var(--border);
|
||
overflow: hidden;
|
||
box-shadow: none;
|
||
}
|
||
.speaker-card .head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 14px 16px;
|
||
font-weight: 800;
|
||
font-size: 0.95rem;
|
||
color: var(--text-primary);
|
||
background: var(--accent-soft);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.speaker-card .head .head-icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
background: var(--white);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1rem;
|
||
}
|
||
.speaker-card .head.blue,
|
||
.speaker-card .head.orange,
|
||
.speaker-card .head.green,
|
||
.speaker-card .head.purple { background: var(--accent-soft); color: var(--text-primary); border-bottom-color: var(--border); }
|
||
.speaker-card .body { padding: 16px; }
|
||
.speaker-card .role { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); margin-bottom: 8px; }
|
||
.speaker-card .topics { font-size: 0.83rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; }
|
||
.speaker-card .pills { display: flex; flex-wrap: wrap; gap: 6px; }
|
||
.speaker-card .pill {
|
||
font-size: 0.72rem;
|
||
font-weight: 600;
|
||
padding: 4px 10px;
|
||
border-radius: 10px;
|
||
background: var(--accent-soft);
|
||
color: var(--text-secondary);
|
||
border: 1px solid var(--border);
|
||
}
|
||
.speaker-card .pill.blue,
|
||
.speaker-card .pill.orange,
|
||
.speaker-card .pill.green,
|
||
.speaker-card .pill.purple,
|
||
.speaker-card .pill.red { background: var(--accent-soft); color: var(--text-secondary); border-color: var(--border); }
|
||
|
||
.lean-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16px;
|
||
margin-bottom: 32px;
|
||
}
|
||
.lean-card {
|
||
background: var(--white);
|
||
border-radius: 12px;
|
||
border: 1px solid var(--border);
|
||
border-top: 4px solid var(--accent);
|
||
overflow: hidden;
|
||
box-shadow: none;
|
||
}
|
||
.lean-card.orange,
|
||
.lean-card.blue,
|
||
.lean-card.green { border-top-color: var(--accent); }
|
||
.lean-card .head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 14px 16px;
|
||
font-weight: 800;
|
||
font-size: 0.95rem;
|
||
color: var(--text-primary);
|
||
background: var(--accent-soft);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.lean-card .head .lean-icon {
|
||
width: 26px;
|
||
height: 26px;
|
||
background: var(--white);
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.9rem;
|
||
}
|
||
.lean-card .head.orange,
|
||
.lean-card .head.blue,
|
||
.lean-card .head.green { background: var(--accent-soft); color: var(--text-primary); }
|
||
.lean-card .body { padding: 16px; }
|
||
.lean-card h4 { font-size: 0.88rem; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
|
||
.lean-card ul { list-style: none; }
|
||
.lean-card li {
|
||
font-size: 0.82rem;
|
||
padding: 5px 0;
|
||
padding-left: 16px;
|
||
position: relative;
|
||
color: var(--text-secondary);
|
||
}
|
||
.lean-card li::before { content: "▪"; position: absolute; left: 0; color: var(--text-muted); font-weight: bold; }
|
||
.lean-card li .inline-tag { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; margin-right: 4px; font-weight: 600; background: var(--accent-soft); color: var(--text-secondary); }
|
||
.lean-card li .tag-项目,
|
||
.lean-card li .tag-产品,
|
||
.lean-card li .tag-运营,
|
||
.lean-card li .tag-商业 { background: var(--accent-soft); color: var(--text-secondary); }
|
||
|
||
.flow-wrap {
|
||
background: var(--white);
|
||
border-radius: 12px;
|
||
border: 1px solid var(--border);
|
||
padding: 24px 28px;
|
||
margin-bottom: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
.flow-node {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
min-width: 88px;
|
||
}
|
||
.flow-node .circle {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.2rem;
|
||
color: var(--text-primary);
|
||
background: var(--accent-soft);
|
||
border: 2px solid var(--border-strong);
|
||
margin-bottom: 6px;
|
||
}
|
||
.flow-node .circle.blue,
|
||
.flow-node .circle.purple,
|
||
.flow-node .circle.orange,
|
||
.flow-node .circle.red,
|
||
.flow-node .circle.green { background: var(--accent-soft); color: var(--text-primary); border-color: var(--border-strong); }
|
||
.flow-node .label { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); text-align: center; }
|
||
.flow-node .time { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
|
||
.flow-arrow { color: var(--border-strong); font-size: 1.1rem; font-weight: bold; }
|
||
|
||
.hot-list { margin-bottom: 32px; }
|
||
.hot-item {
|
||
background: var(--white);
|
||
border-radius: 12px;
|
||
border: 1px solid var(--border);
|
||
margin-bottom: 16px;
|
||
overflow: hidden;
|
||
}
|
||
.hot-item .top-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 14px;
|
||
padding: 16px 20px;
|
||
background: var(--bg-page);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.hot-item .signal-tag {
|
||
flex-shrink: 0;
|
||
padding: 6px 12px;
|
||
border-radius: 8px;
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
background: var(--accent);
|
||
color: var(--white);
|
||
}
|
||
.hot-item .signal-tag.ai,
|
||
.hot-item .signal-tag.user,
|
||
.hot-item .signal-tag.expert,
|
||
.hot-item .signal-tag.question { background: var(--accent); color: var(--white); }
|
||
.hot-item .signal-time { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }
|
||
.hot-item .topic-wrap { flex: 1; }
|
||
.hot-item .topic-wrap .q-icon { color: var(--accent); font-weight: 800; margin-right: 6px; }
|
||
.hot-item .topic-wrap .topic-title { font-weight: 800; font-size: 1rem; color: var(--text-primary); }
|
||
.hot-item .content { padding: 16px 20px; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.65; }
|
||
.hot-item .content ul { margin: 10px 0 0 20px; }
|
||
.hot-item .content li { margin: 5px 0; }
|
||
.hot-item .key-point {
|
||
margin: 0 20px 16px;
|
||
padding: 14px 16px;
|
||
background: var(--key-bg);
|
||
border: 1px solid var(--key-border);
|
||
border-radius: 10px;
|
||
font-size: 0.88rem;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
.hot-item .key-point .label {
|
||
display: inline-block;
|
||
background: var(--accent-soft);
|
||
color: var(--accent);
|
||
padding: 3px 10px;
|
||
border-radius: 6px;
|
||
font-size: 0.75rem;
|
||
font-weight: 800;
|
||
margin-bottom: 8px;
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.next-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 16px;
|
||
margin-bottom: 32px;
|
||
}
|
||
.next-card {
|
||
background: var(--white);
|
||
border-radius: 12px;
|
||
border: 1px solid var(--border);
|
||
border-top: 4px solid var(--accent);
|
||
padding: 20px;
|
||
}
|
||
.next-card.blue,
|
||
.next-card.purple,
|
||
.next-card.red { border-top-color: var(--accent); }
|
||
.next-card .next-icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 12px;
|
||
background: var(--accent-soft);
|
||
border: 1px solid var(--border);
|
||
}
|
||
.next-card.orange .next-icon,
|
||
.next-card.blue .next-icon,
|
||
.next-card.purple .next-icon,
|
||
.next-card.red .next-icon { background: var(--accent-soft); border: 1px solid var(--border); }
|
||
.next-card .title { font-weight: 800; font-size: 1rem; color: var(--text-primary); margin-bottom: 8px; }
|
||
.next-card .desc { font-size: 0.83rem; color: var(--text-secondary); line-height: 1.55; }
|
||
|
||
.progress-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 16px;
|
||
margin-bottom: 32px;
|
||
}
|
||
.progress-card {
|
||
background: var(--white);
|
||
border-radius: 12px;
|
||
border: 1px solid var(--border);
|
||
border-left: 5px solid var(--accent);
|
||
padding: 20px;
|
||
}
|
||
.progress-card.blue { border-left-color: var(--accent); }
|
||
.progress-card .progress-icon { font-size: 1.3rem; margin-bottom: 10px; }
|
||
.progress-card .title { font-weight: 800; font-size: 1rem; color: var(--text-primary); margin-bottom: 8px; }
|
||
.progress-card .desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }
|
||
|
||
.footer {
|
||
text-align: center;
|
||
padding: 28px;
|
||
font-size: 0.82rem;
|
||
color: var(--text-muted);
|
||
border-top: 1px solid var(--border);
|
||
margin-top: 12px;
|
||
}
|
||
.footer .brand { color: var(--accent); font-weight: 700; }
|
||
|
||
@media (max-width: 900px) {
|
||
.speakers-row { grid-template-columns: repeat(2, 1fr); }
|
||
.lean-row { grid-template-columns: 1fr; }
|
||
.next-grid { grid-template-columns: 1fr; }
|
||
.progress-row { grid-template-columns: 1fr; }
|
||
}
|
||
@media (max-width: 600px) {
|
||
.speakers-row { grid-template-columns: 1fr; }
|
||
.flow-wrap { flex-direction: column; }
|
||
.flow-arrow { transform: rotate(90deg); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header class="header">
|
||
<h1>{{title}}</h1>
|
||
<p class="subtitle">汇集实操经验与思考，核心关注：提要、细则、方法论、商业与链接。</p>
|
||
<div class="nav-tags">
|
||
<span class="nav-tag"><span class="nav-icon">👤</span>分享人</span>
|
||
<span class="nav-tag"><span class="nav-icon">🎯</span>目标</span>
|
||
<span class="nav-tag"><span class="nav-icon">❓</span>关键问题</span>
|
||
<span class="nav-tag"><span class="nav-icon">💡</span>AI复盘</span>
|
||
</div>
|
||
<div class="meta">
|
||
<span>⏱ {{duration}}</span>
|
||
<span>👥 {{participants_count}}</span>
|
||
<span>📍 {{location}}</span>
|
||
<span>📅 {{date}} {{time}}</span>
|
||
</div>
|
||
</header>
|
||
|
||
<section>
|
||
<h2 class="section-head">
|
||
<span class="section-num blue">一</span>
|
||
<span class="section-icon">👤</span>
|
||
分享人介绍
|
||
</h2>
|
||
<div class="speakers-row">{{#speakers}}</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2 class="section-head">
|
||
<span class="section-num orange">二</span>
|
||
<span class="section-icon">📌</span>
|
||
精益介绍
|
||
</h2>
|
||
<div class="lean-row">{{#modules}}</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2 class="section-head">
|
||
<span class="section-num green">三</span>
|
||
<span class="section-icon">🕐</span>
|
||
会议流程
|
||
</h2>
|
||
<div class="flow-wrap">{{#flow_steps}}</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2 class="section-head">
|
||
<span class="section-num purple">四</span>
|
||
<span class="section-icon">❓</span>
|
||
热点研讨
|
||
</h2>
|
||
<div class="hot-list">{{#highlights}}</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2 class="section-head">
|
||
<span class="section-num blue">五</span>
|
||
<span class="section-icon">📋</span>
|
||
下次分享
|
||
</h2>
|
||
<div class="next-grid">{{#next_share}}</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2 class="section-head">
|
||
<span class="section-num green">六</span>
|
||
<span class="section-icon">🚀</span>
|
||
项目推进
|
||
</h2>
|
||
<div class="progress-row">{{#actions}}</div>
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
<p>版权所有 © 2026 <span class="brand">Karuo.AI</span></p>
|
||
<p style="margin-top: 8px;">Power by Karuo.AI · 每天 06:00-09:00 Soul派对直播</p>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|