1
This commit is contained in:
@@ -1,80 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI 标识配色演示</title>
|
||||
<link href="../css/ai-icons.css" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: 'Noto Sans SC', -apple-system, sans-serif; background: #f5f5f5; padding: 20px; }
|
||||
h1 { font-size: 18px; color: #242424; margin-bottom: 20px; text-align: center; }
|
||||
h2 { font-size: 15px; color: #5e5e5e; margin: 24px 0 12px; padding-left: 8px; border-left: 3px solid #667eea; }
|
||||
.demo-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: #fff; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
|
||||
.demo-row .label { font-size: 13px; color: #8b8b8b; min-width: 36px; }
|
||||
.demo-row .sample-text { font-size: 14px; color: #5e5e5e; display: flex; align-items: center; }
|
||||
.note { font-size: 12px; color: #a6a6a6; text-align: center; margin-top: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>AI 标识配色方案演示</h1>
|
||||
|
||||
<!-- ===== 嵌入 Icon ===== -->
|
||||
<h2>嵌入 Icon（行首小图标 · 机器人）</h2>
|
||||
|
||||
<div class="demo-row">
|
||||
<span class="label">红</span>
|
||||
<span class="sample-text"><span class="ai-inline-icon ai-color-red"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">橙</span>
|
||||
<span class="sample-text"><span class="ai-inline-icon ai-color-orange"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">黄</span>
|
||||
<span class="sample-text"><span class="ai-inline-icon ai-color-yellow"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">蓝</span>
|
||||
<span class="sample-text"><span class="ai-inline-icon ai-color-blue"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">靛</span>
|
||||
<span class="sample-text"><span class="ai-inline-icon ai-color-indigo"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">紫</span>
|
||||
<span class="sample-text"><span class="ai-inline-icon ai-color-purple"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white"/><path d="M12 7V4" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white"/></svg></span>高流失风险，建议尽快联系</span>
|
||||
</div>
|
||||
<p class="note">每个页面所有嵌入 Icon 统一使用一种配色，刷新后随机分配</p>
|
||||
|
||||
<!-- ===== Title AI 标识 ===== -->
|
||||
<h2>Title AI 标识（标题行右侧 · 机器人 · 浅色背景+边框）</h2>
|
||||
|
||||
<div class="demo-row">
|
||||
<span class="label">红</span>
|
||||
<span class="ai-title-badge ai-color-red"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">橙</span>
|
||||
<span class="ai-title-badge ai-color-orange"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">黄</span>
|
||||
<span class="ai-title-badge ai-color-yellow"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">蓝</span>
|
||||
<span class="ai-title-badge ai-color-blue"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">靛</span>
|
||||
<span class="ai-title-badge ai-color-indigo"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="demo-row">
|
||||
<span class="label">紫</span>
|
||||
<span class="ai-title-badge ai-color-purple"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="currentColor" opacity="0.12" stroke="currentColor" stroke-width="0.7"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="currentColor"/><circle cx="9" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="15" cy="11.5" r="1.8" fill="white" stroke="currentColor" stroke-width="0.6"/><circle cx="9.4" cy="11.2" r="0.7" fill="currentColor"/><circle cx="15.4" cy="11.2" r="0.7" fill="currentColor"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.5"/><rect x="3" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/><rect x="19" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.15" stroke="currentColor" stroke-width="0.5"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<p class="note">每个页面所有 Title AI 标识统一使用一种配色，刷新后随机分配</p>
|
||||
</body>
|
||||
</html>
|
||||
402
docs/h5_ui/pages/board-finance-style-map.md
Normal file
402
docs/h5_ui/pages/board-finance-style-map.md
Normal file
@@ -0,0 +1,402 @@
|
||||
# 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 |
|
||||
@@ -1,155 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>首页设置 - 球房运营助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
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'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top, 44px);
|
||||
}
|
||||
.radio-checked {
|
||||
border-color: #0052d9;
|
||||
background: #0052d9;
|
||||
}
|
||||
.radio-checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.option-card {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.option-card.selected {
|
||||
border-color: #0052d9;
|
||||
background: linear-gradient(135deg, #ecf2fe 0%, #f8faff 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="safe-area-top bg-white sticky top-0 z-10">
|
||||
<div class="h-11 flex items-center relative border-b border-gray-2 px-4">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-gray-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center text-base font-medium text-gray-13">首页设置</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 说明文字 -->
|
||||
<div class="px-4 py-4">
|
||||
<p class="text-sm text-gray-7">选择登录后默认显示的首页</p>
|
||||
</div>
|
||||
|
||||
<!-- 选项列表 -->
|
||||
<div class="px-4 space-y-3">
|
||||
<div id="option-task" class="option-card bg-white rounded-2xl p-4 border-2 border-transparent cursor-pointer selected" onclick="selectHome('task')">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-primary to-blue-400 rounded-xl flex items-center justify-center shadow-sm">
|
||||
<svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-base font-medium text-gray-13 mb-1">任务</p>
|
||||
<p class="text-xs text-gray-6">查看待办任务和业绩概览</p>
|
||||
</div>
|
||||
<div id="radio-task" class="w-5 h-5 border-2 border-gray-4 rounded-full relative radio-checked"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="option-board" class="option-card bg-white rounded-2xl p-4 border-2 border-transparent cursor-pointer" onclick="selectHome('board')">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-success to-green-400 rounded-xl flex items-center justify-center shadow-sm">
|
||||
<svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-base font-medium text-gray-13 mb-1">看板</p>
|
||||
<p class="text-xs text-gray-6">查看财务、客户、助教数据</p>
|
||||
</div>
|
||||
<div id="radio-board" class="w-5 h-5 border-2 border-gray-4 rounded-full relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<div class="px-4 py-6">
|
||||
<div class="flex items-start gap-3 p-4 bg-primary/5 rounded-xl">
|
||||
<svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
|
||||
</svg>
|
||||
<p class="text-xs text-gray-7 leading-relaxed">设置会自动保存，切换选项后即刻生效。退出登录后重新登录仍会保持您的设置。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function selectHome(type) {
|
||||
const taskRadio = document.getElementById('radio-task');
|
||||
const boardRadio = document.getElementById('radio-board');
|
||||
const taskOption = document.getElementById('option-task');
|
||||
const boardOption = document.getElementById('option-board');
|
||||
|
||||
if (type === 'task') {
|
||||
taskRadio.classList.add('radio-checked');
|
||||
boardRadio.classList.remove('radio-checked');
|
||||
taskOption.classList.add('selected');
|
||||
boardOption.classList.remove('selected');
|
||||
} else {
|
||||
boardRadio.classList.add('radio-checked');
|
||||
taskRadio.classList.remove('radio-checked');
|
||||
boardOption.classList.add('selected');
|
||||
taskOption.classList.remove('selected');
|
||||
}
|
||||
|
||||
console.log('已设置默认首页为:', type);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -51,24 +51,26 @@
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<h1 class="flex-1 text-center text-base font-medium">任务详情</h1>
|
||||
<h1 class="flex-1 text-center text-base font-medium">客户回访</h1>
|
||||
</div>
|
||||
|
||||
<!-- 客户信息 -->
|
||||
<div class="px-5 pt-2 pb-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-lg">
|
||||
<span class="text-2xl font-bold text-white">赵</span>
|
||||
<span class="text-2xl font-bold text-white">王</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl font-semibold">赵女士</span>
|
||||
<span class="px-2 py-0.5 bg-white/25 backdrop-blur-sm text-white rounded-full text-xs font-medium">客户回访</span>
|
||||
<span class="text-xl font-semibold">王先生</span>
|
||||
<span class="px-2 py-0.5 bg-white/25 backdrop-blur-sm text-white rounded-full text-xs font-medium">高优先召回</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-white/70 text-sm">
|
||||
<span>135****6677</span>
|
||||
<button onclick="this.previousElementSibling.textContent='13566776677';this.style.display='none'" class="px-2 py-0.5 bg-white/20 rounded text-white/90 text-xs">查看</button>
|
||||
<span>💰 储值 <span style="background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600;">非常多</span></span>
|
||||
<span>138****5678</span>
|
||||
<button onclick="this.previousElementSibling.textContent='13812345678';this.style.display='none'" class="px-2 py-0.5 bg-white/20 rounded text-white/90 text-xs">查看</button>
|
||||
</div>
|
||||
<div class="mt-1 text-white/70 text-sm">
|
||||
<span>黄金会员</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,7 +90,7 @@
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-primary/10 text-primary text-[11px] font-medium rounded-sm leading-normal tracking-wide">客户<br>基础</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">👩 女性 · VIP会员 · 入会1年半 · 忠实老客户</p>
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🎂 生日 3月15日 · VIP会员 · 注册2年</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -96,41 +98,32 @@
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-success/10 text-success text-[11px] font-medium rounded-sm leading-normal tracking-wide">消费<br>习惯</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">☀️ 偏好周末下午 · 月均6-8次</p>
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🌙 常来夜场 · 月均4-5次</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-success/10 text-success text-[11px] font-medium rounded-sm leading-normal tracking-wide">消费<br>习惯</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">💰 高客单价 · 爱点酒水</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-success/10 text-success text-[11px] font-medium rounded-sm leading-normal tracking-wide">消费<br>习惯</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">💰 高客单价</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">场均消费 ¥420，高于门店均值 ¥180；酒水小食附加消费占比 40%，偏好VIP包厢</p>
|
||||
</div>
|
||||
<!-- 玩法偏好 -->
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-purple-500/10 text-purple-600 text-[11px] font-medium rounded-sm leading-normal tracking-wide">玩法<br>偏好</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🎱 斯诺克爱好者 · 技术中上 · 喜欢研究杆法</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-purple-500/10 text-purple-600 text-[11px] font-medium rounded-sm leading-normal tracking-wide">玩法<br>偏好</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">🎱 偏爱中式八球 · 斯诺克进阶中 · 最近对花式九球也有兴趣</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:系统</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">斯诺克占比 85%，偶尔玩中式八球；对高级杆法有浓厚兴趣，正在学习走位技巧</p>
|
||||
</div>
|
||||
<!-- 重要反馈 -->
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 p-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-error/10 text-error text-[11px] font-medium rounded-sm leading-normal tracking-wide">重要<br>反馈</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">⭐ 上次服务好评，新球杆手感满意</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:小燕</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<span class="shrink-0 w-10 h-10 flex items-center justify-center px-0.5 bg-error/10 text-error text-[11px] font-medium rounded-sm leading-normal tracking-wide">重要<br>反馈</span>
|
||||
<div class="flex-1 relative min-h-[2.5rem]">
|
||||
<p class="text-sm text-gray-13 leading-snug line-clamp-2">⚠️ 上次提到想练斯诺克走位</p>
|
||||
<span class="absolute bottom-0 right-0 text-[11px] text-gray-6 whitespace-nowrap bg-gray-50 pl-1">By:小燕</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-7 mt-2 leading-relaxed">2月4日到店时表示新球杆手感很好，希望下次能提前预留VIP包厢；满意度持续保持高位</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -138,93 +131,40 @@
|
||||
<!-- 与我的关系 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13">与我的关系</h2>
|
||||
<h2 class="section-title pink text-sm font-semibold text-gray-13">与我的关系</h2>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-4 py-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white text-sm font-semibold rounded-xl shadow-sm">💖 非常好</span>
|
||||
<span class="px-4 py-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white text-sm font-semibold rounded-xl shadow-sm">🧡 良好</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="h-3 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-gradient-to-r from-pink-400 to-rose-500 rounded-full" style="width: 88%"></div>
|
||||
<div class="h-full bg-gradient-to-r from-pink-400 to-rose-500 rounded-full" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-lg font-bold text-pink-500">0.88</span>
|
||||
<span class="text-lg font-bold text-pink-500">0.85</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7 leading-relaxed mb-4">
|
||||
长期合作关系良好，共有 45 次服务记录。客户多次指定您服务，评价均为 5 星。是您的核心客户之一，需要持续维护。
|
||||
最近 3 个月每周均有 1-2 次课程互动，客户反馈良好。上次服务评价 5 星，多次指定您为服务助教。
|
||||
</p>
|
||||
<!-- 近期服务记录 -->
|
||||
<div class="svc-section-bg">
|
||||
<p class="text-sm font-semibold text-gray-13 mb-3">📋 近期服务记录</p>
|
||||
<div>
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">VIP2号房</span>
|
||||
<span class="svc-type basic">基础课</span>
|
||||
<span class="svc-duration">2.0h</span>
|
||||
</div>
|
||||
<span class="svc-income">¥190</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 红牛x2 花生米x1</span>
|
||||
<span class="svc-date">2026-02-04 15:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">8号台</span>
|
||||
<span class="svc-type incentive">激励课</span>
|
||||
<span class="svc-duration">1.5h</span>
|
||||
</div>
|
||||
<span class="svc-income">¥120</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 可乐x2</span>
|
||||
<span class="svc-date">2026-01-30 16:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="svc-record">
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="svc-table">VIP2号房</span>
|
||||
<span class="svc-type basic">基础课</span>
|
||||
<span class="svc-duration">2.5h</span>
|
||||
</div>
|
||||
<span class="svc-income">¥200</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="svc-drinks">🍷 百威x3 薯条x1</span>
|
||||
<span class="svc-date">2026-01-25 14:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-center">
|
||||
<button onclick="window.location.href='customer-service-records.html'" class="text-xs text-primary font-medium">查看全部服务记录 →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 任务建议 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<h2 class="section-title purple text-sm font-semibold text-gray-13 mb-4">任务建议</h2>
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-100">
|
||||
<h2 class="section-title orange text-sm font-semibold text-gray-13 mb-4">任务建议</h2>
|
||||
<div class="bg-gradient-to-br from-teal-50 to-cyan-50 rounded-xl p-4 border border-teal-200">
|
||||
<p class="text-sm text-primary leading-relaxed font-medium mb-3">
|
||||
<span class="flex items-center justify-between">
|
||||
<span>📞 常规回访要点</span>
|
||||
<span class="ai-title-badge"><span class="ai-title-badge-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="4" fill="white" stroke="currentColor" stroke-width="0.8"/><path d="M12 7V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="3" r="1.5" fill="white" stroke="currentColor" stroke-width="0.7"/><circle cx="9" cy="11.5" r="2" fill="#667eea"/><circle cx="15" cy="11.5" r="2" fill="#667eea"/><circle cx="9.5" cy="11" r="0.7" fill="white"/><circle cx="15.5" cy="11" r="0.7" fill="white"/><path d="M9.5 15C10 16 14 16 14.5 15" stroke="#667eea" stroke-width="1.5" stroke-linecap="round"/><circle cx="7" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><circle cx="17" cy="13.5" r="1" fill="#f5a0c0" opacity="0.6"/><rect x="3" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/><rect x="19" y="10" width="2" height="4" rx="1" fill="white" stroke="currentColor" stroke-width="0.7"/></svg></span>AI智能洞察</span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed mb-2">
|
||||
该客户上次到店是 3 天前，关系良好，进行常规关怀回访：
|
||||
</p>
|
||||
<ul class="text-sm text-gray-9 space-y-1.5 list-disc list-inside">
|
||||
<li>询问上次体验是否满意，是否有改进建议</li>
|
||||
<li>告知近期新到的斯诺克相关设备或活动</li>
|
||||
<li>提前预约下次到店时间，提供专属服务</li>
|
||||
<li>询问近期是否有空，邀请体验新到的器材</li>
|
||||
<li>告知本周末有会员专属活动</li>
|
||||
<li>根据其偏好时段（晚间）推荐合适的时间</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-4 p-4 bg-gray-50 rounded-xl border border-gray-100">
|
||||
@@ -234,19 +174,19 @@
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"赵姐您好！上次打球感觉怎么样？新到的球杆手感还习惯吗？这周末您有空的话，可以提前帮您预留老位置~"
|
||||
"王哥您好，好久不见！最近店里新到了几张国际标准的斯诺克球桌，知道您是斯诺克爱好者，想邀请您有空来体验一下~"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"赵姐，最近店里新进了一批斯诺克专用巧克粉，手感特别好，下次来的时候可以试试~"
|
||||
"王哥，最近忙吗？这周末我们有个老客户专属的球友交流赛，奖品还挺丰富的，您要不要来参加？"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"赵姐好呀，上次您说想学几个高级杆法，我最近整理了一些教学视频，要不要发给您先看看？"
|
||||
"王哥好呀，上次您提到想练练斯诺克的走位，我最近研究了一些新的训练方法，下次来的时候可以一起试试~"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"赵姐，这周六下午VIP包厢有空位，要不要帮您提前预留？可以叫上朋友一起来打球~"
|
||||
"王哥，好久没见您了，您的老位置 A12 号台一直给您留着呢！最近晚上人不多，环境特别好，随时欢迎您来~"
|
||||
</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed pl-3 border-l-2 border-primary/30">
|
||||
"赵姐您好，我们下个月有个会员积分兑换活动，您的积分可以换不少好东西，到时候提醒您哦~"
|
||||
"王哥您好，我们这个月推出了储值会员专属的夜场优惠套餐，包含球台+酒水，性价比很高，给您留意着呢~"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -256,31 +196,17 @@
|
||||
<div class="bg-white rounded-2xl p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title blue text-sm font-semibold text-gray-13">我给TA的备注</h2>
|
||||
<span class="text-xs text-gray-6">2 条备注</span>
|
||||
<span class="text-xs text-gray-6">0 条备注</span>
|
||||
</div>
|
||||
<div id="noteList" class="space-y-3">
|
||||
<div class="note-card-wrap flex items-start gap-3 p-3.5 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-xs text-gray-6 mb-1.5">2026-02-07</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed">赵姐反馈上次体验很满意，新球杆手感不错，希望下次能预留VIP包厢。</p>
|
||||
</div>
|
||||
<div class="star-rating" data-score="9"><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:50%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span></div>
|
||||
<button onclick="confirmDeleteNote()" class="shrink-0 w-7 h-7 flex items-center justify-center rounded-lg bg-white border border-gray-200 text-gray-5">
|
||||
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="note-card-wrap flex items-start gap-3 p-3.5 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-xs text-gray-6 mb-1.5">2026-01-25</p>
|
||||
<p class="text-sm text-gray-9 leading-relaxed">已预约本周六下午到店，需要提前安排靠窗位置。</p>
|
||||
</div>
|
||||
<div class="star-rating" data-score="9"><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:100%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span><span class="star"><svg class="star-empty" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><span class="star-fill" style="width:50%"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span></span></div>
|
||||
<button onclick="confirmDeleteNote()" class="shrink-0 w-7 h-7 flex items-center justify-center rounded-lg bg-white border border-gray-200 text-gray-5">
|
||||
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="noteEmpty" class="text-center py-6 hidden">
|
||||
<div id="noteEmpty" class="text-center py-6">
|
||||
<svg class="w-10 h-10 text-gray-4 mx-auto mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
<p class="text-sm text-gray-5">暂无备注</p>
|
||||
</div>
|
||||
<svg class="w-10 h-10 text-gray-4 mx-auto mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
|
||||
Reference in New Issue
Block a user