设计后台布局样式
一.前言废话
前两章我们已经安装了nodejs,webpack,vue,iview等环境和工具,并且上一章我们已经跑起来了demo。现在我们要规划一下我们要做什么东西,当然在此之前作者已经做好前期工作了。目的就是做后台管理系统,虽然iview有提供几款布局样式,但作者还是想自己设计一个。
事情进展到了这一步接下来我们就要设计主页了。
作者:并非专业设计或前端人员,审美全靠个人觉得好看
使用工具:ps
二.整体布局设计
-
首先我们采用国际通用的 顶部+左侧菜单+右侧内容+底部 的设计,大概就是下面这样子。
-
然后选一套好看的配色
顶部 #273f46
左侧 #ffffff 加边框
底部 #eceff1
三.头部布局设计
我们需要以下内容
1.菜单收缩按钮
2.logo
3.搜索框
4.用户头像姓名
5.更多按钮
大概就是下面这样
替换图片和文字就是下面这样
四.左侧菜单布局设计
我们需要以下内容
1.菜单图标
2.菜单名称
3.菜单子项
大概就是下面这样,看起来宽度似乎不够,后面再给宽一点吧。
替换图片和文字就是下面这样
end-剩下的下一章再做