点击整个专栏查看其它系列文章 （系列文章更新中…）：《iVX 高仿美团APP制作移动端完整项目》

项目界面预览：

一、推荐信息制作

推荐信息与之前的标题下推荐信息制作类似：

此时依旧创建一个行，设置其上下左右内边距：

接着往行内创建一个文本，设置其字号，背景颜色：

其中关键的设置是设置其对应的内边距，这样才会使其有一定的宽度，还需设置对应的圆角值：

最后赋值多个内容即可（还需要注意行要关闭自动换行）：

二、制作推荐商家内容

接着我们查看推荐商家的内容。我们可以发现，在此处有一个大块包裹商家的内容：

在此我们创建一个行命名为推荐商家：

接着为这个行设置高度为包裹、背景色透明以及上下左右内边距：

接着我们查看其内容内部，可以发现其是一个块中包裹了两个小块，这两个小块一个是左另一个是右：

在此我们创建一个主要包裹的行，叫做商家，内部创建两个行，一个是左侧方面另一个是右侧信息，在此设置左侧宽度为 70%，右侧为 30%，依旧设置对应的背景色等属性（不再赘述）：

此时我们给商家这个行这是其上下左右内边距、以及上外边距，使其内部与内容有一定距离将会更加美观：

此时我们发现信息部分距离顶部还是有一定距离的：

设置信息行的上下左右内边距：

接着上传一张图片，该图片在上传时将会按照原比例进行显示，在此时只需要设置对应的宽高为 100% 占据整个父容器即可：

此时我们再查看信息部分，可以发现其右侧可以拆分为左右3个部分，分别是顶部一个部分分为左右两个小部分，下部一个部分占满整个内部行宽度：

那么在右侧的信息行中，创建1个顶部行，并且在这个顶部行中创建两个行，一个命名为左侧一个命名为右侧，左侧占据 70% 宽度，右侧占据 30% 宽度：

接着我们在到左侧内容中创建3个行，分别是 标题、分数、配送 以显示对应的内容：

随后添加标题文本：

添加分数文本，并且给予对应的颜色：

接着继续添加对应的文本并且给予对应的值：

其中一个特殊的文本我们可以给予对应的背景色、边框线、文字颜色进行设置：

最后我们添加敌营的优惠信息行，在其中添加对应的文本设置样式即可：

最后我们赋值其对应的商家，然后设置好上外边距即可：

《iVX 高仿美团APP制作移动端完整项目》03 推介信息及推荐商家分析及制作相关推荐

  1. 《iVX 高仿美团APP制作移动端完整项目》02 搜索、搜索提示及类别需求分析思路及制作流程

    点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.搜索制作 在上一节中我们完成了标题头的制作,接下来我们查看如何制作搜索 ...

  2. 《iVX 高仿美团APP制作移动端完整项目》01 标题需求分析思路及制作流程

    点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.创建项目 首先打开在线编辑器地址:https://editor.ivx ...

  3. 《iVX 高仿美团APP制作移动端完整项目》04 美食页 标题、搜索、商家标题制作

    点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.美食页顶部商家页制作 1.1 页面主格调确认 该美食页为首页中美食按钮 ...

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

    这一节我们将讲解美食页下半部分内容制作: 一.完善店铺推荐 接下来继续制作以下内容: 1.1 满减信息 现在咱们在对应的商家行中添加一个行,命名为满减,并且对应的更改高度为包裹: 随后更改其背景色.字 ...

  5. 《iVX 高仿美团APP制作移动端完整项目》09 订单页制作

    订单页制作比较简单,界面如下: 一.标题 首先创建一个页面,命名为订单页,并且给予背景色为黄色: 随后创建一个行,命名为主要并给予对应的基础属性: 接着给予这个主要行对应的上下内边距使其给顶部具有与元 ...

  6. 《iVX 高仿美团APP制作移动端完整项目》08 会员页 标题、会员卡 制作

    一.分类制作 我们接着往下制作该页的下半部分内容: 由于对应最下部分的商家推荐重复,直接复制即可,在此不做过多的讲解: 接下来我们创建一行命名为内容,用以作为下半部分的容器: 接着我们制作第一个种类, ...

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

    接下来开始制作超市便利页面: 一.标题 首先,我们创建一个页面,该页面设置背景颜色为黄色: 随后欧创建一个行,命名为主要,之后将会在这个主要行之中添加对应的模块内容: 该主要行,属性需要设置背景色为透 ...

  8. 基于Vue全家桶制作的的高仿美团APP

    美团外卖APP ? 项目演示地址:http://39.108.232.27:9000 ? GitHub:github.com/bxm0927/vue- 基于 Vue 全家桶 (2.x) 制作的美团外卖 ...

  9. 高仿微信APP实战（一）-Actionbar的制作与应用

    高仿微信APP实战(一)-Actionbar的制作与应用 本文是仿微信app实战系列的第一部分,先从简单的做起,边做边学习.从顶部actionbar开始,先看一下效果图: 一.定义主题样式 <r ...

最新文章

  1. 【Android 逆向】ELF 文件格式 ( ELF 文件头 | ELF 文件头标志 | ELF 文件位数 | ELF 文件大小端格式 )
  2. stm32 web 参数_老司机们都是怎么学习STM32的？
  3. 只有得到祝福才是好婚姻
  4. 反转？MIT女博士遭质疑：代码贡献太少，黑洞照片功臣另有其人
  5. Rust基础概念之数据类型
  6. Ubuntu18.04下安装配置darknet
  7. 计算机微积分基础试题及答案,试题及答案_基础微积分Ⅱ_大学网课答案
  8. 用python写冒泡排序_用Python写冒泡排序代码
  9. HTML5+CSS3基础
  10. Centos7设置开机自动运行脚本
  11. 天下数据解析域名及域名转向
  12. [经验教程]2022年淘宝/天猫/京东/拼多多等电商购物618年中大促活动是什么时候开始领取超级红包及优惠券入口？
  13. VC++6.0 总是1error 问题的解决
  14. ipv4如何访问ipv6的地址
  15. Win10蓝屏BAD_POOL_CALLER解决方案（IRST）
  16. 谷歌浏览器如何安装vue调试工具
  17. 解决浏览器图片缓存问题
  18. java实现OpenCV 4.1.0人脸相似度对比
  19. mysql 强制使用索引 FORCE INDEX(idx_name)
  20. 阿里重磅开源在线分析诊断工具Arthas(阿尔萨斯)

热门文章

  1. 微软Build2021今日召开，共同期待VS2022+.NET6！
  2. .NET 6 Preview 3 中 ASP.NET Core 的更新和改进
  3. 如何在ASP.NET Core中使用SignalR构建与Angular通信的实时通信应用程序
  4. 【半译】在ASP.NET Core中创建内部使用作用域服务的Quartz.NET宿主服务
  5. ASP.NET Core Web API基于RESTFul APIs的集合结果过滤和分页
  6. Asp.Net Core Identity 骚断腿的究极魔改实体类
  7. 如何运用领域驱动设计 - 存储库
  8. .Net Core 3.0 IdentityServer4 快速入门02
  9. 限时团购，6.5折：《C# 7.0 核心技术指南》
  10. [译]C#中的条件断点