上次我们通过设计评价组件这个过程，了解到了组件设计中的良好的习惯，比如，文件夹如何支撑组件，图片，组件路径的存放于设置。
本篇我们将继续推进外卖项目—商品页的展示。
如图所示，我们可以把商品也面分为两大部分：
- 左侧“菜单栏”；
- 右侧商品展示；
goods为当前商品页面的根元素。
<templete> <div class="goods"> <div class="menu-wrapper"></div> <div class="foods-wrapper"></div> </div></templete>细化左侧菜单栏
我们先来细化class为menu-wrapper的菜单内容。
<div class="menu-wrapper"> <ul> <li class="menu-item current"> <p class="text"> <img src="http://p1.meituan.net/xianfu/a4167074795cfb33d819fd0590d1545b2048.png" class="icon" > 专场 </p> </li> <li class="menu-item"> <p class="text"> <img src="http://p1.meituan.net/xianfu/10ba72e043ef4eca806cafb1a90a22662048.png" class="icon" > 热销 </p> <i class="num" style="display: none;">0</i> </li> <li class="menu-item"> <p class="text"> <!----> 早餐 </p> <i class="num" style="display: none;">0</i> </li> <li class="menu-item"> <p class="text"> <!----> 促销产品和热卖产品 </p> <i class="num" style="display: none;">0</i> </li> <li class="menu-item"> <p class="text"> <!----> 主食 </p> <i class="num" style="display: none;">0</i> </li> <li class="menu-item"> <p class="text"> <!----> 超值套餐 </p> <i class="num" style="display: none;">0</i> </li> <li class="menu-item"> <p class="text"> <!----> 小食 </p> <i class="num" style="display: none;">0</i> </li> <li class="menu-item"> <p class="text"> <!----> 饮品 </p> <i class="num" style="display: none;">0</i> </li> <li class="menu-item"> <p class="text"> <!----> 甜品 </p> <i class="num" style="display: none;">0</i> </li> <li class="menu-item"> <p class="text"> <!----> 开心乐园餐 </p> <i class="num" style="display: none;">0</i> </li> </ul> </div>主要运用了css3的flexbox布局，使用绝对定位控制商品页在页面区域显示的范围。
.goods { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 190px; bottom: 51px; overflow: hidden; width: 100%;}.goods .menu-wrapper { -webkit-box-flex: 0; -ms-flex: 0 0 85px; flex: 0 0 85px; background: #f4f4f4;}使用css美化左侧菜单栏的内容：
.goods .menu-wrapper .menu-item { padding: 16px 23px 15px 10px; border-bottom: 1px solid #e4e4e4; position: relative;}.goods .menu-wrapper .menu-item.current { background: white; font-weight: bold; margin-top: -1px;}.goods .menu-wrapper .menu-item:first-child.current { margin-top: 1px;}.goods .menu-wrapper .menu-item .text { font-size: 13px; color: #333333; line-height: 17px; vertical-align: middle; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}.goods .menu-wrapper .menu-item .text .icon { width: 15px; height: 15px; vertical-align: middle;}.goods .menu-wrapper .menu-item .num { position: absolute; right: 5px; top: 5px; width: 13px; height: 13px; border-radius: 50%; color: white; background: red; text-align: center; font-size: 7px; line-height: 13px;}左侧菜单栏结构，美化现在就已经完成了。
细化右侧商品列表
下面我们来细化右侧列表：
<div class="foods-wrapper"> <ul> <li class="container-list"> <div> <img src="http://p1.meituan.net/xianfu/6588840adbcfbfe2c7a43aa69d4b36da107767.jpg"> </div> <div> <img src="http://p1.meituan.net/xianfu/378446763167442a511dc9d4c675d877144571.jpg"> </div> </li> <li class="food-list food-list-hook"> <h3 class="title">热销</h3> <ul> <li class="food-item"> <div class="icon" style="background-image: url("http://p0.meituan.net/xianfu/35f41c0badc69352b886cc34080f1f9a232448.png.webp");" ></div> <div class="content"> <h3 class="name">脆香油条</h3> <!----> <div class="extra"> <span class="saled">月售154</span> <span class="praise">赞3</span> </div> <img src class="product" style="display: none;"> <p class="price"> <span class="text">￥5.5</span> <span class="unit">/例</span> </p> </div> <div class="cartcontrol-wrapper"> <div class="cartcontrol"> <div class="cart-decrease" style="display: none;"> <span class="inner icon-remove_circle_outline"></span> </div> <div class="cart-count" style="display: none;"></div> <div class="cart-add icon-add_circle"> <i class="bg"></i> </div> </div> </div> </li> </ul> </li> </ul> </div>通过css美化代码
.goods .foods-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; /* background: blue; */}.goods .foods-wrapper .container-list { padding: 11px 11px 0 11px; border-bottom: 1px solid #e4e4e4;}.goods .foods-wrapper .container-list img { width: 100%; margin-bottom: 11px; border-radius: 5px;}.goods .foods-wrapper .food-list { padding: 11px;}.goods .foods-wrapper .food-list .title { height: 13px; font-size: 13px; background: url(btn_yellow_highlighted@2x.png) no-repeat left center; background-size: 2px 10px; padding-left: 7px; margin-bottom: 12px;}.goods .foods-wrapper .food-list .food-item { display: flex; margin-bottom: 25px; position: relative;}.goods .foods-wrapper .food-list .food-item .icon { flex: 0 0 63px; background-position: center; background-size: 120% 100%; background-repeat: no-repeat; margin-right: 11px; height: 75px;}.goods .foods-wrapper .food-list .food-item .content { flex: 1;}.goods .foods-wrapper .food-list .food-item .content .name { font-size: 16px; line-height: 21px; color: #333333; margin-bottom: 10px; padding-right: 27px;}.goods .foods-wrapper .food-list .food-item .content .desc { font-size: 10px; line-height: 19px; color: #bfbfbf; margin-bottom: 8px;总结
注意右侧结构的布局，通常在一个分类下，比如热销，同等结构，样式的展示我们通常依据请求到后台的数据循环模板就可以了。但是，先满足功能，需求，在优化，也是没有什么问题的。
下一篇文章我们开始为左侧菜单栏，右侧商品展示加入数据。