会员页如下:
一、会员页标题制作
会员页的标题是顶部的提示字样,该字样咱们可以分析,可以使用两个文本组件,每个占据一行:
首先咱们创建一个页面命名为会员中心:
接着在会员中心下创建一个行,命名为主要:
随后设置对应上下内边距,使接下来的标题对于顶部有一定的距离:
最后设置属性中的高度和背景色即可完成主要行的基本设置:
接着在主要行内创建一个行,命名为标题:
随后创建设置背景色透明、高度包裹:
但是不要忘记,一定要设置其对应的内边距,否则将会不美观:
接着咱们即可在内部设置对应的标题了,创建两个文本在标题行内部:
首先设置第一个行的宽度为 100%,这样这一行即可占据整行:
随后设置对应的文本:
那么接下来需要设置第二行内容,咱们可以看到第二行的文本有一个文本为红色:
那么此时我们应该再创建一个文本,在这一行使用两个文本进行制作:
这个时候我们将左侧的文本的颜色设置为红色:
将其值改变为数字:
接着右侧的文本进行改变:
此时发现两个文本换行了,这是因为当前两个文本的总长度大于了100%,那么这个时候我们可以集体更改文本的大小:
这样的话标题就解决了。
二、制作会员卡
接着咱们开始制作会员卡片内容:
我们在此可以分析,这个卡片应该是在一个行之内,随后该行中有对应的头像和手机号信息,那么我们的内部容器应该为左侧一个头像容器,右侧一个容器容纳手机号和到期日期,右侧为一个整体分为两行,那么如图所示应该是如下:
那么此时我们创建一个行命名为信息,并且设置基本的背景色透明和高度包裹:
由于我们可以看到,这个会员卡片明显是距离其他地方很远,那么则需要给予对应的上下左右的内边距,这样卡片才能网内部进行缩进:
随后创建一个行,命名为会员信息,并且设置基本属性:
随后我们可以发现,卡片内的内容是往内缩的,那么必然会要设置内边距:
接着设置对应的内边距内容:
接着更改当前这个行的背景色:
接着我们先制作会员卡顶部内容:
创建一个行在会员信息内,命名为会员号:
接着在会员号内部创建两个行,一个命名为头像,另一个命名为昵称:
此时,设置头像的行的宽度为 20%,昵称行的宽度为 80%:
接着往头像行中添加一个图片,图片的宽度为 100%,并且设置对应的圆角值:
随后再到昵称行中添加文本即可:
此时发现这两个元素并不对其,此时只需要设置其父容器会员号的垂直对其为居中即可:
接着我们再制作优惠信息内容:
在会员信息下创建一个行命名为优惠信息:
接着给予上下左右外边距,因为该行是距离上部分左右都有一定距离的:
优惠信息分为左侧内容和右侧内容,我们在优惠信息内创建两个行:
一个命名为累计,一个命名为立即续费,累计占据宽度80%,右侧占据宽度20%:
接着添加累计的文本,设置其样式即可:
那么右侧添加一个按钮,设置其属性即可: