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

基于 HTMLECharts 的宠物领养服务中心静态站设计与实现一、前言流浪动物救助是这几年热度持续上升的公益话题。一线救助站点的普遍困境不在救助本身而在信息管理动物档案靠纸质登记、领养申请靠微信群接龙、领养后的回访全凭自觉信息断层直接影响了领养成功率与领养质量。一个面向公众的领养服务窗口至少要能回答三个问题现在有哪些动物可以领养、领养需要经过哪些环节、领养之后机构是否真的在做回访。本文分享一个以「宠物领养服务」为核心业务的静态站实现萌归宠物领养服务中心。项目采用 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?typecat直达猫咪页签。狗狗页签下的三只在养犬只卡片按毛色分别绘制了不同的剪影形象领养详情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 让无后端环境下也能跑通申请闭环。项目结构清晰、零依赖、断网可用既可以作为前端入门者的综合练习范本稍作扩展接入后端接口后也能演进为真实的救助机构信息平台。如果在实现类似页面时遇到问题欢迎评论区交流。宠物领养服务中心静态网页 HTMLECharts 源文件原生 JS 无后端离线可用/网页设计作业