Watch 是一套面向腕表品牌、定制手表工作室与精品门店的单页网站模板。它以黑色背景、机械表特写和窄体标题突出产品，配有系列切换、图文轮播与响应式导航，适合制作品牌展示页或新品宣传页。
更适合先展示产品、再引导咨询的品牌网站。 如果手头已有深色产品照片和少量主推款式，这套布局比较容易沿用；在线订购、支付和订单管理仍需另接业务服务。
页面结构
页面从大幅产品特写开始，依次进入门店介绍、产品系列、品牌标志、客户评价和页脚。各区块的用途比较清楚，可以按自己的内容删减：
| 页面区域 | 现有布局 | 可以放什么内容 |
|---|---|---|
| 产品首屏 | 左侧大标题与双按钮，右侧腕表特写 | 主推款式、品牌主张、咨询入口 |
| 门店介绍 | 左侧产品背景，右侧三屏淡入轮播 | 品牌故事、定制工艺、到店服务 |
| 产品系列 | Latest／Popular 两个标签，各含四屏轮播 | 新品与畅销款，桌面布局每屏三张卡片 |
| 品牌与评价 | 品牌标志陈列、三屏客户评价轮播 | 真实合作资料与客户反馈 |
| 页脚 | 联系信息、服务菜单、邮箱订阅框 | 联系方式、服务说明及订阅入口 |
固定导航通过页内锚点进入 Watches、Store 和 Contact；其中 Contact 对应页脚信息区域，没有独立联系页面。整套模板实际只有 1 个 HTML 页面。
产品图与视觉风格
首屏用白色标题、棕铜色描边按钮与大幅机械表特写形成对比，向下滚动后，图文方向换成左图右文。产品轮廓、机芯与表带细节是画面的重点。
换成自己的品牌时，先留意两件事：
- 图片背景与主体位置：首屏的
header-bg.png贴在右上角，使用contain保持完整比例。接近黑色的背景更容易衔接原有画面，直接换成白底商品照会出现明显分界。 - 中文标题的长度：原版使用 Roboto Condensed 窄体字。改成中文后，要重新安排字数、换行与按钮位置，避免长标题挤占产品画面。
门店区同样使用背景图，替换时一起检查 store-bg.png。保留相近的主体位置，比只换文件名更容易维持原来的图文关系。
交互与功能边界
- 已经具备：页内导航、移动端折叠菜单、Latest／Popular 标签切换，以及产品、门店与评价轮播。
- 仍是占位入口：Design & Order、Request Virtual 和商品卡片没有接到实际订购流程；页脚账户、物流、退款等菜单也没有对应内页。
- 需要另外接入：商品详情、购物车、结账、订单追踪和手表定制器。邮箱订阅也没有保存邮箱或发送邮件的后端；本站演示提交时只提示不会发送信息。
Latest 与 Popular 并不会自动按上架时间或销量排序。 两组标签使用重复的三款示例腕表，需要分别整理每一屏的图片、名称与价格，不能只替换第一屏。
内容中还有几处需要一起清理：门店介绍残留了篮球新闻文字，客户姓名、评价、品牌标志及电话号码也都是示例。把门店三屏换成品牌故事、工艺和到店服务后，这块布局才有实际的介绍价值。真正启用订阅时，还需补齐隐私告知。
修改与部署入口
只换文案、图片和咨询链接
从现成的 public/ 开始即可，HTML、CSS 和脚本已经生成，不必先安装构建依赖。
- 改页面内容：编辑
public/index.html，替换品牌名、标题、商品卡片、联系方式及按钮地址。 - 换产品图片：使用
public/assets/img/gallery/，同步检查背景定位和卡片留白。 - 部署静态页面：把
public/作为站点目录，保留其中assets/与vendors/的相对关系。
继续调整主题或维护页面结构
文件包另附 Pug、SCSS 与 Gulp 开发文件，适合需要反复调整布局和主题的情况：
- 调整首页区块：从
src/pug/index.pug及其引入的区块文件入手。包内ShopCategory.pug未在首页启用，不属于现成的商品分类功能。 - 修改颜色与样式：在
src/scss/_user-variables.scss和src/scss/_user.scss放覆盖设置；容器宽度、断点与轮播样式还可查看主题变量。 - 调整交互：导航滚动状态、设备识别和页内滚动在
src/js/，标签页与轮播由 Bootstrap 组件处理。
使用 Gulp 修改源码后，要部署重新生成的文件，避免线上仍使用旧的 HTML 与样式。
包内 Bootstrap 脚本为 5.0.0-beta3，属于早期测试版；长期维护业务网站时，需要安排依赖升级与相关组件复核。Roboto Condensed 通过外部字体服务加载，若要改变字体加载方式，也要检查替换后的标题宽度与换行。
暂无评论内容