le-wechat-article v1.5.1:版式基线落地——①开篇轻量化:四张封面卡(暖橙/摸鱼绿/摸鱼票据/橄榄)瘦身为导语条,去大字主标题/头图/公司落款(公众号后台已承担),补齐「导语与外标题错层」文案策略;②侧边距:微信 App 自带边距为主边距,HTML 每侧合计 ≤16px(容器/模块 ≤6px、卡片 10~14px、嵌套 ≤12px),全 7 主题合计 156 处收紧,正文列宽占屏 69~76%→80%+;③字号阶梯整体 +1(≥12px 全升 414 处:正文 15→16px、moyu 系 14→15px,≤11px 装饰微标不动);ENGINE 新增「版式基线」三铁律(v1.5.1)+ theme-generator 生成钩子,未来新主题强制合规;新增暖橙主题 theme-warm-orange(36 组件,含预览资产)并入主题库,SKILL.md 主题计数 6→7;topic-facts 补「超级 AI 妈妈」客户事实卡
This commit is contained in:
@@ -0,0 +1,597 @@
|
||||
<!-- THEME-NAME: 暖橙风 -->
|
||||
<!-- THEME-ID: theme-warm-orange -->
|
||||
<!-- THEME-DESCRIPTION: 以暖橙为主色的温暖疗愈系排版主题,用于品牌发布、心理陪伴、生活方式与产品介绍类公众号文章;气质温暖、亲和、积极,像冬日午后的一杯热橙茶;圆角卡片与呼吸留白并重,信息清晰但无压迫感 -->
|
||||
<!-- THEME-COLOR: #EE7A2D -->
|
||||
<!-- THEME-BACKGROUND-COLOR: #FDFBF7 -->
|
||||
<!-- THEME-TEXT-COLOR: #3D3229 -->
|
||||
<!-- THEME-ACCENT-COLOR: #C2541A -->
|
||||
<!-- THEME-DECORATION-COLOR: #F9E3CE -->
|
||||
<!-- THEME-FONT-PREFERENCE: pingfang -->
|
||||
<!-- THEME-DESIGN-TECHNIQUE-TAGS: 暖色卡片化, 圆角呼吸感, 柔和点缀, 浅衬底分层 -->
|
||||
<!-- THEME-STYLE-FEATURE-TAGS: 温暖, 亲和, 疗愈, 积极 -->
|
||||
<!-- THEME-SCENE-TAGS: 品牌发布, 产品介绍, 心理陪伴, 生活方式 -->
|
||||
<!-- THEME-RADIUS-PREFERENCE: 大圆角 -->
|
||||
<!-- THEME-SHADOW-PREFERENCE: 轻柔和阴影 -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>暖橙风 · 主题区块预览</title>
|
||||
</head>
|
||||
<body style="margin:0;padding:30px 16px 44px;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;">
|
||||
|
||||
<!-- Block: 暖阳导语条(开篇轻量) -->
|
||||
<p style="margin:8px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖阳导语条(开篇轻量)</p>
|
||||
<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>
|
||||
|
||||
<!-- Block: 品牌叙事开篇卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">品牌叙事开篇卡</p>
|
||||
<section id="block-wo-hero-narrative" 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><span style="display:inline-block;font-size:14px;font-weight:bold;color:#C2541A;vertical-align:middle;">开篇导语占位</span>
|
||||
<p style="margin:12px 0 14px;font-size:16px;line-height:1.9;color:#3D3229;text-align:justify;">叙事导语占位:这里放两三行品牌故事或情绪铺垫文字,语速放慢、句子放短,让读者先安静下来,再进入正文的说明部分。</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>
|
||||
</section>
|
||||
|
||||
<!-- Block: 情绪寄语开篇条 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">情绪寄语开篇条</p>
|
||||
<section id="block-wo-hero-greeting" 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 10px;font-size:13px;color:#EE7A2D;letter-spacing:6px;">· · ·</p>
|
||||
<p style="margin:0 0 8px;font-size:21px;line-height:1.6;font-weight:bold;color:#3D3229;">一句寄语占位:今天也想对你说</p>
|
||||
<p style="margin:0;font-size:14px;color:#C2541A;">小注说明占位:寄语来源或氛围说明</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 拍立得首图卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">拍立得首图卡</p>
|
||||
<figure id="block-wo-hero-polaroid" style="margin:0;padding:14px 14px 18px;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>
|
||||
<img src="https://placehold.orence.net/480x340/F9E3CE/C2541A?text=Story+Opening" alt="开篇配图占位" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:12px;">
|
||||
<figcaption style="margin:12px 4px 0;font-size:14px;color:#3D3229;text-align:center;">图片说明占位:一句轻轻的图注</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- Block: 圆点目录卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">圆点目录卡</p>
|
||||
<section id="block-wo-nav-dots" 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;">目录标题占位</p>
|
||||
<p style="margin:0 0 12px;font-size:13px;color:#C2541A;">目录说明占位:本篇包含的小节导航</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;">01</span><span style="vertical-align:middle;">章节标题占位一</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;">02</span><span style="vertical-align:middle;">章节标题占位二</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;">03</span><span style="vertical-align:middle;">章节标题占位三</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;">04</span><span style="vertical-align:middle;">章节标题占位四</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 阅读指引条 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">阅读指引条</p>
|
||||
<section id="block-wo-nav-guide" style="margin:0;padding:14px 18px;background:#F9E3CE;border-radius:999px;">
|
||||
<p style="margin:0;font-size:14px;color:#3D3229;text-align:center;"><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#EE7A2D;margin-right:8px;vertical-align:middle;"></span><span style="font-weight:bold;color:#C2541A;vertical-align:middle;">阅读提示占位</span><span style="vertical-align:middle;"> · 说明文字占位:按顺序阅读更舒适 →</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 标签索引带 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">标签索引带</p>
|
||||
<section id="block-wo-nav-tagindex" 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;">索引说明占位:本篇关键词索引</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 暖点分隔线 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖点分隔线</p>
|
||||
<hr id="block-wo-divider-dots" style="border:none;border-top:2px dotted #EE7A2D;margin:10px 30px;">
|
||||
|
||||
<!-- Block: 圆点章节标题 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">圆点章节标题</p>
|
||||
<section id="block-wo-title-dot-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><span style="vertical-align:middle;">章节标题占位:正文从这里开始</span></p>
|
||||
<p style="margin:0;padding-bottom:10px;border-bottom:2px dotted #F9E3CE;font-size:14px;color:#C2541A;">章节引导语占位:一句话说明本章内容</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 便签小节标题 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">便签小节标题</p>
|
||||
<section id="block-wo-title-note" style="margin:0;padding:16px 20px;background:#F9E3CE;border-radius:18px;border-left:6px solid #EE7A2D;">
|
||||
<p style="margin:0 0 4px;font-size:18px;font-weight:bold;color:#3D3229;">小节标题占位</p>
|
||||
<p style="margin:0;font-size:14px;color:#C2541A;">小节说明占位:这一小节要讲的重点</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 居中仪式标题 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">居中仪式标题</p>
|
||||
<section id="block-wo-title-center" style="margin:0;padding:8px 2px;text-align:center;">
|
||||
<p style="margin:0 0 8px;"><span style="display:inline-block;padding:3px 12px;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;">章节序号占位</span></p>
|
||||
<p style="margin:0 0 6px;font-size:23px;line-height:1.5;font-weight:bold;color:#3D3229;">居中标题占位</p>
|
||||
<p style="margin:0;font-size:14px;color:#EE7A2D;letter-spacing:4px;">· · ·</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 暖章编号标题 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖章编号标题</p>
|
||||
<section id="block-wo-title-numbered" 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;">01</span>
|
||||
<span style="display:inline-block;font-size:20px;font-weight:bold;color:#3D3229;vertical-align:middle;">章节标题占位一</span>
|
||||
</p>
|
||||
<p style="margin:0;padding-top:8px;border-top:2px dotted #F9E3CE;font-size:14px;color:#C2541A;">章节摘要占位:编号章节的一句摘要</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 栏目贴纸标题 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">栏目贴纸标题</p>
|
||||
<section id="block-wo-title-label" style="margin:0;padding:8px 2px;">
|
||||
<p style="margin:0 0 10px;"><span style="display:inline-block;padding:5px 16px;border-radius:12px;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;box-shadow:0 4px 10px rgba(238,122,45,0.25);">栏目标签占位</span></p>
|
||||
<p style="margin:0;font-size:19px;font-weight:bold;color:#3D3229;">栏目标题占位:贴纸下方的标题行</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 呼吸正文段落 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">呼吸正文段落</p>
|
||||
<section id="block-wo-para-breath" style="margin:0;padding:4px 6px;">
|
||||
<p style="margin:0 0 16px;font-size:16px;line-height:2;color:#3D3229;text-align:justify;">正文段落占位:这里是放松呼吸的正文区域,行距放宽、句子放短。占位文字用来展示段落节奏与留白比例,两到三行为一组,读起来不赶时间。</p>
|
||||
<p style="margin:0;font-size:16px;line-height:2;color:#3D3229;text-align:justify;">正文段落占位:第二段承接第一段的话题继续展开,保持同样的字重与行高,让整页像一杯慢慢降温的热茶,信息清晰但没有压迫感。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 暖点引导段落 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖点引导段落</p>
|
||||
<section id="block-wo-para-lead" 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>正文占位:开头用一枚浅杏色的高亮短语轻轻拉住视线,后面的文字自然展开,用来说明这一段的重点句式与节奏。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 浅杏底纹强调段 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">浅杏底纹强调段</p>
|
||||
<section id="block-wo-para-emphasis" 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;">重点段落占位:需要读者慢下来多看一眼的内容放在这里。浅杏衬底加左侧暖橙竖线,强调而不喊叫,适合放核心观点或安抚性的说明。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 行内代码段落 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">行内代码段落</p>
|
||||
<section id="block-wo-para-code" 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;font-size:16px;line-height:2.1;color:#3D3229;text-align:justify;">说明文字占位:正文中出现配置项或命令时,使用行内代码样式,例如 <code style="font-family:Menlo,Consolas,monospace;font-size:14px;color:#C2541A;background:#F9E3CE;padding:2px 8px;border-radius:6px;">配置项占位</code> 或 <code style="font-family:Menlo,Consolas,monospace;font-size:14px;color:#C2541A;background:#F9E3CE;padding:2px 8px;border-radius:6px;">命令占位</code>,保持柔和的可读性。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 热茶引语卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">热茶引语卡</p>
|
||||
<section id="block-wo-quote-tea" 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;">“</p>
|
||||
<p style="margin:0 0 14px;font-size:17px;line-height:1.9;color:#3D3229;">引用内容占位:一段值得慢慢读的话放在这里,像热茶冒着的一缕气,轻轻落在页面中间。</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;">—— 引用署名占位</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 居中轻引言 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">居中轻引言</p>
|
||||
<section id="block-wo-quote-center" style="margin:0;padding:20px 12px;text-align:center;">
|
||||
<p style="margin:0 0 10px;font-size:13px;color:#EE7A2D;letter-spacing:6px;">· · ·</p>
|
||||
<p style="margin:0 0 8px;font-size:17px;line-height:1.9;color:#3D3229;">引言文字占位:居中排布的一句轻声话。</p>
|
||||
<p style="margin:0;font-size:13px;color:#C2541A;">—— 引用出处占位</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 暖心提示卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖心提示卡</p>
|
||||
<section id="block-wo-notice-warm" 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></p>
|
||||
<p style="margin:0;font-size:15px;line-height:1.9;color:#3D3229;text-align:justify;">提示说明占位:温和的信息提示放在这里,例如阅读建议、氛围说明或背景补充,语气保持轻柔。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 温和提醒卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">温和提醒卡</p>
|
||||
<section id="block-wo-notice-caution" 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;">注意标签占位</p>
|
||||
<p style="margin:0;font-size:15px;line-height:1.9;color:#3D3229;text-align:justify;">提醒说明占位:需要读者留意但不必紧张的内容,用虚线暖框表达,提醒而不吓人。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 安心确认卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">安心确认卡</p>
|
||||
<section id="block-wo-notice-reassure" style="margin:0;padding:14px 12px;background:#FFFFFF;border-radius:22px;border-left:6px solid #EE7A2D;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 8px;font-size:15px;color:#3D3229;"><span style="display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:8px;vertical-align:middle;">✓</span><span style="font-weight:bold;vertical-align:middle;">确认标题占位</span></p>
|
||||
<p style="margin:0;font-size:15px;line-height:1.9;color:#3D3229;text-align:justify;">确认说明占位:已经完成或可以放心的事项写在这里,给读者一个落地的安心感。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 陪伴留声卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">陪伴留声卡</p>
|
||||
<section id="block-wo-notice-companion" 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;">陪伴小语占位 ♡</p>
|
||||
<p style="margin:0 0 12px;font-size:16px;line-height:2;color:#3D3229;text-align:justify;">陪伴语句占位:写给此刻正在阅读的人的一句话,承认情绪、给出陪伴,不做评判。</p>
|
||||
<p style="margin:0;font-size:13px;color:#C2541A;text-align:right;">落款占位 · 留声说明占位</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 圆点清单卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">圆点清单卡</p>
|
||||
<section id="block-wo-list-dots" 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;">清单标题占位</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><span style="vertical-align:middle;">清单条目占位一:短句说明</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><span style="vertical-align:middle;">清单条目占位二:短句说明</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><span style="vertical-align:middle;">清单条目占位三:短句说明</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><span style="vertical-align:middle;">清单条目占位四:短句说明</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 暖序步骤列表 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖序步骤列表</p>
|
||||
<section id="block-wo-list-steps" style="margin:0;padding:18px 14px;background:#F9E3CE;border-radius:22px;">
|
||||
<p style="margin:0 0 14px;font-size:18px;font-weight:bold;color:#3D3229;">有序清单标题占位</p>
|
||||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:24px;height:24px;line-height:24px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;">1</span><span style="vertical-align:middle;">列表条目占位一</span></p>
|
||||
<p style="margin:0 0 10px;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:24px;height:24px;line-height:24px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;">2</span><span style="vertical-align:middle;">列表条目占位二</span></p>
|
||||
<p style="margin:0;font-size:15px;line-height:1.8;color:#3D3229;"><span style="display:inline-block;width:24px;height:24px;line-height:24px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;text-align:center;margin-right:10px;vertical-align:middle;">3</span><span style="vertical-align:middle;">列表条目占位三</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 心愿任务清单 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">心愿任务清单</p>
|
||||
<section id="block-wo-list-tasks" 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;">任务清单标题占位</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><span style="vertical-align:middle;">任务条目占位一(已完成占位)</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><span style="vertical-align:middle;">任务条目占位二(已完成占位)</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><span style="vertical-align:middle;">任务条目占位三(待完成占位)</span></p>
|
||||
<hr style="border:none;border-top:2px dotted #F9E3CE;margin:0 0 10px;">
|
||||
<p style="margin:0;font-size:13px;color:#C2541A;">完成度说明占位:示例数字 2 / 3</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 词语标签云 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">词语标签云</p>
|
||||
<section id="block-wo-list-tags" style="margin:0;padding:20px 22px;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;">词语云说明占位:氛围关键词陈列</p>
|
||||
<p style="margin:0;font-size:14px;line-height:2.4;">
|
||||
<span style="display:inline-block;padding:4px 16px;margin:0 8px 8px 0;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:14px;font-weight:bold;">词语占位一</span>
|
||||
<span style="display:inline-block;padding:4px 16px;margin:0 8px 8px 0;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:14px;font-weight:bold;">词语占位二</span>
|
||||
<span style="display:inline-block;padding:4px 16px;margin:0 8px 8px 0;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;">词语占位三</span>
|
||||
<span style="display:inline-block;padding:4px 16px;margin:0 8px 8px 0;border-radius:999px;border:2px solid #EE7A2D;color:#C2541A;font-size:13px;font-weight:bold;">词语占位四</span>
|
||||
<span style="display:inline-block;padding:4px 16px;margin:0 8px 8px 0;border-radius:999px;border:2px dashed #EE7A2D;color:#C2541A;font-size:13px;font-weight:bold;">词语占位五</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 要点三束卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">要点三束卡</p>
|
||||
<section id="block-wo-list-triple" style="margin:0;padding:4px;">
|
||||
<section style="margin:0 0 12px;padding:14px 12px;background:#FFFFFF;border-radius:18px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 4px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;padding:2px 10px;border-radius:8px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;margin-right:8px;vertical-align:middle;">要点一</span><span style="vertical-align:middle;">要点标题占位一</span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">要点说明占位:一句话解释第一个要点。</p>
|
||||
</section>
|
||||
<section style="margin:0 0 12px;padding:14px 12px;background:#FFFFFF;border-radius:18px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 4px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;padding:2px 10px;border-radius:8px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;margin-right:8px;vertical-align:middle;">要点二</span><span style="vertical-align:middle;">要点标题占位二</span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">要点说明占位:一句话解释第二个要点。</p>
|
||||
</section>
|
||||
<section style="margin:0;padding:14px 12px;background:#FFFFFF;border-radius:18px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 4px;font-size:16px;font-weight:bold;color:#3D3229;"><span style="display:inline-block;padding:2px 10px;border-radius:8px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;margin-right:8px;vertical-align:middle;">要点三</span><span style="vertical-align:middle;">要点标题占位三</span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">要点说明占位:一句话解释第三个要点。</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 圆角大图卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">圆角大图卡</p>
|
||||
<figure id="block-wo-media-photo" 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;">图片说明占位:图注文字放这里</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- Block: 拍立得图文卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">拍立得图文卡</p>
|
||||
<figure id="block-wo-media-polaroid" style="margin:0;padding:16px 16px 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>
|
||||
<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;">图注标题占位</p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">图注说明占位:写一句和图片心情一致的话。</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- Block: 双图柔和对比卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">双图柔和对比卡</p>
|
||||
<figure id="block-wo-media-duo" style="margin:0;padding:18px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<img src="https://placehold.orence.net/600x340/F9E3CE/C2541A?text=Compare+A" alt="对比图一占位" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:14px;">
|
||||
<figcaption style="margin:8px 4px 0;font-size:14px;color:#3D3229;text-align:center;">对比图注占位一</figcaption>
|
||||
<p style="margin:12px 0;text-align:center;"><span style="display:inline-block;padding:3px 16px;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;">对比占位</span></p>
|
||||
<img src="https://placehold.orence.net/600x340/EE7A2D/FDFBF7?text=Compare+B" alt="对比图二占位" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:14px;">
|
||||
<figcaption style="margin:8px 4px 0;font-size:14px;color:#3D3229;text-align:center;">对比图注占位二</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- Block: 静态视频占位卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">静态视频占位卡</p>
|
||||
<figure id="block-wo-media-video" style="margin:0;padding:16px 16px 18px;background:#FFFFFF;border-radius:22px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<img src="https://placehold.orence.net/640x360/C2541A/F9E3CE?text=Video+Placeholder" alt="视频封面占位" style="max-width:100%;height:auto;display:block;margin:0 auto;border-radius:14px;">
|
||||
<figcaption style="margin:14px 4px 0;text-align:center;">
|
||||
<span style="display:inline-block;width:40px;height:40px;line-height:40px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:17px;font-weight:bold;text-align:center;box-shadow:0 4px 12px rgba(238,122,45,0.30);">▶</span>
|
||||
<p style="margin:10px 0 2px;font-size:15px;font-weight:bold;color:#3D3229;">视频说明占位</p>
|
||||
<p style="margin:0;font-size:13px;color:#C2541A;">时长占位 · 封面说明占位</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- Block: 浅杏代码块 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">浅杏代码块</p>
|
||||
<section id="block-wo-code-light" 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><span style="vertical-align:middle;">代码说明占位 · 代码块标题占位</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><br>const warmConfig = {<br> fieldA: <span style="color:#EE7A2D;">"字段占位一"</span>,<br> fieldB: <span style="color:#EE7A2D;">"字段占位二"</span><br>};</code>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 暖框代码块 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖框代码块</p>
|
||||
<section id="block-wo-code-warm" style="margin:0;padding:16px 12px;background:#FFFFFF;border:2px solid #EE7A2D;border-radius:22px;">
|
||||
<p style="margin:0 0 10px;font-size:14px;font-weight:bold;color:#C2541A;">代码标题占位:终端样式说明</p>
|
||||
<code style="font-family:Menlo,Consolas,monospace;font-size:14px;line-height:1.9;color:#3D3229;">$ 命令占位 --参数占位<br>> 输出说明占位一<br>> 输出说明占位二<br>完成提示占位 ✓</code>
|
||||
</section>
|
||||
|
||||
<!-- Block: 轻盈指标条 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">轻盈指标条</p>
|
||||
<section id="block-wo-data-metrics" 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;">82%</span><span style="vertical-align:middle;">指标名称占位一 · 指标说明占位</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;">1200+</span><span style="vertical-align:middle;">指标名称占位二 · 指标说明占位</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;">4.8</span><span style="vertical-align:middle;">指标名称占位三 · 指标说明占位</span></p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 字段数据表 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">字段数据表</p>
|
||||
<section id="block-wo-data-table" 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;">表格标题占位</p>
|
||||
<p style="margin:0 0 14px;font-size:13px;color:#C2541A;">表格说明占位:字段与示例数据的对照</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;">字段占位一</td>
|
||||
<td style="padding:10px 12px;background:#F9E3CE;color:#C2541A;font-weight:bold;border:1px solid #FDFBF7;">字段占位二</td>
|
||||
<td style="padding:10px 12px;background:#F9E3CE;color:#C2541A;font-weight:bold;border:1px solid #FDFBF7;">字段占位三</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 01</td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 02</td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 03</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 04</td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 05</td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 06</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 07</td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 08</td>
|
||||
<td style="padding:10px 12px;border:1px solid #F9E3CE;">数据占位 09</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<!-- Block: 暖橙进度条组 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖橙进度条组</p>
|
||||
<section id="block-wo-data-progress" 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;">进度标题占位</p>
|
||||
<p style="margin:0 0 6px;font-size:14px;color:#3D3229;">进度项占位一 · 80%</p>
|
||||
<section style="margin:0 0 16px;height:12px;background:#F9E3CE;border-radius:999px;"><section style="width:80%;height:12px;background:#EE7A2D;border-radius:999px;"></section></section>
|
||||
<p style="margin:0 0 6px;font-size:14px;color:#3D3229;">进度项占位二 · 60%</p>
|
||||
<section style="margin:0 0 16px;height:12px;background:#F9E3CE;border-radius:999px;"><section style="width:60%;height:12px;background:#C2541A;border-radius:999px;"></section></section>
|
||||
<p style="margin:0 0 6px;font-size:14px;color:#3D3229;">进度项占位三 · 45%</p>
|
||||
<section style="margin:0;height:12px;background:#F9E3CE;border-radius:999px;"><section style="width:45%;height:12px;background:#EE7A2D;border-radius:999px;"></section></section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 指标圆卡组 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">指标圆卡组</p>
|
||||
<section id="block-wo-data-stats" style="margin:0;padding:4px;">
|
||||
<section style="margin:0 0 12px;padding:18px;background:#FFFFFF;border-radius:20px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 4px;">
|
||||
<span style="display:inline-block;width:48px;height:48px;line-height:48px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:21px;font-weight:bold;text-align:center;margin-right:14px;vertical-align:middle;">A</span>
|
||||
<span style="display:inline-block;vertical-align:middle;"><span style="display:block;font-size:23px;font-weight:bold;color:#3D3229;line-height:1.4;">数字占位一</span><span style="display:block;font-size:13px;color:#C2541A;">指标名称占位一</span></span>
|
||||
</p>
|
||||
<p style="margin:6px 0 0;font-size:14px;line-height:1.8;color:#3D3229;">指标说明占位:用一句话解释这个数字代表什么。</p>
|
||||
</section>
|
||||
<section style="margin:0;padding:18px;background:#FFFFFF;border-radius:20px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 4px;">
|
||||
<span style="display:inline-block;width:48px;height:48px;line-height:48px;border-radius:50%;background:#F9E3CE;color:#C2541A;font-size:21px;font-weight:bold;text-align:center;margin-right:14px;vertical-align:middle;">B</span>
|
||||
<span style="display:inline-block;vertical-align:middle;"><span style="display:block;font-size:23px;font-weight:bold;color:#3D3229;line-height:1.4;">数字占位二</span><span style="display:block;font-size:13px;color:#C2541A;">指标名称占位二</span></span>
|
||||
</p>
|
||||
<p style="margin:6px 0 0;font-size:14px;line-height:1.8;color:#3D3229;">指标说明占位:轻量数据摘要,不做厚重的参数矩阵。</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 前后对照卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">前后对照卡</p>
|
||||
<section id="block-wo-compare-contrast" 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;">对照标题占位</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;">对照项标签占位:调整前占位</p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">对照说明占位:描述原来的状态或做法。</p>
|
||||
</section>
|
||||
<p style="margin:0 0 10px;text-align:center;font-size:17px;color:#EE7A2D;font-weight:bold;">↓</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;">对照项标签占位:调整后占位</p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">对照说明占位:描述变化之后的状态或感受。</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 轻重对照清单 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">轻重对照清单</p>
|
||||
<section id="block-wo-compare-pros" 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;">对照清单标题占位</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;">优势组标签占位</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>优势条目占位一</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>优势条目占位二</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>优势条目占位三</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;">留意组标签占位</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>注意条目占位一</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>注意条目占位二</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 情境对照条 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">情境对照条</p>
|
||||
<section id="block-wo-compare-scene" 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:14px;color:#C2541A;">情境对照说明占位:两种使用情境的并置</p>
|
||||
<p style="margin:0 0 12px;padding:10px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="display:inline-block;padding:3px 12px;border-radius:999px;background:#EE7A2D;color:#FFFFFF;font-size:13px;font-weight:bold;margin-right:10px;vertical-align:middle;">情境一占位</span><span style="vertical-align:middle;">情境说明占位:适合安静独处的场景。</span></p>
|
||||
<p style="margin:0;padding:10px 2px 0;font-size:15px;color:#3D3229;"><span style="display:inline-block;padding:3px 12px;border-radius:999px;background:#F9E3CE;color:#C2541A;font-size:13px;font-weight:bold;margin-right:10px;vertical-align:middle;">情境二占位</span><span style="vertical-align:middle;">情境说明占位:适合与人分享的场景。</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 三步流程圆点卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">三步流程圆点卡</p>
|
||||
<section id="block-wo-process-steps" 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;">流程标题占位</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;">1</span><span style="vertical-align:middle;">步骤标题占位一</span></p>
|
||||
<p style="margin:0 0 10px;font-size:14px;line-height:1.8;color:#3D3229;padding-left:36px;">流程说明占位:第一步先做这件事。</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;">2</span><span style="vertical-align:middle;">步骤标题占位二</span></p>
|
||||
<p style="margin:0 0 10px;font-size:14px;line-height:1.8;color:#3D3229;padding-left:36px;">流程说明占位:第二步接着做这件事。</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;">3</span><span style="vertical-align:middle;">步骤标题占位三</span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;padding-left:36px;">流程说明占位:第三步收尾并确认。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 暖色时间线 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖色时间线</p>
|
||||
<section id="block-wo-process-timeline" 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;">时间线标题占位</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><span style="font-weight:bold;">时间节点占位一</span></p>
|
||||
<p style="margin:0 0 16px;font-size:14px;line-height:1.8;color:#3D3229;">节点说明占位:这一阶段发生了什么。</p>
|
||||
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;">●</span><span style="font-weight:bold;">时间节点占位二</span></p>
|
||||
<p style="margin:0 0 16px;font-size:14px;line-height:1.8;color:#3D3229;">节点说明占位:这一阶段的心情或变化。</p>
|
||||
<p style="margin:0 0 12px;font-size:15px;color:#3D3229;"><span style="color:#EE7A2D;font-weight:bold;margin-right:8px;">●</span><span style="font-weight:bold;">时间节点占位三</span></p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">节点说明占位:时间线在这里收束。</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 步骤大数字卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">步骤大数字卡</p>
|
||||
<section id="block-wo-process-numbered" style="margin:0;padding:4px;">
|
||||
<section style="margin:0 0 12px;padding:18px;background:#F9E3CE;border-radius:20px;">
|
||||
<p style="margin:0 0 6px;">
|
||||
<span style="display:inline-block;width:52px;height:52px;line-height:52px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:21px;font-weight:bold;text-align:center;margin-right:14px;vertical-align:middle;box-shadow:0 4px 12px rgba(238,122,45,0.30);">01</span>
|
||||
<span style="display:inline-block;font-size:17px;font-weight:bold;color:#3D3229;vertical-align:middle;">阶段标题占位一</span>
|
||||
</p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">阶段说明占位:这一阶段的动作与感受说明,控制在两行以内。</p>
|
||||
</section>
|
||||
<section style="margin:0;padding:18px;background:#FFFFFF;border-radius:20px;box-shadow:0 6px 18px rgba(238,122,45,0.10);">
|
||||
<p style="margin:0 0 6px;">
|
||||
<span style="display:inline-block;width:52px;height:52px;line-height:52px;border-radius:50%;background:#EE7A2D;color:#FFFFFF;font-size:21px;font-weight:bold;text-align:center;margin-right:14px;vertical-align:middle;box-shadow:0 4px 12px rgba(238,122,45,0.30);">02</span>
|
||||
<span style="display:inline-block;font-size:17px;font-weight:bold;color:#3D3229;vertical-align:middle;">阶段标题占位二</span>
|
||||
</p>
|
||||
<p style="margin:0;font-size:14px;line-height:1.8;color:#3D3229;">阶段说明占位:浅杏衬底与白底卡片交替,形成大圆角的呼吸节奏。</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 问答呼吸卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">问答呼吸卡</p>
|
||||
<section id="block-wo-faq-breathe" 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;">常见问答标题占位</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><span style="vertical-align:middle;">常见问题占位一</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;">答案说明占位:用平稳的语气回答第一个问题。</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><span style="vertical-align:middle;">常见问题占位二</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;">答案说明占位:第二个问题的回答同样保持柔和。</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- Block: 问答折叠样式卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">问答折叠样式卡</p>
|
||||
<section id="block-wo-faq-folded" 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 10px;font-size:14px;color:#C2541A;">折叠问答说明占位:静态折叠样式示意</p>
|
||||
<p style="margin:0 0 4px;padding:12px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="font-weight:bold;color:#C2541A;margin-right:8px;">Q1</span>问题标题占位一</p>
|
||||
<p style="margin:0 0 12px;font-size:13px;color:#EE7A2D;text-align:right;">+ 展开查看占位</p>
|
||||
<p style="margin:0 0 4px;padding:12px 2px;border-bottom:2px dotted #F9E3CE;font-size:15px;color:#3D3229;"><span style="font-weight:bold;color:#C2541A;margin-right:8px;">Q2</span>问题标题占位二</p>
|
||||
<p style="margin:0;font-size:13px;color:#EE7A2D;text-align:right;">+ 展开查看占位</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 延伸阅读暖卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">延伸阅读暖卡</p>
|
||||
<section id="block-wo-resource-reading" 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;">延伸阅读标题占位</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>延伸标题占位一<span style="display:block;margin-top:4px;font-size:13px;color:#C2541A;">分类占位 · 阅读量占位</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>延伸标题占位二<span style="display:block;margin-top:4px;font-size:13px;color:#C2541A;">分类占位 · 阅读量占位</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>延伸标题占位三<span style="display:block;margin-top:4px;font-size:13px;color:#C2541A;">分类占位 · 阅读量占位</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 资料引导条 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">资料引导条</p>
|
||||
<section id="block-wo-resource-guide" 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><span style="vertical-align:middle;">资料说明占位:配套资料与获取方式说明。</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></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 作者暖名卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">作者暖名卡</p>
|
||||
<section id="block-wo-author-card" 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;">作者名占位</p>
|
||||
<p style="margin:0 0 10px;font-size:13px;color:#C2541A;">作者身份占位 · 领域占位</p>
|
||||
<p style="margin:0 0 14px;font-size:14px;line-height:1.8;color:#3D3229;">作者简介占位:一句话介绍作者的兴趣与写作方向。</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>
|
||||
</section>
|
||||
|
||||
<!-- Block: 联系方式卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">联系方式卡</p>
|
||||
<section id="block-wo-author-contact" 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;">联系标题占位</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><span style="vertical-align:middle;">渠道占位一:联系信息占位一</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><span style="vertical-align:middle;">渠道占位二:联系信息占位二</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><span style="vertical-align:middle;">渠道占位三:联系信息占位三</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 居中花点分隔 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">居中花点分隔</p>
|
||||
<p id="block-wo-divider-center" style="margin:10px 0;text-align:center;font-size:13px;color:#EE7A2D;letter-spacing:10px;">· ● ·</p>
|
||||
|
||||
<!-- Block: 暖橙主行动卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">暖橙主行动卡</p>
|
||||
<section id="block-wo-cta-action" 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;">行动主标题占位</p>
|
||||
<p style="margin:0 0 18px;font-size:14px;line-height:1.8;color:#FDFBF7;">行动说明占位:一句话说清楚下一步做什么,语气积极。</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>
|
||||
<p style="margin:12px 0 0;font-size:13px;color:#F9E3CE;">行动备注占位:补充说明一行</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 双按钮行动条 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">双按钮行动条</p>
|
||||
<section id="block-wo-cta-buttons" style="margin:0;padding:16px 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 14px;font-size:16px;font-weight:bold;color:#3D3229;">双按钮标题占位</p>
|
||||
<p style="margin:0 0 12px;"><span style="display:inline-block;padding:10px 30px;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></p>
|
||||
<p style="margin:0;"><span style="display:inline-block;padding:9px 30px;border-radius:999px;border:2px solid #EE7A2D;color:#C2541A;background:#FFFFFF;font-size:15px;font-weight:bold;">次按钮占位</span></p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 邀约互动卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">邀约互动卡</p>
|
||||
<section id="block-wo-cta-invite" style="margin:0;padding:24px;background:linear-gradient(180deg,#F9E3CE,#FDFBF7);border-radius:24px;text-align:center;">
|
||||
<p style="margin:0 0 6px;font-size:19px;font-weight:bold;color:#3D3229;">邀约标题占位</p>
|
||||
<p style="margin:0 0 16px;font-size:14px;line-height:1.8;color:#3D3229;">邀约说明占位:邀请读者一起参与某件温柔的小事。</p>
|
||||
<span style="display:inline-block;padding:10px 30px;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>
|
||||
</section>
|
||||
|
||||
<!-- Block: 温暖收束卡 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">温暖收束卡</p>
|
||||
<section id="block-wo-ending-warm" 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></p>
|
||||
<p style="margin:0 0 14px;font-size:20px;font-weight:bold;color:#3D3229;">收束标题占位</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><span style="vertical-align:middle;">收束要点占位一</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><span style="vertical-align:middle;">收束要点占位二</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><span style="vertical-align:middle;">收束要点占位三</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;">结语文字占位:一句收尾的温暖话,像把杯子轻轻放回桌上。</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 互动留言区 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">互动留言区</p>
|
||||
<section id="block-wo-ending-interact" 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;">互动问题占位</p>
|
||||
<p style="margin:0 0 16px;font-size:14px;line-height:1.8;color:#3D3229;">互动引导占位:把问题抛给读者,邀请他们在留言区聊聊。</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>
|
||||
<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>
|
||||
</p>
|
||||
<p style="margin:0;font-size:13px;color:#C2541A;">留言引导占位:点赞占位 · 在看占位 · 分享占位</p>
|
||||
</section>
|
||||
|
||||
<!-- Block: 再会祝福尾签 -->
|
||||
<p style="margin:34px 2px 10px;font-size:13px;color:#999;font-family:'PingFang SC',-apple-system,'Hiragino Sans GB','Microsoft YaHei',sans-serif;">再会祝福尾签</p>
|
||||
<section id="block-wo-ending-blessing" 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;">· · ·</p>
|
||||
<p style="margin:0 0 6px;font-size:17px;line-height:1.8;font-weight:bold;color:#3D3229;">祝福语占位:愿你今天也被温柔对待</p>
|
||||
<p style="margin:0;font-size:13px;color:#C2541A;">结尾落款占位 · 下期预告占位</p>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user