功能描述
1.查看指定品牌系列产品列表
2.快速浏览产品
3.将产品加入购物车
4.进入产品详情页面
界面
界面元素-产品列表
| 名称 | 用途 | 显示 | 交互 |
|---|---|---|---|
| 产品列表 |
展示指定品牌系列产品 |
每行按四个产品内容排列 内容包含：产品图片+产品名称+价格 产品无库存时，不显示价格 |
1.鼠标悬停至产品，图片内容更换为产品详情并有快速浏览字段 2.点击产品图片，进入产品详情页面 |
| 快速浏览 | 进入快速浏览页面 | 字段：快速浏览 | 1.点击快速浏览，显示快速浏览框 |
界面元素-快速浏览
| 名称 | 用途 | 显示 | 交互 |
|---|---|---|---|
| 产品信息 |
展示产品信息 |
产品名称，例：都市汉方-至尊虫草300粒 产品价格，例：HK$1200.00 库存单位：例：LM00001 |
1.点击 ，圆点底色变量并更换产品图片 |
| 数量 | 填写购买数量 |
输入框，默认为1 产品无库存时，不显示 |
1.鼠标悬停至输入框， 2.输入购买数量 |
| 新增到购物车中 | 将产品加入购物车 |
【新增到购物车中】按钮 产品有库存时，显示 |
1.点击按钮，产品加入至购物车右侧并出现购物车插件页面 |
| 无库存 | 告知用户无库存 |
字段：无库存，灰色底框 产品无库存时，显示 |
无 |
| 浏览更多详细资料 | 查看指定产品详细资料 | 字段:浏览更多详细资料 | 1.点击字段，进入产品详情页面 |
 |
关闭快速浏览框 |
图标： |
1.点击图标，关闭浏览框 |
界面元素-购物车插件
| 名称 | 用途 | 显示 | 交互 |
|---|---|---|---|
 |
关闭购物车插件 | 图标： |
1.悬停出现字段：关闭购物车插件 2.点击图标，关闭购物车插件 |
| 浏览购物车 | 进入购物车页面 | 【浏览购物车】按钮 | 1.点击按钮，进入购物车页面 |
| 购物车产品列表 | 展示购物车内的产品 |
纵向排列，展示产品图片，名称，价格，数量（至少为1），小计金额 当购物车没有产品，列表显示字段：购物车是空的 |
1.鼠标悬停至产品，出现 2. 3.点击产品图片，进入产品详情页面 |
