小伙伴们，我们学习过了如何实现到家项目的首页、详情页和订单页，现在让我们运用所学知识搭建一个到家项目的购物车、个人中心页和地址管理相关的页面吧！！！
演示视频
作业描述
一、语言和环境
1. 实现语言
HTML5、CSS3、ES6、Vue、Sass
2. 开发环境
VScode编辑器、node环境
二、网页整体要求
1. 页面整洁、美观，与提供的页面效果图的结构保持一致，文字和背景的颜色不统一要求。
2. 代码书写、命名符合规范，在代码中添加适量的注释。
3. 项目文件夹管理，一个页面相关的所有文件存放在独立文件夹中。
三、具体要求
1. 本作业主要包含以下几个页面：购物车、我的、地址管理、编辑收货地址和新建地址这5个页面。
2. 可以参考“作业素材”中提供的设计稿，与效果图结构基本保持一致。
3. 具体要实现的要求，参考下面的“评分标准”。
四、作业提示
本作业的重点是实现页面的静态布局和页面之间的跳转功能，后面阶段学习node和MongoDB数据库后，老师会在这个项目的基础上继续讲解，如何开发接口，然后利用接口提供的数据渲染页面，实现一个完整的全栈项目。
评分标准是什么？
- 规范（6分）
（1）网页文件夹管理，一个页面相关的所有文件存放在独立文件夹中。
（2）文件以及文件夹都要使用英文命名。
（3）代码书写规范，且有适量的注释。 - 购物车（20分）
（1）点击底部选项卡的“购物车”跳转到购物车页面。
（2）第一部分：标题水平居中显示。
（3） 第二部分：由店名和商品详情组成。
（4） 商品详情包括商品图片，商品名称，商品价格、数量以及商品总价。
（5） 商品超过两条的仅展示两条，并显示一共多少件等信息，与效果图结构保持一致。 - 我的页面（27分）
（1）点击底部选项卡的“我的”跳转到“我的页面”。
（2）第一部分：设置背景和右上角的图标。
（3） 第二部分：个人相关信息部分内容要覆盖在背景上，内容水平居中显示。
（4）第三部分：一共有三项内容，每一项分为左中右三个区域，依次是图标、文字和箭头，内容垂直居中对齐。
（5） 点击“我的地址”跳转到“地址管理页面”。 - 地址管理页面（18分）
（1）第一部分：分为左中右三个区域，依次是返回按钮、标题和新建按钮，内容垂直居中显示。
（2）第二部分：由副标题和每一项收货地址信息组成。
（3）副标题（“我的收货地址”）单独占据一行，居左显示。
（4）收货地址信息：分为左右两个部分，左边是姓名、手机号和详细地址等内容，右边是箭头按钮。
（5）点击收货地址信息跳转到“编辑收货地址”页面。
（6）点击“新建”跳转到“新建地址”页面。 - 编辑收货地址页面（12分）
（1）第一部分：分为左中右三部分，依次为返回按钮、标题和保存按钮，有内容垂直居中显示
（2）第二部分：由地址、收货人、联系方式等5项信息组成，每一项之间使用横线分割，内容垂直居中显示。 - 新建地址页面（17分）
（1）第一部分：分为左中右三部分，依次为返回按钮、标题和保存按钮，内容垂直居中显示
（2）第二部分：一共有5项内容，每一项之间使用横线分割，内容垂直居中显示。
（3）输入框内使用placeholder设置对应的提示信息。
作业素材
下载素材
作业素材仅供学习与参考，请按要求完成作业