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

会员页如下：

在这里插入图片描述

一、会员页标题制作

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

随后设置对应的文本：

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

将其值改变为数字：

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

这样的话标题就解决了。

二、制作会员卡

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述