用途:stat 是用一个数字讲清一条信息的卡片,仅当年份、数量、比例、排名、时长等数字是核心时才使用。
主要能力与结构:卡片根元素使用 id="c-N" class="card clip stat-card",并带 data-start、data-duration="5"、data-track-index="0"。内部依次为 .eyebrow(眉题)、.stat-num(大数字,可含 .stat-unit 单位)、.stat-label(指标标签)、.stat-desc(一行说明,可放来源或期间)、.page-indicator(页码)。
内容规则:一张卡只放一个数字;stat-num 建议最多约 8 字符,过长时把单位拆到 stat-unit;stat-label 为一条信息、1-2 行;stat-desc 为辅助语境、1-2 句。若数字并非中心,或属于编年体叙述,应改用 image-feature,或把句子改写为数字中心。
样式与变体:.card.stat-card 使用居中对齐与较大内边距;.stat-num 采用超大字号、紧行高与等宽数字;.stat-label 与 .stat-desc 有各自字号范围。支持 light 与 dark 变体,dark 时 class 追加 dark,但 data-skill 仍保持 stat。品牌色中的 CTA blue 应留给按钮或链接,数字与单位仅可有限使用。
动效:使用 GSAP 时间线依次让 .eyebrow、.stat-num、.stat-label、.stat-desc、.page-indicator 淡入或位移进入,各元素错开出现。
检查项:在 overview 中以 data-skill="stat" 记录;只突出一个数字;说明文字服务数字;不得退化为长段落或项目符号列表。
限制:资料未提供安装命令、依赖版本、许可与平台信息,相关内容暂未提供。