一、项目名称

线上购物移动端网站

二、项目背景

本项目使用移动端网页开发技术制作一个线上购物网站。网站面向手机浏览场景，主要完成商品浏览、分类筛选、商品详情查看、购物车管理和个人中心展示等功能。项目采用纯前端实现，便于课程作业提交、展示和运行。

三、功能需求

1. 首页功能

首页用于展示商城整体入口和推荐内容，包含以下功能：

• 展示商城名称和活动横幅。
• 提供搜索框，可以按商品名称或分类搜索推荐商品。
• 展示商品分类入口，用户可以快速进入分类页面。
• 展示今日推荐商品列表。
• 点击商品卡片可以进入商品详情页。
• 底部导航可以切换首页、分类、购物车和我的页面。

2. 分类功能

分类页用于帮助用户快速查找商品，包含以下功能：

• 展示全部、数码、家居、美妆、食品、服饰等分类。
• 点击左侧分类按钮后，右侧商品列表自动切换。
• 支持输入关键词搜索商品。
• 显示当前筛选后的商品数量。
• 点击商品条目可以进入对应商品详情页。

3. 商品详情功能

商品详情页用于展示单个商品的完整信息，包含以下功能：

• 展示商品图片、名称、价格、原价、标签、评分、库存和分类。
• 展示商品简介和商品特点。
• 支持选择购买数量。
• 点击“加入购物车”后，商品保存到浏览器本地购物车。
• 如果同一商品重复加入购物车，数量会自动累加。

4. 购物车功能

购物车页用于管理已选商品，包含以下功能：

• 展示购物车中的商品图片、名称、单价和数量。
• 支持增加和减少商品数量。
• 当商品数量减少到 0 时，商品从购物车中移除。
• 支持删除单个商品。
• 支持清空购物车。
• 自动计算购物车商品总价。
• 点击“去结算”后显示订单提交提示。

5. 我的页面功能

我的页面用于展示用户相关信息，包含以下功能：

• 展示用户头像、昵称和会员身份。
• 展示购物车数量、优惠券和积分。
• 展示订单入口，包括待付款、待发货、待收货和售后。
• 展示收货地址、浏览记录、客服帮助和返回首页入口。