基于最新官方后台风格细化美观
最近官方更新了后台的风格;
在我小黄人交流群里很多人都反应可以再细化一下;太突兀了,二级三级菜单的差异也不明显,看得有点难受;
本人简单优化了一下;免费提供给大家;使用;
把CSS 贴到 /public/static/assets/global/css/my.css
就可以了,可以看图2效果

优化后效果

.page-header.navbar .page-logo {
text-align: inherit !important;
}
.page-admin-all .page-header.navbar .page-logo img {
width: 120px;
height: auto;
vertical-align: initial !important;
}
.page-header.navbar .page-logo::before{
content: " ";
width: 70px !important;
height: 60px !important;
background: #343e4d;
display: inline-block;
}
.menu-top-name,
.top-txt-menu {
font-size: 10px !important;
font-weight: 100 !important;
line-height: 12px !important;
}
.qs-top-menu li > a{
padding: 10px 22px 10px 15px;
}
.menu-top-icon i {
font-size: 20px !important
}
.page-sidebar-one .fc-all-menu-top li {
padding: 12px 0 !important
}
.page-admin-all .page-sidebar .page-sidebar-menu.page-sidebar-menu-light>li.active.open>a,
.page-admin-all .page-sidebar .page-sidebar-menu.page-sidebar-menu-light>li.active>a,
.page-admin-all .page-sidebar .page-sidebar-menu.page-sidebar-menu-light>li.open>a,
.page-admin-all .page-sidebar .page-sidebar-menu.page-sidebar-menu-light>li.active.open>a>i .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-light>li.active.open>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-light>li.active>a {
background: #f5f7fa !important;
color: #333!important;
}
.page-admin-all .page-sidebar .page-sidebar-menu>li.active.open>a>.arrow.open:before,
.page-admin-all .page-sidebar .page-sidebar-menu>li.active.open>a>.arrow:before,
.page-admin-all .page-sidebar .page-sidebar-menu>li.active.open>a>i,
.page-admin-all .page-sidebar .page-sidebar-menu>li.active>a>.arrow.open:before,
.page-admin-all .page-sidebar .page-sidebar-menu>li.active>a>.arrow:before,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.active.open>a>.arrow.open:before,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.active.open>a>.arrow:before,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.active.open>a>i,
.page-admin-all .page-sidebar .page-sidebar-menu.page-sidebar-menu-light>li.active.open>a:hover>i, .page-admin-all .page-sidebar .page-sidebar-menu.page-sidebar-menu-light>li.active.open>a:hover>span:before,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.active>a>.arrow.open:before,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.active>a>.arrow:before,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.active>a>i {
color: #1976d2 !important;
}
.page-admin-all .page-sidebar .page-sidebar-menu li:hover>a>.arrow.open:before, .page-admin-all .page-sidebar .page-sidebar-menu li:hover>a>.arrow:before, .page-admin-all .page-sidebar .page-sidebar-menu li:hover>a>i, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li:hover>a>.arrow.open:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li:hover>a>.arrow:before{
color: #333 !important;
}
.page-admin-all .page-sidebar .page-sidebar-menu li:hover>a>.arrow.open:before, .page-admin-all .page-sidebar .page-sidebar-menu li:hover>a>.arrow:before, .page-admin-all .page-sidebar .page-sidebar-menu li:hover>a>i, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li:hover>a>.arrow.open:before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li:hover>a>.arrow:before,
.page-admin-all .page-sidebar .page-sidebar-menu .sub-menu>li>a>i, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu>li>a>i,
.page-admin-all .page-sidebar .page-sidebar-menu .sub-menu>li>a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu>li>a,
.page-admin-all .page-sidebar .page-sidebar-menu .sub-menu>li.active>a>i, .page-admin-all .page-sidebar .page-sidebar-menu .sub-menu>li.open>a>i, .page-admin-all .page-sidebar .page-sidebar-menu .sub-menu>li:hover>a>i, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu>li.active>a>i, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu>li.open>a>i, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu>li:hover>a>i {
color: #999;
}
把这种界面看着挺舒服的呀
你这个后台都改成我去年买的迅睿商城一样了