wehub-resource-sync
458 lines
13 KiB
HTML
458 lines
13 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>
|
||
<meta name="author" content="{{作者}}">
|
||
<meta name="description" content="{{摘要}}">
|
||
<meta name="keywords" content="{{关键词}}">
|
||
<meta name="generator" content="Kami">
|
||
<style>
|
||
/* Regular weight */
|
||
@font-face {
|
||
font-family: "TsangerJinKai02";
|
||
src: url("../fonts/TsangerJinKai02-W04.ttf") format("truetype"),
|
||
url("https://cdn.jsdelivr.net/gh/tw93/Kami@main/assets/fonts/TsangerJinKai02-W04.ttf") format("truetype");
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
}
|
||
|
||
/* Bold weight - W05 for all bold variants */
|
||
@font-face {
|
||
font-family: "TsangerJinKai02";
|
||
src: url("../fonts/TsangerJinKai02-W05.ttf") format("truetype"),
|
||
url("https://cdn.jsdelivr.net/gh/tw93/Kami@main/assets/fonts/TsangerJinKai02-W05.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;
|
||
--near-black:#141413;
|
||
--dark-warm: #3d3d3a;
|
||
--olive: #504e49;
|
||
--stone: #6b6a64;
|
||
--brand: #1B365D;
|
||
--border: #e8e6dc;
|
||
--border-soft:#e5e3d8;
|
||
--tag-bg: #E4ECF5;
|
||
--serif: "TsangerJinKai02", "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", Georgia, serif;
|
||
--sans: var(--serif);
|
||
}
|
||
|
||
html, body { background: var(--parchment); }
|
||
|
||
@media screen {
|
||
body { max-width: 210mm; margin: 0 auto; padding: 15mm 18mm; }
|
||
}
|
||
|
||
body {
|
||
color: var(--near-black);
|
||
font-family: var(--serif);
|
||
font-size: 10pt;
|
||
line-height: 1.45;
|
||
letter-spacing: 0.3pt;
|
||
}
|
||
|
||
.serif {
|
||
font-family: var(--serif);
|
||
}
|
||
|
||
/* ========== HEADER ========== */
|
||
.header {
|
||
margin-bottom: 16pt;
|
||
padding-bottom: 12pt;
|
||
border-bottom: 0.5pt solid var(--border);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 20pt;
|
||
}
|
||
.title-block {
|
||
flex: 1;
|
||
}
|
||
.eyebrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 7pt;
|
||
font-size: 9pt;
|
||
color: var(--brand);
|
||
letter-spacing: 1.5pt;
|
||
text-transform: uppercase;
|
||
margin-bottom: 7pt;
|
||
font-weight: 500;
|
||
}
|
||
.eyebrow::before {
|
||
content: "";
|
||
width: 8pt;
|
||
height: 1.5pt;
|
||
border-radius: 0.75pt;
|
||
background: var(--brand);
|
||
flex-shrink: 0;
|
||
}
|
||
/* CN locale tuning: TsangerJinKai glyphs are wider per character, so H1 sits
|
||
slightly smaller (24pt vs EN 26pt) with looser leading (1.15 vs EN 1.12)
|
||
to keep optical density aligned across the two locales. */
|
||
h1 {
|
||
font-family: var(--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: 9pt;
|
||
color: var(--stone);
|
||
text-align: right;
|
||
line-height: 1.45;
|
||
white-space: nowrap;
|
||
}
|
||
/* 品牌 logo 槽(可选,来自 brand profile;默认无 logo,样式仅在取消注释后生效)。 */
|
||
.brand-logo {
|
||
height: 44px;
|
||
width: auto;
|
||
max-width: 160px;
|
||
object-fit: contain;
|
||
align-self: flex-start;
|
||
}
|
||
|
||
/* ========== 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: var(--serif);
|
||
font-size: 20pt;
|
||
font-weight: 500;
|
||
color: var(--brand);
|
||
line-height: 1;
|
||
font-variant-numeric: tabular-nums;
|
||
white-space: nowrap;
|
||
letter-spacing: -0.2pt;
|
||
}
|
||
.metric-label {
|
||
font-size: 9pt;
|
||
color: var(--olive);
|
||
line-height: 1.3;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ========== SECTIONS ========== */
|
||
/* PRODUCT SHOT (optional) - one real screenshot as the page's visual anchor.
|
||
Uncomment the <figure> in the body, point src at a local image, and tune
|
||
.frame height to fill the page. object-fit trims dead margin, not the window. */
|
||
.product-shot { margin-bottom: 16pt; break-inside: avoid; }
|
||
.product-shot .frame {
|
||
height: 110mm;
|
||
overflow: hidden;
|
||
border-radius: 5pt;
|
||
box-shadow: 0 1.5pt 6pt rgba(20, 20, 19, 0.16);
|
||
}
|
||
.product-shot .frame img {
|
||
width: 100%; height: 100%;
|
||
object-fit: cover; object-position: center; display: block;
|
||
}
|
||
.product-shot figcaption {
|
||
margin-top: 7pt; font-size: 8.5pt;
|
||
color: var(--stone); line-height: 1.45; text-align: center;
|
||
}
|
||
.product-shot figcaption .hl { color: var(--brand); font-weight: 500; }
|
||
|
||
section { margin-bottom: 18pt; break-inside: avoid; }
|
||
section:last-of-type { margin-bottom: 0; }
|
||
|
||
h2 {
|
||
font-family: var(--serif);
|
||
font-size: 16pt;
|
||
font-weight: 500;
|
||
color: var(--near-black);
|
||
margin-bottom: 6pt;
|
||
}
|
||
h2 .sub {
|
||
font-size: 9pt;
|
||
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 {
|
||
margin: 0;
|
||
padding-left: 16pt;
|
||
}
|
||
ul.dash li {
|
||
margin-bottom: 5pt;
|
||
line-height: 1.45;
|
||
}
|
||
ul.dash li:last-child { margin-bottom: 0; }
|
||
ul.dash li::marker { color: var(--brand); }
|
||
|
||
/* ========== Timeline (横向进度点) ========== */
|
||
.timeline {
|
||
display: flex;
|
||
gap: 12pt;
|
||
margin-top: 6pt;
|
||
}
|
||
.tl-step {
|
||
flex: 1;
|
||
break-inside: avoid;
|
||
}
|
||
.tl-year {
|
||
font-family: var(--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: 9pt;
|
||
color: var(--olive);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* ========== Tag ========== */
|
||
.tag {
|
||
display: inline-block;
|
||
background: var(--tag-bg); /* 实色！不要 rgba */
|
||
color: var(--brand);
|
||
font-size: 9pt;
|
||
font-weight: 500;
|
||
padding: 1pt 5pt;
|
||
border-radius: 3pt;
|
||
letter-spacing: 0.3pt;
|
||
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); }
|
||
|
||
/* ========== TABLE (kami-table) ========== */
|
||
table, .kami-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 9pt;
|
||
margin: 8pt 0;
|
||
break-inside: avoid;
|
||
}
|
||
table th, .kami-table th {
|
||
text-align: left;
|
||
font-weight: 500;
|
||
color: var(--dark-warm);
|
||
padding: 4pt 6pt;
|
||
border-bottom: 1pt solid var(--border);
|
||
background: transparent;
|
||
}
|
||
table td, .kami-table td {
|
||
padding: 3pt 6pt;
|
||
border-bottom: 0.3pt solid var(--border-soft);
|
||
vertical-align: top;
|
||
}
|
||
table.compact th, .kami-table.compact th { padding: 2pt 5pt; font-size: 8pt; }
|
||
table.compact td, .kami-table.compact td { padding: 1pt 5pt; font-size: 8pt; line-height: 1.4; }
|
||
table.financial td:not(:first-child), .kami-table.financial td:not(:first-child) {
|
||
text-align: right; font-variant-numeric: tabular-nums;
|
||
}
|
||
table.financial th:not(:first-child), .kami-table.financial th:not(:first-child) { text-align: right; }
|
||
table.striped tbody tr:nth-child(even) td, .kami-table.striped tbody tr:nth-child(even) td {
|
||
background: var(--ivory);
|
||
}
|
||
table .total td, .kami-table .total td {
|
||
font-weight: 500; border-top: 1pt solid var(--brand); border-bottom: none; color: var(--near-black);
|
||
}
|
||
|
||
/* ========== FOOTER ========== */
|
||
.footer {
|
||
margin-top: 18pt;
|
||
padding-top: 6pt;
|
||
border-top: 0.3pt dotted var(--border);
|
||
font-size: 9pt;
|
||
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>
|
||
<!-- 品牌 logo 槽(可选,来自 brand profile 的 logo 字段)。无 logo 时保持注释,勿插破图。
|
||
有 logo 时取消注释,把 src 换成已展开的本地绝对路径:
|
||
<img class="brand-logo" src="/absolute/path/to/logo.svg" alt=""> -->
|
||
</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>
|
||
|
||
<!-- ========== 核心内容（两栏） ========== -->
|
||
<!-- Optional hero product shot. Uncomment, point src at a local screenshot, and
|
||
tune .frame height (in the CSS) so the page fills without overflowing.
|
||
<figure class="product-shot">
|
||
<div class="frame"><img src="{{SCREENSHOT_PATH}}" alt="{{ALT_TEXT}}"></div>
|
||
<figcaption>{{One-line caption that adds a fact, not a restatement.}}</figcaption>
|
||
</figure>
|
||
-->
|
||
|
||
<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：带 <span class="hl">关键数字</span> 的论据}}</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>
|