00:00
哈喽,各位小伙伴们大家好,那接下来咱们呢,去完成这一部分的数据可视化的业务。那咱们呢,先稍微看一下结构。那也就是说啊这块啊,它也用到了一个EL-card。而且呢,左面这儿啊,应该是有标题。以及右侧呢,也有一些东西,比如说一些按钮啊,以及还有一个这样的一个日历。对吧,那么以及啊,在底部这儿啊,有一个柱状图对吧,但是你要注意这个柱状图啊,是带阴影效果的。对吧,那以及右侧呢,放置了一些列表,仅展示数据。那所以说啊,接下来呢,咱们呢,把这个组件呢,给它完成对吧。好了,那回到咱们的项目当中,那咱们呢,一点一点的来。找到咱们的这个dashboard首页。
01:00
那咱们呢,把这部分给它定义为一个组件。那这个组件呢,咱们就叫做销售组件吧,就叫做。那所以说啊,咱们呢,再来一个文件夹叫做。当然啊,它这里面呢,你得有相应的组件,那咱给他来一个。对吧,那这呢,咱给他来一个叫做index点儿view,那这里啊,咱们呢,先给他一个模板,先给他基本的来一个文字,对吧,我是或者叫做销售额。对吧,那当然需要回到咱们的这个首页组件当中,需要引入一下port。那这个呢,叫做粉,从谁那儿引呢?从咱们的点杠哎,Cell组件引进来。当然啊,你也需要注册cell,那以及这里啊,咱们呢,再给他来一个cell组件。那咱们呢,保存一下子刷个新对吧,去看一下子有没有相应的这样的一个结构,哎,这是有的对吧,那么底下这啊,它用的呢,也是一个EL-card,而且左面和右面都是有内容的,那所以说啊,咱们去找一下子element UI对吧,Element UI。
02:23
那咱们呢,去找一下子这个相应的组件,就是咱们的这个card的组件,那咱们搜一下就搜cardd对吧?Card。对吧,就是这个卡片嘛,那首先说啊,咱们就直接给他拿过来了,你看嘛。看这啊看这,那首先说那不就是EL-cut,那咱们呢,先给它带走啊,扔到咱们的cell组件当中,当然这块呢,老师给它关掉了,就是这儿。对吧,当然咱们呢,得慢慢的去调试一下这个老师呢,给他格式化一下。
03:00
对吧,那咱们呢,先稍微的去看一下子,那这样的结构是不是出来了。对吧,那以及呢,距离顶上呢有点距离,那所以说啊老师呢,给他来个样式吧,Style Mar。上下呢,给它来个十左右呢零。对吧,那之后呢,咱们呢,刷新看一下呢,有没有相应的这样的一个距离,哎,这是有了。对吧,那咱一点点来先说左边这里啊,卡片名称它呢,应该是有一个keep栏。对吧,但tap栏咱们呢,是有相应的组件的,那咱们可以找一下子你就搜T啊就有了,对吧,那咱们呢,看一下呢,这个table组件,那不就是这个吗。对吧,那当然咱们呢,先找到位置啊,当然这个按钮右侧这个按钮,咱要的不是个按钮。对吧,那咱们呢,可以先把这个按钮给它干掉。对吧,啊走以及列表内容,这里这部分区咱们暂时也不要,那也给他干掉。
04:02
对吧,那现在目前而言啊,只剩下左上角有个卡片名称,但是呢,要注意左上角标题这儿咱应该放的是什么呢?放的是一个table栏,对吧,有什么销售额和访问量。那咱们呢,就找到相应的退啊瞄准了是不是就这。对不,哎,CTRLC,那当然啊,咱们呢,给他拿过来给它替换一下。当然啊,咱们呢,只需要两个,不需要那么多,所以说咱们只留两个就行了。但是这块呢,要注意啊,像收集数据咱们暂时不收集,以及点击事件,那咱们也先不处理。咱们呢,先把相应的静态的组件啊,先给它完成,那这老师给它注释一下。对吧,那当然咱们呢,先看一下这个table栏有没有。哎,是不是有了对吧,当然底下这一部分内容区域啊,咱们的暂时呢,先不需要。对吧,就这块儿的内容,咱们暂时先不需要,那这块呢,咱们呢,把用户管理啊,这个显示这个文字啊,咱们先给它干掉对吧,保存刷新看一下对吧,哎,这不就有了吗。
05:12
对不啊,那以及啊,文字咱们改一下子,应该叫做销售额和访问量,也就是相应的label啊,这个是销售额。底下这儿呢,是访问量,哎,访问量。对不,那咱们呢,保存一下,刷新看一下。对吧,哎,这个文字不就出来了吗?有这么点意思了,对吧?当然要注意啊,你看这块有一条线和这儿它呢,本身就一条线啊,看这嘛内容和这块的标题,这还着头,这它只有一条线啊,而你看咱们这是不是有两条线。对吧,所以说咱们呢,把这条线呢,给它隐藏掉,但是呢,咱们得调一下样式。看呀,他是给谁加的这个这个这个呃。
06:00
对吧,那咱们看一下子是不是给他加的。好像是给body加的,或者咱们看一下这个hier是不是给hier加的,对吧,应该是给hier加的,这不一像素嘛,那所以说啊,咱们得写点钥式,得改变一下子它的这个,呃呃,底部的这个呃包底对吧,就这个包底咱们不要啊,那所以说咱们去写一下样式,那样式啊,当然咱们的可以写饿了么UI的样式,写到style这里,对吧,人家这块有关于饿了么UI的样式。那这块呢,咱来一个点它。那老师把他的那个包丁。杠给它变为那那这样不就没了吗?只剩下一条线了。对吧,啊,就是T栏自带的这个,那以及咱们再接着搞右侧这里啊,有一些span。对吧,什么今日本周,本月本年,以及还有一个是什么呢?还有一个是这个,呃,日历,那也就是说啊,在咱们的头部这里就这。
07:04
那这块老师做一下笔记,这个呢是左侧内容。这个是头部,哎,左侧内容,那咱们呢,再给他来一个div,这个呢是右侧内容。对吧,这个是头部写一下头部右侧内容,哎,右侧内容,那这里面呢,咱们先随便放一些数据,比如说随便来一些,先看一下能不能看见。对吧,啊,当然啊,他呢是块元素占底下了对吧,那所以说咱们呢,让谁呢,让咱们的这个呃,Hier啊,也就是他class维他让他进行浮豆对吧,那这个呢,咱们也得写下样式,这个老师呢,给他拿过来点汤。这怎么呢,第一次play为flex,那让它里面的这两个项目啊啊左右。对吧,那也就说just content space between,那之后咱们呢,稍微看一下的相应的结构啊,这是没问题的对吧,当然呢,它俩的大小是有问题的。
08:09
对吧,一浮动大小,你看这个就这么大,这个呢就这么大对吧,但是左右是没问题的,咱们先把结构先给它写好,比如说人家这儿有今日,本周,本月,本年,那咱们也先给他写上。那这里啊,老师就给他放死瓣了,这个呢是今日,当然呢,还有三。这仨呢,咱呢给他拿过来俩三四,当然咱们给它格式化一下啊,今日之后呢,本月。这呢这个呢是本,呃,这应该是本周对吧?点,这应该是本周。对吧,当然这块多了一个子弹。本周那这个呢,就是本月。哎,本月这个呢,是本年。对吧,当然咱们呢,先看一下的相应的一个结构啊,先稍微看一下的,OK,这是没问题的,当然咱们一会还要补样式。
09:02
那以及呢,还有一个是什么呢,就是这样的一个日历,日历呢也是有相应的组件的,你就搜date。对吧,哎,日期选择器。当然呢,他呢也有相应的日历,对吧,这个就很像。对吧,但是人家中间这玩意儿是个杠,咱们看有没有中间带杠的啊,看一下有没有啊,当然这个代码先给他折上,目前是没有看见对吧,都是治什么什么行,那咱们呢,拿过来一个这个呢,老师呢给他带走。咱找到这个应该是这对吧,立马咱给他带走。那这块呢,老师呢,再给他放置一个日历,当然咱们的信贷呢,不需要收集数据,那这个收集数据这件事儿呢,老师呢,给他注释一下。对吧,那当然咱们呢,先运行一下,先看一下的什么样子。对吧,当然样式得调啊,那你看人家中间这个是杠开始已结束嘛,咱中间是这这玩意呢,大家看一下子,这不应该就这嘛,咱给他换成杠。
10:06
对吧,那咱们的刷新你看一下是不是就换成这样的一个样子了。对吧,那接下来呢,咱们这个样式呢,还是得调调,首先说人家这个,呃,这个这个keep栏咱们可以怎么做呢?你看它底下这条线哦。是占满整个副容器。对不对,你看它的大小是不是占满整个负容器,那所以说啊,咱们呢,就可以让这个推栏啊,它的宽度呢,和负元素一边宽,就这块儿呢,你可以进行定位。对吧,放到右面,那所以说啊,咱们呢,还是得搞搞样式啊,找到咱们这个keep老师呢,给它来个类名。这个类名咱们就叫keep吧,对不?那当然咱们去补一下样式点,Keep这个老师呢,宽度我就给他来个100%,那咱们先看一下子走。走对吧,当然右侧这里呢,它没有进行定位,所以说也占位置,所以说咱们呢,把右侧这里,也就是这老师呢,给他来个class吧,叫做right,我给他来个定位。
11:08
对吧,点right,那这个老师呢,给他来个position absolute啊,Absolute当然子爵复相它是绝对定位,那就找到它的负元素,它的负元素应该是谁呢?看一下子,那不就是它吗?对吧?给它来个相对定位啊,对吧,Position relative。那这里呢,咱们呢,还是得格式化一下子稍微看一下对吧?哎,走你当然啊咱们呃绝对定位呢,定到这儿了,那咱们呢,应该给它放在右面,那所以说啊,咱们呢,给它来一个right right呢给它来一个零像素,先看一下O不OK。对吧,哎,大概是没问题的,但是咱们这个样式呢,还是得调调,那首先说啊,这个这个这个这个列有点大对不?所以说呢,咱们呢,去调一下日历,给日历的样式呢,也稍微调调,那这个老师呢,给日历也打一个类名吧,Class叫做date吧。
12:08
那这块呢,咱们也搞一下子,虽然说它是可以改大小的,就是这个size跟but一样,可以改为mini,那就会变小一些。刷新看一下对吧,啊,会变小一些,但是它宽度太宽了,那所以说啊,咱们在这呢,给它搞一下子就是咱们的这个点date。这个老师呢,宽度呢,我就给他来个200像素,之后呢,咱们保存刷新看一下OK啊是不是像这么回事对吧?那以及左侧呢,左右老师给他来点歪边距吧marin。上下呢是零左右来个20像素对吧,这样式还是得调的对吧,那以及啊这一些死瓣,哎死瓣呢是有距离的,那所以说咱们找一下应该是right下的这个SPA,那咱们找一下子点。Right下的这个SPASPA呢,老师呢,左右呢,给他来点儿上下为零,左右来一个20像素的外边距。
13:06
对吧,那咱们这回去看一下子,大概是不是就这个意思。对吧,当然这个外边距呢,咱们可以再调小一点,比如说来一个实像。对吧,让它稍微小一些。对吧,哎,当然,那这样呢,看起来是不是就差不多了。对吧,啊,那以及底下这里啊,底下这里呢,这块呢,有一个是柱状图,右侧呢,也有内容区域,所以说应该是左右分那一共24栏,那咱就16和八吧。对吧,它占16份,它占八分,所以说中间身体部分这那咱头部这就得给他合上了,这就是头部区域嘛,对吧,那这块呢,应该是内容区域,咱们呢,可以写一些,呃,文字可以看一下。对吧,刷新看一下OK,没问题,那所以说咱们这块的呢,你就可以来个EL杠肉,哎,等会啊EL杠肉。
14:01
肉对不来两个扣啊EL啊EL杠肉对吧,来两个扣,当然一个占16分,一个占八分对吧,那这个咱给它复制一下吧,CTRLC这个老师给他拿过来,CTRLV那16和八。对吧,那这块咱稍微写点文字123,那这块咱给他来个456,那这样整体的一个这样的一个静态的组件,那不就出来了。对不?那咱们呢,可以看一下的相应的内容区域,对吧,这不就在这儿吗?这应该是没问题对吧,那所以说咱们的这样的一个静态的一个组件就完成了,对吧?当然呢,这里呢,要注意一件事,人家默认上来的时候应该是销售额。对吧,默认应该是他点亮。对吧,完再点的时候再进行切换,那咱们呢,先让销售量为默认的,那咱们看一下这就tip栏这儿。那这块呢,咱们呢可以进行数据的双向绑定,那这块老师给他带走对吧?V model,那这个呢,咱们就叫active name吧,那name呢,一个叫做销售额,哎销售写下了销售额,那这个呢,是咱们的内幕叫做访问量。
15:16
访问量。对吧,那这一块的呢,咱们呢,需要来一个想是数据date为active name,那这给咱来一个date。这样呢,一个对象active默认是谁呢?是这个销售额。对吧,那咱们呢,可以保存一下刷新,你看一下的默认是不是就是销售额对吧?呃,当然那咱们的基本的这个静态就已经搞定了。对吧,当然有的同学可能说老师我不喜欢这个颜色,调调别的颜色,那这个样式呢,到时候可以自己慢慢去调一下,对吧,那基本的咱们的这样的一个静态不就完事了。
我来说两句