Tw93
360 lines
9.0 KiB
HTML
360 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
||
<!-- ==================================================================
|
||
ONE-PAGER TEMPLATE · parchment design system
|
||
单页 A4 方案/报告/执行摘要
|
||
改完跑：python3 -c "from weasyprint import HTML; HTML('one-pager.html').write_pdf('out.pdf')"
|
||
目标：页数必须 == 1
|
||
================================================================== -->
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>{{文档标题}}</title>
|
||
<style>
|
||
@font-face {
|
||
font-family: "TsangerJinKai02";
|
||
src: url("../fonts/TsangerJinKai02-W04.ttf") format("truetype");
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
}
|
||
|
||
@page {
|
||
size: A4;
|
||
margin: 15mm 18mm 15mm 18mm;
|
||
background: #f5f4ed;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--parchment: #f5f4ed;
|
||
--ivory: #faf9f5;
|
||
--sand: #e8e6dc;
|
||
--near-black:#141413;
|
||
--dark-warm: #3d3d3a;
|
||
--charcoal: #4d4c48;
|
||
--olive: #5e5d59;
|
||
--stone: #87867f;
|
||
--brand: #1B365D;
|
||
--border: #e8e6dc;
|
||
--border-soft:#efede4;
|
||
--tag-bg: #E4ECF5;
|
||
}
|
||
|
||
html, body { background: var(--parchment); }
|
||
|
||
body {
|
||
color: var(--near-black);
|
||
font-family: "TsangerJinKai02", "Source Han Serif SC",
|
||
"Noto Serif CJK SC", "Songti SC", Georgia, serif;
|
||
font-size: 10pt;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.serif {
|
||
font-family: "TsangerJinKai02", "Source Han Serif SC",
|
||
"Noto Serif CJK SC", "Songti SC", Georgia, serif;
|
||
}
|
||
|
||
/* ========== HEADER ========== */
|
||
.header {
|
||
border-bottom: 1pt solid var(--brand);
|
||
padding-bottom: 8pt;
|
||
margin-bottom: 14pt;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 20pt;
|
||
}
|
||
.title-block {
|
||
flex: 1;
|
||
}
|
||
.eyebrow {
|
||
font-size: 8.5pt;
|
||
color: var(--brand);
|
||
letter-spacing: 0.5pt;
|
||
text-transform: uppercase;
|
||
margin-bottom: 4pt;
|
||
}
|
||
h1 {
|
||
font-family: "TsangerJinKai02", "Source Han Serif SC",
|
||
"Noto Serif CJK SC", Georgia, serif;
|
||
font-size: 24pt;
|
||
font-weight: 500;
|
||
color: var(--near-black);
|
||
line-height: 1.15;
|
||
margin-bottom: 5pt;
|
||
}
|
||
.subtitle {
|
||
font-size: 11pt;
|
||
color: var(--olive);
|
||
line-height: 1.4;
|
||
}
|
||
.meta {
|
||
font-size: 8.5pt;
|
||
color: var(--stone);
|
||
text-align: right;
|
||
line-height: 1.45;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ========== METRICS ========== */
|
||
/* 横向 baseline 布局 —— 和 resume.html 一致的 kami native 姿态。
|
||
背景透明、无边框，用 typography 本身承担层次，不加容器。 */
|
||
.metrics {
|
||
display: flex;
|
||
gap: 14pt;
|
||
margin-bottom: 18pt;
|
||
padding: 4pt 0 6pt 0;
|
||
border-bottom: 0.3pt dotted var(--border);
|
||
}
|
||
.metric {
|
||
flex: 1;
|
||
background: transparent;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 4pt;
|
||
break-inside: avoid;
|
||
}
|
||
.metric-value {
|
||
font-family: "TsangerJinKai02", "Source Han Serif SC", Georgia, serif;
|
||
font-size: 20pt;
|
||
font-weight: 500;
|
||
color: var(--brand);
|
||
line-height: 1;
|
||
font-variant-numeric: tabular-nums;
|
||
letter-spacing: -0.2pt;
|
||
}
|
||
.metric-label {
|
||
font-size: 8.5pt;
|
||
color: var(--olive);
|
||
line-height: 1.3;
|
||
}
|
||
|
||
/* ========== SECTIONS ========== */
|
||
section { margin-bottom: 18pt; break-inside: avoid; }
|
||
section:last-of-type { margin-bottom: 0; }
|
||
|
||
h2 {
|
||
font-family: "TsangerJinKai02", "Source Han Serif SC", Georgia, serif;
|
||
font-size: 13pt;
|
||
font-weight: 500;
|
||
color: var(--near-black);
|
||
margin-bottom: 6pt;
|
||
padding-bottom: 3pt;
|
||
border-bottom: 0.5pt solid var(--brand);
|
||
}
|
||
h2 .sub {
|
||
font-size: 8.5pt;
|
||
color: var(--stone);
|
||
font-weight: 400;
|
||
margin-left: 6pt;
|
||
}
|
||
|
||
p { margin-bottom: 6pt; line-height: 1.45; }
|
||
p:last-child { margin-bottom: 0; }
|
||
|
||
.lead {
|
||
font-size: 12pt;
|
||
line-height: 1.5;
|
||
color: var(--dark-warm);
|
||
margin-bottom: 14pt;
|
||
}
|
||
|
||
.hl { color: var(--brand); font-weight: 500; }
|
||
|
||
/* ========== 2-column grid ========== */
|
||
.two-col {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 18pt;
|
||
}
|
||
|
||
/* ========== 短横线 list（代替默认 bullet） ========== */
|
||
ul.dash {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
ul.dash li {
|
||
position: relative;
|
||
padding-left: 12pt;
|
||
margin-bottom: 4pt;
|
||
line-height: 1.45;
|
||
}
|
||
ul.dash li::before {
|
||
content: "-";
|
||
position: absolute;
|
||
left: 0;
|
||
color: var(--brand);
|
||
}
|
||
|
||
/* ========== Timeline (横向进度点) ========== */
|
||
.timeline {
|
||
display: flex;
|
||
gap: 12pt;
|
||
margin-top: 6pt;
|
||
}
|
||
.tl-step {
|
||
flex: 1;
|
||
break-inside: avoid;
|
||
}
|
||
.tl-year {
|
||
font-family: "TsangerJinKai02", "Source Han Serif SC", Georgia, serif;
|
||
font-size: 11pt;
|
||
font-weight: 500;
|
||
color: var(--brand);
|
||
margin-bottom: 2pt;
|
||
}
|
||
.tl-head {
|
||
font-size: 10pt;
|
||
font-weight: 500;
|
||
color: var(--near-black);
|
||
margin-bottom: 2pt;
|
||
}
|
||
.tl-body {
|
||
font-size: 8.5pt;
|
||
color: var(--olive);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* ========== Tag ========== */
|
||
.tag {
|
||
display: inline-block;
|
||
background: var(--tag-bg); /* 实色！不要 rgba */
|
||
color: var(--brand);
|
||
font-size: 7.5pt;
|
||
font-weight: 500;
|
||
padding: 1pt 5pt;
|
||
border-radius: 3pt;
|
||
letter-spacing: 0.1pt;
|
||
margin-right: 3pt;
|
||
}
|
||
|
||
/* ========== Callout / 高亮块 ========== */
|
||
/* 参考 resume.html .team-culture：透明底 + 单左侧 brand 竖条。
|
||
不做容器也不做圆角，气质是"一条旁注"而不是"一个卡片"。 */
|
||
.callout {
|
||
background: transparent;
|
||
border-left: 1.8pt solid var(--brand);
|
||
padding: 4pt 0 4pt 14pt;
|
||
margin: 10pt 0;
|
||
font-size: 10pt;
|
||
line-height: 1.5;
|
||
color: var(--olive);
|
||
break-inside: avoid;
|
||
}
|
||
.callout .hl, .callout .em-brand { color: var(--brand); }
|
||
|
||
/* ========== FOOTER ========== */
|
||
.footer {
|
||
margin-top: 18pt;
|
||
padding-top: 6pt;
|
||
border-top: 0.3pt dotted var(--border);
|
||
font-size: 8pt;
|
||
color: var(--stone);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
letter-spacing: 0.3pt;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ========== HEADER ========== -->
|
||
<div class="header">
|
||
<div class="title-block">
|
||
<div class="eyebrow">{{EYEBROW · 如 "产品方案" / "项目提案" / "执行摘要"}}</div>
|
||
<h1>{{文档主标题（serif，2 行内，动词+名词结构最好）}}</h1>
|
||
<div class="subtitle">{{一行副标题 / 一句核心论点}}</div>
|
||
</div>
|
||
<div class="meta">
|
||
{{作者名}}<br>
|
||
{{日期 YYYY.MM.DD}}<br>
|
||
{{版本号 / 状态}}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========== METRICS（可选，3-4 卡最佳） ========== -->
|
||
<div class="metrics">
|
||
<div class="metric">
|
||
<div class="metric-value">{{数字}}</div>
|
||
<div class="metric-label">{{标签描述}}</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-value">{{数字}}</div>
|
||
<div class="metric-label">{{标签描述}}</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-value">{{数字}}</div>
|
||
<div class="metric-label">{{标签描述}}</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-value">{{数字}}</div>
|
||
<div class="metric-label">{{标签描述}}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========== LEAD（导语，一段） ========== -->
|
||
<p class="lead">
|
||
{{一段 40-60 字的核心论点导语。用「<span class="hl">关键词</span>」高亮重点。这段定调整个文档。}}
|
||
</p>
|
||
|
||
<!-- ========== 核心内容（两栏） ========== -->
|
||
<div class="two-col">
|
||
<section>
|
||
<h2>{{section 标题 1}}</h2>
|
||
<p>{{这里写 1-2 句段落，展开论点。}}</p>
|
||
<ul class="dash">
|
||
<li>{{短 bullet：数据/观察/判断}}</li>
|
||
<li>{{短 bullet：带 <span class="hl">关键数字</span> 的论据}}</li>
|
||
<li>{{短 bullet}}</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>{{section 标题 2}}</h2>
|
||
<p>{{1-2 句段落。}}</p>
|
||
<ul class="dash">
|
||
<li>{{短 bullet}}</li>
|
||
<li>{{短 bullet}}</li>
|
||
<li>{{短 bullet}}</li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- ========== Timeline / Roadmap（可选） ========== -->
|
||
<section>
|
||
<h2>时间线 / 路线图<span class="sub">（适用于方案类文档）</span></h2>
|
||
<div class="timeline">
|
||
<div class="tl-step">
|
||
<div class="tl-year">阶段 1</div>
|
||
<div class="tl-head">{{阶段标题}}</div>
|
||
<div class="tl-body">{{一句解释}}</div>
|
||
</div>
|
||
<div class="tl-step">
|
||
<div class="tl-year">阶段 2</div>
|
||
<div class="tl-head">{{阶段标题}}</div>
|
||
<div class="tl-body">{{一句解释}}</div>
|
||
</div>
|
||
<div class="tl-step">
|
||
<div class="tl-year">阶段 3</div>
|
||
<div class="tl-head">{{阶段标题}}</div>
|
||
<div class="tl-body">{{一句解释}}</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ========== CALLOUT（可选）========== -->
|
||
<div class="callout">
|
||
{{关键引用 / 重要提示 / 核心 takeaway。比正文更需要引起注意的内容放这里。}}
|
||
</div>
|
||
|
||
<!-- ========== FOOTER ========== -->
|
||
<div class="footer">
|
||
<span>{{机密级别 / 内部 / 公开 等}}</span>
|
||
<span>{{页码 / 联系方式}}</span>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|