fintech · pack:licaitong
腾讯理财通
微信理财小程序 · 蓝白 Tab · 截图组件库 v1
来源：组件库/licaitong 30 张小程序截图；与 finance（CSR 红 H5）正交。
设计 Token
bg
#f5f6f8surface
#fffffftext
#181818muted
#888888accent
#2470ebaccentText
#ffffffborder
#eeeeeeradius
14pxfont
"Noto Sans SC", "PingFang SC", system-ui, sans-serif扩展 token（涨跌色、活动橙渐变）见 docs/packs/licaitong.md
组件 (19)
| 类型 | 名称 | 说明 |
|---|---|---|
LicaitongTabBar | 底 Tab | 今日/理财/基金/我的 |
LicaitongSearchHeader | 蓝顶搜索 | 理财通蓝区 + 白搜索条 |
LicaitongAssetHero | 资产轮播 | 我的资产 + 今日收益 + 轮播点 |
LicaitongIconGrid | 十宫格 | 2×5 产品入口 |
LicaitongMarketBrief | 行情简报 | 债市晴雨/股市行情类行 |
LicaitongPromoCard | 运营大卡 | 标题 + 高亮副文案 + 内嵌 banner + CTA |
LicaitongSectionHead | 区块标题 | 左标题 + 右查看更多 |
LicaitongMetricListRow | 双指标列表行 | 左图/标题 + 近1月/近3月涨跌 |
LicaitongHotRankRow | 热点机会行 | 序号 + 标题 + 标的 tag + 缩略图文案 |
LicaitongFundRankList | 绩效基金榜 | 筛选 chips + 金银铜 + 风险 tag + 收益 |
LicaitongIndexScroll | 横滑指数 | 3 卡 peek + 底部链接 |
LicaitongProductList | 理财产品列表 | 理财 Tab 行：名 + tag + 收益 + 期限 |
LicaitongProfileAsset | 我的资产卡 | 会员条 + 余额 + 分布条 + 三分类 |
LicaitongAnalysisGrid | 资产分析三格 | 收益分析/月报/省钱账单 |
LicaitongStatGrid | 工具数字格 | 3×2 或 3×1 数字 |
LicaitongLinkList | 链接列表 | 设置型多行 + 右箭头 |
LicaitongCampaignHero | 活动 Hero | 橙 gradient + 主副标题 + 规则链接 |
LicaitongMilestoneCard | 里程碑卡 | 新增资金 + 积分/礼金 + 阶梯 + 双按钮 |
LicaitongSubNav | 子页顶栏 | 返回 + 居中标题（子页用） |
页面配方
| id | 名称 | 角色 | 模块序列 |
|---|---|---|---|
today-home | 今日 Tab 首页 | home | LicaitongSearchHeader → LicaitongAssetHero → LicaitongIconGrid → LicaitongMarketBrief → LicaitongPromoCard → LicaitongTabBar |
fund-home | 基金 Tab 信息流 | home | LicaitongSearchHeader → LicaitongSectionHead → LicaitongMetricListRow → LicaitongSectionHead → LicaitongHotRankRow → LicaitongFundRankList → LicaitongIndexScroll → LicaitongTabBar |
wealth-home | 理财 Tab | list | LicaitongSubNav → LicaitongProductList → LicaitongTabBar |
profile-home | 我的 Tab | profile | LicaitongProfileAsset → LicaitongAnalysisGrid → LicaitongStatGrid → LicaitongLinkList → LicaitongTabBar |
campaign | 入金活动子页 | detail | LicaitongSubNav → LicaitongCampaignHero → LicaitongMilestoneCard |
出稿台左侧 rail「模板」可一键插入当前包的配方（需先选中对应风格包）。
截图分析摘要
30 张微信小程序实机截图 → 三层库：风格 token、形态语义（MP_TAB_ROOT 等）、19 个 Licaitong* 组件 + 5 条页面配方。
| 页面类型 | 代表截图 | 主要形态 |
|---|---|---|
| 今日 Tab 首页 | _592 | 蓝顶搜索、资产轮播、2×5 宫格、行情行、运营大卡 |
| 基金 Tab | _594–_607 | 指数双列涨跌、热点序号榜、绩效榜 chips、横滑指数 |
| 理财 Tab | _598 | 长期理财产品 LIST_ROW |
| 我的 Tab | _610–_612 | 资产分布卡、分析三格、工具 3×2、设置列表 |
| 活动子页 | _614–_615 | 橙 Hero、里程碑阶梯、双 CTA（无四 Tab） |
- 完整索引：
组件库/licaitong/CATALOG.md - 语义扩展：
docs/packs/licaitong-semantics.md - Token / 组件：
docs/packs/licaitong.md
截图证据
设计系统最佳实践：每个 kit 可追溯到参考截图。点击缩略图查看大图，与 CATALOG 表对照。
加载截图…
Provenance
- source:
screenshot-seed - license:
internal-reference-only · 组件库/licaitong - aliases: 理财通 · 腾讯理财通 · licaitong · LiCaiTong · 微信理财 · 基金小程序 · 活期+ · 稳健理财