00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,即将去开发咱们home首页模块。当然啊,在home首页模块当中,咱们呢,是需要完成数据可视化的业务。那咱们呢,目前啊,已经掌握了canvas s VG的使用,以及关于数据可视化这样的一个库一的一个使用。那所以说啊,接下来呢,咱们呢,就是结合前面所学的知识点,去把咱们的首页模块给它完成。那咱们呢,看一下的已经完成的这个项目啊,这个呢,也就是首页。那这个呢,也是咱们即将要开发的关于首页的功能模块。那咱们呢,大概的去看一下子。那首先说啊,首页当中呢,大多数都是数据可视化。那咱们呢,可以把它分为啊上哎中下哎三部分。
01:02
那咱们呢,先从顶上,哎,这里先看一下子,你看这儿啊。这块呢,有四个card。对不,哎,因为你看它的这个边框是不是有那种阴影的效果。那这不就是饿了么UI当中的EL-card对吧,它四个呢,是均粉的,而且你看一下他们的功能。首先说左上角啊,都有这样的一个标题,比如说总销售额,访问量,支付笔数,以及运营活动效果。以及右侧这里啊,它有一个图标。对吧,当然这个图标啊,咱们的可以用SVG去画,也可以用canvas啊,当然如果有现成的那是最好的了,对吧,那所以说右上角呢,也都有这样的一个类似于音这样的一个图标。那一集啊,在这儿呢,都有显示相应的数字。
02:03
对吧,那以及这里呢,你看这那这里呢,什么周同比百分之五十六点啊六七,它呢,这里面呢,也出现了一个图标,就是冲上的一个三角形。当然啊,这个三角形你用SVG或者说canvas都可以绘制出来,对吧,以及这里这不都是吗。那以及看这那这不就是咱当年所学的折线图吗。对,不只不过跟咱当年所学的折雁图有所不一样啊,咱当年的折彦图是什么?就是这个拐弯啊,它非常的这个生硬,人家这玩意儿是有圆角。对吧,那以及这里呢,不就是柱状图嘛,对吧,以及这块呢,有一个进度条,那以及底下这里啊,这块的结构,比如说日销售额对吧,数字日访问量啊,数字转化率啊,百分比周同比等等等,是不是又出现了这块的结构。对吧,那当然底下呢,也有相应的数据可视化的业务,那咱们呢,先不用去管了,对吧,因为咱们得一点一点的来。
03:07
那咱们呢,就先把顶上这一部分先给它完成。对吧,那顶上这里呢,你这块你还真得琢磨琢磨,你看啊,这四部分其实它们的结构大概差不多。对不,那就举个例子,头部这儿。这块的结构是不是差不多,那只不过中间这一部分,哎,他们的结构不一样,那所以说啊,这四个card完全可以用一个组件去给它搞定。只不过有一些结构啊,它不一样。那当然,那咱们是不是就可以用插槽是不是去解决。对吧,那所以说啊,咱们呢,把这块呢给他搞搞。对吧,那当然回到咱们的项目当中,咱们的首页这里啊,这是啥都没有的。对吧,那所以说打开咱们的项目,找到咱们的src,找到咱们views下的这个首页。
04:05
对吧,那目前而言,咱们这里呢,只有一个首页。对吧,那你看嘛,不就是一个它吗?对吧,那这里啊,咱们可以怎么办呢?可以这么办,你看啊老师呢,把顶上这一部分,我给它拆分为一个组件。对吧,那这里面呢,咱给他来一个组件是属于首页的,那比如说啊,老师给他起个名就叫card。对不,那当然啊,你得有相应的组件,那咱给他来一个叫做index.will。对不,那当然咱们的模板呢,也是需要的。那这里啊,为了方便老师呢,先写上一句话对吧,我是顶部显示啊呃,显示card的组件。那当然你这个组件呢,是需要引入到咱们的首页当中注册和使用的。
05:01
对吧,那咱引一下子in part。那这个呢,叫做card for wrong,从谁那儿引呢?应该是点杠,哎,Card。那以及需要注册一下components对吧,那这不就是card,那当然在这里呢,是需要使用一下card组件card card。对吧,那咱们呢,保存一下子先回到咱们自己这里,OK,那这块看一下是不是没问题。对吧,当然这块呢,多了一个这个这个呃,箭头咱们看一下啊,多了一个箭头,那咱们保存一下,看哪块多了,对吧,这块是多了一个箭头。那所以说啊,在首页这个组件当中。对吧,那么老师呢,又搞了一个组件,就是专门显示顶上这一部分。对吧,就是顶上这一部分区域老师呢,给它拆分为一个组件。对吧,那么其实啊,它是分为上中下三部分的,老师呢,先把顶上这一部分给它完成。
06:06
对吧,那接下来呢,咱们就看看啊,那首先说它有四个car啊,但是这四个car的结构啊,其实差不多。对不?你看整体的这个结构,比如说这都有线对吧,都有线,其实结构都差不多,咱们完全的可以这四个card使用一个组件去完成。通过插槽传入父给子传不同的结构,那展示不同的结构不就完事了?对吧,那所以说啊,你看老师怎么办,这么办。啊,这个老师把首页这个就给它关掉了,回到cut这,你看老师呢,在cut这里啊,我再来一个文件夹,哎,比如说这个呢,咱们叫做详情deil detail组件。那这个组件是干什么呢?就是制作每一个car。对吧,啊,就是每一个组件啊,就是说白了就这一部分区域。
07:01
对不,那刚刚的那个组件是这个顶上这一部分结构,为它拆分成一个组件。对不,以及每一个小card,老师也给他拆分为一个组件。那这里啊,那咱们呢,也去搞一下子走。那这个呢,咱们呢,也给它来一个就叫做in带点view。对不?当然你需要有相应的结构。那这里啊,老师呢,来咱们搞一下子你看啊。咱就随便看一个,就比如说咱们先看它的结构,就比如说这一个看。对吧,这一个看当中,比如说它顶轮是不是有头部。对吧,有这个内容区域,中间区域和底部区域,你可以给它分为四部分,那所以说啊,你看老师呢,在这儿。老师呢,给他来几个div。对不,比如说咱给他来个类名,这个呢,就属于咱card的头部,那就叫做card,哎,Car header。
08:00
对吧,比如说咱来一个这个叫做头部的地方。那除此之外呢,还有什么呢?咱们再看啊,比如说都有这个显示,显示这个数字的地方,你说内容区域,那咱们也来一个div。起个类名叫做class,这个咱就叫做car杠,叫做count吧,内容区对吧?哎,比如说这个叫做内容区。咱们先写上一些文字对不?那以及咱们再看一下,看一下这那比如说这块呢,显示一些,呃,显示一些的是这个这个文字,那这块显示的是图表。对不,那咱们这块呢,也给他来个区域div。来个列名class,那这个呢,咱们就叫做card-chart。对吧,比如这个是图表区啊,找你那以及底下这儿呢,还有这个底部,那底部呢,咱也给他来个div。对不,那这个咱也给他来个类名class,那这个就叫做card-F,比如说这个呢,咱们就叫做底部。
09:05
对不,那所以说啊,这个detail组件说白了就是这四个小的,呃,展示区。对不,那当然咱们呢,是需要回到card组件当中去引入一下的。对不,那咱引入一下的import,那这个呢,咱们就叫做de detail,对不,For from从谁那引呢?点杠应该是咱们的底碳。那也是一样,你也需要要注册和使用。那这里呢,咱们搞一下子,那这呢就是detail,那这里呢,咱们先用一下子,你看啊de detail啊,当然多了个S。对不?那咱们可以看一下子,咱们保存一下刷新你看嘛,这不就出来了,对吧,当然它是有几个呢?是有四个,那你将来这里是不是来四个就行了。
10:00
对吧,刷刷对吧,哎,来的四个,那不就来四个这样的小car。对不?哎,当然它不是竖着排列的,是水平排列的。对吧,而且还要注意人家这玩意儿呢,还可以咋的呢,还可以自适应你看嘛。对不对。对吧,那所以说啊,咱们的这个组件你在用的时候不能这么用了,他呢要干什么,要实现这种响应式布局。那这里呢,咱们要注意一件事,饿了么UI当中啊,它有这个网格布局对吧,分为24栏,就是EL杠肉和扣,对不?那咱们的就可以搞一下子在这。那这块呢,老师呢,把这块呢给他布局,咱们也稍微搞一下,就用他的EL杠啊肉。对吧,那首先说啊,这个EL杠肉和扣咱们在前面见过。也就是说饿了么UI当中啊,它也有这种栅格系统对吧,24个为一栏,那也就是说你六个占占啥,占占要占一列对吧?总共几列,总共四列。
11:09
对不,每一列六个,那这四个是不是就是均分了。对吧,那咱可以来个1234,那咱们呢,可以保存看一下咱这。对不,也就是说你这块要注意饿了么UI当中是有这种网格布局的,对吧?栅格系统就很像于boos,它是分为24栏,那每人占六栏,那每人占六栏,你想想是不是就均分。对不,当然它的EL杠这个肉,这有个叫gets为十,这是啥?这是每一个呃,每一个扣之间的这个呃,距离设置。对不哎,远近的一个设置,就是这两个,呃,扣的这个距离的设置。对吧,那当然咱们也敢来,你看就比如说DE1列这里,那咱们将来呢,要显示这个detail OK,那你在这里det detail对不?那你是不是就可以用了。
12:05
对不?咱们保存一下石佳琪,你看这不就来了吗?当然啊,你要注意一件事,啥事呢?你看已经完成了,这个它外部放了一个啥呢?放了一个card,因为它明显有这个阴影效果。那所以说咱们在它的外面给它加一个谁呢EL杠。那这样呢,就有阴影的效果。对不,那所以说来,那咱这块翻个谁底啊。De,呃,Tal detail对吧?当然没有这个S。那这个呢,是咱们的第一个card,做一下笔记,这是第一个card对吧,那咱们呢,可以稍微去看一下,是不是有这样的一点点的感觉。对不?哎,当然你也可以给他加一些外边句啊,这里老师样式就不调了,对不?那当然你还有第二个第三个第四个,那在这里呢,咱们呢,就完全可以复制粘贴了,CTRLC,那这也一样,CTRLV。
13:03
对不,那这也给它来一个CTRLV啊,以及这也给它来一个CTRLV。对不,那咱们呢,格式化一下,看一下的大概是不是这个意思。对吧,那咱们呢,就得接着来了,你看啊,那咱们得回到这个detail组件里面了,那咱们得写这里的结构。对吧,啊,那咱呢,一点一点的来。虽然说你看啊,他的头部这里有文字,比如说总销售额,有访问量,有支付笔数,有运营活动效果。当然啊,咱们现在在这儿呢,写的是死的,你看啊,咱可以写一下子,比如说来个SPA。那这里呢,老师先给他写死的,比如说叫做总销售额,那咱也来一个,这个叫做总。哎,销售额,那咱们呢,可以保存一下刷新,你看是不是全都是总销售额,那以及右侧这里啊,它有这样的一个音符的一个图标。
14:03
其实这个图标吧,怎么说呢,咱们呢可以自己绘制,当然也可以使用现成的啊,那这里呢,咱们呢,可以看一下子,咱当年应该是用过这个这个啊,阿里图标库,阿里图标啊,其实阿里图标当中啊,就有这样的图标,咱可以拿过来直接用。对不,咱找一下子。你看你就搜一下子info啊,搜一下ino。对不,你看嘛,这不就有嘛,对吧,就比如说它对不,当然了,你可以进行下载,下载的时候要注意,你看你这儿可以复制SVG代码。而且呢,它的大小呢,比如说16像素,你可以调颜色你都可以调。对不啊,所以说呢,你可以复制SVG代码。对不,哎,复制一下对不,那你可以扔到咱们的这里对不,那这块呢,老师呢,给它扔进来,那这个不就是咱们的这样的一个小图标吗?只不过是用SVG写的。
15:04
对不,那咱们呢,可以保存一下看一下,你看这不就来了。对不?那当然啊,你要注意咱们现在这四个表格,所有左上角这个标题都是一样的。对吧,当然将来得由谁去传的,由副组件传过来,你传什么我就是什么。对吧,当然咱们呢,先把它的布局先给他整好。对不,那你说它的布局分为左右,那这里就好整了,那咱们得写样式。对不,那咱们写写,那首先说啊,咱们的这个点。Card杠,He drer,对不?那你让他怎么呢?第一次play为flex flex布局吗?那这样不就浮动起来了吗?对吧,只不过一左一右,那咱们就可以用谁just content。对,不叫just content space between,那这样是不是就是左右布局了。
16:01
对吧,当然文字的大小和颜色,那咱们呢,也可以踩一下颜色。对吧,咱们呢,去找一下看有没有color,咱们去踩一下子这个颜色啊,咱们找一下看看有没有。对吧,因为咱们的这个浏览器啊,是自带这个这个这个这个这个呃,审查颜色的这个功能color,比如说我先写个read。对吧,那咱们呢,去调一下颜色,你看它的这个文字颜色,咱可以搞一下。应该就是。这一部分。对吧,那咱们呢,给它带走CTRLC对吧,那咱们呢,给它加一个文字的颜色color为他,那你看嘛,是不是有这样的一个感觉啊。对不对吧,当然啊,自己大小你也可以去调,这里样式咱们就不再一个个去调了。好吧,当然了,咱这个font size让它稍微小一点,Fo-size来个12。对不啊,稍微小一点,但是有点太小了是吧,那咱还是让它默认吧,16吧,好吧,所以说这个样式老师就不再调了。
17:07
对吧,啊,这是它那以及啊底下这儿呢,还有这个钱数啊,还有这个数字的这样一个数字,那这样呢,咱们呢,也可以来一个就这。那这块呢,咱们呢也得来一个,比如说咱就来个12306,诶写跑偏了对吧,这块咱给来个12306,先把样式给他调好。对不啊,只不过咱们现在都是12306对吧,那咱们呢,也去写写它的样式,那这个叫card content。对吧,肯德C,那这个呢,咱也给他拿过来点它。哎,第二它对吧,那首先说字体大小,咱让它大一些,比如说来一个30像素。对吧,那咱们呢,去看一下子。对吧,那以及啊,咱们呢,给它加一个拍顶吧,拍顶上下呢,上下左右都给他来个十像素。
18:01
对不啊,找你对吧啊,那其实呢,你可以拍点上下,有左右呢,就不给他来了。对吧,左小玲。对吧,那这样呢,不就出现了这样的一个数字吗。对吧,那以及呢,还有展示这块的区域,有可能是文字,有可能是图表,对吧,那当然咱将来用作用于插槽就可以搞定。对吧,那所以说啊,这块呢,咱们呢,给它留一个插槽,对吧,将来的结构呢,由副组件说了算,那也就是谁呀,Slot,那这里面咱们用一下的命名插槽,哎,Slot那咱给他搞一下。对不?哎,剧名踏草对吧,带有名字的slo slo对不?那咱给它起个名字吧,那这块呢,咱给他来一个name。对不,Name这个咱们叫啥,就叫char吧。对吧,那这块的底部咱们看看底部,这也就是这块的区域啊,咱们呢,用作用插槽对吧,将来副组件给不同的结构,那我就展示不同的数据就完事了,对吧,当然咱也给他写点样式吧,给他来点高度。
19:10
对不,那这块呢,咱给他来一个这个老师呢,给他来一个它对吧,给他来一个高度,高度咱们就给他写死吧,比如说50像素对吧,当然咱们现在这块呢,是没有任何东西的啊,这块是没有任何东西的对吧,那当然底下这底下这儿呢也是一样,也是由附子这你传不同的结构,我展示不同的数据就完事。对吧,那这里呢,其实呢,咱们也可以用作用插槽。对吧,那就是这里咱也给它来个作用与插槽,叫做slot。Slot。找这块也是一样slot对吧,那这块呢,咱们呢也给它起个名字name,那name呢,咱们叫做什么呢,就叫做吧。对不?哎福特那咱们呢,刷新看一下,当然啊,底部这里呢,你最好呢,到时候将来呢,它这块是有什么呢?是有这个这个边框的啊,就这有边框,那边框其实咱们可以给它加一个。
20:08
对吧,那咱们呢,给它加一个边框,看一下能不能看见,对吧,点它。这个老师呢,给他加一个包杠,呃,Top。对吧,为一像素solid啊,来一个黑色black,那咱们先看看能不能看见这个边框啊Z。对吧,是不是可以看见,但是底下咱们这里没有文字啊,以及呢,它这个颜色吧,咱给他换一下,不是黑色,那咱就来个井号一。对不,当然底下这儿呢,咱还没有内容对吧,内容暂时看不见对吧,那这样不就来了吗。对不,那咱们呢,就一点点调,那首先说第一个看的这叫总销售额,这叫访问量,这叫支付笔数,这叫运营活动,那也就是说你这块的文字它不能写死。对不,那这块的文字呢,你完全可以由副组件传过来,比如说利用prop。
21:03
对吧,那比如说啊,咱给他来个这叫title。那当然你父组件这要接收啊,子组件这要接收prop,比如说这咱们就叫title啊title。当然是当副组件在用它的时候,因为总共用了四次嘛,你给人传过来不就行了吗?比如说第一个title。那么第一个抬头叫做什么呢?咱们看一下子,它叫做总销售额,那咱就给他来一个叫做总。销售额。对吧,那咱们看一下第一个是不是就是总销售额。对吧,当然他这里边是不是应该有错,看有没有错。对吧,啊,其余的没有定义对吧,总销售额还有访问量,那咱们都给它写上,还有访问量。Title这儿啊,T title,那这个呢是访问量。对不,那咱们呢,也看一下的啊,当然还没写完,还有什么,还有这个支付笔数,运营活动效果支付笔数,那这也来一个title。
22:07
对吧,那这个呢,叫做支付笔数啊,最后一个呢,叫做叫做叫做什么,来看一下title。这个呢叫做活动什么玩意,运营活动效果,那咱也来一个叫运营。活到。啊,运营活动效果对吧,那咱们呢,可以刷新啊看一下。对吧?嗯,咱们看一下的啊,这个method的支付比数is not DeFine,咱们看一下的methods总销售额is not,咱们看一下啊,Title啊,当然这不需要加冒号。对吧?哎,这里不需要加问号,比如说咱们父组件给了你子组件这收啊T没问题,OK,那咱们的刷新去看一下的是不是就有了。对吧,那以及这个数字啊,也都不一样。
23:02
对吧,那这个呢,咱们也要副组件去传就行了,比如说这个呢,咱们就叫做这个数量吧,Number。或者叫叫叫他看看吧。可以吧,哎,Count,那当然你所有的这个副组件啊,你还是要传的叫做count,那第一个是什么呢?第一个呢,咱们看一下子,第一个呢,就是钱多少,那这个咱就直接拿过来就行了。对吧,那咱给他扔过来。对吧,那这儿还有抗。那这个呢,应该是多少呢?咱们88460,那咱也来个八八。460那以及还有底下的8846088460那这也来count。对吧,哎抗这呢也是88460,那呢是78%,那咱也来一个,这个叫抗。对吧,那这呢是78%。对吧,78%,那咱们看一下,那当然是不是要在这进行展示,那也就是说咱们的这个12306,这你得换了,得换成谁是换成咱们的这个count。
24:08
对不,那咱们呢,保存一下,刷新看一下它是不是就有了。对吧,哎,这是它以及呢,咱们再看一下子,咱们这块呢,你就在传做插传插槽的数结构了。因为这四部分的结构都不一样,那咱得一个一个来。对不先看第一个card,你在使用的时候啊,你要传的这样的是呃,有文字。对不有文字,还有这样的一个图标。对不对,有文字有图标。对吧,那所以说那咱先把它先搞定,先把第一个。你看那也有人说第一个这块,你在使用的时候,你要给这个组件,副组件在使用的时候,你要给人传作用于插槽插在哪里呢?就是插在这个叉的这。因为它有的是显示的是图表,有的是显示的是文字带图标,对不?那所以说那咱们在这儿你就得传结构。
25:08
对吧,那这个呢是什么呢?是作用于插槽,那这个呢,应该是咱们的chart,那这块再来一个叫template。对吧?当然你要给人穿结构template。这是第一个啊,第一个card的插槽。那当然,那这里呢,咱们得给来个叫slot,这个叫啥的叫chart吧,我记得对吧,比如咱现在来个123,你看一下有没有东西。对不先确保这个位置是对的,OK。但你要传的是什么,你要注意啊,你传的是有文字,还有这个图标。对吧,那这块呢,咱们就用SPA去做吧,SPA。那咱们看一下它这块叫啥叫做周同比,写下周同比,周同比对吧,完了之后叫做56.67,那再来一个啊,五十六点六七百分比。
26:03
对不,那咱们先看一下子,看一下咱们这那这有没有是不是有了。对不?哎,这应该是没问题的,当然它这块是不是有空格,空格你可以去加,对不,空格你完全可以来一些and呗,对吧,Nb SP and nb SP对吧,稍微调整一下。对吧,那咱们瞄一眼咱的这个对吧,这是没问题的,那以及啊,你要注意啊,注意一件事,人家这是不是有这个小箭头,小箭头呢,那这个呢,咱们呢,还是用阿里图标库。对不,你就搜上升,看有没有上升。对吧,那咱就用它吧。对吧,但来一个是16像素的,咱来一个什么颜色呢?就来一个这个颜色吧,对吧,复制一下。对吧,那也就是说在他的旁边还有一个啥呢?还有一个SVT。对不就是冲上的这样的一个箭头,哎呀,这个SVG还是挺长的。
27:05
对吧,啊,那咱们呢,给他拿过来先看一下有没有。刷新看一下,OK,这是有的。对吧,那以及还有什么呢?还有这个呃,日同比啊,19.16%对吧,那这个呢,咱们可以再来一个。这咱也给他来个这个咱来个SPA吧。对吧,那这块呢,叫什么叫做周啊日同比啊日同比,那咱写下日。同比对吧,这应该是百分之十九点,随便写个吧,九六。对吧,以及呢,它的旁边呢,也有一个什么呢。咱们应该来一些空格吧,好吧,And nb SP。对吧,再来一个and nb SP。之后呢,它的旁边啊,咱们再看一下它是不是也有一个小图标。对吧,它的旁边应该也有个小图标,这个小图标呢,咱们呢,也找一下这个咱就要下降了,哎,下降上升下降。
28:07
对吧,下降呢,咱们就找一个红色的吧,找个他吧,可以吧,那这个咱稍微小01:16啊,当然这个颜色样啥的可以自己去慢慢调啊,这个老师呢,给它放在这儿吧,这咱也来个and nbsp吧。对吧,给它扔进来,那所以说啊,咱们呢,可以看一下,那这样的一个结构是不是就有了。对吧,咱刷新看一下。对吧,当然样式这个东西你可以去慢慢去调一下子,这个样式老师就不调了,对吧,或者他两者之间,两个死SPA之间也有空格,你也可以加一些,或者拿样式去调都可以啊,这里样式老师就不带去调了,当然我这边给他轱辘鼓了,这个这个这个给他轱辘到头。对吧,就这块呢,咱们也给它加一些这个空格吧,And nb nbsp啊,这咱也给它来一个吧,这个叫做NBSP。
29:03
对吧,只是为了省事对吧,好了,那之后呢,咱们呢,保存一下子,看一下子,那这样的大概的一个效果是不是就出来了。对吧,啊对吧,当然咱的这个这个这个这个这个这这这块呢,高度咱给的是多少,给的是50,其实可以小一点,我记得当时给的是50,咱可以来一个40。对不到时候这个高度咱可以慢慢去调的。对吧,那以及你要注意其他的这几个几个呢,要传的啥,传的可是图表。对吧,用一叉去传,传传了咱们这呢,先不用去搞对吧,那以及你再看第一个啊,再看这你看比如说他这块呢,还需要传一个作用于插槽,对吧,叫日销售额是这个幺二多多多少多少对吧,那咱也可以再传一个做余插槽。对吧,那这咱也来一个叫做template。对吧,咱们先把第一个先给它完成。Johnny,那这个呢,它呢也是有名字的name,为什么呢,为。
30:04
对不,那当然咱们呢,也给他扔一个SPA吧,这个文本就直接给他扔到里面了。知道呢,咱们呢,可以刷新看一下。对吧,那咱们看一下子是不是名字叫错了,是不是叫福。对吧,我记得是叫foot的name,呃,为foot foot。这应该叫slot slot slot slot好了,那之后呢,咱们先看一下呢,咱们这的一个结构啊,这应该是没问题的,但是你看这个跟这个线是有点儿距离的,所以说咱们的这个样式呢,还是稍微调一下的,给它加点拍顶。对吧,应该是谁是他这个padd上下给它来个十左右零对吧,样式稍微调一下。对吧,啊,当然右侧的这里的结构啊,牌顶咱稍微小一点吧,来个五吧。对吧,但是右侧这里面的结构呢,咱们呢,还没有传。
31:01
对吧,啊,右侧这里啊,右侧这里,或者咱们直接给顶上来个牌顶得了。Padding pop。对吧,来个五像素吧,或十像素。这呢,当然咱右侧这里呢,还有几个,那咱们呢还没有搞完。对吧,当然咱右侧呢,这个中间这个图表,咱们可以一会儿给它完成,那底下这里是不是就可以完成了。对吧,那咱找一下第二个,第二个这里呢,咱就直接拷贝就行了。对吧,找一下第二个就这里。这里呢,咱的这个福特传的是啥呢?传的叫做日访问量1234,那这个咱给他拿过来。对吧,那这个咱给他扔进来。对吧,那咱们保存一下,刷新看一下。对吧,那以及呢,还有谁呢,还有这个转化率65%,那这个咱们也可以搞一下。对吧,这是第三个。哎,走,那这个呢,是转化率百分之多少条对吧,转化率。
32:04
转换率,比如说64%。对吧,当然这块多了一个SPA啊,SPA闭合标签,那咱们呢,可以刷新去看一下。对吧,那以及呢,还有什么呢?还有这这其实跟这块的结构是一样,对吧,那所以说啊,咱们呢,就直接把它带走了。对不走,那这块呢,咱给它扔到第四个这那这块呢,不能叫做chart了,所以咱们叫foot。For福特,当然这个数据老师就不再替换了。好吧,数据就不再去替换了,当然那咱们这里面呢,还有三个啥,三个图表。对吧,那图表呢,咱们一会儿呢去给它完成,分别是什么呢?分别就是折线图。对不柱状对吧,还有这样一个进度条。对吧,好了,那这是咱们完成了首页当中头部这块card的一个组件的业务。
我来说两句