info-funnel

【模板: 漏斗信息图（Funnel Infographic）】 【意图】把"从大到小"的转化 / 筛选 / 损耗过程一眼看清。**宽顶（输入）→ 窄底（结果）**, 每一阶有明确的"剩多少"和"漏多少"。典型场景：marketing funnel（曝光→点击→注册→付费）、招聘漏斗（投递→面试→录用→入职）、决策漏斗（候选→筛选→敲定）。 【数据形态】 输入应是有序的 **3-6 个阶段** + 每阶的绝对数值（人数 / 件数 / 金额）。可选每阶名称、说明、单位。若用户只给了百分比, 默认顶端 = 100% / 10000 人。 ``` 阶段 1: 100,000 名访客 阶段 2: 18,500 名注册（18.5%） 阶段 3: 6,200 名启动试用（33.5%） 阶段 4: 1,450 名转付费（23.4%） 阶段 5: 920 名 30 天留存（63.4%） ``` 【布局规则】 | 区域 | 内容 | 占比 | |---|---|---| | **Hero 顶部**（约 15%） | 标题（≤ 20 字, 22-32px CJK）+ 副标题 / 时间窗口（灰色 14-16px） | 上 15% | | **漏斗主体**（约 65%） | 3-6 个梯形 stage, 每段含：左大数字（48-72px tabular-nums）+ 右阶段名（18-22px bold）+ 右二行说明（13-15px 灰）+ 段间小箭头标转化率 | 中 65% | | **底部 stat strip**（约 20%） | 累计转化率（最大字号 80-120px）+ 1-2 句洞察文本（漏出最严重的环节 / 关键提示） | 下 20% | 【漏斗实现】 用 **CSS `clip-path: polygon()`** 切梯形, 不用 SVG： - 每段 stage 是一个 `<div>`, 设固定 height（120-200px）+ 不同 clip-path - clip-path 的左右收缩量 = 50% × `(1 - bottom_width_ratio)`, 累计每段比上一段窄 - 每段背景色用同一 hue 不同 lightness, 顶端最饱和, 底端最深（accent → ink） - 阶段之间有 4-8px gap, 让"流动"感更明显 - 数字用 `font-variant-numeric: tabular-nums`, letter-spacing `-0.02em` 【主题色 — 三选一, 不许混】 | 主题 | 适用 | 顶端 | 底端 | ink | paper | |---|---|---|---|---|---| | **klein-blue**（默认） | 商业 / SaaS / AI 产品 | `#4F7BD8` | `#002FA7` | `#0A0A0A` | `#FAFAF8` | | **sunset-amber** | 零售 / 消费 / 餐饮 | `#FBB040` | `#C73E1D` | `#0A0A0A` | `#FFF8EC` | | **deep-forest** | 招聘 / 教育 / 健康 | `#56A06E` | `#1F4D2E` | `#0A0A0A` | `#F4F0E6` | 文字色： - 漏斗内部数字与名字一律白色（`#FFFFFF`） - 顶端 / 副标题 / 底部 strip 用 ink（`#0A0A0A`） - 灰色辅助文字：`rgba(...