一、核心思路：去杂乱三铁律
对标参考站（信息量大但杂乱），本方案用三条铁律重新组织信息架构
- 首页只做「导航 + 决策入口」，不堆文章；6 大落户方式用卡片矩阵呈现，让用户 3 秒找到自己的路。
- 文章统一收进「资讯中心」，各方式页只放「条件对照表 + 3-5 条 FAQ」，决策信息一眼看完。
- 积分计算器 + 落户自测是全站转化钩子，首页双入口、方式页底部二次入口，串成漏斗。
认知→
匹配→
自测→
咨询
二、站点结构：15 页多页官网
首页 + 6 方式页 + 2 工具页 + 案例 / 关于 / 联系 / 资讯 / 详情 / FAQ
🏠
首页
导航 + 决策入口 + 双工具入口
🏙️
居转户
条件对照表 + FAQ
🎓
人才引进
条件对照表 + FAQ
🌏
留学生
条件对照表 + FAQ
🎒
应届生
条件对照表 + FAQ
💞
投靠
条件对照表 + FAQ
📋
居住证积分
条件对照表 + FAQ
🧮
120分积分计算器
工具页
✅
落户资格自测
工具页
🏆
成功案例
按 5 类方式筛选
🏢
关于我们
简介+优势+流程
📞
联系我们
留资表单
📰
资讯中心
分类筛选文章
📄
资讯详情
文章模板
❓
FAQ 总页
四大类手风琴
📌 说明：以上 15 个页面在初版中已全部构建并通过联调，站点根目录为 shanghai-luohu-site/，纯静态可直接上传服务器。
三、两大交互工具（转化核心）
已设计到规则表级，可直接落地，免费展示不强制留资
🧮
120 分积分计算器
依据沪府规〔2022〕21 号，覆盖年龄 / 学历 / 职称（二选一取高）/ 社保年限 / 社保基数 / 紧缺专业 / 配偶等完整分值表，内置 calcScore() 计算逻辑；分数未达标时自动给出「凑分建议」。
已设计规则表✅
落户资格自测
6 步问卷 → 按政策判定规则输出「推荐落户方式 + 匹配度徽章 + 下一步动作」，把模糊需求转成明确线索，直接导向咨询。
已设计规则表四、设计系统
统一组件、零加载、易改品牌
- 主色蓝 #1A5FD0（信任 / 政务感）；琥珀橙仅用于 CTA 与数据高亮
- 字体系统字体栈，零外部字体加载，首屏更快
- 间距8px 基准间距体系，视觉节奏统一
- 组件按钮 / 卡片 / 时间轴 / 手风琴 / 表单 统一组件库
五、技术栈与默认决策
纯静态、可直传服务器、占位信息集中可替换
- 技术纯静态 HTML + CSS + 原生 JS，无构建、无后端
- 复用header / footer 用 partials.js 注入复用，改一处全站生效
- 品牌名称 / 电话 / 微信用 <!-- TODO 替换 --> 标注；主色只改 variables.css 一处
- 留资表单纯前端校验 + 提交后提示加微信，页面常驻二维码 / 电话；预留 data-endpoint 便于接金数据 / 自有 API
- 政策口径按 2025-12-01 上海新政，页脚统一标注「以官方最新发布为准」
六、联调结果（全部通过）
- 15 个页面结构统一（header / footer 均由 partials.js 注入）
- 内部 .html 链接全部存在，零死链
- 5 个 JS 文件 node --check 语法全部通过
- 本地服务器逐页探测，全部 HTTP 200
- 顺带修复：main.js 案例筛选改为通用 [data-cat]（资讯页复用同一套）；components.css 的 .toast transform 笔误
七、交付说明与上线占位
| 项目 | 说明 |
|---|---|
| 站点根目录 | shanghai-luohu-site/，纯静态，可直接上传服务器 |
| 本地预览 | http://127.0.0.1:8123（重启：进入站点目录运行 python -m http.server 8123） |
| 品牌替换 | 集中在 assets/js/partials.js 的 BRAND 对象（名称/电话/微信/地址/ICP），改一处全站生效 |
| 内容占位 | 案例、资讯文章、about 数据均为占位，需替换为真实信息 |
| 留资对接 | contact 表单的 data-endpoint 填入金数据 / 腾讯问卷 / 自有 API 即可自动收集 |