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

【本节目标】首页的细微样式调整等

本节内容较轻松，大家可以放松浏览。

先来看看我们的首页目前长啥样来着：

虽然看起来简洁大方，但是仍然有很多可优化的地方。当然这个优化，也不是一次两次就能达到最好的，甚至上，任何软件产品都可以无限迭代，无限优化下去。本节课我们就来稍微优化点，给大家找找感觉。毕竟elementUI的很多元素的样式并不难通过传统的行内style来更改，而是需要调用一些特有的回调函数等，所以大家也可以提前熟悉一些。

为节省各位流量，我就不一句一放效果图了，所以最后给大家看看最终图即可。

1. 工具列表-条纹行：

el-table标签内可以加很多属性，其中stripe就是条纹的意思：

2. 工具列表-表头颜色

 :header-cell-style="{background:'#d2f1f6',color:'#606266'}"

3. 工具列表-操作按钮颜色

4. logo

logo一般是在菜单上，属于任何页面都可以看到，点击后会回到主页的超链接，不过elementUI并没有提供这种专用logl组件，所以我们需要自己动手制作。所以写的文件应该是 Menu.vue 。

分为以下步骤：

一。制作一个艺术字logo，可以在百度搜索【在线logo艺术字】logo文案建议写平台名称【造数平台】我这里用的是【测试开发干货】

二。透明图案，可以在百度搜索【在线扣背景】功能来把图案扣掉背景

三。图片放在public/static文件夹下

四。在Menu.vue中引入图片，并添加超链接跳转。

5. 顶部搜索框位置调整：

6. 底部添加个人通知栏和统计图位置调整：

7. 左下角可爱动图

去百度下个gif(最好透明背景)，然后存放到public/static 文件夹内。然后再Menu.vue中引入，注意代码位置：

好，美化就先到这吧~

看看成果图~ 注意左下角是个会跳舞的动态妹子哦~

改之前：

改之后：

怎么样，经过简单的调整后，相比较之前是不是好看顺眼了很多？