(简易)测试数据构造平台: 9 (首页美化)

2022-07-07 14:58:59 浏览数 (3)

【本节目标】使用ElementUI 美化首页其他部分

首先是顶部:我的计划是做个搜索框,功能以后再完善,先把样子做出来。

搜索框,一般是 输入框 按钮,这个组合在elementui中是这样的:

效果:

然后继续...

底部的统计图:

在elementUI中的学名叫做环形进度条或者仪表盘。

而这进度条的含义,我们可以先简单想几个:

比如 当前个人贡献的工具占总数的百分比。

比如 今天个人贡献的工具被使用次数占总数的百分比。

这种可以炫耀的统计,可以额外具备一点答辩晋升的数据支撑作用。

代码如下:卸载el-footer内:

效果如下:

到这里,有的小伙伴会觉得 这个布局高度似乎并没有充满整个浏览器,所以很难看。那么原因是什么呢?

原因就是这个布局的所有外层包裹的元素标签,没有一个是说过自己的高度应该100%充满浏览器屏幕的。

如果想充满,那么就从外到内把高度全都改成100%。

首先打开最终的public / index.html ,添加如下样式:

然后往里找,下一个就是app.vue了:

然后继续往里,就到了我们的首页了:

改好之后,保存看看效果:

本节课到此结束,我们下一节课,去搞左侧的这个菜单了

0 人点赞