## 一、页面概览  ## 二、页面结构 ``` <!--头部开始--> <div class="nav"> <div class="back-icon"></div> <h4 class="title">深圳麦当劳前海二餐厅</h4> </div> <!--头部结束--> <!--tabbar开始--> <div class="tab-bar"> <a class="menu tab-item active" href="#">点菜</a> <a class="comment tab-item" href="#">评价</a> <a class="restanurant tab-item" href="#">商家</a> </div> <!--tabbar结束--> <!--点菜内容区开始--> <div class="menu-inner"> <div class="left-bar"> <div class="left-bar-inner"> <!-- 左侧区域内容 --> </div> </div> <div class="right-content"> <p class="right-title"></p> <div class="right-list"> <div class="right-list-inner"> <!-- 右侧区域内容 --> </div> </div> </div> <!--购物车区域开始--> <div class="shop-bar"></div> <!--购物车区域结束--> </div> <!--点菜内容区结束--> ``` ``` <!-- 左侧区域内容 --> <div class="left-item active"> <div class="item-text"> <img class="item-icon" src="http://p1.meituan.net/aichequan/87f966955f693102d67daf2ec44b58411361.png">热销 </div> </div> <div class="left-item"> <div class="item-text"> <img class="item-icon" src="http://p0.meituan.net/aichequan/45662b4d1968fd75bff38de23f6d62641421.png">折扣 </div> </div> ``` ``` <!-- 右侧区域内容 --> <div class="menu-item"> <img class="img" src="http://p0.meituan.net/xianfuwm/38bbfa3f955cbce3330f1cb6818d0ce6216794.png"> <div class="menu-item-right"> <p class="item-title">麦辣鸡翅2块</p> <p class="item-desc">麦辣鸡翅2块（主要原料：鸡肉，腌料，裹粉，油）</p> <p class="item-zan">赞7</p> <p class="item-price">¥11.5<span class="unit">/例</span></p> </div> <div class="select-content"> <div class="minus"></div> <div class="count">0</div> <div class="plus"></div> </div> </div> <div class="menu-item"> <img class="img" src="http://p0.meituan.net/xianfuwm/38bbfa3f955cbce3330f1cb6818d0ce6216794.png"> <div class="menu-item-right"> <p class="item-title">麦辣鸡翅2块</p> <p class="item-desc">麦辣鸡翅2块（主要原料：鸡肉，腌料，裹粉，油）</p> <p class="item-zan">赞7</p> <p class="item-price">¥11.5<span class="unit">/例</span></p> </div> <div class="select-content"> <div class="minus"></div> <div class="count">0</div> <div class="plus"></div> </div> </div> ``` ## 三、页面样式 ``` /* 头部样式 */ .nav { height: 1.706667rem; border-bottom: 1px solid #b2b2b2; position: fixed; width: 100%; top: 0; z-index: 99; background-color: #fff; } .nav .title { font-size: 0.453333rem; color: #2f2f2f; text-align: center; line-height: 1.946667rem; } .nav .back-icon { width: 0.72rem; height: 0.72rem; position: absolute; top: 0.613333rem; left: 0.32rem; background-image: url('../img/back.png'); background-size: cover;; } ``` ``` /* tabbar 样式 */ .tab-bar { font-size: 0.426667rem; display: flex; border-bottom: 1px solid #f0f0f0; margin-top: 1.706667rem; } .tab-bar .tab-item { flex: 1; height: 1.2rem; line-height: 1.2rem; position: relative; color: #666; text-align: center; text-decoration: none; } .tab-bar .tab-item.active::after { content: ' '; display: block; height: 0.106667rem; width: 1.6rem; position: absolute; bottom: 0; background-color: #ffd161; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); } ``` ``` /* 左侧样式 */ .menu-inner { position: absolute; right: 0; bottom: 0; top: 2.933333rem; left: 0; display: flex; overflow: hidden; } .menu-inner .left-bar { width: 2.266667rem; background-color: #efefef; overflow: auto; height: 100%; -webkit-overflow-scrolling: touch; } .menu-inner .left-bar-inner { padding-bottom: 2.266667rem; } .menu-inner .left-item { font-size: 0.373333rem; color: #656565; text-align: center; border-bottom: 1px solid #bfbfbf; display: flex; height: 1.6rem; justify-content: center; } .menu-inner .left-item.active { background-color: #fff; } .menu-inner .item-text { text-align: center; align-self: center; } .menu-inner .item-icon { width: 0.533333rem; height: 0.533333rem; display: inline-block; margin-right: 0.16rem; vertical-align: -0.106667rem; } ``` ``` /* 右侧区域 */ .right-content { flex: 1; margin-left: 0.266667rem; height: 100%; overflow: hidden; -webkit-overflow-scrolling: touch; } .right-content .right-list { height: 100%; overflow: auto; } .right-content .right-list-inner { font-size: 0.426667rem; padding-bottom: 2.266667rem; } .right-content .right-title { font-size: 0.346667rem; color: #333; margin-top: 0.266667rem; padding-left: 0.106667rem; border-left: 0.053333rem solid #ffd161; } .right-content .menu-item { display: flex; padding-top: 0.666667rem; padding-bottom: 0.666667rem; border-bottom: 1px solid #f0f0f0; position: relative; } .right-content .menu-item .img { width: 1.653333rem; height: 1.653333rem; margin-right: 0.266667rem; } .right-content .menu-item-right { flex: 1; } .right-content .item-title { font-size: 0.426667rem; color: #2f2f2f; } .item-zan,.item-desc { color: #a9a9a9; font-size: 0.32rem; margin-top: 0.16rem; line-height: 0.373333rem; padding-right: 0.106667rem; } .right-content .menu-item-right .item-desc { line-height: 0.453333rem; } .right-content .item-price { margin-top: 0.266667rem; color: #fe4d3d; font-size: 0.48rem; } .right-content .unit { color: #a9a9a9; font-size: 0.32rem; } .right-content .select-content { position: absolute; right: 0.24rem; bottom: 0.56rem; display: flex; } .right-content .plus { width: 0.666667rem; height: 0.666667rem; background-image: url('../img/plus.png'); background-size: cover; } .right-content .minus { width: 0.666667rem; height: 0.666667rem; background-image: url('../img/minus.png'); background-size: cover; } .right-content .count { font-size: 0.4rem; color: #2f2f2f; width: 0.666667rem; height: 0.666667rem; line-height: 0.666667rem; margin-left: 0.053333rem; margin-right: 0.053333rem; text-align: center; } ``` ## 四、本节作业 * 实现模拟请求获取 json 文件中的数据，动态的添加到页面中。 * 实现点击左侧列表，切换显示右侧不同内容。