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

2024-04-23 13:40:58

订单页制作比较简单，界面如下：

一、标题

首先创建一个页面，命名为订单页，并且给予背景色为黄色：

随后创建一个行，命名为主要并给予对应的基础属性：

接着给予这个主要行对应的上下内边距使其给顶部具有与元素的一定距离：

接着创建一个内容行，给予对应的基础属性：

在内容行中创建一个对应的标题行用于标题的制作：

在标题中创建一个文本：

设置标题行的水平对齐为居中即可：

二、购买最多

接着创建一个行，命名为购买次数：

接着给予购买次数行的上下左右内边距：

接着创建一个行，命名为统计：

在此还需要设置这个行的水平对齐为靠右：

因为接下来的的文本需要靠右显示，接着创建一个文本，设置文本为查看更多：

接着设置对应的内容背景色为白色即可：

此时我们发现，订单标题应该放于外侧，那么此时拖动标题行至于与内容行同级：

接着创建内容行的中购买次数店铺，由于其中每一个购买次数都是一个单独的个体：

咱们在此创建一个列，命名为信息，设置基础属性值：

接着添加文本和图片设置样式即可：

接着复制多个信息内容，再设置水平对齐为等间距即可：

二、商铺信息

商铺信息跟之前对应的内容一致，在此直接复制过来即可：

《iVX 高仿美团APP制作移动端完整项目》09 订单页制作相关推荐

《iVX 高仿美团APP制作移动端完整项目》03 推介信息及推荐商家分析及制作
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.推荐信息制作推荐信息与之前的标题下推荐信息制作类似: 此时依旧创建一 ...
《iVX 高仿美团APP制作移动端完整项目》02 搜索、搜索提示及类别需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.搜索制作在上一节中我们完成了标题头的制作,接下来我们查看如何制作搜索 ...
《iVX 高仿美团APP制作移动端完整项目》01 标题需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.创建项目首先打开在线编辑器地址:https://editor.ivx ...
《iVX 高仿美团APP制作移动端完整项目》04 美食页标题、搜索、商家标题制作
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.美食页顶部商家页制作 1.1 页面主格调确认该美食页为首页中美食按钮 ...
《iVX 高仿美团APP制作移动端完整项目》06 美食页商家推荐内容、分类、推荐商家制作
接下来开始制作超市便利页面: 一.标题首先,我们创建一个页面,该页面设置背景颜色为黄色: 随后欧创建一个行,命名为主要,之后将会在这个主要行之中添加对应的模块内容: 该主要行,属性需要设置背景色为透 ...
《iVX 高仿美团APP制作移动端完整项目》05 美食页商家推荐内容、分类、推荐商家制作
这一节我们将讲解美食页下半部分内容制作: 一.完善店铺推荐接下来继续制作以下内容: 1.1 满减信息现在咱们在对应的商家行中添加一个行,命名为满减,并且对应的更改高度为包裹: 随后更改其背景色.字 ...
《iVX 高仿美团APP制作移动端完整项目》08 会员页标题、会员卡制作
一.分类制作我们接着往下制作该页的下半部分内容: 由于对应最下部分的商家推荐重复,直接复制即可,在此不做过多的讲解: 接下来我们创建一行命名为内容,用以作为下半部分的容器: 接着我们制作第一个种类, ...
基于Vue全家桶制作的的高仿美团APP
美团外卖APP ? 项目演示地址:http://39.108.232.27:9000 ? GitHub:github.com/bxm0927/vue- 基于 Vue 全家桶 (2.x) 制作的美团外卖 ...
高仿微信APP实战（一）-Actionbar的制作与应用
高仿微信APP实战(一)-Actionbar的制作与应用本文是仿微信app实战系列的第一部分,先从简单的做起,边做边学习.从顶部actionbar开始,先看一下效果图: 一.定义主题样式 <r ...

最新文章

热门文章