UI 组件演示
「桃花算」设计体系下的 Tailwind CSS 组件一览，供 UI 选型参考。全部组件均为纯 Tailwind 实现，无第三方组件库。
徽章与标签 Badges & Tags
桃花旺 大吉 中平 乾造 典藏 描边标签 红鸾星动
可关闭
囍 缘
提示框 Alerts
✅
测算完成。您的桃花命盘已生成，向下滚动查看详批。
ℹ️
小贴士。出生时辰不确定时，可先按「子时」测算，再对照修正。
⚠️
请注意。今日水星逆行，情感沟通易生误会，表白宜择吉时。
🚫
提交失败。请填写完整的出生日期后再开始推算。
🌸
花讯。农历三月初三上巳节，桃花能量全年最盛，记得回来测算。
表单控件 Form Controls
日期格式有误，请重新填写。
单选
复选与开关
卡片 Cards
初探版
免费
- ✓桃花指数测算
- ✓今日爱情运势
- ✗流年详批报告
最受欢迎
花信版
¥ 38 / 次
- ✓免费版全部功能
- ✓流年桃花详批
- ✓八字合婚报告
鎏金典藏
¥ 128 / 年
- ✓花信版全部功能
- ✓大师一对一批注
- ✓吉日吉时提醒
选项卡 Tabs
日主庚金生于卯月，财星当令。地支卯酉相冲，桃花根气受动，主一生情缘起伏有致、精彩纷呈。
手风琴 Accordion
桃花指数是怎么算出来的？
以生辰八字为基础，综合咸池桃花、红鸾天喜等星曜的旺衰与向背，再结合流年干支互动，量化为 0-100 的指数。本演示站使用模拟算法。
不知道出生时辰可以测吗？
可以。时辰主要影响时柱与晚运，缺失时系统会以日柱为主进行推算，准确度约为完整八字的七成。
八字合婚分数低就不能在一起吗？
并非如此。古法合婚重在「知其短而补之」，分数低意味着需要更多经营与包容，命理提供的是参考而非判决。
表格与分页 Table & Pagination
| 测算类型 | 日期 | 结果 | 状态 |
|---|---|---|---|
| 桃花指数 | 2026-07-17 | 86 · 桃花灼灼 | 已完成 |
| 八字合婚 | 2026-07-15 | 92 · 天作之合 | 已完成 |
| 流年详批 | 2026-07-12 | —— | 批注中 |
共 28 条记录
…
步骤条 Steps
- ✓ 录入生辰
- ✓ 排盘推演
- 3 生成报告
- 4 开运指引
弹窗 Modal
其他 Misc
头像 Avatars
桃 金
墨
缘喜合和 +9
工具提示 Tooltip（悬停）
主魅力与人缘的桃花星 主婚姻喜庆的吉星
进度条 Progress
骨架屏 Skeleton