80 lines
4.0 KiB
HTML
80 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>流程图模板</title>
|
|
<style>
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|
body { font-family:"Microsoft YaHei","PingFang SC","WenQuanYi Zen Hei","Droid Sans Fallback",sans-serif;
|
|
background:#f4f6f8; color:#1a1a1a; padding:16px; line-height:1.5; }
|
|
h1 { font-size:20px; text-align:center; margin-bottom:4px; color:#1a2b3c; }
|
|
.sub { text-align:center; font-size:12px; color:#667; margin-bottom:20px; }
|
|
.legend { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:18px; font-size:12px; }
|
|
.lg { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:6px; border:1.5px solid; }
|
|
.fig { background:#fff; border-radius:12px; padding:20px 14px; margin-bottom:26px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
|
|
.fig h2 { font-size:16px; color:#1a2b3c; margin-bottom:4px; padding-left:6px; border-left:4px solid #2E6DA4; }
|
|
.fig .desc { font-size:12px; color:#778; margin:6px 0 16px 10px; }
|
|
.row { display:flex; justify-content:center; align-items:stretch; gap:14px; flex-wrap:wrap; }
|
|
.node { border-radius:10px; padding:10px 12px; border:2px solid; font-size:13px; text-align:center;
|
|
min-width:130px; display:flex; flex-direction:column; justify-content:center; }
|
|
.node b { display:block; font-size:13.5px; margin-bottom:3px; }
|
|
.node small { font-size:11.5px; color:#3a3a3a; line-height:1.45; }
|
|
/* 语义配色：蓝=主审/人 绿=自动/subagent 灰=系统 金=交付 橙=决策 红=回流/铁律 */
|
|
.me{background:#BBD9F0;border-color:#2E6DA4;} .agent{background:#C6E5C6;border-color:#3C8C3C;}
|
|
.gray{background:#ECEFF1;border-color:#90A4AE;} .dec{background:#FCE4B0;border-color:#E0922F;}
|
|
.rework{background:#F5C6C6;border-color:#C0392B;} .gold{background:#F5E6A8;border-color:#C9A227;}
|
|
.lgold{background:#FBF3D5;border-color:#C9A227;}
|
|
.arrow { text-align:center; color:#37474F; font-size:18px; margin:7px 0; font-weight:bold; }
|
|
.arrow small { font-size:11px; display:block; color:#555; }
|
|
.full { width:100%; } .dashed { border-style:dashed; }
|
|
.note { font-size:11.5px; color:#555; font-style:italic; text-align:center; margin-top:10px; }
|
|
.col { display:flex; flex-direction:column; gap:7px; align-items:center; flex:1; min-width:170px; }
|
|
.col .arrow { margin:2px 0; font-size:15px; }
|
|
.branches { display:flex; gap:12px; align-items:flex-start; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 用法：div+border 画节点、↓/→ 字符画箭头。中文走系统字体，零豆腐块风险。
|
|
节点 class 选语义色：me/agent/gray/dec/rework/gold。
|
|
单列流程用 .row + .arrow 交替；并行分支用 .branches>.col。 -->
|
|
<h1>标题</h1>
|
|
<div class="sub">副标题 / 制作人 / 日期</div>
|
|
<div class="legend">
|
|
<span class="lg me">🔵 人/主审</span>
|
|
<span class="lg agent">🟢 自动/subagent</span>
|
|
<span class="lg gray">⬜ 系统/流转</span>
|
|
<span class="lg dec">🔶 决策</span>
|
|
<span class="lg gold">🟡 交付</span>
|
|
</div>
|
|
|
|
<div class="fig">
|
|
<h2>图1 · 单列流程示例</h2>
|
|
<div class="desc">说明文字</div>
|
|
<div class="row"><div class="node gray full"><b>起点</b></div></div>
|
|
<div class="arrow">↓</div>
|
|
<div class="row">
|
|
<div class="node me"><b>节点A</b><small>子说明</small></div>
|
|
<div class="node agent"><b>节点B</b><small>子说明</small></div>
|
|
</div>
|
|
<div class="arrow">↓<small>条件标签</small></div>
|
|
<div class="row"><div class="node gold full"><b>终点/交付</b></div></div>
|
|
<div class="note">脚注</div>
|
|
</div>
|
|
|
|
<div class="fig">
|
|
<h2>图2 · 并行分支示例</h2>
|
|
<div class="branches">
|
|
<div class="col">
|
|
<div class="node agent full"><b>分支1</b></div>
|
|
<div class="arrow">↓</div><div class="node gray full">步骤</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="node dec full"><b>分支2</b></div>
|
|
<div class="arrow">↓</div><div class="node gray full">步骤</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|