《iVX 高仿美团APP制作移动端完整项目》07 会员页制作

Posted 2022-05-03 1_bit

会员页如下：

一、会员页标题制作

会员页的标题是顶部的提示字样，该字样咱们可以分析，可以使用两个文本组件，每个占据一行：

首先咱们创建一个页面命名为会员中心：

接着在会员中心下创建一个行，命名为主要：

随后设置对应上下内边距，使接下来的标题对于顶部有一定的距离：

最后设置属性中的高度和背景色即可完成主要行的基本设置：

接着在主要行内创建一个行，命名为标题：

随后创建设置背景色透明、高度包裹：

但是不要忘记，一定要设置其对应的内边距，否则将会不美观：

接着咱们即可在内部设置对应的标题了，创建两个文本在标题行内部：

首先设置第一个行的宽度为 100%，这样这一行即可占据整行：

随后设置对应的文本：

那么接下来需要设置第二行内容，咱们可以看到第二行的文本有一个文本为红色：

那么此时我们应该再创建一个文本，在这一行使用两个文本进行制作：

这个时候我们将左侧的文本的颜色设置为红色：

将其值改变为数字：

接着右侧的文本进行改变：

此时发现两个文本换行了，这是因为当前两个文本的总长度大于了100%，那么这个时候我们可以集体更改文本的大小：

这样的话标题就解决了。

二、制作会员卡

接着咱们开始制作会员卡片内容：

我们在此可以分析，这个卡片应该是在一个行之内，随后该行中有对应的头像和手机号信息，那么我们的内部容器应该为左侧一个头像容器，右侧一个容器容纳手机号和到期日期，右侧为一个整体分为两行，那么如图所示应该是如下：

那么此时我们创建一个行命名为信息，并且设置基本的背景色透明和高度包裹：

由于我们可以看到，这个会员卡片明显是距离其他地方很远，那么则需要给予对应的上下左右的内边距，这样卡片才能网内部进行缩进：

随后创建一个行，命名为会员信息，并且设置基本属性：

随后我们可以发现，卡片内的内容是往内缩的，那么必然会要设置内边距：

接着设置对应的内边距内容：

接着更改当前这个行的背景色：

接着我们先制作会员卡顶部内容：

创建一个行在会员信息内，命名为会员号：

接着在会员号内部创建两个行，一个命名为头像，另一个命名为昵称：

此时，设置头像的行的宽度为 20%，昵称行的宽度为 80%：


接着往头像行中添加一个图片，图片的宽度为 100%，并且设置对应的圆角值：

随后再到昵称行中添加文本即可：

此时发现这两个元素并不对其，此时只需要设置其父容器会员号的垂直对其为居中即可：

接着我们再制作优惠信息内容：

在会员信息下创建一个行命名为优惠信息：

接着给予上下左右外边距，因为该行是距离上部分左右都有一定距离的：

优惠信息分为左侧内容和右侧内容，我们在优惠信息内创建两个行：

一个命名为累计，一个命名为立即续费，累计占据宽度80%，右侧占据宽度20%：

接着添加累计的文本，设置其样式即可：

那么右侧添加一个按钮，设置其属性即可：