00:00
下面呢,我们来去开发,点击确认支付,达到一个支付成功的一个效果。看到这个图啊。我们可以看到这个pay success。那么这个呢,就是我们的这个支付成功页面啊,点击这个确认支付呢,那么它就应该显示这个页面。OK,整个页面呢,我们接下来去开发一下。那么它并不是一个单独页面啊,它其实就是一个组件。就是这个组件,然后呢,只是他在这里想办法显示而已,对吧,想办法显示。啊,这时候我开发的时候啊,为了我们能更好的开发呢,我们先把这个配子键来。先做一些下更好的调整。首先首页这里我们改成配。这样的话呢,我们一上来就会看到我们的这个内容了。对吧,这样我们方便调整啊,上面有没有东西都无所谓啊,接下来我们来开发一个配success这个东西呢,是一个单独的整体啊,我们可以写成一个组件。
01:06
支付成功在这里我们去完成我们瑕疵的一些操作。Pay success。嗯,设置这个组件呢,我们接下来一起来看啊,一起来看。我们呢,首先先给他一个类名。它整体是个这道层开启定位。Lovely。TOP0,然后呢,宽高百分百。带几色是一个?Rgba是个透明的。也是。好,我们先在设置啊,然后呢,这里面就有块容器。
02:07
它应该定位在下面。Position absolute。Bo Li。对吧,大概是这样的一个情况,Left丁宽了百分百。高度的话呢,我们可以给个200PS看效果,Background color,它是一个白色,同时border radiOS。而且只要上面的。好了啊,这个就是这个组件,那么为了方便显示,我们把组件在这里引进来。
03:04
然后呢,在热议的区域上放着它。好了,我们可以看效果。现在这里就显示了,那么很明显就是这个区域呢,它应该要再往下移一些位置啊,我们来看一下外面的包了一个view,它的整个区域没有遮住这个最下面啊,我们应该要遮住整个最下面。所以说我们。这个高。这个bottom。它这个button呢,Top离波这里还有一些区域没有这。没有盖住啊。TOP0BONY,我们看效果,诶这样呢,就盖住了这个最下面区域啊,下面这个导航栏不用担心,因为最终它是没有这个导航栏的。
04:01
好,呃,根据我们的这个图,我们接下来要去给它添加一个文字。来,我们看一下这个微信图。就是支付成功,支付宝支付完成,就这三个东西来。首先整一个。比如呢,我们class。这里我们就叫那个U1吧。但是驾照的名字可能会和外面的冲突啊。我们就这样去。它呢,很简单啊,他要。OK,然后让他们呢?在space这个center啊,让他们居中,因为接下来这里要分几段文字,分三段文字。
05:09
第一段文字是这个支付成功。第二个文字是这个这个诶它们大小是一样的,那么就可以,其实这里就可一起写了,如果它们大小不一样,就跟上面不一样的话呢。我们到时要做些更多的调整。对吧,我们就可以做些这些调整啊。呃,这个呢,都是一样的。喂,我们可以调一下这个样式。它们的整体就是风,Size调为大二10PS。的位为700。加粗对吧,这样呢,就会以达到一个稍微来加好看点效果,然后呢,他们的对齐方式好的。
06:05
为这个机械贝。他们就会对齐20PS,如果不够的话还可以再调啊。点T2,它呢也是photo weight700,但是它的大小为16P。OK,然后整块区域呢,它应该要top来个。20PS,我们看效果。差不多20啊OK,支付成功这一块就出来了,同时你有必要的话,可以给他左边距啊,这里有个marin ne10PS,这样的话呢,他们就不会靠得太近。对吧,不能靠太近。接下来呢,下面是一段小的文字啊,显示支付宝支付。
07:22
看了灰色。来看效果。在这里,然后呢,文字居中填上为center。它就会居中布局,然后跟上面间距稍微有一些magic top为10PS。OK,这样呢,它就显示在这个线的位置了,支付宝支付,当然你不给这个灰色好像也是OK的。好了,那么最后呢,我们在下面给一个按钮就好了啊。啊,那么我们整个元素的高度的话呢,就不需要给点,让它被内容撑开就好了,我们就不给它额外的高度了,好,我们再来一个按钮。
08:17
最大点呢,叫完成。宽度百分百。对吧。高度。50。叫做magic。十。先改善再说啊,那么这个宽度的话呢,这个百分百就不太行啊,就十。OK,它自然就OK了,上下十是不够的。
09:02
我们来算一下,上上的话呢,我们来个30,下的话呢,我们来个50。看效果。呃,好吧,那么上下都是30吧。OK,大概是这个样子,当然你下面如果希望少一点的话,那你可以下面给个十。大致相对这个。呃,40PS看还是都50吧,然后呢,Background color。00CC99。Border radius10PS。风,SIZE16PS。好了,呃,左右的话呢,也得有10PS的一个间隙啊。OK,那么我们这个基本页面就完成了下面一个按钮,上面两段文字,那么后续我们只要点击这个完成按钮即可跳转。
10:09
这个按钮还是40P,可能会。呃,更更好看一些好吧。我们就先看到这。
我来说两句