640 lines
49 KiB
Markdown
640 lines
49 KiB
Markdown
# 公众号排版组件库 —— 暖橙风
|
||
|
||
> **使用说明**：本组件库为「暖橙风」主题（主题 ID：`theme-warm-orange`，由 `assets/theme-previews/theme-warm-orange.html` 区块库转换而来），所有组件使用**内联样式**，可直接复制粘贴到微信公众号编辑器。
|
||
>
|
||
> **设计风格**：温暖疗愈系排版。暖橙主色 + 浅杏衬底 + 大圆角白卡 + 轻柔和阴影，圆点装饰与点状虚线贯穿全文，像冬日午后的一杯热橙茶。适合品牌发布、产品介绍、心理陪伴、生活方式类文章。
|
||
>
|
||
> **公众号平台限制须知**：
|
||
> - ❌ 不支持 `<style>`/`<script>`、CSS class/id、`position:fixed/absolute/sticky`、`@media`/`@keyframes`、`display:grid`、CSS 变量
|
||
> - ❌ 禁用 `form`/`button`/`svg`/`iframe`/`video` 等标签；按钮一律用带样式的 `<span>` 模拟
|
||
> - ✅ 支持内联 `style`、`<section>`/`<p>`/`<span>`/`<figure>`/`<figcaption>`/`<img>`/`<hr>`/`<code>`/`<strong>` 等基础标签
|
||
>
|
||
> **WeChat 兼容铁律**（本主题组件全部已按此写好，改动时必须遵守）：
|
||
> - 所有文字节点必须包 `<span leaf="">文字</span>`；装饰性空元素（圆点、胶带短条）内部必须放 `<span leaf=""><br></span>`，否则微信粘贴会剥掉样式
|
||
> - 所有字号 ≤24px（封面主标题、CTA 大字也不例外）
|
||
> - 组件不依赖任何 class/id，全部视觉写在元素自身 `style` 里
|
||
> - `<table>` 仅用于真实数据表格（字段表/对照表），不做布局骨架
|
||
|
||
---
|
||
|
||
## 一、设计变量速查表
|
||
|
||
```
|
||
主题名： 暖橙风（theme-warm-orange）
|
||
主色调： #EE7A2D（暖橙——按钮、圆点、编号、CTA 底色）
|
||
强调色： #C2541A（深橙棕——标签文字、小注、署名、引导语）
|
||
装饰色： #F9E3CE（浅杏——衬底、胶囊标签、点状分隔线）
|
||
背景色： #FDFBF7（暖白微杏——页面底色）
|
||
正文色： #3D3229（暖深棕——正文、标题）
|
||
标题色： #3D3229（同正文，靠字重区分层级）
|
||
正文关键词下划线：#F9C9A3（杏橙，权威值 border-bottom:2px solid #F9C9A3）
|
||
|
||
点状分隔线： 2px dotted #F9E3CE（章内）/ 2px dotted #EE7A2D（章间）
|
||
轻柔和阴影： 0 6px 18px rgba(238,122,45,0.10)（白卡标配）
|
||
0 4px 12px rgba(238,122,45,0.25)（按钮）
|
||
0 10px 24px rgba(238,122,45,0.28)（主 CTA）
|
||
圆角体系： 大圆角 14~24px（卡片）；999px（胶囊/圆徽章/按钮）
|
||
渐变衬底： linear-gradient(180deg,#F9E3CE,#FDFBF7)（陪伴/邀约卡专用）
|
||
|
||
正文字号： 16px（行高 2，两端对齐）
|
||
小字/标签： 13~14px
|
||
标题字号： 18~21px（开篇不放大字主标题，见组件 2 导语条）
|
||
设计技巧 TAG： 暖色卡片化、圆角呼吸感、柔和点缀、浅衬底分层
|
||
风格特征 TAG： 温暖、亲和、疗愈、积极
|
||
适用场景 TAG： 品牌发布、产品介绍、心理陪伴、生活方式
|
||
字体偏好： pingfang
|
||
```
|
||
|
||
字体栈：`'PingFang SC',-apple-system,BlinkMacSystemFont,'Hiragino Sans GB','Microsoft YaHei',sans-serif`
|
||
|
||
---
|
||
|
||
## 二、组件完整 HTML
|
||
|
||
按组件族分组，编号全文唯一。共 36 个编号组件（其中 34 个由预览区块转换 + 全局容器 + 行内样式组）。
|
||
|
||
### 组件 1 全局容器
|
||
|
||
```html
|
||
<section style="max-width:677px;margin:0 auto;padding:18px 4px 24px;background:#FDFBF7;color:#3D3229;font-size:16px;line-height:1.8;font-family:'PingFang SC',-apple-system,BlinkMacSystemFont,'Hiragino Sans GB','Microsoft YaHei',sans-serif;overflow-x:hidden;">
|
||
|
||
<!-- 所有组件放在这里 -->
|
||
|
||
</section>
|
||
```
|
||
|
||
### 组件族 A：封面与开篇（hero）
|
||
|
||
#### 组件 2 暖阳导语条（开篇轻量形态）
|
||
|
||
> **文案策略（先读，比代码重要）**：
|
||
> - 公众号后台已承担标题、封面图、账号名三样，开篇不再重复——本组件**不放大字主标题、不放头图、不放公司落款**；原头图并入正文首个图位（圆角大图卡 19）
|
||
> - 导语和外标题是**两层**，视角错开——外标题卖「为什么点开」，导语卖「这篇讲什么、读完得到什么」
|
||
> - 已知外标题时，导语**禁止原样复述**其核心关键词（产品名/功能名/场景词）；从文章第一段或核心论点提炼一句
|
||
|
||
```html
|
||
<section style="margin:0;padding:14px 12px;background:#FFFFFF;border-radius:18px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||
<span style="display:inline-block;padding:4px 14px;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">栏目标签占位</span></span>
|
||
<p style="margin:12px 0 0;font-size:16px;line-height:1.9;color:#3D3229;text-align:justify;"><span leaf="">开篇导语占位：一句话说清本篇讲什么、读者能带走什么，与外标题错开视角。</span></p>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 3 品牌叙事开篇卡
|
||
|
||
```html
|
||
<section style="margin:0;padding:18px 14px;background:#F9E3CE;border-radius:22px;">
|
||
<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#EE7A2D;margin-right:8px;vertical-align:middle;"><span leaf=""><br></span></span><span style="display:inline-block;font-size:14px;font-weight:bold;color:#C2541A;vertical-align:middle;"><span leaf="">开篇导语占位</span></span>
|
||
<p style="margin:12px 0 14px;font-size:16px;line-height:1.9;color:#3D3229;text-align:justify;"><span leaf="">叙事导语占位：这里放两三行品牌故事或情绪铺垫文字，语速放慢、句子放短，让读者先安静下来，再进入正文的说明部分。</span></p>
|
||
<span style="display:inline-block;padding:9px 26px;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:15px;font-weight:bold;box-shadow:0 4px 12px rgba(238,122,45,0.25);"><span leaf="">按钮文案占位</span></span>
|
||
</section>
|
||
```
|
||
|
||
### 组件族 B：目录与导航（navigation）
|
||
|
||
#### 组件 4 圆点目录卡
|
||
|
||
```html
|
||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||
<p style="margin:0 0 6px;font-size:19px;font-weight:bold;color:#3D3229;"><span leaf="">目录标题占位</span></p>
|
||
<p style="margin:0 0 12px;font-size:13px;color:#C2541A;"><span leaf="">目录说明占位：本篇包含的小节导航</span></p>
|
||
<p style="margin:0;padding:10px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">01</span></span><span style="vertical-align:middle;"><span leaf="">章节标题占位一</span></span></p>
|
||
<p style="margin:0;padding:10px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">02</span></span><span style="vertical-align:middle;"><span leaf="">章节标题占位二</span></span></p>
|
||
<p style="margin:0;padding:10px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">03</span></span><span style="vertical-align:middle;"><span leaf="">章节标题占位三</span></span></p>
|
||
<p style="margin:0;padding:10px 2px 0;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">04</span></span><span style="vertical-align:middle;"><span leaf="">章节标题占位四</span></span></p>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 5 标签索引带
|
||
|
||
```html
|
||
<section style="margin:0;padding:16px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||
<p style="margin:0 0 12px;font-size:14px;font-weight:bold;color:#C2541A;"><span leaf="">索引说明占位：本篇关键词索引</span></p>
|
||
<p style="margin:0 0 10px;font-size:14px;line-height:2.2;">
|
||
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;"><span leaf="">标签占位一</span></span>
|
||
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">标签占位二</span></span>
|
||
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">标签占位三</span></span>
|
||
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;border:2px solid #EE7A2D;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">标签占位四</span></span>
|
||
<span style="display:inline-block;padding:4px 14px;margin:0 8px 8px 0;border-radius:999px;border:2px solid #EE7A2D;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">标签占位五</span></span>
|
||
</p>
|
||
</section>
|
||
```
|
||
|
||
### 组件族 C：标题与分隔（title）
|
||
|
||
#### 组件 6 圆点章节标题
|
||
|
||
```html
|
||
<section style="margin:0;padding:6px 2px;">
|
||
<p style="margin:0 0 8px;font-size:21px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#EE7A2D;margin-right:12px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">章节标题占位：正文从这里开始</span></span></p>
|
||
<p style="margin:0;padding-bottom:10px;border-bottom:2px dotted #F9E3CE;font-size:14px;color:#C2541A;"><span leaf="">章节引导语占位：一句话说明本章内容</span></p>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 7 暖章编号标题
|
||
|
||
```html
|
||
<section style="margin:0;padding:14px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||
<p style="margin:0 0 6px;">
|
||
<span style="display:inline-block;margin-right:12px;font-size:25px;font-weight:bold;color:#EE7A2D;vertical-align:middle;"><span leaf="">01</span></span>
|
||
<span style="display:inline-block;font-size:20px;font-weight:bold;color:#3D3229;vertical-align:middle;"><span leaf="">章节标题占位一</span></span>
|
||
</p>
|
||
<p style="margin:0;padding-top:8px;border-top:2px dotted #F9E3CE;font-size:14px;color:#C2541A;"><span leaf="">章节摘要占位：编号章节的一句摘要</span></p>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 8 暖点分隔线
|
||
|
||
```html
|
||
<hr style="border:none;border-top:2px dotted #EE7A2D;margin:10px 30px;">
|
||
```
|
||
|
||
### 组件族 D：正文段落（paragraph）
|
||
|
||
#### 组件 9 呼吸正文段落
|
||
|
||
```html
|
||
<section style="margin:0;padding:4px 6px;">
|
||
<p style="margin:0 0 16px;font-size:16px;line-height:2;color:#3D3229;text-align:justify;"><span leaf="">正文段落占位：这里是放松呼吸的正文区域，行距放宽、句子放短。占位文字用来展示段落节奏与留白比例，两到三行为一组，读起来不赶时间。</span></p>
|
||
<p style="margin:0;font-size:16px;line-height:2;color:#3D3229;text-align:justify;"><span leaf="">正文段落占位：第二段承接第一段的话题继续展开，保持同样的字重与行高，让整页像一杯慢慢降温的热茶，信息清晰但没有压迫感。</span></p>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 10 暖点引导段落
|
||
|
||
```html
|
||
<section style="margin:0;padding:4px 6px;">
|
||
<p style="margin:0;font-size:16px;line-height:2;color:#3D3229;text-align:justify;"><span style="background:#F9E3CE;color:#C2541A;font-weight:bold;padding:2px 8px;border-radius:6px;margin-right:6px;"><span leaf="">引导短语占位</span></span><span leaf="">正文占位：开头用一枚浅杏色的高亮短语轻轻拉住视线，后面的文字自然展开，用来说明这一段的重点句式与节奏。</span></p>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 11 浅杏底纹强调段
|
||
|
||
```html
|
||
<section style="margin:0;padding:14px 12px;background:#F9E3CE;border-radius:18px;border-left:6px solid #EE7A2D;">
|
||
<p style="margin:0;font-size:16px;line-height:2;color:#3D3229;text-align:justify;"><span leaf="">重点段落占位：需要读者慢下来多看一眼的内容放在这里。浅杏衬底加左侧暖橙竖线，强调而不喊叫，适合放核心观点或安抚性的说明。</span></p>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 12 行内暖色样式（4 种 + 使用原则）
|
||
|
||
### 12a. 杏橙下划线（正文关键词默认标记，theme-index 权威值）
|
||
|
||
```html
|
||
<span style="border-bottom:2px solid #F9C9A3;font-weight:600;"><span leaf="">下划线标记的关键词</span></span>
|
||
```
|
||
|
||
### 12b. 暖橙加粗（核心概念、品牌名、关键结论）
|
||
|
||
```html
|
||
<strong style="color:#EE7A2D;"><span leaf="">暖橙加粗强调</span></strong>
|
||
```
|
||
|
||
### 12c. 浅杏底标签（段内锚点短语，每段 ≤1 处）
|
||
|
||
```html
|
||
<span style="background:#F9E3CE;color:#C2541A;font-weight:bold;padding:2px 8px;border-radius:6px;"><span leaf="">关键词标签</span></span>
|
||
```
|
||
|
||
### 12d. 行内代码（配置项、命令）
|
||
|
||
```html
|
||
<code style="font-family:Menlo,Consolas,monospace;font-size:14px;color:#C2541A;background:#F9E3CE;padding:2px 8px;border-radius:6px;"><span leaf="">配置项占位</span></code>
|
||
```
|
||
|
||
**使用原则**：
|
||
1. 正文关键词逐段标记用 12a 下划线（每段 1~3 处，词组 4~15 字）
|
||
2. 12b 暖橙加粗只给核心概念/品牌名，全文 ≤5 处
|
||
3. 12c 浅杏底标签是段落锚点，每段最多 1 处
|
||
4. 一段文字内不同时使用超过 2 种行内样式
|
||
|
||
### 组件族 E：引用与提示（quote / notice）
|
||
|
||
#### 组件 13 热茶引语卡
|
||
|
||
```html
|
||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||
<p style="margin:0 0 8px;font-size:25px;line-height:1;color:#EE7A2D;font-weight:bold;"><span leaf="">“</span></p>
|
||
<p style="margin:0 0 14px;font-size:17px;line-height:1.9;color:#3D3229;"><span leaf="">引用内容占位：一段值得慢慢读的话放在这里，像热茶冒着的一缕气，轻轻落在页面中间。</span></p>
|
||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 10px;">
|
||
<p style="margin:0;font-size:14px;color:#C2541A;text-align:right;"><span leaf="">—— 引用署名占位</span></p>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 14 暖心提示卡（信息提示）
|
||
|
||
```html
|
||
<section style="margin:0;padding:16px 12px;background:#FFFFFF;border:2px solid #F9E3CE;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.08);">
|
||
<p style="margin:0 0 8px;"><span style="display:inline-block;padding:4px 14px;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">提示标签占位</span></span></p>
|
||
<p style="margin:0;font-size:15px;line-height:1.9;color:#3D3229;text-align:justify;"><span leaf="">提示说明占位：温和的信息提示放在这里，例如阅读建议、氛围说明或背景补充，语气保持轻柔。</span></p>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 15 温和提醒卡（注意提醒）
|
||
|
||
```html
|
||
<section style="margin:0;padding:14px 12px;background:#FDFBF7;border:2px dashed #EE7A2D;border-radius:18px;">
|
||
<p style="margin:0 0 6px;font-size:15px;font-weight:bold;color:#C2541A;"><span leaf="">注意标签占位</span></p>
|
||
<p style="margin:0;font-size:15px;line-height:1.9;color:#3D3229;text-align:justify;"><span leaf="">提醒说明占位：需要读者留意但不必紧张的内容，用虚线暖框表达，提醒而不吓人。</span></p>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 16 陪伴留声卡（心理陪伴语）
|
||
|
||
```html
|
||
<section style="margin:0;padding:18px 14px;background:linear-gradient(180deg,#F9E3CE,#FDFBF7);border-radius:22px;">
|
||
<p style="margin:0 0 8px;font-size:14px;color:#C2541A;"><span leaf="">陪伴小语占位 ♡</span></p>
|
||
<p style="margin:0 0 12px;font-size:16px;line-height:2;color:#3D3229;text-align:justify;"><span leaf="">陪伴语句占位：写给此刻正在阅读的人的一句话，承认情绪、给出陪伴，不做评判。</span></p>
|
||
<p style="margin:0;font-size:13px;color:#C2541A;text-align:right;"><span leaf="">落款占位 · 留声说明占位</span></p>
|
||
</section>
|
||
```
|
||
|
||
### 组件族 F：列表（list）
|
||
|
||
#### 组件 17 圆点清单卡
|
||
|
||
```html
|
||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">清单标题占位</span></p>
|
||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">清单条目占位一：短句说明</span></span></p>
|
||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">清单条目占位二：短句说明</span></span></p>
|
||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">清单条目占位三：短句说明</span></span></p>
|
||
<p style="margin:0;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">清单条目占位四：短句说明</span></span></p>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 18 心愿任务清单
|
||
|
||
```html
|
||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">任务清单标题占位</span></p>
|
||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:18px;height:18px;line-height:18px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">✓</span></span><span style="vertical-align:middle;"><span leaf="">任务条目占位一（已完成占位）</span></span></p>
|
||
<p style="margin:0 0 14px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:18px;height:18px;line-height:18px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">✓</span></span><span style="vertical-align:middle;"><span leaf="">任务条目占位二（已完成占位）</span></span></p>
|
||
<p style="margin:0 0 14px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:18px;height:18px;line-height:15px;border-radius:50%;border:2px solid #EE7A2D;background:#FDFBF7;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">任务条目占位三（待完成占位）</span></span></p>
|
||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 10px;">
|
||
<p style="margin:0;font-size:13px;color:#C2541A;"><span leaf="">完成度说明占位：示例数字 2 / 3</span></p>
|
||
</section>
|
||
```
|
||
|
||
### 组件族 G：媒体（media）
|
||
|
||
#### 组件 19 圆角大图卡
|
||
|
||
```html
|
||
<figure style="margin:0;padding:14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||
<img src="https://placehold.orence.net/640x400/EE7A2D/FDFBF7?text=Photo+Placeholder" alt="正文配图占位" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:14px;">
|
||
<figcaption style="margin:12px 6px 2px;padding-top:10px;border-top:2px dotted #F9E3CE;font-size:14px;color:#C2541A;text-align:center;"><span leaf="">图片说明占位：图注文字放这里</span></figcaption>
|
||
</figure>
|
||
```
|
||
|
||
#### 组件 20 拍立得图文卡（生活方式向）
|
||
|
||
```html
|
||
<figure style="margin:0;padding:16px;background:#FFFFFF;border-radius:18px;box-shadow:0 8px 20px rgba(238,122,45,0.12);">
|
||
<span style="display:block;width:72px;height:14px;margin:0 auto 12px;border-radius:999px;background:#F9E3CE;"><span leaf=""><br></span></span>
|
||
<img src="https://placehold.orence.net/520x340/C2541A/F9E3CE?text=Life+Moment" alt="生活方式配图占位" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:12px;">
|
||
<figcaption style="margin:12px 4px 0;">
|
||
<p style="margin:0 0 4px;font-size:16px;font-weight:bold;color:#3D3229;"><span leaf="">图注标题占位</span></p>
|
||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">图注说明占位：写一句和图片心情一致的话。</span></p>
|
||
</figcaption>
|
||
</figure>
|
||
```
|
||
|
||
### 组件族 H：代码（code）
|
||
|
||
#### 组件 21 浅杏代码块
|
||
|
||
```html
|
||
<section style="margin:0;background:#F9E3CE;border-radius:18px;overflow:hidden;">
|
||
<p style="margin:0;padding:10px 18px;font-size:13px;color:#C2541A;"><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#EE7A2D;margin-right:8px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">代码说明占位 · 代码块标题占位</span></span></p>
|
||
<section style="margin:0;padding:14px 12px;background:#FDFBF7;border-radius:0 0 18px 18px;">
|
||
<code style="font-family:Menlo,Consolas,monospace;font-size:14px;line-height:1.9;color:#3D3229;"><span style="color:#C2541A;"><span leaf="">// 说明注释占位</span></span><br><span leaf="">const warmConfig = {</span><br><span leaf="> fieldA: </span><span style="color:#EE7A2D;"><span leaf="">"字段占位一"</span></span><span leaf="">,</span><br><span leaf="> fieldB: </span><span style="color:#EE7A2D;"><span leaf="">"字段占位二"</span></span><br><span leaf="">};</span></code>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
### 组件族 I：数据（data）
|
||
|
||
#### 组件 22 轻盈指标条
|
||
|
||
```html
|
||
<section style="margin:0;padding:4px;">
|
||
<section style="margin:0 0 10px;padding:12px 12px;background:#F9E3CE;border-radius:14px;">
|
||
<p style="margin:0;font-size:14px;color:#3D3229;"><span style="font-size:21px;font-weight:bold;color:#C2541A;margin-right:10px;vertical-align:middle;"><span leaf="">82%</span></span><span style="vertical-align:middle;"><span leaf="">指标名称占位一 · 指标说明占位</span></span></p>
|
||
</section>
|
||
<section style="margin:0 0 10px;padding:12px 12px;background:#FFFFFF;border-radius:14px;box-shadow:0 4px 12px rgba(238,122,45,0.10);">
|
||
<p style="margin:0;font-size:14px;color:#3D3229;"><span style="font-size:21px;font-weight:bold;color:#C2541A;margin-right:10px;vertical-align:middle;"><span leaf="">1200+</span></span><span style="vertical-align:middle;"><span leaf="">指标名称占位二 · 指标说明占位</span></span></p>
|
||
</section>
|
||
<section style="margin:0;padding:12px 12px;background:#F9E3CE;border-radius:14px;">
|
||
<p style="margin:0;font-size:14px;color:#3D3229;"><span style="font-size:21px;font-weight:bold;color:#C2541A;margin-right:10px;vertical-align:middle;"><span leaf="">4.8</span></span><span style="vertical-align:middle;"><span leaf="">指标名称占位三 · 指标说明占位</span></span></p>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 23 字段数据表（真实表格语义专用）
|
||
|
||
```html
|
||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||
<p style="margin:0 0 6px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">表格标题占位</span></p>
|
||
<p style="margin:0 0 14px;font-size:13px;color:#C2541A;"><span leaf="">表格说明占位：字段与示例数据的对照</span></p>
|
||
<table style="width:100%;border-collapse:collapse;font-size:14px;color:#3D3229;">
|
||
<tr>
|
||
<td style="padding:10px 12px;background:#F9E3CE;color:#C2541A;font-weight:bold;border:1px solid #FDFBF7;"><span leaf="">字段占位一</span></td>
|
||
<td style="padding:10px 12px;background:#F9E3CE;color:#C2541A;font-weight:bold;border:1px solid #FDFBF7;"><span leaf="">字段占位二</span></td>
|
||
<td style="padding:10px 12px;background:#F9E3CE;color:#C2541A;font-weight:bold;border:1px solid #FDFBF7;"><span leaf="">字段占位三</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 01</span></td>
|
||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 02</span></td>
|
||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 03</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 04</span></td>
|
||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 05</span></td>
|
||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 06</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 07</span></td>
|
||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 08</span></td>
|
||
<td style="padding:10px 12px;border:1px solid #F9E3CE;"><span leaf="">数据占位 09</span></td>
|
||
</tr>
|
||
</table>
|
||
</section>
|
||
```
|
||
|
||
### 组件族 J：对比（compare）
|
||
|
||
#### 组件 24 前后对照卡
|
||
|
||
```html
|
||
<section style="margin:0;padding:16px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||
<p style="margin:0 0 12px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">对照标题占位</span></p>
|
||
<section style="margin:0 0 10px;padding:14px 12px;background:#FDFBF7;border:2px solid #F9E3CE;border-radius:14px;">
|
||
<p style="margin:0 0 4px;font-size:14px;font-weight:bold;color:#C2541A;"><span leaf="">对照项标签占位：调整前占位</span></p>
|
||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">对照说明占位：描述原来的状态或做法。</span></p>
|
||
</section>
|
||
<p style="margin:0 0 10px;text-align:center;font-size:17px;color:#EE7A2D;font-weight:bold;"><span leaf="">↓</span></p>
|
||
<section style="margin:0;padding:14px 12px;background:#F9E3CE;border-radius:14px;">
|
||
<p style="margin:0 0 4px;font-size:14px;font-weight:bold;color:#C2541A;"><span leaf="">对照项标签占位：调整后占位</span></p>
|
||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">对照说明占位：描述变化之后的状态或感受。</span></p>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 25 轻重对照清单
|
||
|
||
```html
|
||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||
<p style="margin:0 0 12px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">对照清单标题占位</span></p>
|
||
<section style="margin:0 0 14px;padding:14px 12px;background:#F9E3CE;border-radius:14px;">
|
||
<p style="margin:0 0 8px;font-size:14px;font-weight:bold;color:#C2541A;"><span leaf="">优势组标签占位</span></p>
|
||
<p style="margin:0 0 6px;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">✓</span></span><span leaf="">优势条目占位一</span></p>
|
||
<p style="margin:0 0 6px;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">✓</span></span><span leaf="">优势条目占位二</span></p>
|
||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">✓</span></span><span leaf="">优势条目占位三</span></p>
|
||
</section>
|
||
<section style="margin:0;padding:14px 12px;background:#FDFBF7;border:2px dashed #EE7A2D;border-radius:14px;">
|
||
<p style="margin:0 0 8px;font-size:14px;font-weight:bold;color:#C2541A;"><span leaf="">留意组标签占位</span></p>
|
||
<p style="margin:0 0 6px;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#C2541A;font-weight:bold;margin-right:8px;"><span leaf="">—</span></span><span leaf="">注意条目占位一</span></p>
|
||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span style="color:#C2541A;font-weight:bold;margin-right:8px;"><span leaf="">—</span></span><span leaf="">注意条目占位二</span></p>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
### 组件族 K：流程（process）
|
||
|
||
#### 组件 26 三步流程圆点卡
|
||
|
||
```html
|
||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||
<p style="margin:0 0 16px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">流程标题占位</span></p>
|
||
<p style="margin:0 0 6px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">1</span></span><span style="vertical-align:middle;"><span leaf="">步骤标题占位一</span></span></p>
|
||
<p style="margin:0 0 10px;font-size:14px;line-height:1.8;color:#3D3229;padding-left:36px;"><span leaf="">流程说明占位：第一步先做这件事。</span></p>
|
||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 10px;">
|
||
<p style="margin:0 0 6px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">2</span></span><span style="vertical-align:middle;"><span leaf="">步骤标题占位二</span></span></p>
|
||
<p style="margin:0 0 10px;font-size:14px;line-height:1.8;color:#3D3229;padding-left:36px;"><span leaf="">流程说明占位：第二步接着做这件事。</span></p>
|
||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 10px;">
|
||
<p style="margin:0 0 6px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;"><span leaf="">3</span></span><span style="vertical-align:middle;"><span leaf="">步骤标题占位三</span></span></p>
|
||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;padding-left:36px;"><span leaf="">流程说明占位：第三步收尾并确认。</span></p>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 27 暖色时间线
|
||
|
||
```html
|
||
<section style="margin:0;padding:16px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">时间线标题占位</span></p>
|
||
<section style="margin:0;padding:2px 0 2px 16px;border-left:2px dotted #EE7A2D;">
|
||
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span style="font-weight:bold;"><span leaf="">时间节点占位一</span></span></p>
|
||
<p style="margin:0 0 16px;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">节点说明占位：这一阶段发生了什么。</span></p>
|
||
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span style="font-weight:bold;"><span leaf="">时间节点占位二</span></span></p>
|
||
<p style="margin:0 0 16px;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">节点说明占位：这一阶段的心情或变化。</span></p>
|
||
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span style="font-weight:bold;"><span leaf="">时间节点占位三</span></span></p>
|
||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">节点说明占位：时间线在这里收束。</span></p>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
### 组件族 L：问答（faq）
|
||
|
||
#### 组件 28 问答呼吸卡
|
||
|
||
```html
|
||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||
<p style="margin:0 0 16px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">常见问答标题占位</span></p>
|
||
<p style="margin:0 0 8px;font-size:15px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;text-align:center;margin-right:8px;vertical-align:middle;"><span leaf="">问</span></span><span style="vertical-align:middle;"><span leaf="">常见问题占位一</span></span></p>
|
||
<section style="margin:0 0 18px;padding:12px 16px;background:#F9E3CE;border-radius:14px;">
|
||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">答案说明占位：用平稳的语气回答第一个问题。</span></p>
|
||
</section>
|
||
<p style="margin:0 0 8px;font-size:15px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;text-align:center;margin-right:8px;vertical-align:middle;"><span leaf="">问</span></span><span style="vertical-align:middle;"><span leaf="">常见问题占位二</span></span></p>
|
||
<section style="margin:0;padding:12px 16px;background:#F9E3CE;border-radius:14px;">
|
||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">答案说明占位：第二个问题的回答同样保持柔和。</span></p>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
### 组件族 M：资源（resource）
|
||
|
||
#### 组件 29 延伸阅读暖卡
|
||
|
||
```html
|
||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">延伸阅读标题占位</span></p>
|
||
<p style="margin:0 0 12px;padding:12px 14px;background:#FDFBF7;border:2px solid #F9E3CE;border-radius:14px;font-size:14px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span leaf="">延伸标题占位一</span><span style="display:block;margin-top:4px;font-size:13px;color:#C2541A;"><span leaf="">分类占位 · 阅读量占位</span></span></p>
|
||
<p style="margin:0 0 12px;padding:12px 14px;background:#FDFBF7;border:2px solid #F9E3CE;border-radius:14px;font-size:14px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span leaf="">延伸标题占位二</span><span style="display:block;margin-top:4px;font-size:13px;color:#C2541A;"><span leaf="">分类占位 · 阅读量占位</span></span></p>
|
||
<p style="margin:0;padding:12px 14px;background:#FDFBF7;border:2px solid #F9E3CE;border-radius:14px;font-size:14px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;"><span leaf="">●</span></span><span leaf="">延伸标题占位三</span><span style="display:block;margin-top:4px;font-size:13px;color:#C2541A;"><span leaf="">分类占位 · 阅读量占位</span></span></p>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 30 资料引导条
|
||
|
||
```html
|
||
<section style="margin:0;padding:14px 12px;background:#F9E3CE;border-radius:22px;">
|
||
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:34px;height:34px;line-height:34px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:16px;font-weight:bold;text-align:center;margin-right:12px;vertical-align:middle;"><span leaf="">↓</span></span><span style="vertical-align:middle;"><span leaf="">资料说明占位：配套资料与获取方式说明。</span></span></p>
|
||
<p style="margin:0;"><span style="display:inline-block;padding:9px 26px;border-radius:999px;background:#FFFFFF;color:#C2541A;font-size:15px;font-weight:bold;"><span leaf="">获取方式占位</span></span></p>
|
||
</section>
|
||
```
|
||
|
||
### 组件族 N：作者（author）
|
||
|
||
#### 组件 31 作者暖名卡
|
||
|
||
```html
|
||
<section style="margin:0;padding:20px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);text-align:center;">
|
||
<img src="https://placehold.orence.net/140x140/F9E3CE/EE7A2D?text=Avatar" alt="作者头像占位" style="max-width:100%;height:auto;display:block;margin:0 auto;width:84px;border-radius:50%;border:3px solid #F9E3CE;">
|
||
<p style="margin:12px 0 2px;font-size:19px;font-weight:bold;color:#3D3229;"><span leaf="">作者名占位</span></p>
|
||
<p style="margin:0 0 10px;font-size:13px;color:#C2541A;"><span leaf="">作者身份占位 · 领域占位</span></p>
|
||
<p style="margin:0 0 14px;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">作者简介占位：一句话介绍作者的兴趣与写作方向。</span></p>
|
||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 14px;">
|
||
<span style="display:inline-block;padding:8px 28px;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:15px;font-weight:bold;box-shadow:0 4px 12px rgba(238,122,45,0.25);"><span leaf="">关注按钮占位</span></span>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 32 联系方式卡
|
||
|
||
```html
|
||
<section style="margin:0;padding:18px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;"><span leaf="">联系标题占位</span></p>
|
||
<p style="margin:0 0 10px;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">渠道占位一：联系信息占位一</span></span></p>
|
||
<p style="margin:0 0 10px;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">渠道占位二：联系信息占位二</span></span></p>
|
||
<p style="margin:0;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">渠道占位三：联系信息占位三</span></span></p>
|
||
</section>
|
||
```
|
||
|
||
### 组件族 O：行动号召（cta）
|
||
|
||
#### 组件 33 暖橙主行动卡
|
||
|
||
```html
|
||
<section style="margin:0;padding:24px 14px;background:#EE7A2D;border-radius:24px;box-shadow:0 10px 24px rgba(238,122,45,0.28);text-align:center;">
|
||
<p style="margin:0 0 8px;font-size:23px;line-height:1.5;font-weight:bold;color:#FFFFFF;"><span leaf="">行动主标题占位</span></p>
|
||
<p style="margin:0 0 18px;font-size:14px;line-height:1.8;color:#FDFBF7;"><span leaf="">行动说明占位：一句话说清楚下一步做什么，语气积极。</span></p>
|
||
<span style="display:inline-block;padding:11px 34px;border-radius:999px;background:#FFFFFF;color:#C2541A;font-size:16px;font-weight:bold;box-shadow:0 4px 12px rgba(61,50,41,0.15);"><span leaf="">按钮文案占位</span></span>
|
||
<p style="margin:12px 0 0;font-size:13px;color:#F9E3CE;"><span leaf="">行动备注占位：补充说明一行</span></p>
|
||
</section>
|
||
```
|
||
|
||
### 组件族 P：结尾（ending）
|
||
|
||
#### 组件 34 温暖收束卡（结语总结）
|
||
|
||
```html
|
||
<section style="margin:0;padding:20px 14px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||
<p style="margin:0 0 6px;"><span style="display:inline-block;padding:4px 14px;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;"><span leaf="">结语标签占位</span></span></p>
|
||
<p style="margin:0 0 14px;font-size:20px;font-weight:bold;color:#3D3229;"><span leaf="">收束标题占位</span></p>
|
||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">收束要点占位一</span></span></p>
|
||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">收束要点占位二</span></span></p>
|
||
<p style="margin:0 0 14px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#EE7A2D;margin-right:10px;vertical-align:middle;"><span leaf=""><br></span></span><span style="vertical-align:middle;"><span leaf="">收束要点占位三</span></span></p>
|
||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 12px;">
|
||
<p style="margin:0;font-size:14px;line-height:1.8;color:#C2541A;"><span leaf="">结语文字占位：一句收尾的温暖话，像把杯子轻轻放回桌上。</span></p>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 35 互动留言区
|
||
|
||
```html
|
||
<section style="margin:0;padding:20px 14px;background:#F9E3CE;border-radius:22px;text-align:center;">
|
||
<p style="margin:0 0 6px;font-size:19px;font-weight:bold;color:#3D3229;"><span leaf="">互动问题占位</span></p>
|
||
<p style="margin:0 0 16px;font-size:14px;line-height:1.8;color:#3D3229;"><span leaf="">互动引导占位：把问题抛给读者，邀请他们在留言区聊聊。</span></p>
|
||
<p style="margin:0 0 14px;">
|
||
<span style="display:inline-block;padding:7px 22px;margin:0 6px 8px 0;border-radius:999px;background:#FFFFFF;color:#C2541A;font-size:14px;font-weight:bold;"><span leaf="">选项占位一</span></span>
|
||
<span style="display:inline-block;padding:7px 22px;margin:0 0 8px 6px;border-radius:999px;background:#FFFFFF;color:#C2541A;font-size:14px;font-weight:bold;"><span leaf="">选项占位二</span></span>
|
||
</p>
|
||
<p style="margin:0;font-size:13px;color:#C2541A;"><span leaf="">留言引导占位：点赞占位 · 在看占位 · 分享占位</span></p>
|
||
</section>
|
||
```
|
||
|
||
#### 组件 36 再会祝福尾签（全文最后一块）
|
||
|
||
```html
|
||
<section style="margin:0;padding:22px 12px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);text-align:center;">
|
||
<p style="margin:0 0 8px;font-size:13px;color:#EE7A2D;letter-spacing:6px;"><span leaf="">· · ·</span></p>
|
||
<p style="margin:0 0 6px;font-size:17px;line-height:1.8;font-weight:bold;color:#3D3229;"><span leaf="">祝福语占位：愿你今天也被温柔对待</span></p>
|
||
<p style="margin:0;font-size:13px;color:#C2541A;"><span leaf="">结尾落款占位 · 下期预告占位</span></p>
|
||
</section>
|
||
```
|
||
|
||
---
|
||
|
||
## 三、完整文章模板骨架
|
||
|
||
```html
|
||
<section style="max-width:677px;margin:0 auto;padding:18px 4px 24px;background:#FDFBF7;color:#3D3229;font-size:16px;line-height:1.8;font-family:'PingFang SC',-apple-system,BlinkMacSystemFont,'Hiragino Sans GB','Microsoft YaHei',sans-serif;overflow-x:hidden;">
|
||
|
||
<!-- 1. 开篇：暖阳导语条（组件 2）——全文第一块；标签 + 一句话导语，不放大字主标题/头图/落款 -->
|
||
|
||
<!-- 2. 目录：圆点目录卡（组件 4）——【位置铁律】必须紧跟导语条之下、开篇叙事之前，读者先拿到全文地图；章节多时可加 标签索引带（组件 5）做关键词导航 -->
|
||
|
||
<!-- 3. 开篇叙事：品牌叙事开篇卡（组件 3）——情绪铺垫 + 行动按钮；生活叙事类可改用 热茶引语卡（组件 13）开场 -->
|
||
|
||
<!-- 4. 第一章：暖章编号标题（组件 7，重点章）或 圆点章节标题（组件 6，轻量章） -->
|
||
<!-- 章内装配：呼吸正文段落 9（每段标 1~3 处行内下划线 12a）+ 浅杏底纹强调段 11 -->
|
||
<!-- 按内容插入：引用 13 / 提示 14~16 / 清单 17~18 / 媒体 19~20 / 代码 21 / 数据 22~23 / 对比 24~25 / 流程 26~27 / FAQ 28 -->
|
||
|
||
<!-- 5. 第 2~N 章：编号递增；章与章之间用 暖点分隔线（组件 8）轻分隔，保持呼吸感 -->
|
||
|
||
<!-- 6. 资源位（可选）：延伸阅读暖卡 29 / 资料引导条 30——放结语之前 -->
|
||
|
||
<!-- 7. 结语：温暖收束卡（组件 34）——收束要点 + 温暖收尾 -->
|
||
|
||
<!-- 8. 行动号召：暖橙主行动卡（组件 33）——品牌发布/产品介绍必放；生活叙事可省 -->
|
||
|
||
<!-- 9. 互动：互动留言区（组件 35）——抛出互动问题 -->
|
||
|
||
<!-- 10. 作者：作者暖名卡（组件 31），需要时补 联系方式卡（组件 32） -->
|
||
|
||
<!-- 11. 尾签：再会祝福尾签（组件 36）——全文最后一块，轻轻收笔 -->
|
||
|
||
</section>
|
||
```
|
||
|
||
**骨架顺序铁律**：圆点目录卡（组件 4）**必须紧跟暖阳导语条之下**，在开篇叙事和任何正文之前；暖橙主题整体是「情绪开篇优先、章节弱分隔、结尾三层收束（收束卡 → 互动 → 祝福尾签）」的低压迫节奏，章节之间靠留白与暖点分隔线过渡，不堆重色块。
|
||
|
||
---
|
||
|
||
## 四、文章类型 → 组件组合配方表
|
||
|
||
| 文章类型 | 核心组件组合 | 点缀组件 |
|
||
|---|---|---|
|
||
| 新闻简报 | 导语条 2 + 目录 4 + 圆点清单卡 17 + 轻盈指标条 22 + 前后对照卡 24 + 温暖收束卡 34 | 标签索引带 5、暖点分隔线 8 |
|
||
| 产品测评 | 导语条 2 + 目录 4 + 拍立得图文卡 20 + 轻重对照清单 25 + 字段数据表 23 + 问答呼吸卡 28 | 轻盈指标条 22、前后对照卡 24、暖橙主行动卡 33 |
|
||
| 实践复盘 | 导语条 2 + 目录 4 + 品牌叙事开篇卡 3 + 暖色时间线 27 + 前后对照卡 24 + 心愿任务清单 18 + 温暖收束卡 34 | 陪伴留声卡 16、浅杏底纹强调段 11 |
|
||
| 技术教程 | 导语条 2 + 目录 4 + 暖章编号标题 7 + 三步流程圆点卡 26 + 浅杏代码块 21 + 行内代码 12d + 资料引导条 30 | 暖心提示卡 14、温和提醒卡 15、延伸阅读暖卡 29 |
|
||
| 生活叙事 | 导语条 2 + 品牌叙事开篇卡 3 + 拍立得图文卡 20 + 热茶引语卡 13 + 呼吸正文段落 9 + 互动留言区 35 + 再会祝福尾签 36 | 圆点清单卡 17、陪伴留声卡 16 |
|
||
|
||
所有类型共用固定结构：全局容器 1 + 导语条 2 + 目录 4（紧跟封面）+ 章节标题 6/7 + 结尾三件套 34/35/36 中至少收束卡 34 与尾签 36。一篇文章点缀组件种类 ≤3，保持暖而不闹。
|
||
|
||
---
|
||
|
||
## 五、Markdown → 暖橙风排版 映射规则表
|
||
|
||
| Markdown 元素 | 对应组件 | 说明 |
|
||
|---|---|---|
|
||
| `# 标题` | 不使用 | 公众号文章标题在平台设置；开篇导语（组件 2）从中提炼一句，视角与外标题错开，不复述关键词 |
|
||
| 文章开头 `> 引言` | 品牌叙事开篇卡 3（叙事向）/ 热茶引语卡 13（金句向） | 情绪铺垫 |
|
||
| `## 章节标题` | 暖章编号标题 7（重点章）/ 圆点章节标题 6（轻量章） | 编号 01/02/03 递增 |
|
||
| `### 小节标题` | 圆点章节标题 6 复用 | 引导语一行点明小节 |
|
||
| 普通段落 | 呼吸正文段落 9 | 每段主动标 1~3 处下划线（12a） |
|
||
| 段首引导短语 | 暖点引导段落 10 | 浅杏高亮短语开头 |
|
||
| 核心观点段 | 浅杏底纹强调段 11 | 浅杏衬底 + 暖橙左竖线 |
|
||
| `**加粗文字**` | 行内 12b 暖橙加粗 | 核心概念/品牌名，全文 ≤5 处 |
|
||
| `==高亮文字==` | 行内 12c 浅杏底标签 | 每段 ≤1 处 |
|
||
| `<u>下划线</u>` / `++文字++` | 行内 12a 杏橙下划线 | `border-bottom:2px solid #F9C9A3`，正文关键词默认标记 |
|
||
| `> 引用段落`（金句） | 热茶引语卡 13 | 大引号 + 点线 + 署名 |
|
||
| 提示/注意/陪伴语 | 暖心提示卡 14 / 温和提醒卡 15 / 陪伴留声卡 16 | 信息/注意/心理陪伴三档 |
|
||
| `- 无序列表` | 圆点清单卡 17 | 暖橙圆点 |
|
||
| `1. 2. 3. 有序列表` | 三步流程圆点卡 26（步骤型） | 圆徽章编号 |
|
||
| 任务/打卡清单 | 心愿任务清单 18 | ✓ 已完成 / 空心待完成 |
|
||
| ` ``` 多行代码块 ``` ` | 浅杏代码块 21 | 每行 `<br>` 分隔，行文字包 leaf，缩进用 ` ` |
|
||
| 行内 `` `code` `` | 行内 12d 行内代码 | 浅杏底圆角 |
|
||
| Markdown 表格 | 字段数据表 23 | 仅真实表格语义；表头浅杏底 |
|
||
| 数据/指标 | 轻盈指标条 22 | 大数字 + 名称 + 说明 |
|
||
| 前后变化对比 | 前后对照卡 24 | 调整前 → 调整后 |
|
||
| 优劣/留意对比 | 轻重对照清单 25 | 优势组 ✓ / 留意组 — |
|
||
| 流程（3 步） | 三步流程圆点卡 26 | 点线分隔步骤 |
|
||
| 递进/时间脉络 | 暖色时间线 27 | 暖橙点状竖线 |
|
||
| FAQ 问答 | 问答呼吸卡 28 | 「问」徽章 + 浅杏答案块 |
|
||
| `` | 圆角大图卡 19 / 拍立得图文卡 20（生活感） | 原图代码保留，占位图按语义配 alt |
|
||
| 延伸阅读 | 延伸阅读暖卡 29 | 暖点 + 分类小注 |
|
||
| 资料/获取方式 | 资料引导条 30 | ↓ 圆徽章 + 白底按钮 |
|
||
| `---` 分隔线 | 暖点分隔线 8 | 章间暖橙点线 |
|
||
| 文末 | 温暖收束卡 34 + 暖橙主行动卡 33 + 互动留言区 35 + 再会祝福尾签 36 | 按骨架顺序装配，尾签必放最后 |
|