# lingwang

**Repository Path**: amz_analysis/lingwang

## Basic Information

- **Project Name**: lingwang
- **Description**: zhangxinshi.com - ????????
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-11-04
- **Last Updated**: 2026-11-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 张新仕律师个人网站 · 前端设计稿 v2.0（夜墨 + 纸页）

面向 `zhangxinshi.com` 的静态站点设计稿，5 个页面，纯 HTML + 手写 CSS，无构建步骤、无 JS 框架依赖。

---

## 一、怎么看

```bash
cd zhangxinshi-site
python3 -m http.server 8099
# 打开 http://127.0.0.1:8099
```

直接双击 `index.html` 也能看，但本地起服务更接近线上（字体、相对路径都正常）。

---

## 二、设计决策（为什么长这样）

### 调性：夜墨 + 纸页，一本书的两个部分

要求是「亲切自然、天然可信赖」。律师站常见的两条路都不选：一是深蓝 + 金色 + 天平图标的商务模板（可信但疏离），二是大图轮播 + 红色标题的营销页（热情但廉价）。

v1 是纯纸面（米纸底、墨色字、森绿、陶土印章）。v2 参考同行（legalmindlaw.cn 等）的版式后做了结构调整：**首屏与页头压成夜墨，正文仍是纸页**。

这不是为了「更高级」，是因为首屏要装的东西变了——v1 用一张仿卷宗的档案卡承载身份，v2 改成真人竖幅大照 + 巨字姓名。照片是灰蓝背景、冷调、纵深强，放在米纸上会像贴上去的一张贴纸；放在近黑的墨绿里，人和背景才连成一片。翻过首屏，正文回到纸面，读长文才不累。

**夜墨选绿不选蓝**：同行普遍用藏青（#112039）。我们沿用自己色系里的森绿，压到 #0F231D——既保住品牌连续性，也与照片的灰蓝底（#4A5861）错开。同色系会糊成一片，邻近色才有层次：照片是冷灰，底色是冷绿。

### 色彩：60-30-10

| 比例 | 角色 | 色值 | 用在哪 |
|---|---|---|---|
| 60% | 纸面 | `#F5F0E6` / `#EDE4D3` | 全站正文背景、卡片 |
| 30% | 夜墨 | `#0F231D` / `#14302A` | 首屏、所有页头、页脚、CTA 区 |
| 7% | 森绿 | `#23443A` | 正文中的强调块、旧的深色组件 |
| 3% | 黄铜 | `#C6A567` | **只在夜底出现**：细线、章节编号、小标签、主按钮 |
| — | 陶土 | `#B4552F` | 纸面上的印章、编号、下划线 |

两条纪律：

1. **黄铜不落纸面**。它在米纸上会显得廉价（像旅游景点的烫金明信片），只在深底上当「细线级」的强调，面积控制在 5% 以内。
2. **陶土不落夜底**。陶土偏红，压在近黑绿上会脏；深底上的强调全部交给黄铜。

刻意避开：医院蓝（暗示院方立场）、律所红（压迫感）、紫白渐变（AI 味）、天秤与法槌剪影。

### 字体：宋体标题 + 苹方正文 + Fraunces 数字

- 中文标题走**宋体系**（Songti SC → Noto Serif SC 兜底）。宋体的横细竖粗是印刷品的语言，用在律师站上有「文书的法度」+「旧书的亲切」双重效果。
- 拉丁标题 **Fraunces**（可变衬线，soft 轴带圆润感），用在 `11 年` 这类数字上，与宋体形成材质对比。
- 正文 **Instrument Sans + 苹方**，克制、长文耐读。
- 数字与编号 **IBM Plex Mono**，执业证号、回执号、条目编号全部等宽，呈现「档案编号」的功能感。

**中文不加载 Web Font**：一套中文字重动辄数百 KB，是移动端首屏体积的头号杀手。这里用本地宋体/苹方，配合 `font-display: swap` 的拉丁字体，首屏无字体阻塞。若需跨平台完全一致，可自托管 Noto Serif SC 子集（只保留站内实际用字）。

### 字号跳跃：4.5 倍，不做 1.5 倍

正文 17px → 小节标题 48px → 主标题 62px。中间没有过渡尺寸，层级一眼可辨。

### 唯一难忘元素：人从夜里浮出来

首屏右侧的竖幅人像，是整站的第一记忆点。关键在于它**看起来不像一张图片**——照片的左缘、顶边、底边各有一道渐变，把灰蓝背景溶进夜墨，只剩人像立在那里，没有矩形边界。

第二个记忆点是姓名下方那行 `ZHANG XINSHI`（等宽字、0.46em 字距、黄铜色），第三个是 `医疗纠纷` 下的**手绘下划线**（SVG 描边动画），全站只出现这一处。

v1 的执业档案卡（倾斜纸卡 + 装订孔 + 红私章）在 v2 首屏取消。它承载的信息——执业机构、职务、证号、仲裁员身份——已由首屏资历横带与简介页「六项可以核实的任职」完整承接，再放一张卡片就是重复。`.dossier` 的样式仍在 `main.css` 里，需要时可随时取回。

### 一张照片，三种用法

张律师这张形象照是竖幅（1279×1917，约 2:3），灰蓝背景（采样 `#4A5861`）、人物居中偏右、右上打光。它被用在三个地方，处理方式各不相同：

| 位置 | 用法 | 处理 |
|---|---|---|
| **首屏**（桌面） | 竖幅人像带，占 42% 宽、满视口高 | 左/上/下三道渐变溶入夜墨；`brightness(.9)` 压暗，缩小灰蓝与夜墨的明度差 |
| **首屏**（≤900） | 移到最上，16:10 横构图 | 追加左右两道渐变，让照片向两侧延展出去 |
| **og:image** | 1200×630 分享卡，右侧 430px 人像 | 同一套渐变参数，与首屏视觉一致 |

**为什么不用抠图**：背景是均匀灰蓝、主体是深色西装，两者都有大块暗部，自动抠图会在肩膀和头发边缘留下灰边，人工修图成本又高于收益。既然底色能被渐变「吃」进夜底，就不需要抠。

**三个必须知道的坑**（都踩过）：

1. `<figure>` 默认有左右 **40px** 外边距。不写 `margin: 0`，照片四周会莫名其妙多出一圈底色——在深色底上就是四道明显的缝。
2. `object-position` 不能按桌面调完就走。同一个 `16%`，在 605×870 的竖容器里是好的，在 768×480 的横容器里会把头顶切掉。现在是 `52% 8%`，兼顾竖、横两种容器。
3. 竖幅照放进横容器会裁掉大半。≤900 时容器改用 `aspect-ratio: 16/10` 而不是固定 `vh`——固定视高在 768 宽下会压成 2:1 的扁条，人脸直接怼到镜头前。

原图与派生文件：

```
assets/img/
├── zhang-portrait-orig.jpg    1279×1917 原件（96 KB），勿删
├── zhang-portrait-1400.jpg    首屏用（104 KB）
├── zhang-portrait-900.jpg     移动端 / og 图底（54 KB）
└── og-cover.jpg               1200×630 分享卡（76 KB）
```

**待补**：文档要求「职业形象照 ≥3 张（长边 ≥3000px，纯色 + 办公场景各半）、办公环境照 6 张」。目前只有这一张，且长边 1917 未达 3000。首屏在 2× 屏上会略软，建议补拍后替换 `-1400` 与 `-900` 两个文件即可，CSS 不用动。

### 动效：一条时间线，不是零散微动效

首屏按 `eyebrow → 三行标题（0.1/0.22/0.34s）→ 副文 → 按钮 → 卡片 → 印章` 的顺序依次入场，其余区块用 IntersectionObserver 做一次性淡入上移。全部 200–900ms，`prefers-reduced-motion` 下整站关闭。

### 响应式：1100 / 900 / 560 三级（首屏另有独立规则）

**首屏**是这次改动的重点，三个尺寸三种构图：

| 视口 | 构图 | 照片处理 |
|---|---|---|
| >1100 | 左文右图，图占 42%，满视口高 | 左/上/下三道渐变溶入夜色 |
| 900–1100 | 左文右图，图占 40%，资历带转 2×2 | 同上，取景随容器微调 |
| ≤900 | **照片移到最上**（16:10），文字在下 | 补左右两道横向渐变，照片向两侧延展 |
| ≤560 | 同上，照片固定 `37.5vh` | 同上 |

为什么 ≤900 让照片置顶而不是垫底：手机上先看到人脸再读主张，是「先确认这是谁」的次序；反过来会让首屏只剩一大段字。

`37.5vh` 这个数不是随手取的——它让金色主按钮刚好停在底部常驻条的折线以上（实测 `btnBottom 765 < dockTop 768`）。按钮被裁一半是最伤转化的细节。

**正文区**沿用 v1：

- ≤1100：双栏转单栏
- ≤900：业务卡 3→2 列，证据表格转单列
- ≤768：导航转下拉面板（深色底）、表单全宽堆叠、底部常驻「打电话 / 在线咨询」、区块间距 8rem→4rem
- ≤560：字号再降一档，内边距收到 16px

**四个主断点 × 五个页面实测横向溢出为 0**（390 / 768 / 1024 / 1440）。

---

## 三、文件结构

```
zhangxinshi-site/
├── index.html            首页：夜墨首屏（巨字姓名 + 人像 + 资历横带）/ 6 项任职 / 3 条业务路径 / 2 案例 / 4 步流程 / FAQ 摘选
├── about.html            律师简介：三段履历时间轴 / 6 项任职 / 三迁沿革 / 同名区分
├── services.html         专业领域：患者维权 10 情形 + 5 步流程 + 收费 3 模式 / 鉴定 5 缺陷 + 5 路径 / 机构合规三列表 / 医美三条路径
├── cases.html            成功案例：责任比例 10%→70%、鉴定意见撤回，含裁判要旨与脱敏声明
├── contact.html          联系与咨询：4 必填表单 + 联系方式 + 地图位 + 七问七答（FAQPage schema）
└── assets/
    ├── css/tokens.css    ★ 全站设计变量唯一来源（纸面/夜墨/黄铜/陶土 + 字号 + 间距）
    ├── css/main.css      组件与布局（含首屏 Stage 与全部响应式规则）
    ├── js/main.js        导航面板 / 滚动显现 / 表单校验与成功态
    └── img/              人像三个尺寸 + og 分享卡（见「一张照片，三种用法」）
```

改颜色只改 `tokens.css`，改文案在对应 HTML 里找中文。每页的 `header` / `footer` / 底部 CTA 是静态复制的——**不要改成 JS 注入**，否则 AI 抓取器（多数不执行 JS）拿到的是空壳，GEO 效果直接归零。

---

## 四、上线前必须替换或确认的 9 项

按原需求文档第 9 节的资料清单，以下内容目前是**占位或待定**，不能直接上线：

| # | 位置 | 现状 | 需要 |
|---|---|---|---|
| 1 | 全站电话 `0755-8888 0000` | 占位 | 律所对外号或助理号（原文档 D7 未定，**不要用张律师个人手机**） |
| 2 | 邮箱 `office@zhangxinshi.com` | 占位 | 实际收件邮箱 |
| 3 | 地址「中国人寿大厦 33 楼」 | 缺房号 | 补齐房号与邮编 |
| 4 | 案例页 | **未出现任何赔偿金额** | 原文档指出两处口径不一（110 万 / 79.6 万），须张律师确认唯一数字与算法后再加；当前用「责任比例」表述规避 |
| 5 | 案例公开 | 已写「取得书面同意」 | 若同意书未取得，需改为「类型化案例解析」（合并改写、不指向特定案件） |
| 6 | 三迁沿革时间 | 只写了顺序，未写起止年月 | 原文档标为 ❌待补，补齐后替换 `about.html` 履历段 |
| 7 | 顾问单位 | 写「多家深圳公立三甲（含三甲综合与妇幼专科）」 | 若合同允许具名，替换为具名版本（B 端最强信号） |
| 8 | 头像 / 办公照 / 律所 logo | 全部用排版与图形代替，无照片 | 职业形象照 ≥3 张、办公环境 6 张（原文档要求长边 ≥3000px） |
| 9 | 免责声明 / 隐私政策 | 页脚链接指向 `#` | 需补 `legal/disclaimer.html`、`legal/privacy.html` 两份正式文案 |

另外：`robots.txt`、`sitemap.xml`、ICP 备案号（页脚需露出）这三项也还没做。

---

## 五、与需求文档的对接说明

**技术栈**：文档 5.1 选的是「Astro 静态生成 + 手写 CSS + tokens.css，不引 Tailwind」。本稿按这个方向落地为**纯静态 HTML + tokens.css 变量**，没有引入任何框架或 CSS 库——好处是可以直接丢进 Nginx，也可以原样搬进 Astro（把每页 body 内容套进 `Base.astro`，`header`/`footer` 提成组件，`site.ts` 里的 NAP 信息替掉页面里的硬编码即可）。

**URL 规范**：文档要求栏目页用目录式 `/about/`、`/services/`。当前文件名是 `about.html` 这种平铺形式，方便本地双击预览。上线前按 Nginx 的 `try_files` 规则转目录式，或直接把文件移进 `about/index.html`，站内链接统一改一遍即可。

**结构化数据**：已写入 `Person`（`@id: /#person`）、`LegalService`（`@id: /#legalservice`）、`FAQPage`（七问）、`Article`（两案例），`@id` 全站复用，可直接过富媒体测试。

**表单**：前端已实现 4 项必填校验（称呼 2–20 字且禁 URL/emoji、手机号 `^1[3-9]\d{9}$`、身份必选、一句话 10–500 字）、隐私勾选强制、耗时 <3s 拦截、「保证胜诉」类文案前端提示改写、提交后展示回执号（`ZS20261030A001` 格式）。当前是本地模拟，接后端时把 `main.js` 里 `setTimeout` 那段换成 `fetch('/api/consult')` 并对齐文档 7.2 的 400/409/429/500 四种错误态即可。

---

## 六、自检结果

| 项目 | 结果 |
|---|---|
| 字体非 Inter/Roboto/Arial | ✅ 宋体系 + Fraunces + Instrument Sans |
| 无紫白渐变 | ✅ |
| 背景非纯白/纯灰 | ✅ 三层径向暖光 + SVG 纸纹颗粒 |
| 字号跳跃 ≥3 倍 | ✅ 17px → 62px（3.6x） |
| 单一难忘元素 | ✅ 「人从夜里浮出来」——人像无边框溶入夜墨，全站唯一 |
| 横向溢出（390/768/1024/1440 × 5 页） | ✅ 全部为 0（改动后复测） |
| 首屏主按钮不被底部常驻条遮挡 | ✅ 390×844 实测 765 < 768 |
| 人像头顶不被裁切 | ✅ 390 / 768 / 1024 / 1440 四档取景均已核对 |
| og:image 分享卡 | ✅ 5 页均挂载 1200×630，微信转发有缩略图 |
| 表单可键盘操作、错误逐字段提示 | ✅ |
| `prefers-reduced-motion` | ✅ 全站动效可关 |
| 语义化标签 / alt / 面包屑 | ✅ |