這一節我們將講解美食頁下半部分內容制作：

一、完善店鋪推薦

接下來繼續制作以下內容：

1.1 滿減信息

現在咱們在對應的商家行中添加一個行，命名為滿減，并且對應的更改高度為包裹：

隨后更改其背景色、字體顏色使其具有對應的樣式屬性：

可能你更改完后會發現該文本緊貼文字框的邊緣：

那么此時就應該對應的修改其內邊距，內邊距也是屬于對應的文本組件內容，那么其背景色也會被作用，如果是外邊距則是表示對某個方向的距離，編寫對應的距離并不會增加其這個元素的厚度，在此需要更高內邊距：

接著我們復制多幾個文本：

此時發現緊貼左側，那么只需要設置對應的左外邊距即可：

最后更改文本內容即可完成滿減信息頁：

1.2 商家推薦內容制作

接著制作商家推薦內容：

我們接著在商家行之下創建一個行，命名為商品，并且設置其背景色和高度屬性：

接著其內部的每個信息都是一塊內容，并且是列存在的形式：：

我們在此創建一個列，命名為信息：

商家推薦內容分為3個，并且較為平均的占據了寬度，我們設置這個列的寬度為 33% 則可以剛好較為平均的占據整個行，并且設置背景色為透明：

接下來在信息列中添加一個圖片：

我們發現該圖片的過大，這是因為該圖片按照了原本的比例進行了顯示，這一點我們可以通過對應的圖片屬性值可以看出：

此時只需要設置圖片的寬度為 100%，那么就會占據整個圖片所在容器的最大寬度：

再接著往下添加一個文本：

隨后往下看，此時下一個顯示內容為一個原價和一個折扣價，這兩部分在同一行顯示，那么此時我們可以在這個列中再添加一個行容器，行列容器之間是可以相互進行包裹的，并且不要忘記設置對應的高度以及背景色：

最后咱們再這個行中添加兩個文本即可：

此時由于當前商品信息緊貼頂部并不美觀，我們直接設置商品行的上外（內）邊距即可：

接著復制三個信息列：

若覺得橫排顯示并不不等間距，直接設置商品行的水平距離為等間距即可：

此時列水平之間將會存在一定間隙。

二、分類塊、標簽、推薦商家制作

接下來開始分類塊和標簽的制作：

2.1 分類

首先在內容頁下創建一個行，命名為種類，并且設置其對應的背景色、高度內容：

接著在種類下創建第一個分類，我們可以看到，這個分類是列的形式存在：

我們創建一個列，若這個列需要在一行中要顯示5個，那么每個列的寬度需要設置為 20%：

隨后添加對應的圖片和文本：

在此需要注意，圖片寬度需要設置為 100%，占據整個容器寬。

此時我們可以看到，當前的元素并不居中對齊，咱們只需要設置其父容器類型的垂直、水平對齊為居中即可：

若想使其有一定的邊緣厚度，設置其內邊距即可：

接著復制多個類型列：

但在這里咱們多余的分類不會進行換行顯示，所以需要設置父容器的自動換行取消：

并且若想使其可滑動，那么則需要設置其裁剪屬性，橫軸 x 豎軸則是 y：

此時該區域將會出現一個滾動條：

并不美觀，只需要隱藏滾動條即可，在屬性中設置隱藏滾動條開啟：

2.2 標簽

其標簽內容制作也非常簡單：

添加一個行命名為推薦內容，然后在其中添加對應的文本即可，文本設置對應的內邊距即可解決：

2.3 推薦商家

最后的推薦商家跟其他頁面的類似，在此只需要直接賦值過來即可;