《iVX 高仿美团APP制作移动端完整项目》06 美食页商家推荐内容分类推荐商家制作

Posted 2022-05-03 1_bit

接下来开始制作超市便利页面：

一、标题

首先，我们创建一个页面，该页面设置背景颜色为黄色：

随后欧创建一个行，命名为主要，之后将会在这个主要行之中添加对应的模块内容：

该主要行，属性需要设置背景色为透明，并且高度为包裹，不能覆盖对应的背景颜色：

我们在主要行中添加一个行命名为标题，并且设置背景色为透明，高度为 40px：

随后添加一个文本以及一个图标：

此时我们发现文本和图片垂直方向不一致，直接设置标题这个行的垂直对齐属性为居中即可：

二、 内容行制作

接着我们查看内容部分的搜索框在一个白色背景并且圆角包裹的容器之中：

此时我们应该先创建一个行，命名为内容并且给予背景色为白色：

接着找到对应的圆角区域给予圆角为 30px，并且取消底部两个圆角应用：

此时页面如下：

三、 搜索框制作

接着咱们往这个行中添加一个行，命名为搜索框：

再往这个搜索框中添加一个按钮和一个输入框：

接着给予这个搜索框的背景色为透明，并且使搜索框的内容水平居中对齐，高度为包裹：

此时我们发现当前搜索框距离顶部太近，给予一个搜索框行的伤内边距即可：

在这一步最后，我们还需要把内容块的高度更改为包裹，使其可以跟随内部元素的高度增加而增加：

四、 轮播图制作

接着咱们开始制作轮播图：

轮播图制作较为简单，我们先创建一个行，命名为轮播图，并且设置其背景色和高度包裹：

接着我们找到扩展组件的轮播页容器，并且使其添加到该行之中：

此时发现轮播页高度太大：

更改其对应的高度即可，在这里更改高度为 100px：

：
随后我们点击轮播页上传对应的图片：

两张图片上传完毕后如图所示为结果，并且可以点击对应的按钮对图片进行查看：

在此我们发现，轮播页距离顶部搜索框太过贴近，并且左右边缘太过挨近，咱们更改轮播图行对应的上下左右外边距即可：

五、 种类信息制作

接下来咱们制作种类信息，在这里只需要对应的上一节章节的种类复制两行过来即可：

复制完毕如下：

六、 广告制作

这一部分直接使用一个行，设置其背景色即可，不再过多赘述：

七、 店家制作

点击与上一节店家制作方法一致，直接复制删除对应的头部绝对定位图片即可：

复制删除完毕如下：

八、 推荐店家

剩下的内容也基本上与上一节类似，在此直接复制：