《iVX 高仿美团APP制作移动端完整项目》07 会员页制作
会员页如下：
一、会员页标题制作
会员页的标题是顶部的提示字样，该字样咱们可以分析，可以使用两个文本组件，每个占据一行：
首先咱们创建一个页面命名为会员中心：
接着在会员中心下创建一个行，命名为主要：
随后设置对应上下内边距，使接下来的标题对于顶部有一定的距离：
最后设置属性中的高度和背景色即可完成主要行的基本设置：
接着在主要行内创建一个行，命名为标题：
随后创建设置背景色透明、高度包裹：
但是不要忘记，一定要设置其对应的内边距，否则将会不美观：
接着咱们即可在内部设置对应的标题了，创建两个文本在标题行内部：
首先设置第一个行的宽度为 100%，这样这一行即可占据整行：
随后设置对应的文本：
那么接下来需要设置第二行内容，咱们可以看到第二行的文本有一个文本为红色：
那么此时我们应该再创建一个文本，在这一行使用两个文本进行制作：
这个时候我们将左侧的文本的颜色设置为红色：
将其值改变为数字：
接着右侧的文本进行改变：
此时发现两个文本换行了，这是因为当前两个文本的总长度大于了100%，那么这个时候我们可以集体更改文本的大小：
这样的话标题就解决了。
二、制作会员卡
接着咱们开始制作会员卡片内容：
我们在此可以分析，这个卡片应该是在一个行之内，随后该行中有对应的头像和手机号信息，那么我们的内部容器应该为左侧一个头像容器，右侧一个容器容纳手机号和到期日期，右侧为一个整体分为两行，那么如图所示应该是如下：
那么此时我们创建一个行命名为信息，并且设置基本的背景色透明和高度包裹：
由于我们可以看到，这个会员卡片明显是距离其他地方很远，那么则需要给予对应的上下左右的内边距，这样卡片才能网内部进行缩进：
随后创建一个行，命名为会员信息，并且设置基本属性：
随后我们可以发现，卡片内的内容是往内缩的，那么必然会要设置内边距：
接着设置对应的内边距内容：
接着更改当前这个行的背景色：
接着我们先制作会员卡顶部内容：
创建一个行在会员信息内，命名为会员号：
接着在会员号内部创建两个行，一个命名为头像，另一个命名为昵称：
此时，设置头像的行的宽度为 20%，昵称行的宽度为 80%：
接着往头像行中添加一个图片，图片的宽度为 100%，并且设置对应的圆角值：
随后再到昵称行中添加文本即可：
此时发现这两个元素并不对其，此时只需要设置其父容器会员号的垂直对其为居中即可：
接着我们再制作优惠信息内容：
在会员信息下创建一个行命名为优惠信息：
接着给予上下左右外边距，因为该行是距离上部分左右都有一定距离的：
优惠信息分为左侧内容和右侧内容，我们在优惠信息内创建两个行：
一个命名为累计，一个命名为立即续费，累计占据宽度80%，右侧占据宽度20%：
接着添加累计的文本，设置其样式即可：
那么右侧添加一个按钮，设置其属性即可：
《iVX 高仿美团APP制作移动端完整项目》07 会员页制作相关推荐
- 《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制作移动端完整项目》09 订单页制作
订单页制作比较简单,界面如下: 一.标题 首先创建一个页面,命名为订单页,并且给予背景色为黄色: 随后创建一个行,命名为主要并给予对应的基础属性: 接着给予这个主要行对应的上下内边距使其给顶部具有与元 ...
- 《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 ...
最新文章
- 某快手程序员爆料：给小厂随便投投简历，面试表现很差也能过，大厂背书确实有用！...
- Dropbox 的用户付费账户降级策略
- Visio 2010，如何打开多个窗口
- Windows下 Apache+PHP5+MYSQL5+phpmyadmin 规范安装
- 安卓php高级编辑器使用方法,Android Studio实战 - 编辑器介绍与使用
- task_struct 结构如何查看及分析
- 前端学习（2532）：vuex mutation
- 一个可变布局列表，有9种布局item大小，每个item可拖拽切换位置
- 并发性（concurrency）和并行性（parallel）区别
- JDK下载安装及环境变量配置的图文教程（详解）
- 声音均衡器怎么调好听_完美音效就靠它了！最详细均衡器调整方法
- 如何使用spring2.0
- metro，subway，tube这三个单词如何区分？
- Windows的13个版本的区别，企业版、教育版、专业版、工作站版、SE版的主要区别
- 网络口碑监控系统方案
- python类的实例化和继承
- subDomainsBrute 子域名工具 源码分析
- TIOBE 8 月编程语言排行榜：没有一门语言能比得上 Python
- 开阳大数据产业行动计划出炉
- Sikuli学习（一）