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

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

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


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


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

   

image.png

   

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

   

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


   1. 工具列表-条纹行:

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

image.png


   2. 工具列表-表头颜色

image.png

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


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

image.png


   4. logo

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

分为以下步骤:

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

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

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

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

image.png

image.png

 

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

image.png


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

image.png


   7. 左下角可爱动图

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

image.png

image.png


好,美化就先到这吧~


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

改之前:

image.png


改之后:

image.png


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


相关文章
|
2天前
|
开发框架 .NET Java
C#集合数据去重的5种方式及其性能对比测试分析
C#集合数据去重的5种方式及其性能对比测试分析
25 11
|
4天前
|
开发框架 .NET Java
C#集合数据去重的5种方式及其性能对比测试分析
C#集合数据去重的5种方式及其性能对比测试分析
30 10
|
2月前
|
机器学习/深度学习 算法 UED
在数据驱动时代,A/B 测试成为评估机器学习项目不同方案效果的重要方法
在数据驱动时代,A/B 测试成为评估机器学习项目不同方案效果的重要方法。本文介绍 A/B 测试的基本概念、步骤及其在模型评估、算法改进、特征选择和用户体验优化中的应用,同时提供 Python 实现示例,强调其在确保项目性能和用户体验方面的关键作用。
36 6
|
2月前
|
机器学习/深度学习 算法 UED
在数据驱动时代,A/B 测试成为评估机器学习项目效果的重要手段
在数据驱动时代,A/B 测试成为评估机器学习项目效果的重要手段。本文介绍了 A/B 测试的基本概念、步骤及其在模型评估、算法改进、特征选择和用户体验优化中的应用,强调了样本量、随机性和时间因素的重要性,并展示了 Python 在 A/B 测试中的具体应用实例。
31 1
|
2月前
|
人工智能 供应链 安全
AI辅助安全测试案例某电商-供应链平台平台安全漏洞
【11月更文挑战第13天】该案例介绍了一家电商供应链平台如何利用AI技术进行全面的安全测试,包括网络、应用和数据安全层面,发现了多个潜在漏洞,并采取了有效的修复措施,提升了平台的整体安全性。
|
2月前
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
146 1
|
3月前
|
人工智能 监控 测试技术
云应用开发平台测试
云应用开发平台测试
80 2
|
3月前
|
存储 测试技术 数据库
数据驱动测试和关键词驱动测试的区别
数据驱动测试 数据驱动测试或 DDT 也被称为参数化测试。
38 1
|
2月前
|
监控 安全 测试技术
构建高效精准测试平台:设计与实现全攻略
在软件开发过程中,精准测试是确保产品质量的关键环节。一个高效、精准的测试平台能够自动化测试流程,提高测试覆盖率,缩短测试周期。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
69 0
|
3月前
|
机器学习/深度学习 监控 计算机视觉
目标检测实战(八): 使用YOLOv7完成对图像的目标检测任务(从数据准备到训练测试部署的完整流程)
本文介绍了如何使用YOLOv7进行目标检测,包括环境搭建、数据集准备、模型训练、验证、测试以及常见错误的解决方法。YOLOv7以其高效性能和准确率在目标检测领域受到关注,适用于自动驾驶、安防监控等场景。文中提供了源码和论文链接,以及详细的步骤说明,适合深度学习实践者参考。
648 0
目标检测实战(八): 使用YOLOv7完成对图像的目标检测任务(从数据准备到训练测试部署的完整流程)