194 lines
8.8 KiB
Markdown
194 lines
8.8 KiB
Markdown
|
# Layout: `highlight_number` — 大数字强调页
|
|||
|
|
|
|||
|
|
> 幻灯片尺寸: 13.333 × 7.5 英寸 | 边距: 0.6 英寸 | 内容宽: 12.133 英寸
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 用途
|
|||
|
|
|
|||
|
|
单一核心数据的全屏展示：年化收益率、基金规模、服务人数、投资年限等。
|
|||
|
|
适合作为章节引言页或关键成就展示。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ASCII 线框图
|
|||
|
|
|
|||
|
|
### 变体 A：居中单数字
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
┌─────────────────────────────────────────────────────────────┐
|
|||
|
|
│ │
|
|||
|
|
│ [小标签 / 指标名称] │
|
|||
|
|
│ ───────────────── │
|
|||
|
|
│ │
|
|||
|
|
│ 12.3% │
|
|||
|
|
│ (超大字号，primary 色) │
|
|||
|
|
│ │
|
|||
|
|
│ [一行描述说明，text_muted] │
|
|||
|
|
│ │
|
|||
|
|
└─────────────────────────────────────────────────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 变体 B：左数字+右说明（适合有补充数据时）
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
┌─────────────────────────────────────────────────────────────┐
|
|||
|
|
│ │
|
|||
|
|
│ ┌──────────────────────┐ ┌──────────────────────────┐ │
|
|||
|
|
│ │ │ │ [标签] │ │
|
|||
|
|
│ │ 12.3% │ │ [description 长描述] │ │
|
|||
|
|
│ │ [超大数字] │ │ │ │
|
|||
|
|
│ │ │ │ ● 要点一 │ │
|
|||
|
|
│ │ [label 指标名] │ │ ● 要点二 │ │
|
|||
|
|
│ │ │ │ ● 要点三 │ │
|
|||
|
|
│ └──────────────────────┘ └──────────────────────────┘ │
|
|||
|
|
│ │
|
|||
|
|
└─────────────────────────────────────────────────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 变体 C：三数字并排（mini KPI 横排）
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
┌─────────────────────────────────────────────────────────────┐
|
|||
|
|
│ │
|
|||
|
|
│ 12.3% 380亿 15年 │
|
|||
|
|
│ 年化收益率 资产规模 运营年限 │
|
|||
|
|
│ │
|
|||
|
|
│ [描述一] [描述二] [描述三] │
|
|||
|
|
│ │
|
|||
|
|
└─────────────────────────────────────────────────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 精确坐标标注
|
|||
|
|
|
|||
|
|
### 变体 A（居中单数字）
|
|||
|
|
|
|||
|
|
| 元素 | x | y | w | h | 字号 | 颜色 | 对齐 | 备注 |
|
|||
|
|
|------|---|---|---|---|------|------|------|------|
|
|||
|
|
| 背景 | 0 | 0 | 13.333 | 7.5 | — | bg_dark | — | 可选深/浅背景 |
|
|||
|
|
| 小标签文字 | 0.60 | 2.00 | 12.133 | 0.50 | body_size+2 | text_muted / text_light | 中 | 如"年化收益率（2020-2024）" |
|
|||
|
|
| 标签下装饰线 | 5.167 | 2.55 | 3.00 | 0.04 | — | accent | — | 居中，宽3.0" |
|
|||
|
|
| **核心数字** | 0.60 | 2.80 | 12.133 | 2.20 | **96pt** | primary / accent | 中 | 超大字号 |
|
|||
|
|
| 单位/附注 | 0.60 | 4.90 | 12.133 | 0.45 | subtitle_size | text_muted / text_light | 中 | 如"截至2024年12月31日" |
|
|||
|
|
| 描述说明 | 2.00 | 5.50 | 9.333 | 0.70 | body_size | text_muted | 中 | 可选 |
|
|||
|
|
|
|||
|
|
> **核心数字字号**: 96pt 适合 4-6 个字符（如 "12.3%"）；
|
|||
|
|
> 字符更多时（如 "1,280亿"）使用 72pt；
|
|||
|
|
> 短数字（如 "6%"）可用 120pt。
|
|||
|
|
|
|||
|
|
### 变体 B（左数字+右说明）
|
|||
|
|
|
|||
|
|
| 元素 | x | y | w | h | 字号 | 颜色 | 对齐 |
|
|||
|
|
|------|---|---|---|---|------|------|------|
|
|||
|
|
| 背景 | 0 | 0 | 13.333 | 7.5 | — | bg_light | — |
|
|||
|
|
| 左卡片背景 | 0.60 | 1.20 | 5.867 | 5.10 | — | card_bg | — |
|
|||
|
|
| 左侧核心数字 | 0.80 | 2.30 | 5.467 | 2.00 | 72pt | primary | 中 |
|
|||
|
|
| 左侧指标名 | 0.80 | 4.40 | 5.467 | 0.50 | body_size+2 | text_muted | 中 |
|
|||
|
|
| 左侧 accent 竖线 | 0.60 | 1.20 | 0.08 | 5.10 | — | accent | — |
|
|||
|
|
| 右侧标签 | 7.067 | 1.30 | 5.667 | 0.50 | subtitle_size | primary | 左 |
|
|||
|
|
| 右侧描述 | 7.067 | 1.90 | 5.667 | 2.00 | body_size | text_dark | 左 |
|
|||
|
|
| 右侧要点列表 | 7.067 | 4.00 | 5.667 | 1.80 | body_size | text_dark | 左 |
|
|||
|
|
|
|||
|
|
### 变体 C（三数字并排）
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
三等分: card_w = (12.133 - 0.60) / 3 = 3.844"
|
|||
|
|
gap = 0.30"
|
|||
|
|
card_w_actual = (12.133 - 0.60) / 3 = 3.844"（含gap则减去间距）
|
|||
|
|
|
|||
|
|
精确计算（2个间距）:
|
|||
|
|
total_gap = 2 * 0.30 = 0.60
|
|||
|
|
card_w = (12.133 - 0.60) / 3 = 3.844"
|
|||
|
|
card_x[0] = 0.60
|
|||
|
|
card_x[1] = 0.60 + 3.844 + 0.30 = 4.744
|
|||
|
|
card_x[2] = 0.60 + 2*(3.844 + 0.30) = 8.888
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
| 元素（每张卡片，以 card_x 为基准） | x | y | w | h | 字号 | 颜色 | 对齐 |
|
|||
|
|
|----------------------------------|---|---|---|---|------|------|------|
|
|||
|
|
| 卡片背景（圆角矩形） | card_x | 1.50 | 3.844 | 4.50 | — | card_bg | — |
|
|||
|
|
| 顶部 accent 条 | card_x | 1.50 | 3.844 | 0.06 | — | accent | — |
|
|||
|
|
| 核心数字 | card_x+0.10 | 2.10 | 3.644 | 1.80 | 60pt | primary | 中 |
|
|||
|
|
| 指标名（标签） | card_x+0.10 | 3.95 | 3.644 | 0.50 | body_size+2 | text_dark | 中 |
|
|||
|
|
| 描述说明 | card_x+0.10 | 4.55 | 3.644 | 0.80 | caption_size | text_muted | 中 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 数据接口
|
|||
|
|
|
|||
|
|
```python
|
|||
|
|
# 变体 A / B
|
|||
|
|
data = {
|
|||
|
|
"number": str, # 核心数字（含符号，如 "12.3%", "1,280亿"）
|
|||
|
|
"label": str, # 指标名（如 "年化收益率"）
|
|||
|
|
"description": str, # 补充说明（如 "2020-2024年五年平均，已扣除费用"）
|
|||
|
|
"bullets": list[str], # 可选，变体B右侧要点列表
|
|||
|
|
"subtitle": str, # 可选，标签下方小字（如 "全国社保基金产品同期排名前10%"）
|
|||
|
|
"variant": "center" | "split" | "triple", # 布局变体，默认 "center"
|
|||
|
|
"bg": "dark" | "light", # 背景色，默认 "dark"
|
|||
|
|
"number_color": "primary" | "accent" | "positive" | "negative", # 数字颜色
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
# 变体 C（三数字）
|
|||
|
|
data = {
|
|||
|
|
"variant": "triple",
|
|||
|
|
"items": [
|
|||
|
|
{"number": "12.3%", "label": "年化收益率", "desc": "2020-2024"},
|
|||
|
|
{"number": "380亿", "label": "资产规模", "desc": "截至2024年底"},
|
|||
|
|
{"number": "15年", "label": "运营年限", "desc": "稳健成长"},
|
|||
|
|
],
|
|||
|
|
"bg": "light",
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 字号自适应规则
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
number 字符数 <= 4: font_size = 120pt（如 "6%", "100"）
|
|||
|
|
number 字符数 5-6: font_size = 96pt（如 "12.3%", "1,280"）
|
|||
|
|
number 字符数 7-8: font_size = 72pt（如 "1,280亿", "+12.34%"）
|
|||
|
|
number 字符数 > 8: font_size = 60pt（如 "1,280.5亿"）
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 设计要点
|
|||
|
|
|
|||
|
|
1. **超大数字** 是视觉焦点，周围需留足空白，不要填充其他内容
|
|||
|
|
2. **指标名** 用小字（body_size+2）放在数字下方或上方，避免与数字竞争
|
|||
|
|
3. **颜色选择**: 正面数据用 `primary` 或 `positive`（绿），负面用 `negative`（红），中性用 `accent`
|
|||
|
|
4. **深色背景** 适合独立展示页、开场用；浅色适合报告内页
|
|||
|
|
5. **变体C三数字并排** 字号降到 60pt，数字间需要足够间距避免拥挤
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 测试数据示例
|
|||
|
|
|
|||
|
|
```python
|
|||
|
|
# 变体 A: 年化收益率强调
|
|||
|
|
data = {
|
|||
|
|
"number": "12.3%",
|
|||
|
|
"label": "五年年化收益率",
|
|||
|
|
"description": "2020年1月至2024年12月，已扣除管理费及托管费，不含申购赎回费",
|
|||
|
|
"subtitle": "同类产品前 8%",
|
|||
|
|
"variant": "center",
|
|||
|
|
"bg": "dark",
|
|||
|
|
"number_color": "accent",
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
# 变体 C: 三核心数据
|
|||
|
|
data = {
|
|||
|
|
"variant": "triple",
|
|||
|
|
"items": [
|
|||
|
|
{"number": "12.3%", "label": "年化收益率", "desc": "五年平均（2020-2024）"},
|
|||
|
|
{"number": "380亿", "label": "资产规模", "desc": "截至2024年12月31日"},
|
|||
|
|
{"number": "15年", "label": "运营年限", "desc": "2010年成立至今"},
|
|||
|
|
],
|
|||
|
|
"bg": "light",
|
|||
|
|
}
|
|||
|
|
```
|