婴儿护理产品品牌展示网站-BabyCare

BabyCare 是主打婴幼儿护理产品的品牌官网，面向 0-24 个月婴幼儿家长，主要用于展示品牌全线产品、塑造品牌信任感、引导用户咨询与购买，打造一站式母婴产品浏览与咨询服务平台。
核心功能模块
首页：包含品牌主视觉展示、产品分类导航、热销商品展示、用户口碑评价以及转化引导模块。
产品页：展示 9 款核心产品，支持喂养、服装、育儿、尿布、玩具多维度分类筛选，具备加入购物车交互功能。
关于页：展示品牌发展故事、品牌核心理念，涵盖有机材质、合规采购、安全检测、可持续发展优势，同时展示品牌团队信息。
服务页：提供月度母婴订阅礼盒、婴儿信息登记、线上儿科咨询、育儿专题工坊、产品以旧换新、定制礼品服务等特色功能。
博客页：展示 4 篇专业育儿资讯文章，自带发布日期、内容分类、内容摘要信息。
联系页：配置完整咨询表单，可填写姓名、邮箱、主题、留言内容；同时展示品牌官方邮箱、联系电话、门店地址与营业时间等企业信息。
业务流程
用户访问网站首页，浏览产品分类，查看对应产品详情，可将商品加入购物车，数据通过本地存储持久化保存，用户可提交咨询表单并获取提交成功反馈。全站采用统一导航体系，顶部导航固定展示，移动端适配汉堡折叠菜单，实现全页面流畅跳转与访问。

整体架构和设计思路及各模块技术栈
项目采用纯静态架构，无需后端服务器，全部页面为静态 HTML 文件。
结构与语义化方面，使用 HTML5 语义标签搭建页面结构，包含导航、区块、文章、页脚等标签，适配 SEO 优化标准。
样式系统采用 CSS3 自定义属性实现全局主题色彩统一管理，通过 Flexbox 和 Grid 布局完成全站响应式设计，利用 CSS 关键帧动画实现页面各类微交互效果。
交互逻辑基于原生 JavaScript ES6 + 开发，实现移动端菜单、表单验证、本地存储购物车、滚动入场动画、消息提示通知等全套交互功能。
整体设计系统采用柔和粉色系品牌配色，搭配手写体标题与系统正文字体，统一全站圆角、阴影、间距规范，保证视觉风格一致。
个人负责模块与工作成果
独立完成整套品牌网站的全流程设计与开发工作，完整落地全部功能与页面。
完成首页、产品页、关于页、服务页、博客页、联系页共 6 个页面的设计还原与前端开发。
封装实现导航栏、内容卡片、功能按钮、表单、页脚等 12 个可复用 CSS 响应式组件。
开发三大核心 JS 交互模块，包含本地持久化购物车系统、表单验证与模拟提交功能、页面滚动入场动画效果。
自定义全站样式规范，定义 18 项 CSS 全局变量，统一管理主色、辅助色、强调色、阴影、圆角、字体等样式参数。
实现全站全尺寸响应式适配，兼容 320px 至 1440px 所有主流设备屏幕。
开发难点问题与解决方案
无框架项目多页面导航状态难以统一，通过在所有页面配置统一导航结构，结合 active 样式类标记当前所在页面，实现导航高亮状态同步。
移动端菜单无法点击页面空白区域自动关闭，通过全局事件委托监听页面点击事件，判断点击区域范围，实现菜单自动收起逻辑。
解决多页面购物车数据无法共享的问题，通过 localStorage 存储购物车数据，封装统一的商品添加函数，实现跨页面购物车数据同步。