charity · pack:finance

金融公益

暗红金融 CSR · /finance 聚合页

来源：gongyi.pengyoo.com/finance 源码与 CSS 约束提炼。

在出稿台打开此包JSON 目录← 全部组件库

设计 Token

bg#fce9e9
surface#ffffff
text#222222
muted#8a8a8a
accent#d42933
accentText#ffffff
border#f0d5d5
radius18px
font"Noto Sans SC", "PingFang SC", system-ui, sans-serif

组件 (13)

类型名称说明
FinanceChromeNav顶栏胶囊返回 + 腾讯公益/金融公益品牌条 + 微信胶囊
FinanceHero头图英雄区暗红渐变遮罩 + 双行主标题 + 一行副文案（对应 .hub-hero）
FinanceStatCard浮层数据卡叠在头图底部的三等分数值卡（.hub-stats）
FinanceSectionHead区块标题红色竖条 + 标题 + 可选副文案/更多
FinanceFilterTabs筛选胶囊横向滚动：全部/协会/金融机构…（.wish-filter）
FinanceWishScroll公益金心愿卡筛选胶囊 + 横滑大卡：红机构角标+白类目标签+绿腾讯公益标+同行面板+实心CTA
FinanceTwinTabs双入口导航全民公益（实心红）+ 普惠计划（白底描边）（.hub-tabs）
FinancePubGrid项目双列卡封面红胶囊机构标 + 伙伴行 + 3px细进度 + 双 meta
FinanceOrgList机构列表行48红方Logo + 粉红chip + 灰胶囊标签 + 细进度 + 双meta
FinanceStoryScroll志愿者故事横滑封面红角标+白状态标 + 绿机构名 + 标题描述
FinanceCsrListCSR 列表行固定84×84缩略图(含红机构标) + 绿机构名 + 标题 + 3行描述
FinanceCtaBanner参与横幅红渐变底 + 白胶囊按钮红字（非实心白底反色错）
FinanceLogoWall机构 Logo 墙白底双列格子 + 细灰边框（非四列纯文字）

页面配方

id名称角色模块序列
hub金融公益聚合页homeFinanceChromeNav → FinanceHero → FinanceStatCard → FinanceWishScroll → FinanceTwinTabs → FinancePubGrid → FinanceOrgList → FinanceStoryScroll → FinanceCsrList → FinanceCtaBanner → FinanceLogoWall
list金融公益项目列表listFinanceChromeNav → FinanceSectionHead → FinanceFilterTabs → FinancePubGrid
detail心愿/项目详情detailFinanceChromeNav → FinanceHero → FinanceStatCard → FinanceOrgList → FinanceCtaBanner

出稿台左侧 rail「模板」可一键插入当前包的配方（需先选中对应风格包）。

截图证据

设计系统最佳实践：每个 kit 可追溯到参考截图。点击缩略图查看大图，与 CATALOG 表对照。

加载截图…

Provenance