定義視口的高度

.goods{
  position:absolute;
  top:179px;
  bottom:46px;
  width:100%;
  overflow:hidden;
}

menu-wrapepr

.goods .menu-wrapper{
    flex:0 0 80px;
    width:80px;
    background: #f3f5f7;
  }

width:80px要加上，不然有些安卓瀏覽器會有問題

foods列表

要學習老師的這種思想，不要一開始就直接想著最直接的東西，要一層一層的深入思考，比如寫foods-wrapper時，要想到這肯定首先是一個列表，就是ul/li，然後li裡面怎麼佈局.每個li下面肯定有個標題, 然後標題下面肯定又是一個列表，因為一個分類可能有多個商品(自己思考的不嚴謹),然後左右兩個div，左邊固定，右邊自適應，自然想到flex佈局

foods列表margin和border-botoom的問題

設定margin:18px之後，會發現相鄰兩個商品之間的margin並不像想象的變為了36px，依然是18px。為了解決這個問題，就要設定padding。
關於列表最後一個元素border-bottom的問題，解決方法為為所有列表元素設定margin-bottom:-1px。那麼最後一個的padding怎麼辦呢?我這兒不用設定最後一個的padding，因為最後一個的margin-bottom都設為了-1px（-1px和border的1px抵消了）

關於商品標題過長導致樣式問題

商品標題的長度應該有所限制，或者加上overflow:hidden截掉過長的一部分

table佈局

父元素設定display:table,子元素設定display:table-cell,vertical-align:middle就可以實現垂直居中.(垂直居中最好的一個佈局)

其他css和js

• flex:0 0 80px表示不放大也不縮小，佔橫軸固定寬度80px，width：80px要加上，不然某些安卓瀏覽器會有問題
• 新建data裡面的資料最好一開始去data裡宣告一下
• ul li裡面再寫個span，方便操作
• 需要操作，v-for的這些地方肯定要先加一個class,命名要看得懂,為什麼不命名icon-left呢
• 用到了h2,p。div裡面兩個span
• img這個dom寫錯了,background-image,
• flex：x x x就是一行
• text-decoration:line-through
• font-size沒有的時候就撐不起高度，所以還要設定height
• list-style