github/SpringBlade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

美化后台ui

Browse Source
This commit is contained in:
zhuangqian 2016-12-16 10:23:01 +08:00
parent 7c7a59e98d
commit 2ee57d5122
13 changed files with 90 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@ -57,12 +57,13 @@ PS:因为喜欢刀锋战士所以取名了SpringBlade，当中有一个类也命
* 图表控件：echarts
## 后台界面
![后台界面](http://git.oschina.net/uploads/images/2016/0706/091736_144317b3_474499.png "后台界面")
![后台界面](http://git.oschina.net/uploads/images/2016/0706/092002_1dd317a7_474499.png "后台界面")
![后台界面](http://git.oschina.net/uploads/images/2016/0706/110441_d286b7c7_474499.png "后台界面")
![后台界面](http://git.oschina.net/uploads/images/2016/0706/110523_4a5256ff_474499.png "后台界面")
![后台界面](http://git.oschina.net/uploads/images/2016/0706/111014_9292e52f_474499.png "后台界面")
![后台界面](http://git.oschina.net/uploads/images/2016/0706/110631_bc667dc7_474499.png "后台界面")
![后台界面](http://git.oschina.net/uploads/images/2016/1216/101843_390413c3_474499.png "后台界面")
![后台界面](http://git.oschina.net/uploads/images/2016/1216/101859_f8602cd4_474499.png "后台界面")
![后台界面](http://git.oschina.net/uploads/images/2016/1216/101906_23f5cac9_474499.png "后台界面")
![后台界面](http://git.oschina.net/uploads/images/2016/1216/101918_2d2f2b09_474499.png "后台界面")
![后台界面](http://git.oschina.net/uploads/images/2016/1216/101926_2fed83a4_474499.png "后台界面")
![后台界面](http://git.oschina.net/uploads/images/2016/1216/101936_51942583_474499.png "后台界面")
![后台界面](http://git.oschina.net/uploads/images/2016/1216/101944_17417a87_474499.png "后台界面")
## 代码示例
实体类

2
src/main/webapp/WEB-INF/view/common/_function/_ztree.html
View File

@ -94,7 +94,7 @@
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<div class="widget-box widget-color-blue2">
<div class="widget-box widget-color-dark">
<div class="widget-header">
<h4 class="widget-title lighter smaller">${name!}</h4>
</div>

2
src/main/webapp/WEB-INF/view/common/_tab.html
View File

@ -31,7 +31,7 @@
<ul id="blade_tab" class="nav nav-tabs" role="tablist">
<li id="welcome_tab" class="active" style="cursor:pointer;">
<a data-toggle="tab" href="#home">
<i class="green ace-icon fa fa-home bigger-120"></i>
<i class="ace-icon fa fa-home bigger-120"></i>
首页
</a>
</li>

44
src/main/webapp/WEB-INF/view/main.html
View File

@ -3,89 +3,89 @@
<div class="row" style="padding:10px 16px 10px 16px;">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<div class="alert alert-block alert-success">
<div class="alert alert-block alert-info">
<button type="button" class="close" data-dismiss="alert">
<i class="ace-icon fa fa-times"></i>
</button>
<i class="ace-icon fa fa-check green"></i>
<i class="ace-icon fa fa-check "></i>
欢迎使用
<strong class="green">
<strong class="info">
Blade 企业级开发平台
<small>(v1.0)</small>
</strong>,
以下为快速地址导向
</div>
<div class="alert alert-block alert-success">
<div class="alert alert-block alert-info">
<button type="button" class="close" data-dismiss="alert">
<i class="ace-icon fa fa-times"></i>
</button>
<i class="ace-icon fa fa-check green"></i>
<i class="ace-icon fa fa-check "></i>
使用技术:
<strong class="green">
<strong class="info">
Spring + SpringMVC + Beetl + Ehcache + Shiro + BootStrap
</strong>
</div>
<div class="alert alert-block alert-success">
<div class="alert alert-block alert-info">
<button type="button" class="close" data-dismiss="alert">
<i class="ace-icon fa fa-times"></i>
</button>
<i class="ace-icon fa fa-check green"></i>
<i class="ace-icon fa fa-check "></i>
ECharts范例官网
<strong class="green">
<a class="green" href="http://echarts.baidu.com/examples.html" target="_blank">http://echarts.baidu.com/examples.html</a>
<strong class="info">
<a class="info" href="http://echarts.baidu.com/examples.html" target="_blank">http://echarts.baidu.com/examples.html</a>
</strong>
</div>
<div class="alert alert-block alert-success">
<div class="alert alert-block alert-info">
<button type="button" class="close" data-dismiss="alert">
<i class="ace-icon fa fa-times"></i>
</button>
<i class="ace-icon fa fa-check green"></i>
<i class="ace-icon fa fa-check "></i>
Beetl文档
<strong>
<a class="green" href="https://javamonkey.github.io/guide/#beetl" target="_blank">https://javamonkey.github.io/guide/#beetl</a>
<a class="info" href="https://javamonkey.github.io/guide/#beetl" target="_blank">https://javamonkey.github.io/guide/#beetl</a>
</strong>
</div>
<div class="alert alert-block alert-success">
<div class="alert alert-block alert-info">
<button type="button" class="close" data-dismiss="alert">
<i class="ace-icon fa fa-times"></i>
</button>
<i class="ace-icon fa fa-check green"></i>
<i class="ace-icon fa fa-check "></i>
BeetlSql文档
<strong>
<a class="green" href="https://javamonkey.github.io/guide/#beetlsql" target="_blank">https://javamonkey.github.io/guide/#beetlsql</a>
<a class="info" href="https://javamonkey.github.io/guide/#beetlsql" target="_blank">https://javamonkey.github.io/guide/#beetlsql</a>
</strong>
</div>
<div class="alert alert-block alert-success">
<div class="alert alert-block alert-info">
<button type="button" class="close" data-dismiss="alert">
<i class="ace-icon fa fa-times"></i>
</button>
<i class="ace-icon fa fa-check green"></i>
<i class="ace-icon fa fa-check "></i>
BootStrap在线帮助
<strong>
<a class="green" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">http://www.runoob.com/bootstrap/bootstrap-tutorial.html</a>
<a class="info" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">http://www.runoob.com/bootstrap/bootstrap-tutorial.html</a>
</strong>
</div>
<div class="alert alert-block alert-success">
<div class="alert alert-block alert-info">
<button type="button" class="close" data-dismiss="alert">
<i class="ace-icon fa fa-times"></i>
</button>
<i class="ace-icon fa fa-check green"></i>
<i class="ace-icon fa fa-check "></i>
BootStrap图标选择
<strong>
<a class="green" href="http://fontawesome.io/icons/" target="_blank">http://fontawesome.io/icons/</a>
<a class="info" href="http://fontawesome.io/icons/" target="_blank">http://fontawesome.io/icons/</a>
</strong>
</div>

2
src/main/webapp/WEB-INF/view/system/dept/dept.html
View File

@ -83,7 +83,7 @@
<!-- 配置grid -->
<div class="row">
<div class="col-sm-3">
<div class="widget-box widget-color-blue2">
<div class="widget-box widget-color-dark">
<div class="widget-header">
<h4 class="widget-title lighter smaller">部门组织架构</h4>
</div>

2
src/main/webapp/WEB-INF/view/system/dict/dict.html
View File

@ -87,7 +87,7 @@
<!-- 配置grid -->
<div class="row">
<div class="col-sm-3">
<div class="widget-box widget-color-blue2">
<div class="widget-box widget-color-dark">
<div class="widget-header">
<h4 class="widget-title lighter smaller">字典项</h4>
</div>

2
src/main/webapp/WEB-INF/view/system/menu/menu.html
View File

@ -89,7 +89,7 @@
<!-- 配置grid -->
<div class="row">
<div class="col-sm-3">
<div class="widget-box widget-color-blue2">
<div class="widget-box widget-color-dark">
<div class="widget-header">
<h4 class="widget-title lighter smaller">菜单</h4>
</div>

2
src/main/webapp/WEB-INF/view/system/role/role.html
View File

@ -84,7 +84,7 @@
<!-- 配置grid -->
<div class="row">
<div class="col-sm-3">
<div class="widget-box widget-color-blue2">
<div class="widget-box widget-color-dark">
<div class="widget-header">
<h4 class="widget-title lighter smaller">角色组织架构</h4>
</div>

2
src/main/webapp/WEB-INF/view/system/role/role_authority.html
View File

@ -68,7 +68,7 @@
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<div class="widget-box widget-color-blue2">
<div class="widget-box widget-color-dark">
<div class="widget-header">
<h4 class="widget-title lighter smaller">权限配置</h4>
<small class="widget-title lighter smaller">(${roleName!})</small>

2
src/main/webapp/WEB-INF/view/system/user/user.html
View File

@ -71,7 +71,7 @@
<!-- 配置grid -->
<div class="row">
<div class="col-sm-3">
<div class="widget-box widget-color-blue2">
<div class="widget-box widget-color-dark">
<div class="widget-header">
<h4 class="widget-title lighter smaller">部门组织架构</h4>
</div>

6
src/main/webapp/WEB-INF/view/system/user/user_extrole.html
View File

@ -107,7 +107,7 @@
<!-- 配置grid -->
<div class="row">
<div class="col-sm-4">
<div class="widget-box widget-color-blue2">
<div class="widget-box widget-color-dark">
<div class="widget-header">
<h4 class="widget-title lighter smaller">所属角色权限集</h4>
<small class="widget-title lighter smaller">(${roleName!})</small>
@ -121,7 +121,7 @@
</div>
</div>
<div class="col-sm-4">
<div class="widget-box widget-color-blue2">
<div class="widget-box widget-color-dark">
<div class="widget-header">
<h4 class="widget-title lighter smaller">新增权限</h4>
<small class="widget-title lighter smaller">(${roleName!})</small>
@ -135,7 +135,7 @@
</div>
</div>
<div class="col-sm-4">
<div class="widget-box widget-color-blue2">
<div class="widget-box widget-color-dark">
<div class="widget-header">
<h4 class="widget-title lighter smaller">剔除权限</h4>
<small class="widget-title lighter smaller">(${roleName!})</small>

2
src/main/webapp/WEB-INF/view/system/user/user_roleassign.html
View File

@ -65,7 +65,7 @@
<!-- 配置grid -->
<div class="row">
<div class="col-sm-10">
<div class="widget-box widget-color-blue2">
<div class="widget-box widget-color-dark">
<div class="widget-header">
<h4 class="widget-title lighter smaller">角色分配</h4>
@ var contains=func.like(id,",");

98
src/main/webapp/static/assets/css/ace.css
View File

@ -1155,7 +1155,7 @@ pre.prettyprint {
-webkit-box-shadow: none;
box-shadow: none;
min-height: 45px;
background: #438eb9;
background: #495d71;
}
.navbar .navbar-text,
.navbar .navbar-link {
@ -10310,7 +10310,7 @@ input.ace + .lbl.padding-0::before {
}
.nav-tabs > li > a:hover {
background-color: #FFF;
color: #4c8fbd;
color: #576373;
border-color: #c5d0dc;
}
.nav-tabs > li > a:active,
@ -10325,7 +10325,7 @@ input.ace + .lbl.padding-0::before {
.nav-tabs > li.active > a:focus {
color: #576373;
border-color: #c5d0dc;
border-top: 2px solid #4c8fbd;
border-top: 2px solid #2f4050;
border-bottom-color: transparent;
/*---zhuangqian---增加背景色------*/
background-color: #fcfcfc;
@ -11127,11 +11127,11 @@ td .lbl:only-child {
background: #ffc657;
}
.widget-color-dark {
border-color: #5a5a5a;
border-color: #495d71;
}
.widget-color-dark > .widget-header {
border-color: #666666;
background: #404040;
border-color: #495d71;
background: #495d71;
}
.widget-color-grey {
border-color: #9e9e9e;
@ -19138,7 +19138,7 @@ input.typeahead.scrollable ~ .tt-dropdown-menu {
border-color: rgba(255, 255, 255, 0.35);
}
.no-skin .sidebar {
background-color: #f2f2f2;
background-color: #2f4050;
border-style: solid;
border-color: #cccccc;
border-width: 0 1px 0 0;
@ -19146,54 +19146,54 @@ input.typeahead.scrollable ~ .tt-dropdown-menu {
.no-skin .nav-list .open > a,
.no-skin .nav-list .open > a:hover,
.no-skin .nav-list .open > a:focus {
background-color: #fafafa;
background-color: #293846;
}
.no-skin .nav-list > li {
border-color: #e5e5e5;
border-color: #2f4050;
}
.no-skin .nav-list > li > a {
background-color: #f8f8f8;
color: #585858;
background-color: #2f4050;
color: #c5d0e2;
}
.no-skin .nav-list > li > a:focus {
background-color: #f8f8f8;
color: #1963aa;
background-color: #293846;
color: #ffffff;
}
.no-skin .nav-list > li:hover > a {
background-color: #ffffff;
color: #266cad;
background-color: #293846;
color: #ffffff;
}
.no-skin .nav-list > li.open > a {
background-color: #fafafa;
color: #1963aa;
background-color: #293846;
color: #ffffff;
}
.no-skin .nav-list > li.active > a {
font-weight: bold;
color: #2b7dbc;
color: #ffffff;
}
.no-skin .nav-list > li.active > a,
.no-skin .nav-list > li.active > a:hover,
.no-skin .nav-list > li.active > a:focus {
background-color: #ffffff;
background-color: #293846;
}
.no-skin .nav-list > li .submenu {
background-color: #ffffff;
border-color: #e5e5e5;
background-color: #293846;
border-color: #293846;
}
.no-skin .nav-list > li .submenu > li > a {
border-top-color: #e4e4e4;
background-color: #ffffff;
color: #616161;
border-top-color: #293846;
background-color: #293846;
color: #c5d0e2;
}
.no-skin .nav-list > li .submenu > li > a:hover {
color: #4b88b7;
background-color: #f1f5f9;
color: #ffffff;
background-color: #2f4050;
}
.no-skin .nav-list > li .submenu > li.active > a {
color: #2b7dbc;
color: #ffffff;
}
.no-skin .nav-list > li .submenu > li.active > a > .menu-icon {
color: #c86139;
color: #ffffff;
}
.no-skin .nav-list > li .submenu > li.active.open > a > .menu-icon {
color: inherit;
@ -19204,29 +19204,29 @@ input.typeahead.scrollable ~ .tt-dropdown-menu {
}
}
.no-skin .nav-list > li .submenu > li.active:not(.open) > a {
background-color: #f5f7fa;
background-color: #2f4050;
}
.no-skin .nav-list > li .submenu > li.active:not(.open) > a:hover {
background-color: #f1f5f9;
background-color: #2f4050;
}
.no-skin .nav-list > li > .submenu .open > a,
.no-skin .nav-list > li > .submenu .open > a:hover,
.no-skin .nav-list > li > .submenu .open > a:focus {
border-color: #e4e4e4;
border-color: #293846;
}
.no-skin .nav-list > li > .submenu li > .submenu > li a {
color: #757575;
color: #c5d0e2;
}
.no-skin .nav-list > li > .submenu li > .submenu > li a:hover {
color: #4b88b7;
background-color: #f1f5f9;
color: #ffffff;
background-color: #293846;
}
.no-skin .nav-list > li > .submenu li.open > a {
color: #4b88b7;
color: #ffffff;
}
.no-skin .nav-list > li > .submenu li > .submenu li.open > a,
.no-skin .nav-list > li > .submenu li > .submenu li.active > a {
color: #4b88b7;
color: #ffffff;
}
.no-skin .nav-list > li > .submenu:before,
.no-skin .nav-list > li > .submenu > li:before {
@ -19237,13 +19237,13 @@ input.typeahead.scrollable ~ .tt-dropdown-menu {
border-color: #8eb3d0;
}
.no-skin .sidebar-toggle {
background-color: #f3f3f3;
border-color: #e0e0e0;
background-color: #2f4050;
border-color: #2f4050;
}
.no-skin .sidebar-toggle > .ace-icon {
border-color: #bbbbbb;
color: #aaaaaa;
background-color: #ffffff;
border-color: #2f4050;
color: #2f4050;
background-color: #2f4050;
}
.no-skin .sidebar-shortcuts {
background-color: #fafafa;
@ -19277,7 +19277,7 @@ input.typeahead.scrollable ~ .tt-dropdown-menu {
left: -11px !important;
}
.no-skin .nav-list li.active > a:after {
border-right-color: #2b7dbc;
border-right-color: #ffffff;
-moz-border-right-colors: #2b7dbc;
}
.no-skin .nav-list > li.active:after {
@ -19310,22 +19310,22 @@ input.typeahead.scrollable ~ .tt-dropdown-menu {
}
}
.no-skin .sidebar.menu-min .nav-list > li > a > .menu-text {
background-color: #f5f5f5;
background-color: #2f4050;
-webkit-box-shadow: 2px 1px 2px 0 rgba(0,0,0,0.1);
box-shadow: 2px 1px 2px 0 rgba(0,0,0,0.1);
border-color: #cccccc;
border-color: #2f4050;
}
.no-skin .sidebar.menu-min .nav-list > li > a.dropdown-toggle > .menu-text {
-webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.1);
box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.1);
}
.no-skin .sidebar.menu-min .nav-list > li.active > .submenu {
border-left-color: #83b6d1;
border-left-color: #2f4050;
}
.no-skin .sidebar.menu-min .nav-list > li > .submenu {
background-color: #ffffff;
border: 1px solid #cccccc;
border-top-color: #e6e6e6;
background-color: #2f4050;
border: 1px solid #2f4050;
border-top-color: #2f4050;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.1);
box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.1);
}
@ -19353,7 +19353,7 @@ input.typeahead.scrollable ~ .tt-dropdown-menu {
border-color: #cccccc;
}
.no-skin .sidebar.menu-min .sidebar-toggle > .ace-icon {
border-color: #b1b1b1;
border-color: #2f4050;
}
@media (max-width: 991px) {
.no-skin .sidebar.responsive-min .nav-list > li > a > .menu-text {