點擊整個專欄查看其它系列文章 （系列文章更新中…）：《iVX 高仿美團(tuán)APP制作移動端完整項目》

項目界面預(yù)覽：

一、推薦信息制作

推薦信息與之前的標(biāo)題下推薦信息制作類似：

此時依舊創(chuàng)建一個行，設(shè)置其上下左右內(nèi)邊距：

接著往行內(nèi)創(chuàng)建一個文本，設(shè)置其字號，背景顏色：

其中關(guān)鍵的設(shè)置是設(shè)置其對應(yīng)的內(nèi)邊距，這樣才會使其有一定的寬度，還需設(shè)置對應(yīng)的圓角值：

最后賦值多個內(nèi)容即可（還需要注意行要關(guān)閉自動換行）：

二、制作推薦商家內(nèi)容

接著我們查看推薦商家的內(nèi)容。我們可以發(fā)現(xiàn)，在此處有一個大塊包裹商家的內(nèi)容：

在此我們創(chuàng)建一個行命名為推薦商家：

接著為這個行設(shè)置高度為包裹、背景色透明以及上下左右內(nèi)邊距：

接著我們查看其內(nèi)容內(nèi)部，可以發(fā)現(xiàn)其是一個塊中包裹了兩個小塊，這兩個小塊一個是左另一個是右：

在此我們創(chuàng)建一個主要包裹的行，叫做商家，內(nèi)部創(chuàng)建兩個行，一個是左側(cè)方面另一個是右側(cè)信息，在此設(shè)置左側(cè)寬度為 70%，右側(cè)為 30%，依舊設(shè)置對應(yīng)的背景色等屬性（不再贅述）：

此時我們給商家這個行這是其上下左右內(nèi)邊距、以及上外邊距，使其內(nèi)部與內(nèi)容有一定距離將會更加美觀：

此時我們發(fā)現(xiàn)信息部分距離頂部還是有一定距離的：

設(shè)置信息行的上下左右內(nèi)邊距：

接著上傳一張圖片，該圖片在上傳時將會按照原比例進(jìn)行顯示，在此時只需要設(shè)置對應(yīng)的寬高為 100% 占據(jù)整個父容器即可：

此時我們再查看信息部分，可以發(fā)現(xiàn)其右側(cè)可以拆分為左右3個部分，分別是頂部一個部分分為左右兩個小部分，下部一個部分占滿整個內(nèi)部行寬度：

那么在右側(cè)的信息行中，創(chuàng)建1個頂部行，并且在這個頂部行中創(chuàng)建兩個行，一個命名為左側(cè)一個命名為右側(cè)，左側(cè)占據(jù) 70% 寬度，右側(cè)占據(jù) 30% 寬度：

接著我們在到左側(cè)內(nèi)容中創(chuàng)建3個行，分別是 標(biāo)題、分?jǐn)?shù)、配送 以顯示對應(yīng)的內(nèi)容：

隨后添加標(biāo)題文本：

添加分?jǐn)?shù)文本，并且給予對應(yīng)的顏色：

接著繼續(xù)添加對應(yīng)的文本并且給予對應(yīng)的值：

其中一個特殊的文本我們可以給予對應(yīng)的背景色、邊框線、文字顏色進(jìn)行設(shè)置：

最后我們添加敵營的優(yōu)惠信息行，在其中添加對應(yīng)的文本設(shè)置樣式即可：

最后我們賦值其對應(yīng)的商家，然后設(shè)置好上外邊距即可：

總結(jié)

以上是生活随笔為你收集整理的《iVX 高仿美团APP制作移动端完整项目》03 推介信息及推荐商家分析及制作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。