企业官网建设流程全解析

基于 HTML+ECharts 的宠物领养服务中心静态站设计与实现

一、前言

流浪动物救助是这几年热度持续上升的公益话题。一线救助站点的普遍困境不在救助本身，而在信息管理：动物档案靠纸质登记、领养申请靠微信群接龙、领养后的回访全凭自觉，信息断层直接影响了领养成功率与领养质量。一个面向公众的领养服务窗口，至少要能回答三个问题：现在有哪些动物可以领养、领养需要经过哪些环节、领养之后机构是否真的在做回访。

本文分享一个以「宠物领养服务」为核心业务的静态站实现：萌归宠物领养服务中心。项目采用 HTML + CSS + 原生 JavaScript + 本地化 ECharts 完成，不依赖任何后端服务与联网资源，浏览器双击打开即可完整演示，适合作为网页设计课程综合练习、前端交互练手项目，以及救助类公益机构的门户原型参考。整套业务围绕「救助入所 — 检疫观察 — 开放领养 — 试养回访」的真实救助流程展开，从题材上就与常见的宠物商店类系统拉开了区隔：这里没有商品与交易，只有待归家的动物与一套可追溯的领养服务流程。

二、技术栈与整体结构

项目零依赖、零构建，全部资源本地化：

• 页面结构：7 个原生 HTML 页面，语义化标签组织；
• 样式方案：两套 CSS 承载，common.css定义设计令牌与全局组件，pages.css承载各页面专属布局；
• 图表方案：ECharts 5.5.1 本地化到vendor/目录，无 CDN 引用，断网环境图表照常渲染；
• 数据方案：data.js作为单一数据源，配合localStorage持久化用户提交的领养申请；
• 视觉素材：全部动物形象由 JavaScript 程序化生成 SVG 剪影，不含任何外部图片文件，版权零风险。

├── index.html # 服务中心总览（统计卡 + 月度领养趋势 + 在养构成） ├── pets.html # 待领养牒库（猫/狗/兔筛选 + 免疫情况过滤） ├── pet-detail.html # 领养详情（动物档案 + 健康记录 + 领养条件） ├── apply.html # 领养申请（居住条件 + 养宠经验 + 领养承诺） ├── progress.html # 申请进度（提交→初审→家访→试养→正式领养时间线） ├── visits.html # 回访记录（已领养案例图文列表） ├── about.html # 关于我们（机构介绍 + 领养须知问答） ├── css/ # 设计令牌 + 页面样式 ├── js/ # 种子数据 + 公共工具 + 各页逻辑 └── vendor/echarts.min.js # 本地化图表库

视觉上走「鸢尾莓圃」的莓果色语义：主色为鸢尾紫（#6e69af）承载操作与链接，深桑葚紫（#5a1e4b）压住导航与一级标题；辅色取低饱和的莓雾（#ece4f2）用于导航激活药丸与徽章底色，鸢尾紫作屋檐描边与当前环节圆点的点缀，页面背景铺一层莓调的暖白（#f5f2f7），动物鼻舌细节以桑葚紫（#5a1e4b）点缀，全站以 CSS 变量做设计令牌统一管理。签名元素是一枚「屋檐 + 爪印」徽章——鸢尾紫的屋檐轮廓寓意家，桑葚紫的爪印落在屋檐之下寓意归家，出现在每一页的左上角品牌位与关于页的机构名片中。动物形象没有使用任何照片，而是按每只动物的毛色数据由 SVG 程序化绘制剪影，同一套生成函数覆盖猫、狗、兔三类形态，毛色、胸毛、耳朵形态各不相同。

总览页首屏即给出四个关键运营数字：当前在养 9 只、累计领养成功 87 只、待审申请 14 份、累计回访 63 次。下方以双图联动呈现数据——左侧 ECharts 组合图用莓藤紫柱系列表示近 12 个月每月领养成功只数，鸢尾紫折线表示累计走势；右侧环形图以鸢尾紫、莓藤紫、桑葚紫三色区分展示在养动物的猫狗兔构成。图表初始化时关闭了动画，保证截图与投影场景下画面稳定。

三、功能设计

七个页面覆盖领养服务的完整业务闭环，功能划分如下：

服务中心总览（index.html）：统计卡、月度领养趋势图、在养构成环形图、五步救助领养流程说明、精选待养卡片。所有统计数字不是写死的常量——在养只数、待审申请份数均由种子数据实时推导，与牒库、进度页的口径严格一致。

待领养牒库（pets.html）：按猫咪/狗狗/兔兔三个类型页签筛选，叠加免疫情况下拉过滤（已完成免疫/接种中），实时显示结果数。卡片上直接呈现品种、年龄、体重、免疫进度与性格标签，支持 URL 参数预选筛选（如pets.html?type=cat直达猫咪页签）。

狗狗页签下的三只在养犬只，卡片按毛色分别绘制了不同的剪影形象：

领养详情（pet-detail.html）：从卡片进入单只动物的完整档案，左侧为档案卡（性别、年龄、体重、免疫、绝育、驱虫、入所日期、救助来源），右侧三段依次是性格与故事、逐条健康记录表（入所体检、每针免疫、手术与复检）、领养条件清单（年龄与住所要求、封窗防护、全家同意、回访承诺、领养协议与保证金退还规则）。页面底部直接挂「提交领养申请」入口，与申请页通过 URL 参数联动预选。

领养申请（apply.html）：表单设计对齐真实领养机构的审核要件——居住条件（自有住房/租房已获房东同意/与家人同住）、安全防护措施、家庭成员意见、养宠经验、是否接受定期回访，以及四项必须全部勾选的领养承诺（科学喂养不遗弃、定期免疫驱虫、签订领养协议、同意保证金规则）。手机号按 11 位校验，必填项逐项定位标错，回访承诺未选「接受」时直接阻断提交——这是领养业务区别于普通表单的关键约束。

申请进度（progress.html）：凭申请编号查询五环节时间线：提交申请 → 资格初审 → 上门家访 → 试养过渡 → 正式领养。已完成环节打对勾并附日期，当前环节以鸢尾紫圆点高亮，未到环节灰显待办，每个环节都附带审核要点说明。页面同时提供近期申请概览表，申请人电话做了脱敏展示，点击任意一行即可切换查询。

四、数据与状态设计

没有后端与数据库，并不意味着可以放弃数据设计。项目把三类业务实体集中在data.js中维护：动物档案（15 条，含 9 只在养与 6 个成功案例）、领养申请（18 条种子申请，覆盖五个环节的全部状态）、回访记录（8 条近期公开回访）。每条动物档案携带毛色三阶色值与性格标签，既驱动卡片展示，也驱动 SVG 剪影的生成配色。

统计口径的统一是这套数据的重点：

• 「待审申请」定义为处于提交申请、资格初审、上门家访三个阶段的申请之和，由函数在运行时对申请集合计数得出；
• 趋势图 12 个月的领养只数合计恰好等于「累计领养成功 87 只」，与总览统计卡、关于页的机构数字三方对账一致；
• 用户在申请页提交的申请写入localStorage，进度页查询时与种子申请合并，新申请编号基于现有最大编号自增，形成「提交 → 拿到编号 → 查进度」的真实闭环。

状态持久化只作用于用户产生的申请单，种子数据保持只读，这样任何一次刷新演示都不会把数据「演坏」，又能让参观者亲手走完一次提交流程。

再补一笔视觉侧的工程细节：SVG 剪影生成函数按动物类型走三套模板——猫的三角耳与额头纹、狗的垂耳与莓藤紫项圈、兔的长耳与绒尾，均为参数化绘制；毛色则来自档案数据中的三阶色值（主色、浅色、深色），同一只动物在牒库卡片、详情档案、回访列表与申请页侧栏中形象完全一致，视觉口径与数据口径同样统一。这套思路也意味着新增一只动物只需追加一条数据记录，不需要任何作图工作量。

五、系统演示

完整的演示动线大约五分钟：从总览页的统计与趋势图切入，进入牒库切换猫狗兔筛选查看动物卡片，点开任意一只进入档案详情阅读健康记录与领养条件，跳转申请页填写并提交表单拿到申请编号，最后凭编号（或使用页面预置的演示编号）在进度页查看五环节时间线。

以演示编号 LN-2026-0105 为例，该申请已通过初审与家访，当前正处于试养过渡环节：

回访记录页以图文卡片展示已领养案例：领养人姓氏、领养日期、本次回访日期与轮次、回访评级（优秀/良好）与现场记录摘要，部分评级旁附有后续观察建议，直接回应了公众对「领养之后怎样了」的关切：

关于我们页承载机构介绍、救助与领养的累计数字、领养须知四问（领养费用、审核时长、家访回访的意义、健康保障范围），右侧机构名片位置是签名徽章的完整形态：

整站页面在 1280×800 视口下无横向滚动，全部交互反馈均为正式业务表达，双击index.html即可离线完整演示。导航、页脚、按钮悬停、表格斑马纹、表单聚焦描边等细节在同一套设计令牌约束下保持一致，多页面跳转后也不会出现风格断裂；图表在窗口尺寸变化时随容器自适应重绘，投影与录屏场景下表现稳定。

六、小结

本文实现的萌归宠物领养服务中心，以原生 HTML/CSS/JavaScript 加本地化 ECharts 完成了领养服务全流程的静态呈现：七页功能覆盖总览统计、牒库筛选、档案详情、申请提交、进度追溯与回访公示，ECharts 承担月度领养趋势与构成分析，SVG 程序化剪影解决了公益题材的视觉素材难题，localStorage 让无后端环境下也能跑通申请闭环。项目结构清晰、零依赖、断网可用，既可以作为前端入门者的综合练习范本，稍作扩展接入后端接口后，也能演进为真实的救助机构信息平台。

如果在实现类似页面时遇到问题，欢迎评论区交流。

宠物领养服务中心静态网页 HTML+ECharts 源文件（原生 JS 无后端离线可用/网页设计作业）