新增亮蓝主题

This commit is contained in:
thinkgem
2020-08-18 15:47:04 +08:00
parent ff5c7ef05b
commit c0ab584687
12 changed files with 349 additions and 150 deletions

View File

@@ -1,153 +1,145 @@
<% layout('/layouts/default.html', {title: '切换主题风格'}){ %>
<% layout('/layouts/default.html', {title:'切换主题风格'}){ %>
<link rel="stylesheet" href="${ctxStatic}/icheck/1.0/square/blue.css?${_version}">
<style>
.list-unstyled{margin:10px;}
.list-unstyled{margin:10px;}
.full-opacity-hover{opacity:1;filter:alpha(opacity=1);border:1px solid #fff}
.full-opacity-hover:hover{border:1px solid #f00;}
.full-opacity-hover:hover{border:1px solid #f00;}
</style>
<ul class="list-unstyled clearfix">
<li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-blue" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<div>
<span style="display:block; width: 20%; float: left; height: 15px; background: #367fa9"></span><span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 15px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 35px; background: #222d32"></span><span style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
</div>
</a>
<p class="text-center no-margin">
</p>
<li style="float:left;width:33.33333%;padding:5px;">
<a href="javascript:" data-skin="skin-blue" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<span style="display:block;width:20%;float:left;height:13px;" class="bg-light-blue-active"></span>
<span style="display:block;width:80%;float:left;height:13px;" class="bg-light-blue"></span>
<span style="display:block;width:20%;float:left;height:30px;background:#222d32"></span>
<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
</a>
<p class="text-center no-margin"></p>
</li>
<li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-black" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix">
<span style="display:block; width: 20%; float: left; height: 15px; background: #fefefe"></span><span style="display:block; width: 80%; float: left; height: 15px; background: #fefefe"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 35px; background: #222"></span><span style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
</div>
</a>
<p class="text-center no-margin">
</p>
<li style="float:left;width:33.33333%;padding:5px;display:none;">
<a href="javascript:" data-skin="skin-black" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<span style="display:block;width:20%;float:left;height:13px;background:#fefefe"></span>
<span style="display:block;width:80%;float:left;height:13px;background:#fefefe"></span>
<span style="display:block;width:20%;float:left;height:30px;background:#222d32"></span>
<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
</a>
<p class="text-center no-margin"></p>
</li>
<li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-purple" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<div>
<span style="display:block; width: 20%; float: left; height: 15px;" class="bg-purple-active"></span><span class="bg-purple" style="display:block; width: 80%; float: left; height: 15px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 35px; background: #222d32"></span><span style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
</div>
</a>
<p class="text-center no-margin">
</p>
<li style="float:left;width:33.33333%;padding:5px;">
<a href="javascript:" data-skin="skin-black2" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<span style="display:block;width:20%;float:left;height:13px;background:#303643"></span>
<span style="display:block;width:80%;float:left;height:13px;background:#303643"></span>
<span style="display:block;width:20%;float:left;height:30px;background:#222d32"></span>
<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
</a>
<p class="text-center no-margin">黑(经典)</p>
</li>
<li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-green" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<div>
<span style="display:block; width: 20%; float: left; height: 15px;" class="bg-green-active"></span><span class="bg-green" style="display:block; width: 80%; float: left; height: 15px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 35px; background: #222d32"></span><span style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
</div>
</a>
<p class="text-center no-margin">
绿
</p>
<li style="float:left;width:33.33333%;padding:5px;">
<a href="javascript:" data-skin="skin-purple" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<span style="display:block;width:20%;float:left;height:13px;" class="bg-purple-active"></span>
<span style="display:block;width:80%;float:left;height:13px;" class="bg-purple"></span>
<span style="display:block;width:20%;float:left;height:30px;background:#222d32"></span>
<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
</a>
<p class="text-center no-margin"></p>
</li>
<li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-red" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<div>
<span style="display:block; width: 20%; float: left; height: 15px;" class="bg-red-active"></span><span class="bg-red" style="display:block; width: 80%; float: left; height: 15px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 35px; background: #222d32"></span><span style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
</div>
</a>
<p class="text-center no-margin">
</p>
<li style="float:left;width:33.33333%;padding:5px;">
<a href="javascript:" data-skin="skin-green" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<span style="display:block;width:20%;float:left;height:13px;" class="bg-green-active"></span>
<span style="display:block;width:80%;float:left;height:13px;" class="bg-green"></span>
<span style="display:block;width:20%;float:left;height:30px;background:#222d32"></span>
<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
</a>
<p class="text-center no-margin">绿</p>
</li>
<li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-yellow" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<div>
<span style="display:block; width: 20%; float: left; height: 15px;" class="bg-yellow-active"></span><span class="bg-yellow" style="display:block; width: 80%; float: left; height: 15px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 35px; background: #222d32"></span><span style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
</div>
</a>
<p class="text-center no-margin">
</p>
<li style="float:left;width:33.33333%;padding:5px;">
<a href="javascript:" data-skin="skin-red" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<span style="display:block;width:20%;float:left;height:13px;" class="bg-red-active"></span>
<span style="display:block;width:80%;float:left;height:13px;" class="bg-red"></span>
<span style="display:block;width:20%;float:left;height:30px;background:#222d32"></span>
<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
</a>
<p class="text-center no-margin"></p>
</li>
<li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-blue-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<div>
<span style="display:block; width: 20%; float: left; height: 15px; background: #367fa9"></span><span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 15px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 35px; background: #f9fafc"></span><span style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
</div>
</a>
<p class="text-center no-margin" style="font-size: 12px">
蓝灰
</p>
<li style="float:left;width:33.33333%;padding:5px;">
<a href="javascript:" data-skin="skin-yellow" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<span style="display:block;width:20%;float:left;height:13px;" class="bg-yellow-active"></span>
<span style="display:block;width:80%;float:left;height:13px;" class="bg-yellow"></span>
<span style="display:block;width:20%;float:left;height:30px;background:#222d32"></span>
<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
</a>
<p class="text-center no-margin"></p>
</li>
<li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-black-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix">
<span style="display:block; width: 20%; float: left; height: 15px; background: #fefefe"></span><span style="display:block; width: 80%; float: left; height: 15px; background: #fefefe"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 35px; background: #f9fafc"></span><span style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
</div>
</a>
<p class="text-center no-margin" style="font-size: 12px">
白灰
</p>
<li style="float:left;width:33.33333%;padding:5px;">
<a href="javascript:" data-skin="skin-blue-light" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<span style="display:block;width:20%;float:left;height:13px;background:#254b83;"></span>
<span style="display:block;width:80%;float:left;height:13px;background:#2a579a;"></span>
<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
</a>
<p class="text-center no-margin">蓝灰(经典)</p>
</li>
<li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-purple-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<div>
<span style="display:block; width: 20%; float: left; height: 15px;" class="bg-purple-active"></span><span class="bg-purple" style="display:block; width: 80%; float: left; height: 15px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 35px; background: #f9fafc"></span><span style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
</div>
</a>
<p class="text-center no-margin" style="font-size: 12px">
紫灰
</p>
<li style="float:left;width:33.33333%;padding:5px;display:none;">
<a href="javascript:" data-skin="skin-black-light" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<span style="display:block;width:20%;float:left;height:13px;background:#fefefe"></span>
<span style="display:block;width:80%;float:left;height:13px;background:#fefefe"></span>
<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
</a>
<p class="text-center no-margin">白灰</p>
</li>
<li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-green-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<div>
<span style="display:block; width: 20%; float: left; height: 15px;" class="bg-green-active"></span><span class="bg-green" style="display:block; width: 80%; float: left; height: 15px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 35px; background: #f9fafc"></span><span style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
</div>
</a>
<p class="text-center no-margin" style="font-size: 12px">
绿灰
</p>
<li style="float:left;width:33.33333%;padding:5px;">
<a href="javascript:" data-skin="skin-black-light2" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<span style="display:block;width:20%;float:left;height:13px;background:#303643"></span>
<span style="display:block;width:80%;float:left;height:13px;background:#303643"></span>
<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
</a>
<p class="text-center no-margin">黑灰</p>
</li>
<li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-red-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<div>
<span style="display:block; width: 20%; float: left; height: 15px;" class="bg-red-active"></span><span class="bg-red" style="display:block; width: 80%; float: left; height: 15px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 35px; background: #f9fafc"></span><span style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
</div>
</a>
<p class="text-center no-margin" style="font-size: 12px">
红灰
</p>
<li style="float:left;width:33.33333%;padding:5px;">
<a href="javascript:" data-skin="skin-purple-light" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<span style="display:block;width:20%;float:left;height:13px;" class="bg-purple-active"></span>
<span style="display:block;width:80%;float:left;height:13px;" class="bg-purple"></span>
<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
</a>
<p class="text-center no-margin">紫灰</p>
</li>
<li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0)" data-skin="skin-yellow-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<div>
<span style="display:block; width: 20%; float: left; height: 15px;" class="bg-yellow-active"></span><span class="bg-yellow" style="display:block; width: 80%; float: left; height: 15px;"></span>
</div>
<div>
<span style="display:block; width: 20%; float: left; height: 35px; background: #f9fafc"></span><span style="display:block; width: 80%; float: left; height: 35px; background: #f4f5f7"></span>
</div>
</a>
<p class="text-center no-margin" style="font-size: 12px">
黄灰
</p>
<li style="float:left;width:33.33333%;padding:5px;">
<a href="javascript:" data-skin="skin-green-light" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<span style="display:block;width:20%;float:left;height:13px;" class="bg-green-active"></span>
<span style="display:block;width:80%;float:left;height:13px;" class="bg-green"></span>
<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
</a>
<p class="text-center no-margin">绿灰</p>
</li>
<li style="float:left;width:33.33333%;padding:5px;">
<a href="javascript:" data-skin="skin-red-light" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<span style="display:block;width:20%;float:left;height:13px;" class="bg-red-active"></span>
<span style="display:block;width:80%;float:left;height:13px;" class="bg-red"></span>
<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
</a>
<p class="text-center no-margin">红灰</p>
</li>
<li style="float:left;width:33.33333%;padding:5px;">
<a href="javascript:" data-skin="skin-yellow-light" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<span style="display:block;width:20%;float:left;height:13px;" class="bg-yellow-active"></span>
<span style="display:block;width:80%;float:left;height:13px;" class="bg-yellow"></span>
<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
</a>
<p class="text-center no-margin">黄灰</p>
</li>
<li style="float:left;width:33.33333%;padding:5px;">
<a href="javascript:" data-skin="skin-blue-light2" style="display:block;box-shadow:0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
<span style="display:block;width:20%;float:left;height:13px;background:#1681e5"></span>
<span style="display:block;width:80%;float:left;height:13px;background:#1890ff"></span>
<span style="display:block;width:20%;float:left;height:30px;background:#f9fafc"></span>
<span style="display:block;width:80%;float:left;height:30px;background:#f4f5f7"></span>
</a>
<p class="text-center no-margin">浅蓝(新)</p>
</li>
</ul>
<% } %>

View File

@@ -1,2 +1,6 @@
<% include('/include/csslibs.html', {libs: libs!}){} %>
<link rel="stylesheet" href="${ctxStatic}/common/common.css?${_version}">
<% include('/include/csslibs.html', {libs: libs!}){}
// 获取当前皮肤样式名称详见jeesite-common项目下的static/adminlte/css/skins目录
var defaultSkinName = @Global.getConfig('sys.index.skinName', 'skin-blue-light');
var skinName = cookie('skinName_'+session.userCode, false, defaultSkinName); %>
<link rel="stylesheet" href="${ctxStatic}/adminlte/css/skins/${skinName}.css?${_version}">
<link rel="stylesheet" href="${ctxStatic}/common/common.css?${_version}">

View File

@@ -1,8 +1,4 @@
<%
// 默认皮肤样式名称详见jeesite-common项目下的static/adminlte/css/skins目录
var defaultSkinName = @Global.getConfig('sys.index.skinName', 'skin-blue-light');
// 从cookie里获取样式名取不到使用默认样式
var skinName = cookie('skinName_'+user.userCode, false, defaultSkinName);
// 侧边栏的默认显示样式1默认显示侧边栏2默认折叠侧边栏
var sidebarStyle = @Global.getConfig('sys.index.sidebarStyle', '1');
var sidebarCollapse = (sidebarStyle == '2' ? 'sidebar-collapse' : '');
@@ -11,7 +7,6 @@ var bodyClass = 'fixed noscroll2 sidebar-mini ' + sidebarCollapse;
<% layout('/layouts/default.html', {title: '', bodyClass: bodyClass, libs: ['tabPage']}){ %>
<% include('/include/upgrade.html'){} // 如果客户浏览器版本过低,则显示浏览器升级提示。 %>
<link rel="stylesheet" href="${ctxStatic}/jquery-toastr/2.0/toastr.min.css?${_version}">
<link rel="stylesheet" href="${ctxStatic}/adminlte/css/skins/${skinName}.css?${_version}">
<link rel="stylesheet" href="${ctxStatic}/modules/sys/sysIndex.css?${_version}">
<header class="main-header">
<% include('sysIndex/topMenu.html'){} %>

View File

@@ -40,10 +40,10 @@
<div class="mt5 icheck">
<label title="${text('公共场所慎用,下次不需要再填写帐号')}"><input type="checkbox"
name="rememberUserCode"${isNotBlank(cookie('rememberUserCode'))?' checked':''}
class="form-control" data-style="square-blue"> ${text('记住账号')}</label> &nbsp;
class="form-control" data-style="minimal-grey"> ${text('记住账号')}</label> &nbsp;
<label title="${text('公共场所慎用,下次不需要再填写帐号和密码')}"><input type="checkbox"
name="rememberMe"${isNotBlank(cookie('rememberMe'))?' checked':''}
class="form-control" data-style="square-blue"> ${text('记住密码')}</label>
class="form-control" data-style="minimal-grey"> ${text('记住密码')}</label>
</div>
</div>
<div class="form-group">