记录6年时间3套easyui前端框架主题皮肤美化的设计历程

最新推荐文章于 2024-09-15 16:35:16 发布

uimaker

最新推荐文章于 2024-09-15 16:35:16 发布

阅读量2.1k

点赞数 1

分类专栏： easyui主题文章标签： easyui 前端前端框架 ui css

本文链接：https://blog.csdn.net/uimaker/article/details/130375040

版权

easyui主题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

沉寂了许久，是该发点东西了，要不然2023年都要过去一半了 ！

第一次接触Easyui前端框架，还是在2016年的时候，有个美化easyui界面的需求，自己是设计师，前端知识也只会最基本的html和css样式，JS只能网上找例子来套用。于是就找前端的朋友一起合作，我设计系统界面的UI，然后前端根据设计，在easyui主题的基础上实现我的设计，于是第一版easyui主题的美化就这样诞生了，就是下图的样子了，相信很多人都见到过：

但这个版本由于修改了easyui的部分JS，后期easyui版本升级会影响到主题皮肤的使用，并且很多小的细节没有处理到位，并且是在easyui1.4.5版本上开发的，挺久远了，现在easyui都升级到1.10.X了，自己JS几乎不会，看到不满意的地方也不好修改，只能放弃对它的维护。

时间来到了2019年，总结了上一个版本的经验，加上自己JS不会写，就考虑是否能在只修改css样式的基础上来对easyui主题进行美化，这样只需要替换掉项目里的css文件就可以实现对已有项目的界面美化，并且不影响easyui核心JS的升级，事实证明这样确实很方便，很多用easyui做的项目，用这个方法来更换美化界面，操作起来很简单也很方便，2019版的easyui主题皮肤如下图:

easyui主题皮肤美化-2019版 — 2019年设计制作的easyui主题皮肤

这一版一开始是设计的酷黑风格，后来发现不怎么实用，几乎没有项目会用到黑色的主题，于是就制作了蓝色、蓝黑、仿layui风格的皮肤，并且都是只修改了easyui.css这个文件，用到项目中时最多也就是样式的小问题，不会让系统产生bug。不满意的地方就是还是不够完美，灰色用的有点深了，数据表格等几个组件的样式显示有点不太完美，用easyui默认的组件来排版布局复杂页面还是有点麻烦的，还要自己去写一些css样式结合起来排版，目前这套主题依然在维护，后面再把它完善一下吧，让它更漂亮、更实用。

有了前2套easyui皮肤设计的经验积累和对easyui框架的熟悉，年初的时候就想要再做一套更漂亮更好用的主题，但由于自己比较懒，拖了好久才开始，工作比较忙，有时间就做一点，前前后后搞了2个多月才差不多搞好，赶紧发到这里来“炫耀”一下，大家多提宝贵意见，注意：涉及JS的最好别提，因为我不会JS。

赶紧放出效果图大家一起鉴赏下吧，虽然风格并不是很流行，但相比之前的版本，也进步了不少，因为根本没用PS做效果图，变修改样式边调整，所以可能还不算太好看，大家凑合一下吧：

我在Easyui框架metro主题基础上修改的，对全部电脑端组件（手机端未做修改）进行了整体风格的设计美化，只对相关CSS样式属性进行修改，Easyui核心js均未改动。metro主题看起来还是很干净清爽的，稍微改改弄弄就挺好看了。

这次主题皮肤制作由于对easyui的样式更了解，改动的效果也更好了，突然发现easyu默认的样式写的挺不错的，很多地方都支持修改，总有办法或途径来实现自己脑子里的想法，看来写样式的老外还是很牛的。

主题的演示视频请移步： easyui主题皮肤演示https://www.uimaker.com/easyui/

登录页

加了个JS的背景特效，效果还不错哈哈~

系统主页（仪表盘）

还是采用了最普遍的上左右布局模式，下个版本尝试左右布局，或者上下布局。左侧菜单采用Sidemenu侧栏菜单组件，点击菜单会在右侧弹出对应Tab页，Tab页切换时，左侧菜单自动进行关联切换。用到了ECharts统计图表，当然色彩也是专门调整搭配的。

左侧菜单缩进/右侧Tab页右键菜单：

Easyui组件（电脑端）

最最重要的就是easyui默认的51个组件了，调整起来也是相当花时间和精力，目的就是能和整体风格都搭配起来，这样在做项目时做起页面来就能效果提高，也不用花太多心思去考虑好看不好看的问题了，直接拖过来就可以用，还都挺搭配的呢：），并且还加入了一些辅助元素：Loadding加载、徽章、提示区块、分割线、面包屑导航、时间线，是不是很用心了haha~~。