26 KiB
26 KiB
board-finance.html 完整样式清单
换算公式：rpx = CSS_px × 1.8204（四舍五入到整数）
一、Inline Style 定义
1. Tailwind Config 自定义颜色
| Token | 值 |
|---|---|
| primary | #0052d9 |
| primary-light | #ecf2fe |
| success | #00a870 |
| warning | #ed7b2f |
| error | #e34d59 |
| gray-1 | #f3f3f3 |
| gray-2 | #eeeeee |
| gray-3 | #e7e7e7 |
| gray-4 | #dcdcdc |
| gray-5 | #c5c5c5 |
| gray-6 | #a6a6a6 |
| gray-7 | #8b8b8b |
| gray-8 | #777777 |
| gray-9 | #5e5e5e |
| gray-10 | #4b4b4b |
| gray-11 | #393939 |
| gray-12 | #2c2c2c |
| gray-13 | #242424 |
| fontFamily.sans | 'Noto Sans SC', sans-serif |
2. <style> 中所有选择器及属性
| 选择器 | 属性 | H5 值(px) | 正确 rpx (×1.8204) |
|---|---|---|---|
body |
padding-bottom | 280px | 510rpx |
.safe-area-top |
padding-top | env(safe-area-inset-top, 44px) | 80rpx (fallback) |
.tab-active::after |
width | 24px | 44rpx |
.tab-active::after |
height | 3px | 5rpx |
.tab-active::after |
border-radius | 2px | 4rpx |
.filter-overlay |
z-index | 1000 | — |
.filter-dropdown |
border-radius | 0 0 16px 16px | 0 0 29rpx 29rpx |
.filter-dropdown |
z-index | 1001 | — |
.filter-dropdown |
max-height | 60vh | — |
.summary-header |
padding | 14px 16px | 25rpx 29rpx |
.summary-content |
padding | 16px | 29rpx |
.compare-toggle |
width | 44px | 80rpx |
.compare-toggle |
height | 24px | 44rpx |
.compare-toggle |
border-radius | 12px | 22rpx |
.compare-toggle::after |
width | 20px | 36rpx |
.compare-toggle::after |
height | 20px | 36rpx |
.compare-toggle::after |
top | 2px | 4rpx |
.compare-toggle::after |
left | 2px | 4rpx |
.compare-toggle.active::after |
left | 22px | 40rpx |
.compare-data |
font-size | 12px | 22rpx |
.compare-data |
margin-top | 2px | 4rpx |
.compare-data.show |
gap | 2px | 4rpx |
.tip-overlay |
z-index | 1999 | — |
.tip-toast |
bottom | 100px | 182rpx |
.tip-toast |
left | 16px | 29rpx |
.tip-toast |
right | 16px | 29rpx |
.tip-toast |
border-radius | 12px | 22rpx |
.tip-toast |
padding | 16px | 29rpx |
.tip-toast |
z-index | 2000 | — |
.tip-toast-content |
font-size | 13px | 24rpx |
.tip-toast-content |
line-height | 1.6 | — |
.help-icon |
width | 16px | 29rpx |
.help-icon |
height | 16px | 29rpx |
.help-icon |
font-size | 10px | 18rpx |
.help-icon |
margin-left | 4px | 7rpx |
.card-section-title |
font-size | 13px | 24rpx |
.card-section-title |
margin-bottom | 12px | 22rpx |
.flow-item |
padding | 10px 0 | 18rpx 0 |
.flow-dot |
width | 8px | 15rpx |
.flow-dot |
height | 8px | 15rpx |
.flow-dot |
margin-right | 12px | 22rpx |
.flow-line |
width | 2px | 4rpx |
.flow-line |
height | 16px | 29rpx |
.flow-line |
margin-left | 3px | 5rpx |
.flow-line |
margin-top | -10px | -18rpx |
.flow-line |
margin-bottom | -10px | -18rpx |
.gift-row |
padding | 14px 16px | 25rpx 29rpx |
.gift-row |
border-radius | 12px | 22rpx |
.gift-row |
margin-bottom | 10px | 18rpx |
.gift-tag |
padding | 3px 8px | 5rpx 15rpx |
.gift-tag |
border-radius | 4px | 7rpx |
.gift-tag |
font-size | 11px | 20rpx |
.gift-tag |
margin-left | 6px | 11rpx |
.filter-toc-btn |
width | 40px | 73rpx |
.filter-toc-btn |
height | 40px | 73rpx |
.filter-toc-btn |
border-radius | 8px | 15rpx |
.filter-toc-btn svg |
width | 20px | 36rpx |
.filter-toc-btn svg |
height | 20px | 36rpx |
.toc-dropdown |
top | 108px | 197rpx |
.toc-dropdown |
left | 16px | 29rpx |
.toc-dropdown |
right | 16px | 29rpx |
.toc-dropdown |
border-radius | 16px | 29rpx |
.toc-dropdown |
max-height | 60vh | — |
.toc-dropdown |
z-index | 1001 | — |
.toc-dropdown-header |
padding | 14px 16px | 25rpx 29rpx |
.toc-dropdown-header h4 |
font-size | 14px | 25rpx |
.toc-dropdown-list |
padding | 8px 0 | 15rpx 0 |
.toc-item |
gap | 12px | 22rpx |
.toc-item |
padding | 12px 16px | 22rpx 29rpx |
.toc-item-emoji |
font-size | 18px | 33rpx |
.toc-item-text |
font-size | 14px | 25rpx |
.toc-overlay |
z-index | 1000 | — |
.card-header |
gap | 10px | 18rpx |
.card-header |
margin | -16px -16px 16px -16px | -29rpx -29rpx 29rpx -29rpx |
.card-header |
padding | 12px 16px | 22rpx 29rpx |
.card-header-emoji |
font-size | 18px | 33rpx |
.card-header-title |
font-size | 14px | 25rpx |
.card-header-title |
margin-bottom | 2px | 4rpx |
.card-header-desc |
font-size | 11px | 20rpx |
.card-section |
margin-bottom | 42px | 76rpx |
.card-section |
padding-bottom | 28px | 51rpx |
.card-section |
border-radius | 8px | 15rpx |
.card-section::after |
height | 14px | 25rpx |
.card-section::after |
background-size | 16px 14px | 29rpx 25rpx |
.sticky-section-header |
top | 58px | 106rpx |
.sticky-section-header |
left | 70px | 127rpx |
.sticky-section-header |
right | 22px | 40rpx |
.sticky-section-header |
height | 40px | 73rpx |
.sticky-section-header |
z-index | 15 | — |
.sticky-section-header |
padding | 0 12px | 0 22rpx |
.sticky-section-header |
gap | 8px | 15rpx |
.sticky-section-header |
border-radius | 0 6px 6px 0 | 0 11rpx 11rpx 0 |
.sticky-section-emoji |
font-size | 18px | 33rpx |
.sticky-section-content |
gap | 8px | 15rpx |
.sticky-section-title |
font-size | 14px | 25rpx |
.sticky-section-desc |
font-size | 11px | 20rpx |
.sticky-section-filters |
gap | 8px | 15rpx |
.sticky-filter-tag |
font-size | 11px | 20rpx |
.sticky-filter-tag |
padding | 4px 8px | 7rpx 15rpx |
.sticky-filter-tag |
border-radius | 6px | 11rpx |
.ai-insight-section |
margin | 16px -16px -16px -16px | 29rpx -29rpx -29rpx -29rpx |
.ai-insight-section |
padding | 16px | 29rpx |
.ai-insight-icon |
width | 24px | 44rpx |
.ai-insight-icon |
height | 24px | 44rpx |
.ai-insight-icon |
border-radius | 8px | 15rpx |
.ai-insight-icon |
font-size | 14px | 25rpx |
.ai-insight-header |
gap | 8px | 15rpx |
.ai-insight-header |
margin-bottom | 12px | 22rpx |
.ai-insight-title |
font-size | 13px | 24rpx |
二、Body 区域 Tailwind Class 映射
1. 顶部 Tab 导航（.safe-area-top 区域）
| 元素描述 | Tailwind class | CSS 值(px) | 正确 rpx |
|---|---|---|---|
| 导航容器 | bg-white sticky top-0 z-20 shadow-sm |
— | — |
| Tab 行 | flex border-b border-gray-2 |
— | — |
| 单个 Tab | flex-1 py-3 text-center text-sm font-medium |
py: 12px, font: 14px/20px | py: 22rpx, font: 26rpx/36rpx |
| 激活 Tab | 同上 + .tab-active（CSS 定义） |
— | — |
| 非激活 Tab | 同上 + text-gray-7 |
color: #8b8b8b | — |
2. 筛选栏（#filterBar 区域）
| 元素描述 | Tailwind class | CSS 值(px) | 正确 rpx |
|---|---|---|---|
| 筛选栏容器 | bg-gray-1 sticky top-[44px] z-10 px-4 py-2 border-b border-gray-2 |
px: 16px, py: 8px, top: 44px | px: 29rpx, py: 14rpx, top: 80rpx |
| 内部白色容器 | bg-white rounded-lg p-1.5 flex gap-2 border border-gray-200 |
p: 6px, gap: 8px, radius: 8px | p: 11rpx, gap: 14rpx, radius: 14rpx |
| 目录按钮 | .filter-toc-btn（CSS 定义） |
40×40px, radius: 8px | 73×73rpx, radius: 15rpx |
| 时间筛选按钮 | flex-1 px-3 py-2 bg-gray-100 rounded text-sm text-gray-700 flex items-center justify-center gap-1 border border-gray-200 |
px: 12px, py: 8px, font: 14px, gap: 4px, radius: 4px | px: 22rpx, py: 14rpx, font: 26rpx, gap: 7rpx, radius: 7rpx |
| 区域筛选按钮 | flex-1 px-3 py-2 bg-gray-50 rounded text-sm text-gray-700 flex items-center justify-center gap-1 border border-gray-200 |
同上 | 同上 |
| 下拉箭头 SVG | w-4 h-4 text-gray-500 / text-gray-5 |
16×16px | 29×29rpx |
| 环比开关容器 | flex items-center gap-2 px-2 |
gap: 8px, px: 8px | gap: 14rpx, px: 14rpx |
| 环比文字 | text-xs text-gray-7 |
font: 12px/16px | font: 22rpx/29rpx |
| 环比开关 | .compare-toggle（CSS 定义） |
44×24px | 80×44rpx |
3. 经营一览（#section-overview 区域）
| 元素描述 | Tailwind class | CSS 值(px) | 正确 rpx |
|---|---|---|---|
| 板块容器 | summary-gradient mx-4 mt-4 mb-8 rounded-lg text-white overflow-hidden |
mx: 16px, mt: 16px, mb: 32px, radius: 8px | mx: 29rpx, mt: 29rpx, mb: 58rpx, radius: 14rpx |
| 板块头 | .summary-header flex items-start gap-3 |
gap: 12px; padding: 14px 16px (CSS) | gap: 22rpx; padding: 25rpx 29rpx |
| 板块头 emoji | text-xl |
20px/28px | 36rpx/51rpx |
| 板块头标题 | text-base font-semibold text-white |
16px/24px | 29rpx/44rpx |
| 板块头副标题 | text-xs text-white/50 mt-0.5 |
12px/16px, mt: 2px | 22rpx/29rpx, mt: 4rpx |
| 板块正文 | .summary-content |
padding: 16px (CSS) | padding: 29rpx |
| 小节标签 | text-xs text-white/70 font-medium |
12px/16px | 22rpx/29rpx |
| 小节副标签 | text-xs text-white/40 |
12px/16px | 22rpx/29rpx |
| 收入概览 grid | grid grid-cols-3 gap-3 mb-3 |
gap: 12px, mb: 12px | gap: 22rpx, mb: 22rpx |
| 指标标签 | text-white/60 text-xs |
12px/16px | 22rpx/29rpx |
| 指标标签行 | flex items-center justify-center mb-1 |
mb: 4px | mb: 7rpx |
| 大数字 | text-xl font-bold text-white |
20px/28px | 36rpx/51rpx |
| 红色大数字 | text-xl font-bold text-red-500/85 |
20px/28px | 36rpx/51rpx |
| 灰色大数字 | text-xl font-bold text-gray-300 |
20px/28px | 36rpx/51rpx |
| 成交收入行 | bg-white/10 rounded-xl px-4 py-3 flex justify-between items-center |
px: 16px, py: 12px, radius: 12px | px: 29rpx, py: 22rpx, radius: 22rpx |
| 成交收入标签 | text-white/70 text-sm |
14px/20px | 26rpx/36rpx |
| 成交收入数字 | text-xl font-bold text-gray-100 |
20px/28px | 36rpx/51rpx |
| 分隔线 | border-t border-white/10 my-4 |
my: 16px | my: 29rpx |
| 现金流水 grid | grid grid-cols-2 gap-3 |
gap: 12px | gap: 22rpx |
| 现金流水卡片 | bg-white/5 rounded-xl p-3 text-center |
p: 12px, radius: 12px | p: 22rpx, radius: 22rpx |
| 现金流水数字 | text-lg font-bold text-gray-100 |
18px/28px | 33rpx/51rpx |
| 对比数据 SVG | w-3 h-3 |
12×12px | 22×22rpx |
4. 预收资产（#section-recharge 区域）
| 元素描述 | Tailwind class | CSS 值(px) | 正确 rpx |
|---|---|---|---|
| 板块容器 | bg-white rounded-lg p-4 border border-gray-200 card-section |
p: 16px, radius: 8px (CSS card-section) | p: 29rpx, radius: 15rpx |
| 板块头 | .card-header（CSS 定义） |
gap: 10px, p: 12px 16px | gap: 18rpx, p: 22rpx 29rpx |
| 板块头 emoji | .card-header-emoji |
font: 18px | font: 33rpx |
| 板块头标题 | .card-header-title |
font: 14px, mb: 2px | font: 25rpx, mb: 4rpx |
| 板块头描述 | .card-header-desc |
font: 11px | font: 20rpx |
| 小节标题 | .card-section-title |
font: 13px, mb: 12px | font: 24rpx, mb: 22rpx |
| 表格容器 | border border-gray-200 rounded-lg overflow-hidden |
radius: 8px | radius: 14rpx |
| 储值卡充值行 | bg-gray-50 px-4 py-3 flex justify-between items-center border-b border-gray-100 |
px: 16px, py: 12px | px: 29rpx, py: 22rpx |
| 储值卡标签 | text-sm text-gray-700 font-medium |
14px/20px | 26rpx/36rpx |
| 储值卡大数字 | text-lg font-bold text-gray-900 |
18px/28px | 33rpx/51rpx |
| 三列 grid | bg-white px-4 py-3 grid grid-cols-3 gap-3 border-b border-gray-100 |
px: 16px, py: 12px, gap: 12px | px: 29rpx, py: 22rpx, gap: 22rpx |
| 三列小标签 | text-xs text-gray-500 |
12px/16px | 22rpx/29rpx |
| 三列小标签行 | flex items-center justify-center gap-0.5 mb-1 |
gap: 2px, mb: 4px | gap: 4rpx, mb: 7rpx |
| 三列数值 | text-sm font-medium text-gray-700 |
14px/20px | 26rpx/36rpx |
| 小帮助图标 | .help-icon .help-icon-dark text-[9px] |
9px (font) | 16rpx |
| 储值卡余额行 | bg-gray-100 px-4 py-3 flex justify-between items-center |
px: 16px, py: 12px | px: 29rpx, py: 22rpx |
| 赠送卡表头 | grid grid-cols-4 gap-1 px-4 py-2 bg-gray-100 text-sm text-gray-800 font-medium |
gap: 4px, px: 16px, py: 8px, font: 14px | gap: 7rpx, px: 29rpx, py: 14rpx, font: 26rpx |
| 赠送卡数据行 | grid grid-cols-4 gap-1 px-4 py-3 border-b border-gray-100 items-center |
gap: 4px, px: 16px, py: 12px | gap: 7rpx, px: 29rpx, py: 22rpx |
| 赠送卡行标题 | text-sm text-gray-700 font-medium |
14px/20px | 26rpx/36rpx |
| 赠送卡行金额 | text-[13px] text-gray-800 font-semibold |
13px | 24rpx |
| 赠送卡子列数值 | text-sm text-gray-500 |
14px/20px | 26rpx/36rpx |
| 赠送卡余额行 | grid grid-cols-4 gap-1 px-4 py-3 bg-gray-50 items-center |
同上 | 同上 |
| 赠送卡余额金额 | text-[13px] font-bold text-gray-900 |
13px | 24rpx |
| 全类别合计容器 | bg-gray-100 rounded-lg px-4 py-3 flex justify-between items-center border border-gray-200 |
px: 16px, py: 12px, radius: 8px | px: 29rpx, py: 22rpx, radius: 14rpx |
| 全类别合计标签 | text-sm text-gray-700 font-medium |
14px/20px | 26rpx/36rpx |
| 全类别合计副标签 | text-[10px] text-gray-400 |
10px | 18rpx |
| 全类别合计数字 | text-xl font-bold text-gray-900 |
20px/28px | 36rpx/51rpx |
| 对比数据(11px) | compare-data compare-up text-[11px] |
11px | 20rpx |
| 对比数据(10px) | compare-data compare-up text-[10px] |
10px | 18rpx |
| 对比 SVG 小 | w-2.5 h-2.5 |
10×10px | 18×18rpx |
| 对比 SVG 极小 | w-2 h-2 |
8×8px | 15×15rpx |
5. 应计收入（#section-revenue 区域）
| 元素描述 | Tailwind class | CSS 值(px) | 正确 rpx |
|---|---|---|---|
| 板块容器 | bg-white rounded-lg p-4 border border-gray-200 card-section |
p: 16px, radius: 8px | p: 29rpx, radius: 15rpx |
| 板块头 | .card-header（同上） |
— | — |
| 收入结构标题行 | flex items-center gap-2 mb-3 |
gap: 8px, mb: 12px | gap: 14rpx, mb: 22rpx |
| 收入结构标题 | text-sm font-semibold text-gray-700 |
14px/20px | 26rpx/36rpx |
| 收入结构副标题 | text-xs text-gray-400 |
12px/16px | 22rpx/29rpx |
| 收入结构容器 | mb-5 |
mb: 20px | mb: 36rpx |
| 表格容器 | border border-gray-200 rounded-lg overflow-hidden |
radius: 8px | radius: 14rpx |
| 表头 | grid grid-cols-4 gap-1 px-4 py-2 bg-gray-100 text-xs text-gray-600 |
gap: 4px, px: 16px, py: 8px, font: 12px | gap: 7rpx, px: 29rpx, py: 14rpx, font: 22rpx |
| 表体行（主项） | grid grid-cols-4 gap-1 px-4 py-3 |
gap: 4px, px: 16px, py: 12px | gap: 7rpx, px: 29rpx, py: 22rpx |
| 表体行（子项） | grid grid-cols-4 gap-1 px-4 py-2 text-sm bg-white/50 |
gap: 4px, px: 16px, py: 8px, font: 14px | gap: 7rpx, px: 29rpx, py: 14rpx, font: 26rpx |
| 主项名称 | text-sm text-gray-11 font-semibold |
14px/20px | 26rpx/36rpx |
| 主项数值 | text-base text-gray-10 |
16px/24px | 29rpx/44rpx |
| 主项入账数值 | text-base text-gray-11 font-semibold |
16px/24px | 29rpx/44rpx |
| 子项名称 | text-gray-7 pl-4 |
pl: 16px | pl: 29rpx |
| 子项数值 | text-right text-gray-7 |
— | — |
| 红色优惠数值 | text-right text-base text-red-500/85 |
16px/24px | 29rpx/44rpx |
| 子项红色数值 | text-right text-red-500/85 |
— | — |
| 助教子标签 | text-xs text-gray-6 |
12px/16px | 22rpx/29rpx |
| 对比数据(12px) | compare-data compare-up text-[12px] justify-end |
12px | 22rpx |
| 收入确认标题行 | flex items-center gap-2 mb-3 |
gap: 8px, mb: 12px | gap: 14rpx, mb: 22rpx |
| 收入确认标题 | text-sm font-semibold text-gray-700 |
14px/20px | 26rpx/36rpx |
| 收入确认副标题 | text-xs text-gray-400 |
12px/16px | 22rpx/29rpx |
| 项目正价标题栏 | bg-gray-50 px-4 py-2.5 |
px: 16px, py: 10px | px: 29rpx, py: 18rpx |
| 项目正价标题 | text-sm text-gray-700 font-semibold |
14px/20px | 26rpx/36rpx |
| 项目正价副标题 | text-xs text-gray-500 |
12px/16px | 22rpx/29rpx |
| 竖线缩进区 | bg-white px-4 py-3 border-l-2 border-gray-300 ml-4 mr-4 my-2 |
px: 16px, py: 12px, ml/mr: 16px, my: 8px, border-l: 2px | px: 29rpx, py: 22rpx, ml/mr: 29rpx, my: 14rpx, border-l: 4rpx |
| 缩进区间距 | space-y-2 |
gap: 8px | gap: 14rpx |
| 缩进区项目名 | text-sm text-gray-600 |
14px/20px | 26rpx/36rpx |
| 缩进区数值 | text-sm font-medium text-gray-700 |
14px/20px | 26rpx/36rpx |
| 缩进区红色数值 | text-sm font-medium text-red-500/85 |
14px/20px | 26rpx/36rpx |
| 发生额汇总栏 | bg-gray-100 px-4 py-3 |
px: 16px, py: 12px | px: 29rpx, py: 22rpx |
| 发生额汇总标题 | text-sm text-gray-700 font-semibold |
14px/20px | 26rpx/36rpx |
| 发生额汇总数字 | text-lg font-semibold text-gray-900 |
18px/28px | 33rpx/51rpx |
| 成交收入汇总数字 | text-lg font-bold text-gray-900 |
18px/28px | 33rpx/51rpx |
| 成交收入说明 | text-xs text-gray-500 leading-relaxed |
12px/16px | 22rpx/29rpx |
| 优惠子项副标签 | text-xs text-gray-400 mt-0.5 |
12px/16px, mt: 2px | 22rpx/29rpx, mt: 4rpx |
| 灰色占位 | text-sm font-medium text-gray-400 |
14px/20px | 26rpx/36rpx |
| 收款渠道标签 | text-xs text-gray-500 mb-2 |
12px/16px, mb: 8px | 22rpx/29rpx, mb: 14rpx |
| 竖线缩进区(底部) | bg-white px-4 py-3 border-l-2 border-gray-300 ml-4 mr-4 mb-3 |
mb: 12px | mb: 22rpx |
| 对比数据(11px) | compare-data compare-up text-[11px] |
11px | 20rpx |
6. 现金流入（#section-cashflow 区域）
| 元素描述 | Tailwind class | CSS 值(px) | 正确 rpx |
|---|---|---|---|
| 板块容器 | bg-white rounded-lg p-4 border border-gray-200 card-section |
p: 16px, radius: 8px | p: 29rpx, radius: 15rpx |
| 板块头 | .card-header（同上） |
— | — |
| 分类标签 | text-xs text-gray-500 font-medium px-1 |
12px/16px, px: 4px | 22rpx/29rpx, px: 7rpx |
| 分类标签(mt) | text-xs text-gray-500 font-medium px-1 mt-3 |
mt: 12px | mt: 22rpx |
| 流水项容器 | flex justify-between items-center border-b border-gray-100 px-2 py-2 |
px: 8px, py: 8px | px: 14rpx, py: 14rpx |
| 流水项名称 | text-sm text-gray-700 font-medium |
14px/20px | 26rpx/36rpx |
| 流水项副标签 | text-xs text-gray-400 mt-0.5 |
12px/16px, mt: 2px | 22rpx/29rpx, mt: 4rpx |
| 流水项数值 | text-base font-semibold text-gray-900 |
16px/24px | 29rpx/44rpx |
| 合计容器 | flex justify-between items-center bg-gray-100 rounded-lg px-4 py-3 mt-2 border-t border-gray-200 |
px: 16px, py: 12px, mt: 8px, radius: 8px | px: 29rpx, py: 22rpx, mt: 14rpx, radius: 14rpx |
| 合计标签 | text-sm text-gray-700 font-semibold |
14px/20px | 26rpx/36rpx |
| 合计数字 | text-lg font-bold text-gray-900 |
18px/28px | 33rpx/51rpx |
7. 现金流出（#section-expense 区域）
| 元素描述 | Tailwind class | CSS 值(px) | 正确 rpx |
|---|---|---|---|
| 板块容器 | bg-white rounded-lg p-4 border border-gray-200 card-section |
p: 16px, radius: 8px | p: 29rpx, radius: 15rpx |
| 板块头 | .card-header（同上） |
— | — |
| 分类标题 | text-sm font-medium text-gray-700 mb-2 |
14px/20px, mb: 8px | 26rpx/36rpx, mb: 14rpx |
| 分类标题(mb-1) | text-sm font-medium text-gray-700 mb-1 |
mb: 4px | mb: 7rpx |
| 分类副标题 | text-xs text-gray-400 mb-2 |
12px/16px, mb: 8px | 22rpx/29rpx, mb: 14rpx |
| 进货 3列 grid | grid grid-cols-3 gap-2 mb-4 |
gap: 8px, mb: 16px | gap: 14rpx, mb: 29rpx |
| 固定支出 2列 grid | grid grid-cols-2 gap-2 mb-4 |
gap: 8px, mb: 16px | gap: 14rpx, mb: 29rpx |
| 支出卡片 | bg-gray-50 border border-gray-200 rounded-lg px-3 py-3 text-center |
px: 12px, py: 12px, radius: 8px | px: 22rpx, py: 22rpx, radius: 14rpx |
| 支出卡片标签 | text-xs text-gray-500 mb-1 |
12px/16px, mb: 4px | 22rpx/29rpx, mb: 7rpx |
| 支出卡片数值 | text-base font-semibold text-gray-900 |
16px/24px | 29rpx/44rpx |
| 支出合计容器 | bg-gray-100 rounded-lg px-4 py-3 flex justify-between items-center border-t border-gray-200 |
px: 16px, py: 12px, radius: 8px | px: 29rpx, py: 22rpx, radius: 14rpx |
| 支出合计标签 | text-sm font-semibold text-gray-700 |
14px/20px | 26rpx/36rpx |
| 支出合计数字 | text-lg font-bold text-gray-900 |
18px/28px | 33rpx/51rpx |
8. 助教分析（#section-coach 区域）
| 元素描述 | Tailwind class | CSS 值(px) | 正确 rpx |
|---|---|---|---|
| 板块容器 | bg-white rounded-lg p-4 border border-gray-200 card-section |
p: 16px, radius: 8px | p: 29rpx, radius: 15rpx |
| 板块头 | .card-header（同上） |
— | — |
| 小节标题 | .card-section-title |
font: 13px, mb: 12px | font: 24rpx, mb: 22rpx |
| 小节标题内 span | text-xs text-gray-500 font-normal |
12px/16px | 22rpx/29rpx |
| 表格容器 | border border-gray-200 rounded-lg overflow-hidden |
radius: 8px | radius: 14rpx |
| 表头 | grid grid-cols-4 gap-1 px-4 py-2 bg-gray-100 text-xs text-gray-600 |
gap: 4px, px: 16px, py: 8px, font: 12px | gap: 7rpx, px: 29rpx, py: 14rpx, font: 22rpx |
| 合计行(基础课) | grid grid-cols-4 gap-1 px-4 py-2 bg-gray-50 border-b border-gray-200 |
gap: 4px, px: 16px, py: 8px | gap: 7rpx, px: 29rpx, py: 14rpx |
| 合计行标签 | text-sm text-gray-700 font-semibold |
14px/20px | 26rpx/36rpx |
| 合计行数值 | text-sm text-gray-900 font-semibold |
14px/20px | 26rpx/36rpx |
| 合计行小时均 | text-sm text-gray-700 |
14px/20px | 26rpx/36rpx |
| 明细行 | grid grid-cols-4 gap-1 px-4 py-2.5 |
gap: 4px, px: 16px, py: 10px | gap: 7rpx, px: 29rpx, py: 18rpx |
| 明细行级别 | text-sm text-gray-9 |
14px/20px | 26rpx/36rpx |
| 明细行数值 | text-base text-gray-9 |
16px/24px | 29rpx/44rpx |
| 明细行小时均 | text-sm text-gray-7 |
14px/20px | 26rpx/36rpx |
| 激励课合计行 | grid grid-cols-4 gap-1 px-4 py-3 |
gap: 4px, px: 16px, py: 12px | gap: 7rpx, px: 29rpx, py: 22rpx |
| 激励课合计标签 | text-sm text-gray-11 font-semibold |
14px/20px | 26rpx/36rpx |
| 激励课合计数值 | text-base text-gray-11 font-semibold |
16px/24px | 29rpx/44rpx |
| 激励课分成数值 | text-base text-gray-900 font-semibold |
16px/24px | 29rpx/44rpx |
| 激励课小时均 | text-base text-gray-9 |
16px/24px | 29rpx/44rpx |
| 对比持平文字 | compare-data text-[12px] text-gray-5 justify-end |
12px | 22rpx |
9. 目录面板（#tocDropdown 区域）
| 元素描述 | Tailwind class / CSS 选择器 | CSS 值(px) | 正确 rpx |
|---|---|---|---|
| 遮罩 | .toc-overlay |
z-index: 1000 | — |
| 面板容器 | .toc-dropdown |
top: 108px, left/right: 16px, radius: 16px, max-height: 60vh, z-index: 1001 | top: 197rpx, left/right: 29rpx, radius: 29rpx |
| 面板头 | .toc-dropdown-header |
padding: 14px 16px | padding: 25rpx 29rpx |
| 面板头标题 | .toc-dropdown-header h4 |
font: 14px | font: 25rpx |
| 列表容器 | .toc-dropdown-list |
padding: 8px 0 | padding: 15rpx 0 |
| 列表项 | .toc-item |
gap: 12px, padding: 12px 16px | gap: 22rpx, padding: 22rpx 29rpx |
| 列表项 emoji | .toc-item-emoji |
font: 18px | font: 33rpx |
| 列表项文字 | .toc-item-text |
font: 14px | font: 25rpx |
10. 提示弹窗（.tip-toast 区域）
| 元素描述 | Tailwind class / CSS 选择器 | CSS 值(px) | 正确 rpx |
|---|---|---|---|
| 遮罩 | .tip-overlay |
z-index: 1999 | — |
| 弹窗容器 | .tip-toast |
bottom: 100px, left/right: 16px, radius: 12px, padding: 16px, z-index: 2000 | bottom: 182rpx, left/right: 29rpx, radius: 22rpx, padding: 29rpx |
| 弹窗标题行 | flex justify-between items-start mb-2 |
mb: 8px | mb: 14rpx |
| 弹窗标题 | text-sm text-primary font-medium |
14px/20px | 26rpx/36rpx |
| 关闭按钮 SVG | w-5 h-5 |
20×20px | 36×36rpx |
| 弹窗内容 | .tip-toast-content |
font: 13px, line-height: 1.6 | font: 24rpx |
| 帮助图标(白底) | .help-icon |
16×16px, font: 10px, ml: 4px | 29×29rpx, font: 18rpx, ml: 7rpx |
| 帮助图标(暗底) | .help-icon .help-icon-dark |
同上 | 同上 |
三、AI 洞察区域（.ai-insight-section）
| 元素描述 | Tailwind class / CSS 选择器 | CSS 值(px) | 正确 rpx |
|---|---|---|---|
| 容器 | .ai-insight-section |
margin: 16px -16px -16px -16px, padding: 16px | margin: 29rpx -29rpx -29rpx -29rpx, padding: 29rpx |
| 头部 | .ai-insight-header |
gap: 8px, mb: 12px | gap: 15rpx, mb: 22rpx |
| 图标 | .ai-insight-icon |
24×24px, radius: 8px, font: 14px | 44×44rpx, radius: 15rpx, font: 25rpx |
| 标题 | .ai-insight-title |
font: 13px | font: 24rpx |
| 内容行 | space-y-2 text-sm text-white/85 |
gap: 8px, font: 14px/20px | gap: 14rpx, font: 26rpx/36rpx |
| 内容标签 | text-white/50 |
— | — |
四、筛选弹窗区域
| 元素描述 | Tailwind class | CSS 值(px) | 正确 rpx |
|---|---|---|---|
| 弹窗遮罩 | .filter-overlay |
z-index: 1000 | — |
| 弹窗容器 | .filter-dropdown |
radius: 0 0 16px 16px, z-index: 1001, max-height: 60vh | radius: 0 0 29rpx 29rpx |
| 弹窗内容 | p-4 space-y-2 |
p: 16px, gap: 8px | p: 29rpx, gap: 14rpx |
| 选项行 | px-4 py-3 text-sm text-gray-10 hover:bg-primary/5 rounded-lg cursor-pointer flex items-center justify-between |
px: 16px, py: 12px, font: 14px, radius: 8px | px: 29rpx, py: 22rpx, font: 26rpx, radius: 14rpx |
| 子区域选项 | 同上 + text-gray-7 pl-8 |
pl: 32px | pl: 58rpx |
| 分组标题选项 | 同上 + font-medium |
— | — |
五、页面级容器
| 元素描述 | Tailwind class | CSS 值(px) | 正确 rpx |
|---|---|---|---|
| body | bg-gray-1 min-h-screen |
bg: #f3f3f3 | — |
| 指标内容容器 | p-4 space-y-4 |
p: 16px, gap: 16px | p: 29rpx, gap: 29rpx |