小伙伴们，我们学习过了vue基础和vue案例，现在让我们运用所学知识搭建一个移动端的静态页面吧！

任务提示：1、要求，第三部分和第五部分使用循环实现。

2、可直接在vue案例的源码上新建一个页面实现；也可以重新生成一个工程文件，由于是移动端页面，使用了rem布局，所以不要忘记安装px2rem插件哦。

一、语言和环境

l 实现语言

HTML5、CSS3、VUE

l 环境要求及开发工具

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

（注：可在vue案例源码的基础上实现该页面）

一、网页整体要求：

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

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

二、具体要求

1、第一部分

(1)、左侧是一个“返回”的箭头和文字信息，右侧是一个搜索图标

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

2、第二部分

(1)、一张横向铺满网页，高度固定的banner图片

3、第三部分

(1)、8个导航项一行4个排列，上下左右有一定的间距

(2)、每个导航项都有圆角、阴影、文字在导航内垂直水平居中显示

4、第四部分

(1)、左侧有2个选项“全部”和“最新”，每一项由文字、向下的小箭头、分割线组成。

(2)、右侧是“仅显示未学”的文字和一个切换状态的按钮。（按钮是由2个图片组成）

(3)、有上下边框，且下方有阴影。

5、第五部分

(1)、每行是一个课程介绍：图片在左边，右侧是标题和详情。

(2)、每行之间有适当的间距，距离左右边界也有一定的距离

(3)、点击每个课程都可以跳转到详情页面

6、第六部分

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

(2)、共4个导航项，每一项都是由图片和文字构成。

(3)、4个导航项均分页面的宽度，高度固定，每个导航项中的内容垂直水平居中。

规范【4】

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

网页整体【12】

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

第一部分【12】

• 与效果图结构保持一致

• 左侧是一个“返回”的箭头图标和文字信息    

• 右侧是一个“搜索”的图标    

• 所有内容垂直居中显示   

第二部分【3】

• 一张banner图，宽度100%显示，高度固定

第三部分【16】

• 与效果图结构保持一致

• 8个导航项一行4个排列，上下左右有一定的间距    

• 每个导航项都有圆角、阴影、文字在导航内垂直水平居中显示   

第四部分【22】

与效果图结构保持一致

左侧有2个选项“全部”和“最新”，每一项由文字、向下的小箭头、分割线组成    

右侧是“仅显示未学”的文字和一个切换状态的按钮。（按钮是由2个图片组成），有上下边框，且下方有阴影。   

第五部分【15】

与效果图结构保持一致；点击每行时，可以跳转到详情页

第六部分【16】

与效果图结构保持一致