## 一、订单页面概览  ## 二、页面结构 ``` <!--头部开始--> <div class="header">订单</div> <!--头部结束--> <!--订单列表开始--> <div class="wrap"> <div class="order-list"> <div class="order-item"> <div class="order-item-inner"> <img class="item-img" src="http://p1.meituan.net/waimaipoi/957ad35a1ca2ff8408f0f5c6ca0758ab32768.jpg"> <div class="item-right"> <div class="item-top"> <p class="order-name one-line">十七味黄焖鸡米饭（南新店）</p> <div class="arrow"></div> <div class="order-state">订单完成</div> </div> <div class="item-bottom"> <div class="product-item">配套折扣煎蛋<div class="p-conunt">x1</div> </div> <div class="product-item">（大份）鲜指天椒黄焖鸡米饭+青菜<div class="p-conunt">x1</div> </div> <div class="product-item"><span>...</span> <div class="p-total-count">总计2个菜，实付<span class="total-price">¥21.52</span></div> </div> </div> </div> </div> <div class="evaluation clearfix"> <div class="evaluation-btn">评价</div> </div> </div> <div class="order-item"> <div class="order-item-inner"> <img class="item-img" src="http://p0.meituan.net/waimaipoi/aa86bc1b9a218ea5e094b861c03b59b94873.jpg"> <div class="item-right"> <div class="item-top"> <p class="order-name one-line">深圳麦当劳前海餐厅</p> <div class="arrow"></div> <div class="order-state">订单取消</div> </div> <div class="item-bottom"> <div class="product-item">麦乐送专享 五五开黑餐 送5张闪卡<div class="p-conunt">x1</div> </div> <div class="product-item">美团王者双人餐 送2张闪卡<div class="p-conunt">x1</div> </div> <div class="product-item"><span>...</span> <div class="p-total-count">总计2个菜，实付<span class="total-price">¥313</span></div> </div> </div> </div> </div> <div class="evaluation clearfix"> <div class="evaluation-btn">评价</div> </div> </div> </div> <div class="loading">加载中</div> </div> <!--订单列表结束--> <!--底部栏开始--> <div class="bottom-bar"> <!-- 省略 --> </div> ``` ## 三、页面样式 ``` .order-item { border-top:0.346667rem solid #efefef; } .order-item .order-item-inner { display: flex; padding-bottom: 0.48rem; border-bottom: 1px solid #e0e0e0; } .order-item .item-img { width: 1.066667rem; height: 1.066667rem; margin-top: 0.213333rem; margin-left: 0.426667rem; display: block; border-radius: 50%; } .order-item .item-right { flex: 1; margin-left: 0.4rem; font-size: 0.373333rem; } .order-item .item-top { height: 1.466667rem; padding-top: 0.053333rem; display: flex; align-items: center; border-bottom: 1px solid #e0e0e0; } .order-item .order-name { font-size: 0.426667rem; width: 4.8rem; height: 0.426667rem; font-weight: 600; } .order-item .arrow { width: 0.213333rem; height: 0.213333rem; border: 1px solid #999; border-width: 1px 1px 0 0; transform: rotate(45deg); -webkit-transform: 45deg; } .order-item .order-state { font-size: 0.373333rem; margin-left: 1.066667rem; color: #999; } .order-item .product-item { font-size: 0.373333rem; color: #666; margin-top: 0.32rem; } .order-item .p-conunt { float: right; margin-right: 0.4rem; } .order-item .p-total-count { float: right; margin-right: 0.4rem; font-size: 0.32rem; } .order-item .total-price { font-size: 0.373333rem; color: #151515; margin-left: 0.053333rem; letter-spacing: 0.026667rem; } .order-item .evaluation { padding-top: 0.266667rem; padding-bottom: 0.266667rem; } .order-item .evaluation-btn { float: right; width: 2.666667rem; height: 0.853333rem; color: #6b450a; background-color: #ffd161; font-size: 0.373333rem; line-height: 0.853333rem; text-align: center; margin-right: 0.266667rem; } .loading { padding-top: 0.266667rem; padding-bottom: 0.266667rem; font-size: 0.426667rem; text-align: center; color: #ccc; } .wrap { padding-bottom: 2.666667rem; } ``` ## 四、本节作业 * 底部菜单栏：我们通过点击底部菜单栏来切换显示页面，同时我们也需要切换底部图标，利用`jquery`来完成这一行为。 * 同样我们在订单页面也使用了底部菜单栏，为了避免大量重复代码，我们将底部栏封装成一个组件，页面加载时初始化到页面上。 * 订单列表的加载同样需要进行请求后端数据，我们模拟请求数据，通过`jquery`的`ajax`，请求`orders.json`来获取数据，并动态的加载到页面上。