Sprylo 是一套面向数码产品、电子设备和配件商店的五页响应式 HTML 电商模板。它覆盖首页展示、商品浏览、商品详情、购物车和联系询盘等前端页面，适合用作科技零售商城的视觉原型或静态前端基础；商品数据、账户、订单、支付和消息提交仍需另行接入后端。
模板由原生 HTML、CSS 和 JavaScript 组成，没有 npm 安装、构建脚本或前端框架依赖。解压后可从 index.html 查看首页，再根据项目需要修改品牌、商品文案、图片、导航和联系方式。
五个页面组成完整的商城展示路径
| 页面 | 文件 | 主要内容 |
|---|---|---|
| 首页 | index.html |
搜索栏、分类导航、五卡 Bento 首屏、趋势商品、折扣横幅、品类入口、推荐商品和订阅区域 |
| 商品目录 | shop.html |
分类、价格、品牌、评分和库存筛选外观，以及排序栏、三列商品网格和分页 |
| 商品详情 | product.html |
五张缩略图、主图、价格、颜色与配置选项、数量控件、规格、评价分布和关联商品 |
| 购物车 | cart.html |
商品行、数量调整、优惠码输入、折扣明细、订单汇总和支付方式图标 |
| 联系页面 | contact.html |
联系信息、批量采购提示、咨询表单和四项简短问答 |
这五个页面主要解决商城前端的内容组织和界面展示问题。首页负责引导用户进入商品与品类，目录页承担浏览入口，详情页集中呈现购买决策信息，购物车和联系页则为后续订单及询盘流程预留界面。
靛蓝主色与五卡 Bento 首屏构成视觉重点
首页先用深色促销条、带搜索框的主导航和分类导航建立典型电商结构，首屏再使用五张不同色彩的商品卡片组成 Bento 网格。主卡采用深蓝渐变，其余卡片分别使用紫色、橙色、绿色和近黑色，使音箱、手表、手机、耳机与相机等演示商品形成清晰的视觉分区。
全站颜色和排版变量集中在 assets/css/styles.css 顶部。纸张白 #FFFFFF、浅灰背景 #F8FAFC、深色文字 #0F172A 和靛蓝主色 #4F46E5 共同控制主要界面；--card-blue、--card-purple、--card-orange、--card-green 与 --card-black 则对应首屏卡片。修改这些变量，可以先完成整体换色，再处理局部组件。
原生脚本提供轻量交互，但不处理商城数据
- 移动菜单：脚本负责打开和关闭抽屉导航，并同步
aria-hidden、aria-expanded与页面滚动状态，按 Esc 也可以关闭菜单。 - 商品图片：详情页点击缩略图会替换主图地址，便于展示同一商品的不同角度。
- 数量控件：商品详情页和购物车中的加减按钮会修改输入框数值，并把最小数量限制为 1。
- 选项状态：颜色、规格和首页分类标签只切换当前选中样式；分类标签不会真正更换商品数据。
目录页虽然已经摆放分类、价格、品牌、评分和库存复选框，但源码没有相应的商品筛选逻辑。首页搜索会阻止表单提交，账户、收藏及部分页脚链接仍使用占位地址；购物车数量变化也不会持久保存或重新计算真实订单数据。因此，这些界面不能等同于已经完成的电商系统。
字体、商品图片与响应式规则需要部署前检查
标题、正文和辅助标签分别使用 Plus Jakarta Sans、Outfit 与 Roboto Mono，默认从 Google Fonts 加载。商品摄影通过 Unsplash 远程地址调用，并非打包在本地的正式商品素材。用于实际项目时，应换成有明确使用权的商品图片，并根据访问环境决定是否把字体与图片改为本地托管。
样式表包含桌面、平板和移动端的媒体查询，并为 prefers-reduced-motion 提供减少动态效果的处理。原包说明给出的 375、768、1024 和 1440 像素可作为检查参考；替换中文商品名、价格、促销文字和真实图片后，仍需重新查看导航、卡片、筛选栏、购物车表格与表单在各宽度下的实际表现。
联系、订阅与购买流程都需要接入后端
联系页表单包含姓名、邮箱、电话、主题、订单号和留言等输入项，但提交时只阻止默认请求并修改按钮文字，没有邮件接口、数据库、成功回执或反垃圾机制。首页订阅表单采用相同的演示方式，搜索栏也没有查询数据源。
若用于真实商城，至少需要补充商品数据与库存、站内搜索、账户与收藏、购物车持久化、优惠码校验、订单与支付、表单提交、隐私提示及错误反馈。只需要产品目录或营销演示时，则可以保留静态架构，删除无用的账户和交易入口，把重点放在商品展示与询盘转化上。
建议从品牌变量和演示数据开始修改
- 先打开五个 HTML 文件，确定项目需要保留的页面、导航入口和商品流程。
- 修改 CSS 中的主色、卡片色、字体和间距变量，建立统一的品牌视觉。
- 替换 Sprylo 名称、促销信息、商品名称、价格、库存、评价、联系信息和页脚内容。
- 把远程演示图片与字体改为项目可稳定使用的资源，并补充准确的 ALT 文本。
- 根据实际范围接入搜索、筛选、购物车、订单、支付、订阅和联系表单后端。
- 在手机、平板和桌面宽度下检查导航、商品网格、详情选项、购物车和表单，再部署到正式环境。
暂无评论内容