496 lines
16 KiB
HTML
496 lines
16 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场配色体系（与参考图一致）===== */
|
||
:root {
|
||
--blue: #2563eb;
|
||
--blue-light: #dbeafe;
|
||
--orange-red: #ea580c;
|
||
--orange-red-light: #ffedd5;
|
||
--green: #16a34a;
|
||
--green-light: #dcfce7;
|
||
--purple: #7c3aed;
|
||
--purple-light: #ede9fe;
|
||
--red: #dc2626;
|
||
--red-light: #fee2e2;
|
||
--yellow-key: #fef08a;
|
||
--yellow-key-bg: #fef9c3;
|
||
--white: #ffffff;
|
||
--bg-page: #fafafa;
|
||
--text-primary: #1a1a2e;
|
||
--text-secondary: #4b5563;
|
||
--text-muted: #6b7280;
|
||
}
|
||
|
||
* { 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: 3px solid transparent;
|
||
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: #fff;
|
||
border-radius: 8px;
|
||
font-size: 0.95rem;
|
||
font-weight: 800;
|
||
}
|
||
.section-head .section-num.blue { background: var(--blue); }
|
||
.section-head .section-num.orange { background: var(--orange-red); }
|
||
.section-head .section-num.green { background: var(--green); }
|
||
.section-head .section-num.purple { background: var(--purple); }
|
||
.section-head .section-icon { font-size: 1.25rem; opacity: 0.9; }
|
||
|
||
/* ========== 顶部标题区 ========== */
|
||
.header {
|
||
background: var(--white);
|
||
border-radius: 16px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
|
||
padding: 32px 36px 24px;
|
||
margin-bottom: 28px;
|
||
border: 1px solid rgba(0,0,0,0.05);
|
||
}
|
||
.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;
|
||
}
|
||
/* 导航标签行（与101场一致：分享人/目标/关键问题/AI复盘）*/
|
||
.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: #f3f4f6;
|
||
color: var(--text-secondary);
|
||
padding: 8px 14px;
|
||
border-radius: 22px;
|
||
font-size: 0.82rem;
|
||
font-weight: 600;
|
||
}
|
||
.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 #eee;
|
||
}
|
||
|
||
/* ========== 一、分享人介绍（四色卡+白底图标+性格/项目标签）========== */
|
||
.speakers-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 16px;
|
||
margin-bottom: 32px;
|
||
}
|
||
.speaker-card {
|
||
background: var(--white);
|
||
border-radius: 14px;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
|
||
overflow: hidden;
|
||
border: 1px solid rgba(0,0,0,0.05);
|
||
}
|
||
.speaker-card .head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 14px 16px;
|
||
font-weight: 800;
|
||
font-size: 0.95rem;
|
||
color: #fff;
|
||
}
|
||
.speaker-card .head .head-icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
background: rgba(255,255,255,0.25);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1rem;
|
||
}
|
||
.speaker-card .head.blue { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
|
||
.speaker-card .head.orange { background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); }
|
||
.speaker-card .head.green { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }
|
||
.speaker-card .head.purple { background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); }
|
||
.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; }
|
||
/* 性格/项目小标签（INTJ、项目、产品等）*/
|
||
.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: 12px;
|
||
}
|
||
.speaker-card .pill.blue { background: var(--blue-light); color: #1d4ed8; }
|
||
.speaker-card .pill.orange { background: var(--orange-red-light); color: #c2410c; }
|
||
.speaker-card .pill.green { background: var(--green-light); color: #15803d; }
|
||
.speaker-card .pill.purple { background: var(--purple-light); color: #6d28d9; }
|
||
.speaker-card .pill.red { background: var(--red-light); color: #b91c1c; }
|
||
|
||
/* ========== 二、精益介绍（三卡+图标+项目/产品/运营/商业标签）========== */
|
||
.lean-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16px;
|
||
margin-bottom: 32px;
|
||
}
|
||
.lean-card {
|
||
background: var(--white);
|
||
border-radius: 14px;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
|
||
overflow: hidden;
|
||
border-top: 4px solid var(--blue);
|
||
}
|
||
.lean-card.orange { border-top-color: var(--orange-red); }
|
||
.lean-card.blue { border-top-color: var(--blue); }
|
||
.lean-card.green { border-top-color: var(--green); }
|
||
.lean-card .head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 14px 16px;
|
||
font-weight: 800;
|
||
font-size: 0.95rem;
|
||
color: #fff;
|
||
}
|
||
.lean-card .head .lean-icon {
|
||
width: 26px;
|
||
height: 26px;
|
||
background: rgba(255,255,255,0.3);
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.9rem;
|
||
}
|
||
.lean-card .head.orange { background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); }
|
||
.lean-card .head.blue { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
|
||
.lean-card .head.green { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }
|
||
.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 {
|
||
display: inline-block;
|
||
font-size: 0.7rem;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
margin-right: 4px;
|
||
font-weight: 600;
|
||
}
|
||
.lean-card li .tag-项目 { background: var(--orange-red-light); color: #c2410c; }
|
||
.lean-card li .tag-产品 { background: var(--blue-light); color: #1d4ed8; }
|
||
.lean-card li .tag-运营 { background: var(--green-light); color: #15803d; }
|
||
.lean-card li .tag-商业 { background: var(--red-light); color: #b91c1c; }
|
||
|
||
/* ========== 三、会议流程图（彩色圆+白图标+步骤号）========== */
|
||
.flow-wrap {
|
||
background: var(--white);
|
||
border-radius: 14px;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
|
||
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: #fff;
|
||
margin-bottom: 6px;
|
||
}
|
||
.flow-node .circle.blue { background: var(--blue); }
|
||
.flow-node .circle.purple { background: var(--purple); }
|
||
.flow-node .circle.orange { background: var(--orange-red); }
|
||
.flow-node .circle.red { background: var(--red); }
|
||
.flow-node .circle.green { background: var(--green); }
|
||
.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: #cbd5e1; font-size: 1.1rem; font-weight: bold; }
|
||
|
||
/* ========== 四、热点研讨（信号标签+时间+Q:+重点黄框）========== */
|
||
.hot-list { margin-bottom: 32px; }
|
||
.hot-item {
|
||
background: var(--white);
|
||
border-radius: 14px;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
|
||
margin-bottom: 16px;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(0,0,0,0.05);
|
||
}
|
||
.hot-item .top-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 14px;
|
||
padding: 16px 20px;
|
||
background: #fafafa;
|
||
border-bottom: 1px solid #f1f3f4;
|
||
}
|
||
/* 左侧信号标签（AI思考/用户观点/专家洞察/AI提问）*/
|
||
.hot-item .signal-tag {
|
||
flex-shrink: 0;
|
||
padding: 6px 12px;
|
||
border-radius: 8px;
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
}
|
||
.hot-item .signal-tag.ai { background: var(--red); }
|
||
.hot-item .signal-tag.user { background: var(--blue); }
|
||
.hot-item .signal-tag.expert { background: var(--purple); }
|
||
.hot-item .signal-tag.question { background: var(--green); }
|
||
.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(--blue); 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; }
|
||
/* 重点（与101场一致的浅黄标签框）*/
|
||
.hot-item .key-point {
|
||
margin: 0 20px 16px;
|
||
padding: 14px 16px;
|
||
background: var(--yellow-key-bg);
|
||
border: 1px solid var(--yellow-key);
|
||
border-radius: 10px;
|
||
font-size: 0.88rem;
|
||
font-weight: 600;
|
||
color: #713f12;
|
||
}
|
||
.hot-item .key-point .label {
|
||
display: inline-block;
|
||
background: var(--yellow-key);
|
||
color: #a16207;
|
||
padding: 3px 10px;
|
||
border-radius: 6px;
|
||
font-size: 0.75rem;
|
||
font-weight: 800;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* ========== 五、下次分享（2x2 四色卡+图标）========== */
|
||
.next-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 16px;
|
||
margin-bottom: 32px;
|
||
}
|
||
.next-card {
|
||
background: var(--white);
|
||
border-radius: 14px;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
|
||
padding: 20px;
|
||
border-top: 4px solid var(--orange-red);
|
||
}
|
||
.next-card.blue { border-top-color: var(--blue); }
|
||
.next-card.purple { border-top-color: var(--purple); }
|
||
.next-card.red { border-top-color: var(--red); }
|
||
.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;
|
||
}
|
||
.next-card.orange .next-icon { background: var(--orange-red-light); }
|
||
.next-card.blue .next-icon { background: var(--blue-light); }
|
||
.next-card.purple .next-icon { background: var(--purple-light); }
|
||
.next-card.red .next-icon { background: var(--red-light); }
|
||
.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: 14px;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
|
||
padding: 20px;
|
||
border-left: 5px solid var(--green);
|
||
}
|
||
.progress-card.blue { border-left-color: var(--blue); }
|
||
.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 #e5e7eb;
|
||
margin-top: 12px;
|
||
}
|
||
.footer .brand { color: var(--blue); 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>
|