# 拜访卡 CSS 设计规范（白底卡片风格）

> 基于卓诚惠生拜访卡优化实践的完整 CSS 模板。适用于所有拜访卡、访前报告、客户档案等业务页面。

## 设计原则

- **白底卡片 + 浅灰背景**：`body: #f5f7fa` + `.section: #fff` + 微阴影
- **宝锐蓝主题色**：`--pri: #1a73e8`、`--pri-light: #e8f0fe`
- **最小字号 14px**：正文 ≥14px，辅助文字 ≥12px，KPI 值 24px
- **颜色语义统一**：P0=红、P1=橙、P2=蓝、✅=绿
- **聚焦光晕反馈**：输入框聚焦 `box-shadow: 0 0 0 3px var(--pri-light)`
- **深色头图**：仅顶部客户信息栏保留深蓝色渐变，作为品牌锚点

## CSS 变量

```css
:root {
  --pri: #1a73e8; --pri-light: #e8f0fe;
  --ok: #0d904f; --warn: #e37400; --bad: #d93025;
  --bg: #f5f7fa; --card: #ffffff; --border: #e0e0e0;
  --text: #202124; --sub: #5f6368; --muted: #9e9e9e;
  --dark: #0f1923; --dark-card: #162840;
}
```

## 核心组件

### Body
```css
body {
  background: var(--bg); color: var(--text); line-height: 1.7;
  padding: 70px 20px 40px; font-size: 15px;
}
```

### 深色客户头图（唯一保留暗色的区域）
```css
.header {
  background: linear-gradient(135deg, var(--dark) 0%, #1a2d42 100%);
  border-radius: 0 0 16px 16px; padding: 28px 32px; color: #fff;
}
.header h1 { font-size: 24px; font-weight: 700; }
```

### KPI 卡片（白底蓝字 24px）
```css
.kpi-card {
  background: var(--card); border: 1px solid var(--border);
  padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.kpi-card .value { font-size: 24px; font-weight: 700; color: var(--pri); }
```

### 输入框（实线 + 聚焦蓝光晕）
```css
.ann-input:focus {
  outline: none; border-color: var(--pri); background: #fff;
  box-shadow: 0 0 0 3px var(--pri-light);
}
```

### 竞品矩阵（白底 + 左色条区分温度）
```css
.comp-row { background: var(--card); border: 1px solid var(--border); }
.comp-active { border-left: 3px solid #ee5a24; }
.comp-warm { border-left: 3px solid #e37400; }
```

## 常犯错误

| 错误 | 症状 | 修复 |
|------|------|------|
| `h2{color:#fff}` + 白底 | 标题完全不可见 | `color: var(--text)` |
| 正文 `font-size:11px` | 中文笔画模糊 | ≥14px |
| `border:1px dashed #3a4a6c` | 暗色虚线边框 | `1px solid var(--border)` |
| textarea聚焦 `background:#1a1f3a` | 聚焦变暗 | `background:#fff` |
| 进度条背景 `#0a1620` | 暗底进度条 | `#e8eaed` |