小伙伴们，我们学习过了如何实现慕淘商城首页、分类页和搜索页，现在让我们运用所学知识搭建一个慕淘商城列表详情页和个人中心页吧（效果图、商品详情页的接口和操作说明，请在作业素材中下载查看）

一、语言和环境

l实现语言

HTML5、CSS3、VUE、SCSS

l环境要求及开发工具

建议使用Sublime Text3在node环境下运行，或者WebStorm 编辑器

一、网页整体要求：

1、要求页面整洁、美观，与提供的页面效果图、结构保持一致，文字、背景的颜色不统一要求；

2、代码书写、命名符合规范，在代码中添加必要的注释。

3、从数据库请求资源（如图片、文字等）

二、具体要求

商品详情页：

1、第一部分

(1)、左侧是一个“返回”的箭头，中间是“商品详情”的文字信息，右侧是一个购物车图标

(2)、所有内容垂直居中显示

2、第二部分

(1)、横向铺满网页，高度固定的banner轮播图

3、第三部分

(1)左侧显示商品价格，右侧显示已售出件数“xxxx件已售”

(2)显示商品标题

(3)左侧显示“快递包邮”中间显示“月销量xxx件”，右侧显示地址

4、第四部分

(1)显示标题“商品评价（xxxx）”

(2)显示评价的标签，即评价分类

(3)显示一个用户评价

a）左侧显示用户头像和昵称

b）显示评价内容

c）左侧显示评价时间和商品口味

5、第五部分

(1)左侧显示商家店铺logo和商家店铺名，在商家店铺名下方显示商家所属平台（如：天猫、淘宝）

(2)三列，第一列显示“宝贝描述”，第二列显示“卖家服务”，第三列显示“物流服务”，所有内容居中显示

6、第六部分

(1)底部导航固定在页面的底部，不随页面的滚动而滚动

(2)共5个导航项，前三项由图片和文字组成，后面的“加入购物车”和“马上抢”由文字构成。

(3)5个导航项高度固定，每个导航项中的内容垂直水平居中

(4)前三个导航项宽度一致、“加入购物车”和“马上抢”宽度一致

个人中心页：

1、第一部分：

（1）中间显示“我的慕淘”、右侧显示设置图标和消息图标，高度固定，且固定在页面的顶部，不随页面的滚动而滚动

2、第二部分：

（1）中间垂直显示头像（圆形）

（2）显示“注册”和“登录”，“注册”和“登录”中间使用竖线分割

3、第三部分：

（1）左侧显示：图标和“我的订单”，右侧显示“查看我的全部订单”和向右侧的箭头

（2）共4个导航项，由文字和图标组成

（3）4个导航项高度固定，每个导航项中的内容垂直水平居中

4、第四部分：

（1）左侧显示图标和“我的资产”

（2）共4个导航项，由文字组成

（3）4个导航项高度固定，每个导航项中的内容垂直水平居中

5、第五部分

（1）共5项，每一项有图标和文字组成

（2）左侧显示图标和文字，右侧显示右箭头

6、第六部分：

（1）显示客服热线以及工作时间

（2）显示“拨打前请记录您的UID”

7、第七部分：

（1）底部导航固定在页面的底部，不随页面的滚动而滚动

（2）共4个导航项，由图片和文字组成

（3）4个导航项高度固定，每个导航项中的内容垂直水平居中

可直接在慕淘商城的源码上新建一个页面实现；也可以重新生成一个工程文件哦~

规范【6分】

• 文件、id、class命名规范，代码书写规范及添加适量注释

网页整体【4分】

• 网页内容居中显示，每个区域贯穿整个页面

列表详情页：

第一部分【8】

• 与效果图结构保持一致

第二部分【8】

• 与效果图结构保持一致，实现5张图片轮播，轮播图上有小圆点，圆点靠底下，水平居中显示

第三部分【6】

• 与效果图结构保持一致

• 左侧显示商品价格，右侧显示已售出件数“xxxx件已售”

• 显示商品标题

• 左侧显示“快递包邮”中间显示“月销量xxx件”，右侧显示地址

第四部分【13】

• 显示标题“商品评价（xxxx）”显示评价的标签，即评价分类

• 显示用户评价，左侧显示用户头像和昵称，显示评价内容，左侧显示评价时间和商品口味 

第五部分【6】

• 与效果图保持一致

• 左侧显示商家店铺logo和商家店铺名，在商家店铺名下方显示商家所属平台（如：天猫、淘宝）    

• 三列，第一列显示“宝贝描述”，第二列显示“卖家服务”，第三列显示“物流服务”，所有内容居中显示

第六部分【15】

• 与效果图结构保持一致

• 底部导航固定在页面的底部，不随页面的滚动而滚动    

• 共5个导航项，前三项由图片和文字组成，后面的“加入购物车”和“马上抢”由文字构成    

• 5个导航项高度固定，每个导航项中的内容垂直水平居中    

• 前三个导航项宽度一致、“加入购物车”和“马上抢”宽度一致    

个人中心页：

第一部分【3】

• 中间显示“我的慕淘”、右侧显示设置图标和消息图标，高度固定，且固定在页面的顶部，不随页面的滚动而滚动

第二部分【6】

• 头像中间垂直显示（圆形），显示“注册”和“登录”，“注册”和“登录”中间使用竖线分割

第三部分【7】

• 与效果图结构保持一致

• 左侧显示：图标和“我的订单”，右侧显示“查看我的全部订单”和向右侧的箭头    

• 共4个导航项，由文字和图标组成    

• 4个导航项高度固定，每个导航项中的内容垂直水平居中    

第四部分【6】

• 左侧显示图标和“我的资产”    

• 共4个导航项，由文字组成    

• 4个导航项高度固定，每个导航项中的内容垂直水平居中    

第五部分【4】

• 共5项，每一项由图标和文字组成，左侧显示图标和文字，右侧显示右箭头

第六部分【2】

• 显示客服热线以及工作时间，显示“拨打前请记录您的UID”

第七部分【6】

• 底部导航固定在页面的底部，不随页面的滚动而滚动，共4个导航项，由图片和文字组成