## 一、頁面概覽  ## 二、頁面結構 ``` <!--頭部開始--> <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 文件中的數據，動態的添加到頁面中。 * 實現點擊左側列表，切換顯示右側不同內容。