charity · pack:gongyi

腾讯公益

粉红公益 · 项目卡 / 心愿 / 活动宫格

来源：gongyi.pengyoo.com 首页/活动页；金融聚合请用「金融公益」包。

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

设计 Token

bg#fff7f8
surface#ffffff
text#2b2323
muted#8a7a7a
accent#ff5a6a
accentText#ffffff
border#f0dfe2
radius18px
font"Noto Sans SC", "PingFang SC", sans-serif

组件 (23)

类型名称说明
GongyiSearchBar搜索顶栏AI 徽标 + 搜索 + 胶囊
GongyiProfileRow用户行头像、昵称、等级、小红花
GongyiNoticeBar进展通知支持项目有新进展
GongyiIconGrid功能宫格服务入口 / 身边公益 / 分类
GongyiProjectGrid项目双列卡封面 + 标签 + 标题 + 副文案
GongyiHScroll横向项目卡横向滑动，可带进度
GongyiHometown家乡公益标题 + 图文列表
GongyiCtaBanner运营横幅专区 / 参与 CTA
GongyiStoryRow故事卡视频/CSR/志愿者卡片
GongyiMessageList爱心留言头像 + 留言
GongyiStatsFooter平台页脚捐助人次与金额
GongyiTabBar底部导航首页 / 发现 / 项目 / 我的
GongyiChromeNav胶囊导航活动/金融页顶栏
GongyiPortraitGrid活动人像宫格和 TA 一起做好事
GongyiCrossGrid跨界做好事横向封面卡
GongyiLogoWall品牌墙合作品牌 / 机构
GongyiHero活动头图金融公益/项目英雄区
GongyiStatStrip数据条三个关键数字
GongyiWishScroll心愿卡金融机构心愿横向卡
GongyiTwinNav双入口全民公益 / 机构扶贫
GongyiOrgList机构列表Logo + 标签 + 进度
GongyiFilterTabs筛选胶囊全部 / 保险 / 银行
GongyiDonateBar捐助底栏金额档位 + 立即捐助

页面配方

id名称角色模块序列
home腾讯公益首页homeGongyiSearchBar → GongyiProfileRow → GongyiNoticeBar → GongyiIconGrid → GongyiProjectGrid → GongyiHScroll → GongyiHometown → GongyiCtaBanner → GongyiIconGrid → GongyiStoryRow → GongyiMessageList → GongyiStatsFooter → GongyiTabBar
venue公益活动页listGongyiChromeNav → GongyiPortraitGrid → GongyiCrossGrid → GongyiLogoWall
finance金融公益聚合homeGongyiHero → GongyiStatStrip → GongyiWishScroll → GongyiTwinNav → GongyiProjectGrid → GongyiOrgList → GongyiStoryRow → GongyiCtaBanner → GongyiLogoWall
list公益项目列表listGongyiHero → GongyiStatStrip → GongyiFilterTabs → GongyiProjectGrid
detail项目详情detailGongyiHero → GongyiStatStrip → GongyiOrgList → GongyiMessageList → GongyiDonateBar

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

截图证据

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

加载截图…

Provenance