学习了移动端webAPP的开发技巧，赶快动手实践一下吧！

一、网页整体要求

    1、 要求页面美观，与提供的页面效果图、结构保持一致

    2、 要求在代码中添加必要注释

二、具体要求

    1、 实现首页，首页包括：

        （1）    第一部分：顶部banner图，在banner图上左侧是定位城市，右侧是搜索框

        （2）    第二部分：8个类目菜单

        （3）    第三部分： 包含“附近商家”和商家列表，每一个商家列表包含：

                ①     店铺头像

                ②     店铺名称

                ③     星级评分

                ④     月售数量

                ⑤     送达时间（如：30分钟）及距离

                ⑥     优惠信息（如优惠券、满减等）

        （4）    第四部分：底部tabbar，包含“首页”、“订单”、“我的”三个菜单

    2、 实现点击底部tabbar中的“订单”进入订单列表页，订单列表页包括：

        （1）    第一部分：页面标题“订单”

        （2）    第二部分：订单列表，每一个订单列表包含：

                ①    店铺头像

                ②    店铺名称

                ③    订单状态（订单完成、订单取消等）

                ④    购买的商品和该商品数量

                ⑤    购买菜品数量和实付金额

        （3）    第三部分：底部tabbar，包含“首页”、“订单”、“我的”三个菜单

    3、 实现点击底部tabbar中的“我的”进入个人中心页面，个人中心页面包括：

        （1）    第一部分：个人信息，包括：头像、昵称

        （2）    第二部分：设置管理，包括

                ①     收货地址管理

                ②     商家代金券

                ③     意见反馈

                ④     常见问题

                ⑤     客服电话

                ⑥     服务时间

        （3）    第三部分：底部tabbar，包含“首页”、“订单”、“我的”三个菜单

    4、 点餐页，点餐页包括：

        （1）    第一部分：标题“深圳麦当劳前海二餐厅”和一个向左的箭头

        （2）    第二部分：tab切换菜单，包含“点菜”、“评价”、“商家”

        （3）    第三部分：商家菜品列表，包含：左侧选项卡和右侧商品展示列表，商品展示列表包含：

                ①     商品图片

                ②     商品名称

                ③     商品信息

                ④     赞以及赞数量

                ⑤     价格（如￥18/例）

                ⑥     数量选择，包含商品加减按钮和数量显示

        （4）    第四部分：购物车，购物车包含：“清空购物车”文字显示，购物车图标，起送价格、另需配送费以及“去结算”按钮

                    备注：实现购物车联动功能，即：选择商品会添加到购物车中，在购物车中可以删减商品数量

首页【30分】

         * 第一部分：顶部banner图，在banner图上左侧是定位城市，右侧是搜索框    

        * 8个类目菜单    

        * 每一个商家列表包含：① 店铺头像② 店铺名称③ 星级评分④ 月售数量⑤ 送达时间（如：30分钟）及距离⑥   优惠信息（如优惠券、满减等）    

        * 底部tabbar，包含“首页”、“订单”、“我的”三个菜单    

订单列表页【18分】

        * 页面标题显示“订单”    

        * 每一个订单列表包含：① 店铺头像② 店铺名称③ 订单状态（订单完成、订单取消等）④ 购买的商品和该商品数量⑤   购买菜品数量和实付金额    

        * 底部tabbar，包含“首页”、“订单”、“我的”三个菜单    

我的页【15分】

        * 个人信息包括：头像、昵称    

        * 设置管理，包括：① 收货地址管理② 商家代金券③ 意见反馈④ 常见问题⑤ 客服电话⑥ 服务时间    

        * 底部tabbar，包含“首页”、“订单”、“我的”三个菜单    

点餐页【37分】

        * 标题“深圳麦当劳前海二餐厅”和一个向左的箭头    

        * tab切换菜单，包含“点菜”、“评价”、“商家”    

        * 商家菜品列表，包含：左侧选项卡和右侧商品展示列表，商品展示列表包含：

            ① 商品图片

            ② 商品名称

            ③ 商品信息

            ④ 赞以及赞数量

            ⑤   价格（如￥18/例）

            ⑥ 数量选择，包含商品加减按钮和数量显示    

        * 购物车包含：“清空购物车”文字显示，购物车图标，起送价格、另需配送费以及“去结算”按钮    

        * 实现购物车联动功能，即：选择商品会添加到购物车中，在购物车中可以删减商品数量