282 lines
11 KiB
Markdown
282 lines
11 KiB
Markdown
|
# Layout: `three_columns` — 三栏内容
|
|||
|
|
|
|||
|
|
> 幻灯片尺寸: 13.333 × 7.5 英寸 | 边距: 0.6 英寸 | 内容宽: 12.133 英寸
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 用途
|
|||
|
|
|
|||
|
|
三个方案对比、三大优势、三个阶段、三类风险、三维度分析框架。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ASCII 线框图
|
|||
|
|
|
|||
|
|
### 变体 A：标准三栏（图标+标题+正文）
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
┌─────────────────────────────────────────────────────────────┐
|
|||
|
|
│ [标题] y=0.25 │
|
|||
|
|
│ ▬▬ (accent 装饰线) y=0.90 │
|
|||
|
|
│ │
|
|||
|
|
│ ┌──────────────┐ │ ┌──────────────┐ │ ┌──────────────┐ │
|
|||
|
|
│ │ [图标] │ │ │ [图标] │ │ │ [图标] │ │
|
|||
|
|
│ │ 稳健增值 │ │ │ 风险控制 │ │ │ 流动管理 │ │
|
|||
|
|
│ │ │ │ │ │ │ │ │ │
|
|||
|
|
│ │ 正文内容.. │ │ │ 正文内容.. │ │ │ 正文内容.. │ │
|
|||
|
|
│ │ 正文继续.. │ │ │ 正文继续.. │ │ │ 正文继续.. │ │
|
|||
|
|
│ └──────────────┘ └──────────────┘ └──────────────┘ │
|
|||
|
|
└─────────────────────────────────────────────────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 变体 B：三栏卡片（加 card_bg 背景，各栏独立卡片）
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
│ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │
|
|||
|
|
│ │ [顶部色带] │ │ [顶部色带] │ │ [顶部色带] │ │
|
|||
|
|
│ │ [图标] │ │ [图标] │ │ [图标] │ │
|
|||
|
|
│ │ [标题] │ │ [标题] │ │ [标题] │ │
|
|||
|
|
│ │ [要点列表] │ │ [要点列表] │ │ [要点列表] │ │
|
|||
|
|
│ └────────────────┘ └────────────────┘ └────────────────┘ │
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 变体 C：三阶段时间线（横向，强调顺序）
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
│ [起点] → 第一阶段 → 第二阶段 → 第三阶段 [终点] │
|
|||
|
|
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
|
|||
|
|
│ │ 图标/编号 │ │ 图标/编号 │ │ 图标/编号 │ │
|
|||
|
|
│ │ 标题 │ │ 标题 │ │ 标题 │ │
|
|||
|
|
│ │ 正文... │ │ 正文... │ │ 正文... │ │
|
|||
|
|
│ └────────────┘ └────────────┘ └────────────┘ │
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 精确坐标标注
|
|||
|
|
|
|||
|
|
### 尺寸计算（三等分）
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
col_gap = 0.30 # 列间距
|
|||
|
|
col_w = (12.133 - 2 * col_gap) / 3 = 3.844" # 每列宽（精确）
|
|||
|
|
|
|||
|
|
col_x[0] = 0.60
|
|||
|
|
col_x[1] = 0.60 + 3.844 + 0.30 = 4.744
|
|||
|
|
col_x[2] = 0.60 + 2 * (3.844 + 0.30) = 8.888
|
|||
|
|
|
|||
|
|
col_y = 1.20 # 内容区起始 y
|
|||
|
|
col_h = 5.90 # 内容区高度（到 y=7.10）
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 变体 A（标准三栏，无卡片背景）
|
|||
|
|
|
|||
|
|
| 元素（每列，以 col_x[i] 为基准） | x | y | w | h | 字号 | 颜色 | 对齐 |
|
|||
|
|
|-------------------------------|---|---|---|---|------|------|------|
|
|||
|
|
| 图标区（文字/Unicode 图标） | col_x | 1.20 | 3.844 | 0.90 | 36pt | primary | 中 |
|
|||
|
|
| 顶部 accent 横线（图标下方） | col_x | 2.15 | 1.50 | 0.04 | — | accent | — |
|
|||
|
|
| 列标题 | col_x | 2.30 | 3.844 | 0.55 | subtitle_size | text_dark | 中 |
|
|||
|
|
| 列正文 | col_x | 2.95 | 3.844 | 3.80 | body_size | text_dark | 左 |
|
|||
|
|
| 列间竖分隔线 | col_x+3.844+0.15 | 1.20 | 0.01 | 5.90 | — | border | — |
|
|||
|
|
|
|||
|
|
> accent 横线居左对齐于列，宽 1.50"（不满列宽，营造"半线"装饰感）
|
|||
|
|
|
|||
|
|
### 变体 B（卡片三栏）
|
|||
|
|
|
|||
|
|
| 元素（每列） | x | y | w | h | 颜色 | 备注 |
|
|||
|
|
|------------|---|---|---|---|------|------|
|
|||
|
|
| 卡片背景（圆角矩形） | col_x | 1.20 | 3.844 | 5.90 | card_bg | border 边框 |
|
|||
|
|
| 顶部色带 | col_x | 1.20 | 3.844 | 0.08 | 见下方颜色规则 | 每列不同色 |
|
|||
|
|
| 图标 | col_x+0.10 | 1.40 | 3.644 | 0.80 | 36pt | primary / text_light | 居中 |
|
|||
|
|
| 标题 | col_x+0.15 | 2.30 | 3.544 | 0.55 | subtitle_size | text_dark | 居中 |
|
|||
|
|
| 分隔线 | col_x+0.30 | 2.90 | 3.244 | 0.02 | border | — |
|
|||
|
|
| 正文/要点 | col_x+0.20 | 3.10 | 3.444 | 3.70 | body_size | text_dark | 左 |
|
|||
|
|
|
|||
|
|
**三栏顶部色带颜色（建议）**:
|
|||
|
|
- 第1栏: `primary`
|
|||
|
|
- 第2栏: `secondary`
|
|||
|
|
- 第3栏: `accent`
|
|||
|
|
- 或全部使用 `primary`（统一风格）
|
|||
|
|
|
|||
|
|
**要点列表行（每行）**:
|
|||
|
|
```
|
|||
|
|
bullet_y = 3.10 + j * 0.55 (j=0,1,2,3...)
|
|||
|
|
add_text("●", x=col_x+0.20, y=bullet_y, w=0.25, h=0.40, color=accent)
|
|||
|
|
add_text(text, x=col_x+0.50, y=bullet_y, w=3.00, h=0.40, color=text_dark)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 变体 C（三阶段，加箭头）
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
顶部箭头连接线:
|
|||
|
|
x=0.60, y=2.20, w=12.133, h=0.04, fill=secondary # 底层横线
|
|||
|
|
|
|||
|
|
各箭头（向右三角形，用文字 "→" 代替）:
|
|||
|
|
x=col_x[0]+3.844+0.05, y=2.00, w=0.20, h=0.40, color=accent
|
|||
|
|
|
|||
|
|
编号圆圈（替代图标时）:
|
|||
|
|
x=col_x+1.722, y=1.20, r=0.35 # 水平居中，fill=primary
|
|||
|
|
text: "01"/"02"/"03", color=text_light, 14pt, bold
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 固定元素（所有变体通用）
|
|||
|
|
|
|||
|
|
| 元素 | x | y | w | h | 字号 | 颜色 |
|
|||
|
|
|------|---|---|---|---|------|------|
|
|||
|
|
| 页面标题 | 0.60 | 0.25 | 12.133 | 0.60 | title_size-2 | text_dark |
|
|||
|
|
| 装饰线 | 0.60 | 0.90 | 2.00 | 0.04 | — | accent |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 数据接口
|
|||
|
|
|
|||
|
|
```python
|
|||
|
|
data = {
|
|||
|
|
"title": str, # 页面标题
|
|||
|
|
"subtitle": str, # 可选
|
|||
|
|
"variant": "open" | "card" | "phase", # 布局变体，默认 "open"
|
|||
|
|
"columns": [
|
|||
|
|
{
|
|||
|
|
"icon": str, # Unicode 图标字符（如 "📈" "🛡" "💧"）
|
|||
|
|
# 或自定义文字（如 "01", "A"）
|
|||
|
|
"title": str, # 栏标题（8字以内）
|
|||
|
|
"body": str, # 正文段落（可含换行 \n）
|
|||
|
|
"bullets": list[str], # 可选，要点列表（替代 body）
|
|||
|
|
"color": str, # 可选，顶部色带颜色变量名
|
|||
|
|
"footnote": str, # 可选，栏底部小注
|
|||
|
|
},
|
|||
|
|
... # 必须恰好 3 项
|
|||
|
|
],
|
|||
|
|
"show_dividers": bool, # 是否显示列间竖分隔线，默认 True（open变体）
|
|||
|
|
"accent_line_per_col": bool, # 每列图标下是否加 accent 短线，默认 True
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 实现伪代码
|
|||
|
|
|
|||
|
|
```python
|
|||
|
|
def layout_three_columns(slide, data, theme):
|
|||
|
|
m = theme["margin"]
|
|||
|
|
sw = 13.333
|
|||
|
|
cw = sw - 2 * m
|
|||
|
|
|
|||
|
|
set_slide_bg(slide, theme["bg_light"])
|
|||
|
|
add_text(slide, data["title"],
|
|||
|
|
x=m, y=0.25, w=cw, h=0.60,
|
|||
|
|
font_size=theme["title_size"]-2, color=theme["text_dark"],
|
|||
|
|
bold=True, font_name=theme["header_font"])
|
|||
|
|
add_rect(slide, m, 0.90, 2.0, 0.04, fill=theme["accent"])
|
|||
|
|
|
|||
|
|
col_gap = 0.30
|
|||
|
|
col_w = (cw - 2 * col_gap) / 3
|
|||
|
|
col_xs = [m, m + col_w + col_gap, m + 2 * (col_w + col_gap)]
|
|||
|
|
col_y = 1.20
|
|||
|
|
col_h = 5.90
|
|||
|
|
variant = data.get("variant", "open")
|
|||
|
|
|
|||
|
|
for i, col in enumerate(data["columns"]):
|
|||
|
|
cx = col_xs[i]
|
|||
|
|
|
|||
|
|
if variant == "card":
|
|||
|
|
add_rounded_rect(slide, cx, col_y, col_w, col_h,
|
|||
|
|
fill=theme["card_bg"], border=theme["border"], radius=0.10)
|
|||
|
|
col_colors = ["primary", "secondary", "accent"]
|
|||
|
|
top_color = theme.get(col.get("color", col_colors[i]), theme["primary"])
|
|||
|
|
add_rect(slide, cx, col_y, col_w, 0.08, fill=top_color)
|
|||
|
|
|
|||
|
|
# 图标
|
|||
|
|
add_text(slide, col["icon"],
|
|||
|
|
x=cx, y=col_y+0.20, w=col_w, h=0.80,
|
|||
|
|
font_size=36, color=theme["primary"],
|
|||
|
|
align="center", font_name=theme["body_font"])
|
|||
|
|
|
|||
|
|
# 图标下 accent 线
|
|||
|
|
if data.get("accent_line_per_col", True):
|
|||
|
|
line_x = cx + (col_w - 1.50) / 2
|
|||
|
|
add_rect(slide, line_x, col_y+1.05, 1.50, 0.04, fill=theme["accent"])
|
|||
|
|
|
|||
|
|
# 标题
|
|||
|
|
add_text(slide, col["title"],
|
|||
|
|
x=cx+0.10, y=col_y+1.20, w=col_w-0.20, h=0.55,
|
|||
|
|
font_size=theme["subtitle_size"], color=theme["text_dark"],
|
|||
|
|
bold=True, align="center", font_name=theme["header_font"])
|
|||
|
|
|
|||
|
|
# 正文或要点
|
|||
|
|
body_y = col_y + 1.85
|
|||
|
|
if col.get("bullets"):
|
|||
|
|
for j, bullet in enumerate(col["bullets"]):
|
|||
|
|
add_text(slide, f"● {bullet}",
|
|||
|
|
x=cx+0.15, y=body_y+j*0.55, w=col_w-0.30, h=0.50,
|
|||
|
|
font_size=theme["body_size"], color=theme["text_dark"],
|
|||
|
|
font_name=theme["body_font"])
|
|||
|
|
else:
|
|||
|
|
add_text(slide, col.get("body", ""),
|
|||
|
|
x=cx+0.15, y=body_y, w=col_w-0.30, h=3.70,
|
|||
|
|
font_size=theme["body_size"], color=theme["text_dark"],
|
|||
|
|
font_name=theme["body_font"])
|
|||
|
|
|
|||
|
|
# 列间竖线（open 变体）
|
|||
|
|
if variant == "open" and i < 2 and data.get("show_dividers", True):
|
|||
|
|
add_rect(slide, cx+col_w+0.15, col_y, 0.01, col_h, fill=theme["border"])
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 设计要点
|
|||
|
|
|
|||
|
|
1. **三等分** 精确计算：col_w = (12.133 - 0.60) / 3 = 3.844 英寸
|
|||
|
|
2. **图标** 建议用 Unicode Emoji（如 📈 🛡 💧）或文字数字（"01"）；字号 36pt
|
|||
|
|
3. **accent 短横线** 位于图标与标题之间，宽 1.50"（不满列宽），每列居中对齐
|
|||
|
|
4. **卡片变体** 三栏顶部色带颜色建议不同（视觉区分），或统一用 `primary`
|
|||
|
|
5. **正文** 左对齐（更易读），不居中；标题居中
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 测试数据示例
|
|||
|
|
|
|||
|
|
```python
|
|||
|
|
data = {
|
|||
|
|
"title": "养老投资三大核心策略",
|
|||
|
|
"variant": "card",
|
|||
|
|
"columns": [
|
|||
|
|
{
|
|||
|
|
"icon": "📈",
|
|||
|
|
"title": "稳健增值",
|
|||
|
|
"color": "primary",
|
|||
|
|
"bullets": [
|
|||
|
|
"长期年化收益目标 8-10%",
|
|||
|
|
"权益+债券均衡配置",
|
|||
|
|
"专注α收益挖掘",
|
|||
|
|
"低换手率运营",
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"icon": "🛡",
|
|||
|
|
"title": "风险控制",
|
|||
|
|
"color": "secondary",
|
|||
|
|
"bullets": [
|
|||
|
|
"最大回撤控制在 8% 以内",
|
|||
|
|
"多资产类别分散",
|
|||
|
|
"季度压力测试",
|
|||
|
|
"动态再平衡机制",
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"icon": "💧",
|
|||
|
|
"title": "流动管理",
|
|||
|
|
"color": "accent",
|
|||
|
|
"bullets": [
|
|||
|
|
"保持 15% 以上流动资产",
|
|||
|
|
"匹配养老金支付节奏",
|
|||
|
|
"避免集中赎回风险",
|
|||
|
|
"T+1 快速响应机制",
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
```
|