00:01
接下来呢,我们来继续开发下一个静态组件购物车。我们呢,先不去写这个首页的功能,因为在写功能的时候,我们需要搭建好数据云,而数据云的数据不止首页的数据,还有店家的数据,还有购物车数据,还有订单列表等一系列数据。所以我们想把我们这四个首页购车我的和订单列表,把这四个静态主机搭建好,我们再统一的把数据云全部构建完成之后呢,我们就可以在相应的页面上去获取数据,做一些操作了,就会非常方便了。好了,所以我们接下来呢,还是去搭建精彩组件,我们来到购物车。购物车呢?我们打开原型图啊,我们一起来分析一下购物车的整体结构。喂,这里呢,就是我们的整个购物车组件,同样的,截个图。好,整个购物车组件呢,它的结构呢,分为这个几个层次啊,上面是一个head对吧,中间是一个可以滚动的咱们的购物车数据,下面呢,就是一个呃,底部导航代表我们选择的这个商品的一个价格的一个情况,最后的一个结算按钮。
01:17
所以说它主要就分为这些结构啊是。中间是一个可以滚动的区域对吧,下面是一个固定的一个位置,中间区域呢,又分为上和多个列表,多个列表对吧,然后每个列表的话呢,它又分为左。Z。右三块区域啊,左边一点,然后右边一点。大概是这样的一个区域,然后呢,呃,这个右边的区域的话呢,又分为上。下和最下面,最下面呢又分为一组,也有两个结构,所以这个就是整体的一个购物车的一个数据的一个拆分。好了,当我们清楚了页面结构之后呢,我们接下来就可以去搭建它了。
02:04
而整体呢,因为这一块内容它并没有特别的复杂,包括这个全选功能和这个购物车,所以我们就把它定义成一个统一的组件就好了,就不去拆成多个组件,因为就这一个T去拆分的话没什么意义啊,包括下面这个我们也没必要拆分了,我们就统一写在shortca里面,所以它整个结构我们一起来研究一下,而且它背景色呢,也不需要指定啊,就是一个这样的背景色,我们下面一起来完成它。来,呃,首先呢,我们需要去搭建这几个结构啊。Page。配置呢,它都有一个统一的高度百分百。OK,没有问题,下面呢,就几块区域我们分别来写。第一块区域呢,它分为两个test。
03:01
对吧,一个是购物车,一个是管理。好,然后下面这个六的话呢,就会比较多啊,我们先不管下面这个呢,它是可以滚动的,甚至是SC。然后再下面呢,它是。相应的这些内容我们都写一下啊。呃,分别是一个图片,左边图片加全选,右边是这些文字啊,所以我们可以把它变成一左右两个结构。左边是一个面标签。嗯,好的。我们来看一下这个图片地址。来到里面有track track,我们随便选一个就好了。OK。
04:01
然后呢,下面呢,还有一段文字全写。好了,然后接下来呢,又是一段这样结构,诶,只是这里面的结构内容会比较多一点啊。都是文字。以选择。几件?然后后面的合计啊,这些都是一起的,然后再接着是一个价格,那么注意这个价格呢,这个钱的符号是比较小的,这个另外一个价格是比较大的,所以它其实也是由两部分组成。一个是这个钱的符号对吧,是中文的这个多乐福,然后呢,后面是真正的价格。然后最后面最最右边啊,就是一个按钮了。好了,那么我们中间的内容我们先不管了,我们先把上和下。
05:04
结合取号,取好之后呢,我们给它分别指定一个内名,呃,下面这个就叫配置,我就不改了吧,那么下面这个呢,我们是叫购物车shop cuts,对,Head。那么下面这块区域,我就叫福特吧。OK,我们先来完成上面这个结构的内容。它呢,首先它要水平布局,并且一左一右啊,所以说flash为肉。这样就会水平排列,Just content space between,它就会一左右布局。好,下面我只要打开我们这个内容,它就会出现啊。OK,现在这个效果显示的有些奇怪啊,我们来到购物车这里。
06:00
选择购物车啊,OK,它这里呢,其实就已经有显示了,但是它显示了两个管理,因为下面这里也有啊,下面这里我先随便写个叉叉吧,不然的话他看起来会不太一样,每次刷新的时候,它默认刷新的第一个页面都是首页啊,但是现在我们希望开发的是购物车,那怎么办呢?诶,这个时候我们来到APP address啊,在这里面再加一个新的属性叫index index就是我们首次访问的这个索引是第几个页面,我们调为一零是第一个,一是第二个啊,所以这样呢,它每次刷新的时候就会显示这个购物车页面了,这样呢就会比较方便,就不至于你每次还要点进去啊。好了,现在购物车和这个管理呢,就一左右布局了,当然我们还需要加一些偏顶,然后整体呢,它有些高度啊。高度的话呢,我们也定成50PS,偏里的话呢,上下左右来个10PS啊,不要贴边,稍微有些间距OK,然后呢,购物车文字稍微大一点点就好了,所以说我们最后把它这个文字调一下。
07:07
就是这个标题吧。风size为30篇,怎么看效果?会不会太大了?30好像还是有点大啊,我们25吧。OK,差不多啊,右边这个文字其实也会要调的稍微大一些些啊,且他们呢,呃,应该是一个垂直居中的一个状态。然后呢,跟上面是有比较明显的一些间距的,所以说我们在Mar top和20吧。上下都来20,不要只有上啊。OK,咱们这里看对齐一下。其实差不多就是管理呢,我们需要稍微的大一点点。
08:00
那么我们这个就叫test。他呢,稍微大一点点,也不需要大太多啊,就十八二十这样的样子啊,甚至可能是20PS。同时这个字体呢,其实它相对来讲会更粗一些,所以说你需要的话呢,可以加个缝位置把它加粗一下,这样的话呢,它就会显示效果上更显艳一点,但是好像没有这加粗啊,那我们就不加了,加粗的话感觉开卖的。好了,那么这个头部这一块我们就做好了,购物车管理啊,下面呢,我们能看到下面这一块也做一下,它也有高度啊。来,往下走。Shop foot wrapper。那么这个的话呢,我们定位啊,这里没有那个固定定位,我们得用相对定位来模拟,Left的话呢,是零,它是波的话是零啊,然后宽度的话呢,我们调为百分百给一个背景色,白光的cut是白色,同时我们需要给它加一个高度啊,高度是50PS。
09:15
好了啊,那么我们就能看到它这块内容呢,就会在这啊。我们的配置为百分百应该是没有问题的。但是这上面好像留了一些空隙啊,留了一些空隙可能50PS还不够啊,我们先调大一点,要调成80。呃,上面呢,留了一些空隙啊,我们来看一下是什么原因导致的啊,它呢,这个高度没有撑满,还差那么,呃,感觉是10P,我们把这个类名改一下,我们就叫shop car就不叫配置了。会不会是其他的类名影响到了他?OK,它这里呢,我们再看一下啊。
10:01
整合view呢,属于这个save area没问题。它的这一块区域距离底部呢,会有这样的一个10PS的一个空隙啊,那么我们这里呢,只要负10PS就好了。对吧,啊还不够,应该是负12。诶,这样就差不多了啊,差不多了,没有任何问题,OK,它这里呢,应该是那个安全区域啊,它跟下面的稍微有些间隙,所以说我们就没办法,就需要调个负的一个值,可能才会达到我们预期负12 PS。然后接下来呢,我们就按照要求去写啊,首首先它整体是要水平排列的,Flash direction为wrap wrap。对吧,他们就会水平排列,水平排列的话呢,我们希望他们一左一右,Justtic ten为space between,那么他们就会一左一右。对吧,他们就会一左一右整个高度应该是没问题的,然后加个pending啊加个pending。
11:09
上下零左右的话呢,我们给10PS就够了,这样呢它就不会贴着边啊,它就会左右稍微有一些空隙,OK,然后呢,他们整体的内容呢,我们肯定是要来center的,要垂直方向是要居中的。所以说到时候呢,它会居中好了,然后接下来我们继续去往里面去写它的内容。给他类名,左边这个呢,我们就叫。那个选择的按钮的一个rapper吧。右边呢,我们就叫做价格的一个rapper吧。或者是一个sum,一个结算功能的一个容器。
12:00
好,我们先来看左边,它同样的水平排列啊,所以说Fla direction为肉。他们就会是品牌的了。对吧,然后把这个图片大小呢调小一点点啊,将来这个选这个按钮呢,我们能看到到处都使用啊,所以我们第一个公共类去设置,它后面呢,我就只要写一遍了,就叫check image。定义公共类名,后续只要是这个我们都用这个类名就可以了,它的宽度高度呢,我们先定成20PS看一下大小是不是。合理的。OK,是没有任何问题的,然后呢,它们之间要垂直居中,同时我们给它一个右边距,右边距的话呢,应该要大于十。OK20PSOK好了,那么这样的话呢,我们就把这个内容也写好了。整体的这个图标的话呢,稍写呃,小一点点啊,我们再调大一点点,看看会不会有什么不同。
13:02
OK,我们调到25,然后呢,这个选选的文字呢,它应该是一个较灰色的一个文字啊,所以说我们把它的样式呢,再调一下。是这个track的T。灰色的话呢,我们只要调color就好了,还是一样啊,颜色到底是怎么去选的话,我们找到一个页面,然后呢,点击任意的颜色,它就会出现这个取色器。点击取色器呢,我们来找到这个颜色啊呃,这个颜色需要稍微放大一点点,可能会找的更清晰一些啊。对,就是它是CCOK,我们就用这个颜色就好了。当你内容写的错的话,他可能会退出程序啊。啊,明显是不一样的,看来它放大的话,这个颜色是会丢失的。
14:07
呃,那么我们这里也是简单给一下,我们这里因为没有去写这个对应的这个颜色啊,我们如果是灰色的话,就都给一个这个色,后续呢,我们如果有需要的话,再去调整这个颜色好了,那么这个全选也做好了,接下来右手边这里也需要做相应的调整。他们也是要水平排列。所以说我们一样的Fla为肉。然后呢,A center。OK,非常完美啊,它就已经水平排列了,接下来我们要做的就是把这里面的颜色呢进行调整,然后呢,把这个呃,文字呢,这个颜色的文字调大一点,同时调成一个红色啊。Class,这个呢,我们就叫。
15:01
Sum的一个数量吧,Number。这个呢,是那个价格啊。Price。的一个前缀preface,我就叫preface。那么这个下面是个价格就叫price了。然后呢,最后面是一个按钮,Sum。Button,好了,我们都给出来了啊,首先来到some number,给他一个颜色,那么我们也是给个green。就不做过多调整了。好了,然后呢,接下来两个啊,一个是some me pre,它的它只要改个颜色color。为red,然后呢,我们再改一个surprise,它的color也是red。OK,只是price的大小的风,Size它需要调的更大一点啊。
16:02
OK对吧,然后呢,加一个marin rights。跟右边结算按钮稍微有些间隙,诶这样呢,它就显示成功了,好了,那么我们这个结算按钮呢,我们也把它调整一下submit button。OK,那么调整这个按钮的话呢,我们需要给它一个border啊,Border reduce。整体的按钮的话呢,它会相对来讲更大一些些啊,所以说我们高我们这个高度的话呢,比如说调成呃,比如说40PS,那么border radiOS我们就调成20PS。OK,这样呢,就形成了一个这样的结算按钮,呃,整体的这个background color的话呢,是我们那个主题色00CC99。对吧,OK,然后里面的无缝size字体大小要稍微的大一点点啊。
17:05
报时吧,我们看效果。20稍微大,18。OK,那么这样呢,就形成了一个按钮,这同时这个风位呢,可以调粗一些些啊,可以让它显示起来会更加。呃,重要一些,这个可以自行调整。OK,那么这样的话呢,就基本上把这个内容呢给调整好了,从啊这个高度呢是40PS。对吧,好了啊,这样的话呢,我们就基本上调好了,我们整个的这个内容。整合这个内容,这个按钮呢,我们调好了,接下来呢,我们会点击按钮去完成相应的一些功能性的操作。OK,呃,那么这里上的就是我们这个上面和下面的一个布局和样式,中间的话呢,我们也搭建一下,中间也搭建一下,整体是一个。
18:08
View啊是一个的一个服务的例子。它呢,有一个圆角。对吧,首先他background color是一个白色。是一个白色。诶出来了,然后呢,建议是个马啊马in呢,上下角是零吧,左右来个10PS。同时它有个border radiOS,我们来看10PS。或者5PS都行。OK,呃,整体的整个内容呢,我们需要把它撑开一点啊,它内容没有太多,我们需要给它填充一些内容,整个内容的话呢,由多个结构组成啊,首先整体是一个view view的话呢,分为上面和下面多个列表,所以说它整体分为两两块内容。
19:06
一个是上面部分,上面部分的话呢,它也是由这两部分组成啊,一个是一个图片,图片呢,我们可以直接复制了,因为还是这个图片,那么又再接着是一个文字。好。然后在线上的又是一张图片啊,再写的又是一张图片,那么这个图片的话呢,它我们来看一下,是说pass里面的最后一张图片是这个forward图片,我们叫forward。好的啊,类名的话呢,后续我来改啊,先不着急,我们先把结构先搭建好,然后往下走,下面这里的结构也是一样,左边呢是一个image,然后右边呢,下面又是一个图片,对吧?是这个大图啊,大图的话呢,是就不是shop了,是shop里面的故事图片。
20:01
这里面是那个商品图片,所有的这个商品图片都在shop里面啊,是是JPG图片OK。好呃,它的这个类名肯定不加这个,然后接下来呢,右手边呢,它是有很多区域的啊,右手边这里写起来会稍微费劲一些。来右手边的话呢,分为上中下三个结构。其中呢,上面是一个整体,下面是个整体啊,为了方便布局的话呢,我们甚至可以再去里面包两个结构。上面呢是一个T是这个什么什么标题。对吧,下面是它的什么规格。OK,然后再下面呢,又是一个V,那么下面这个view的话呢,又分为两部分啊,一个是左,一个是右,所以右要八个view。左边的话呢,是一个那个前的符号,右边呢是它的这个前的具体的值,好,然后呢,在右手边的话呢,它是由按钮。
21:10
就是几个内容组成按钮,其实就是按钮,咱们的这个文字,还有这个按钮组成。好了啊,我们就把这个结构组合成了啊,所以整个结构呢,会稍微的复杂一些些啊,那么我们在写的过程中,一定要认真的先观察好结构,我们再来去完成其中的具体的功能,好呃,这样的话呢,我们就诶,首先这个基本结构就出来了啊,基本结构出来了之后呢,我们接下来就按照要求去搭建,首先上面呢是有个高度的。那一点血。整体的这个view呢,是我们属于说是属于food。
22:07
对吧,然后呢,这是负的一个header。下面是它的这个附带的附带head we,下面这个呢是附带的详细内容。OK,我们大概写了一下这些结果啊,那我们一起来去完成,首先呢,它整体是垂直排列的啊,这个头部和下面是垂直排列,所以说这一块不需要做太多的变化,只是说它需要有一个偏定效果,所以说我们需要给他一个偏定效果。喷底的话呢,我们上下播上下左右都十了,我们给它一个效果就好了,OK,它这个第一个喷底效果就来了。那么接下来第二个我们继续调整。
23:02
调整的就是它这个是水水平排列的,所以说我们继续。Fla direction为肉,这样的话呢,它这个就会水平排列,水平排列的话呢,我们要做的就是给这个肯德基啊加个粗对吧,加粗一点,然后呢,它跟左边左右的间距不要拉的太开啊,我们之前给他的加的这个间距,这是没问题的,但是。这个左右间距不宜不宜太开。我们看一下之前加的Mar right20PSOK,没问题,那么这个title距离这个东西也来一个20PS的一个间距。OK,它这个呢,也就这个image吧,这个就不变了,其实这个整个这个图片还能再小一点,我们还是再改一下吧,OK,这个是负的title。正式服的一个error。
24:06
好,来,抬头。风size稍微的粗大一点和粗一些。箭头的话呢,宽高都相对来讲小一点点啊,不要太大。OK,那么我们这个就写出来了啊,Mar为20PS。OK,然后呢,让他们垂直方向继续下中。咱们来看一下标题,18PS有点小啊,20PS。差不太多啊,差不太多,我们让它垂直居中一下,我们找到这个容器啊来。这样的话呢,在垂直方向呢,就可以对齐,同时它还要一些间距啊。
25:00
Mar top呢,十,Mar为20。因为它上面有个偏顶啊,所以说我们上上面给个十,下面给个20,这样呢就可以拉开较大的差距了。好了,那么第一个我们这块结构样式就写好了,接下来写第二块,第二块呢,我们继续给它取类名。呃,类名级区号呢叫F他们呢是要水平排列的啊,所以说我们第一个类名又是这样。Allow items为center,呃,Less direction同时垂直要居中。OK,垂直方向呢是居中的,同时他们也在水平排列,没问题,下面我们给这个负的图片去加样式。来附的图片。
26:02
复合合并的话呢,它有个border radiOS对吧,很明显有个border radiOS,然后它的。宽度和高度呢,稍微有些不太一样,宽度呢,我们假设一百五吧,高度100我们试试。呃,整体有些偏小啊,看起来有些偏小,我们对一下啊。对一下这个购物车这块其实还是稍微的。这个margin有点宽。上时。上十十撇上20没问题啊,下十的话。OK,这样的就基本上是对齐的,我们整个图片的高度还需要再高一点,宽度还需要再宽一点,所以说我们宽度的话就200,高度为150。好了,这样这个大小应该就基本上是差不多的了,基本差不多了,我们就这个高度和呃,好像宽度有点宽啊,因为我们这个等比例放大的话呢。
27:12
他肯定没有这么宽。对吧,我们可以放大成等比例的一个大小。这样呢,就大概是个等比例的大小啊。呃,整体的这个高度呢,其实它是有些。偏那个啥的,偏高的。对吧,包括下面这个也是有点有点偏大,有点偏大,后续我们再做一些小细微的调整就好了,我们这里呢,就不要求去什么100%去还原它的一个设计理念啊,我们只要差不多就可以了。一百二吧,100。
28:01
OK,这样的话呢,这个大小又显得稍微的小一点点。呃,150。高度100应该是没差啊,高度100也是没差,好然后呢,我们再去设置这个标题。标题我们来看啊。在这里有食品的具体的标题。我们来一点点血。一堆堆血。首先整个容器的话呢,它的宽度要撑满啊,要撑满,它现在没有撑满,我们后面来去操作,它后面我们把这个宽度给撑满。呃,然后标题的大小它需要一行排列啊,不能换行,所以说我们对这个文字是有要求的,我们后面这个文字多加一点内容,它不能换行啊,所以说我们到时候要这个文字呢,是不能换行的,它现在换行了,我们都要做一些处理,规格的话,往下走这是没问题的,所以说我们这里只需要对这个文字有些要求。
29:16
呃,这个呢,我们就要负的。上面这个叫附带head的抬头比较好啊,其实它对应的是店家的名字,不是不是这个。这个叫shop抬头比较好,是店家的名字啊,这个叫for的抬头是比较不错的。所以说这个类名这里我们需要做些调整。待会儿我们再往下走。负抬头这里改成硕抬头,我们在下面去写这个负抬头。好负的抬头的话呢,它的大小我们需要加粗一下,大小倒还好,就是需要加粗一下位置。
30:06
OK,我们进行了加粗,然后下面这个规格的这个大小是要调小一点的,然后它呢,不能溢出,溢出要隐藏啊,所以说我们呢,首先第一个。这里需要设置三个样式,首先第一个是test。这个。Overflow代表它溢处隐藏的显示的是这个省略号,然后呢,Right face we no re,但它文字不能换哈。不能换行,同时呢,我们在可以溢出隐藏对吧,就这个,所以说它这样呢,就会显示成一行一行的话呢,它就会多余的内容会显示成一个省略号的一个效果。
31:00
大致上就是这样的,然后这个标题的大小的话呢,我们调成20,我们看看效果。我们调成20的话,和上面这个会一样大啊,我们上面这个没有调的话,那我们下面这个也不调了啊,那它的大小呢,和上面这个稍微有些差距。好了,接下来我们调下面的规格。Plus food的规格就是。Food的规格,Food的规格的话呢,它就是大小要小一些size,然后呢,它的颜色color,我们所有的灰色呢,我们都用green来代替啊。好了,这个规格也有了,那么其实呢,这个图片呢,它是需要有些间距的,图片的话,最好来个maring right like10PS,不要靠的太近。
32:04
好的,呃,那么这一块也OK了,接下来呢,下面这里也需要调整,我们先一点调整,后面来看它这里这个显示的内容呢,稍微有些小问题,呃,接下来再来再来写啊。下面整块区域呢,是它是在下的,而且整个上上区域呢,它是一上一下,我们需要给他一些。内容food的。In va。好,然后下面呢,是这个food的price。Price wrapper。OK,然后呢,我们可以去定义这个负的letter,它的确是要垂直排列,但是他们要垂直排列上呢,他们要一上一下,所以说我们在这里需要设置的是。Justice container with space。
33:01
OK,然后呢,再是一个food price。不是,它这里就不一样了,它首先要水平排列,同时他们水平方向要一左一右,所以说是是space between。好了,这样的话呢,就是达到一个这样的效果啊,按这样效果,这个图片的大小可能还要再再稍微的调整一下。200。OK,这样的大小应该差不多啊,规格也有了,然后呢,他们上下,那么上下没有叉开来这个区域的话呢,那原因应该就是。它的高度是没有给的,我们给高度为百分百。那么这样的话呢,他们上下才可能拉开差距啊,好了,还没拉开差距的话呢,应该是我们到时候再去给相应的内容。
34:08
再要去给其他的一些区域的一些内容啊,左边和右边我们一起来看啊,左右两边都要给class。For的。食品的price。其实这个和这个样式是一模一样的,所以说我们之前在用的时候就可以用成一样的price杠和下面是price。只是他们之间的需要。需要一个水平排列,仅此而已啊,要么我们可以找一个水平排列类名直接用就好了。就没肉就好了,其他的我们不需要。看有没有这样的Fla direction为road OK,呃,暂时没有,没有的话我们给他定一个类名吧,就叫负的。
35:06
Price。这叫price。往上走,我们给他加上这个。克拉斯容器。好的,这样的话呢,它才会这样水平排列啊,然后垂直要居中,所以说我们还要给它加东西,Price pre preface啊,OK preface。加上。好了,他们垂直要居中center。他这个高度百分百呢,没有试上啊,我们高度就设置成100 PS跟图片等等高就好了。好了右边呢,我们再去指定这个按钮的这个样式。那整个按钮呢,我们也是要水平排列对吧,然后呢,它们垂直上下也要居中,所以说我们可以就叫这个负的price吧,就叫这个名字啊,其实可以叫什么common什么的,可能会更好,好了我们去调整。
36:17
嗯,整体呢,我们就叫我们都设置成T,这样的话呢,我们方便去调整它的统一的样式,否则的话,有的是按钮,有的是别的就不好调整了,这里面呢,我们叫附的一个number的一个文字啊。OK,他们整体呢,都是有边框的对吧。但是他们的边框稍微有些不太一样啊,稍微有些不太一样。然后呢,他们的宽高都是有固定的宽高,比方说都是20吧,我们先看看效果。宽高度是20,这个高度宽高是没有问题的啊,然后呢,他们是有波的。
37:05
Border color。好吧,那我们也不需要特意的指定啊,他们应该都有扇柄啊。和下边化。对吧,然后呢,这个左右呢,我们来指定,就是它这边呢,有上下,上下上下都有啊,然后中间这个是上下左右都有对吧,然后这边是有左,这边是有右,那么我们就会搞定,所以他们都有上下。好,它们都有上下,那么上下的这个边框就出来了啊。现在看起来会稍微的难看一点,没关系,我们待会一点调整,然后接下来我们继续去给里面的相应的类。
38:03
啊,这个呢,我们就叫count,就叫mount,就叫count。减加的话呢,我就加at,中间呢是它的number,好吧,我们接下来继续写。减的话呢,它需要给一个左边的类面。播the lights。然后加的话呢,是给的是右边。OK,然后中间的这个number的话呢,是都有。或者说其实你也可以说都有右啊,都有于这个右对吧,没有左,都有这个右边,那么给第一个加个左边也行啊,这样也行。都有右边,然后给第一个加个左边。就是ADD加个左边。
39:00
就是can't加个作OK。那么这样的话呢,应该就是他们,呃,上下左右。都有。都有了,OK,然后呢,加radious啊,不能radio是这边要加radio和这边加radious,所以说是这个。Can't是加border。是top。不管是上还是下,都是加这个。左。这是看左边这个啊,那么右边这个的话呢,它是不管上下。都加的是右。OK,我们可以看效果。呃,刚刚这个编译它熄屏了,所以说没出现,诶你看这个左右就有了,然后它里面的文字呢,是要居中的,要居中的文字居中的话呢,我们可以给它加my hat。
40:03
为20PS,同时给它加一个T为center。OK,它这样呢,就会文字也会在相应的位置上进行居中了。呃,边框的话呢,这个GR可能看起来会稍微的,呃,那个粗一些啊,但是没关系啊没关系。这个border top这些好像最终是。生效了,但是这个颜色好像有些小问题,颜色呢,没有达到我们的预期,我们把它变成井号一看一下。这样的话呢,会稍微的淡一点啊CC。
41:02
OK,那我们就调成这个颜色,这个颜色可能会稍微的淡一些,不会有这么清晰,好了,那么到此呢,我们就把这个基本的结构写好了,现在目前为止就是这个区域啊,它稍微有些变形啊,我们来看一下什么原因。同时呢,我们给他加多个商品,我们来看一下多个商品的一个效果。来我们加了多个商品啊,多个商品呢,它肯定要marin一下,所以说我们这里还要设置一下。这个item。那。找到。Food detail weapon。
42:02
就是你,Mar button10PS。OK,呃,那么这样的话呢,它就是撑开了这块区域啊好,呃,这个图片的话呢,稍微有些变形,我们来看一下图片为什么会有一些变形,Check image。啊,负的一面值也给了这个区域啊,那很有可能是我们右手边这个区域的宽度有些问题啊,我们来分别对比一下。宽度给了OK。没问题,然后呢,我们这个图片也给了宽度和高度。我们图片肯定也给了这个number,暂时用不上。图片也给它宽高,那么右手边可能把它给挤走了,把它挤走了,所以说右边这块区域的话呢,我们要看一下这块区域的内容。就是这个food in for。
43:01
我们来看so,它啊,它的高度是没问题,但是宽度有问题啊,我们flash为一,它就会占据剩下的富余空间就不会被挤走了,这样就黑了,呃,这样一对比的话,那肯定是我们这个图片的宽度还是应该就是一百五啊。对吧,一百五都略显。大一百五的就写大一百二吧。一百二的话倒是差不多啊好了,那么到这样的话呢,我们就基本上把这个内容呢给调整了一下,我们可能没有去按什么百分百去实现咱们的这个。这个内容没有去百分百去实现这个设计图啊,我们就实现的差不多就足够了,因为这个样式的话呢,实际开发的时候它是有真正的原型图的,它会告诉你这个颜色和这大小分别是多少,实际开发的时候是肯定是没有我们这么费劲的,会相对起来会轻松很多,好了,那么我们就目前就把这个。
44:03
呃,购物车页面的功能呢,基本写好了,我们把这个卡片的多复制几个啊,因为将来除了这个店以外还有其他店,我们一起来看一下这几个店整起来会不会有什么区别。好,我们整了三块数据。一起来看啊,那么。它们整体连接起来的内容呢,也是OK的啊,也是OK的,那么注意注意看下面这部分呢,就被遮住了,它走不到,还有就是这个它会有个滚动条,我们不希望有滚动条啊。一点点去设置一下,把它的效果还是调到最好。来第一个呢,是不要滚动条,就收收这个sc bar for,那么我们在滚动的时候就不会显示滚动条了啊第二个的话呢,是。对吧,第二个是我们整个区域广告最下面有部分是看不到的,是因为下面有块区域被它挡住了,所以说我们在设置这个shop负的例子的话。
45:11
Shop food的例子,我们看一下在哪里,在这啊,它是需要加一个pending button的pending button的高度就是我们整个这块的高度,而且还要在高个10PS左右啊,呃,那么我们来看一下下面这个高度的话呢,应该是八十七十。80PS,那么我们给一个90PS。看效果。而90好像有些稍微的多了一些啊,你看90稍微有些多。呃,因为它负了一个12,所以我们再减个十二九十,再减个12的话。呃。我们就直接给一个90减12,再减十八十,我们来一个68。
46:01
OK,这样的话呢,就基本上达到这个效果啊,整个区域都在这里进行了显示啊,都在这里进行了显示,没有任何问题对吧。整块区域都可以在这里显示。如果我们希望就是能看到那块区域的话呢,可能还要再加个10PS。啊,或者说我们把它定位定位在中间的这块区域,对吧,这样的话呢,可能会我们能看到整块区域的一个滚动是这样的,当然这就没必要了。OK,呃,中间呢,再加个10PS,没必要,我们就68PS就好了。OK,这样的话呢,就基本上能够显示出我们所有的商品没任何问题。
我来说两句