403 lines
26 KiB
Markdown
403 lines
26 KiB
Markdown
# 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 |
|