Authored by 王涛

用户动态切换登录皮肤功能

... ... @@ -234,7 +234,18 @@ layui.extend({
//独立页面
if(isIndPage || pathURL === '/user/login'|| pathURL === '/page/forward'){ //此处单独判断登入页,是为了兼容旧版(即未在 sessions.js 配置 indPage 的情况)
container.render(router.path.join('/')).done(function(){
let path = router.path.join('/')
if(pathURL.indexOf('/user/login') != -1){
var loginIndex = 'default';
let loginSkin = sessionStorage.getItem("loginSkin");
if(loginSkin && ["default",'skin1','skin2'].indexOf(loginSkin)){
loginIndex = loginSkin;
}
path = path + '-' + loginIndex;
}
container.render(path).done(function(){
admin.pageType = 'alone';
});
} else { //后台框架页面
... ...
/**
@Name:layuiAdmin 登入注册页
@Author:贤心
@Site:http://www.layui.com/admin/
@License:GPL-2
*/
html, body, #LAY_app {
height: 100%;
}
.layui-layout-body {
overflow: auto;
}
#LAY-user-login,
.layadmin-user-display-show {
display: block !important;
}
.login-btn{
background-color: #2547e0 !important;
}
.layadmin-user-login {
position: relative;
left: 0;
top: 0;
min-height: 100%;
box-sizing: border-box;
background-image: url(img/login/skin/1/beijing.png);
background-size: 100% 95%;
}
.layadmin-user-login-body{
overflow: hidden;
width: 335px;
background-color: #fff;
border-radius: 10px;
margin-left: calc((100% - 375px)/2);
margin-top: 135px;
}
.layadmin-user-login-main {
margin: 0 auto;
box-sizing: border-box;
overflow: hidden;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.layadmin-user-login-box {
padding: 20px;
}
.layadmin-user-login-header {
text-align: center;
}
.layadmin-user-login-header h2 {
margin-bottom: 10px;
font-weight: 300;
font-size: 30px;
color: #000;
}
.layadmin-user-login-header p {
font-weight: 300;
color: #999;
}
.layadmin-user-login-body .layui-form-item {
position: relative;
width: 335px;
float: right;
}
.layadmin-user-login-icon {
position: absolute;
left: 1px;
top: 1px;
width: 38px;
line-height: 36px;
text-align: center;
color: #d2d2d2;
}
.layadmin-user-login-body .layui-form-item .layui-input {
padding-left: 38px;
}
.layadmin-user-login-codeimg {
max-height: 38px;
width: 100%;
cursor: pointer;
box-sizing: border-box;
}
.layadmin-user-login-other {
position: relative;
font-size: 0;
line-height: 38px;
padding-top: 20px;
}
.layadmin-user-login-other > * {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
font-size: 14px;
}
.layadmin-user-login-other .layui-icon {
position: relative;
top: 2px;
font-size: 26px;
}
.layadmin-user-login-other a:hover {
opacity: 0.8;
}
.layadmin-user-jump-change {
float: right;
}
.layadmin-user-login-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
line-height: 30px;
padding: 20px;
text-align: center;
box-sizing: border-box;
color: rgba(0, 0, 0, .5)
}
.layadmin-user-login-footer span {
padding: 0 5px;
}
.layadmin-user-login-footer a {
padding: 0 5px;
color: rgba(0, 0, 0, .5);
}
.layadmin-user-login-footer a:hover {
color: rgba(0, 0, 0, 1);
}
/* 有背景图时 */
.layadmin-user-login-main[bgimg] {
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}
/* 主题背景 */
.ladmin-user-login-theme {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
.ladmin-user-login-theme ul {
display: inline-block;
padding: 5px;
background-color: #fff;
}
.ladmin-user-login-theme ul li {
display: inline-block;
vertical-align: top;
width: 64px;
height: 43px;
cursor: pointer;
transition: all .3s;
-webkit-transition: all .3s;
background-color: #f2f2f2;
}
.ladmin-user-login-theme ul li:hover {
opacity: 0.9
}
.checkcodearea{
margin-left: 5px;
display: inline-flex;
line-height: 38px;
}
.checkcode {
font-style: italic;
color:#6EA6C2;
font-size: 20px;
font-weight: bolder;
float: left;
cursor: pointer;
height: 37px;
line-height: 37px;
text-align: center;
letter-spacing: 8px;
border: 1px solid #E6E6E6;
padding-left: 5px;
background-color:#fff;
min-width: 100px;
}
.refresh {
color:#009688;
}
@media screen and (max-width: 768px) {
.layadmin-user-login {
padding-top: 60px;
}
.layadmin-user-login-main {
width: 300px;
}
.layadmin-user-login-box {
padding: 10px;
}
}
... ...
/**
@Name:layuiAdmin 登入注册页
@Author:贤心
@Site:http://www.layui.com/admin/
@License:GPL-2
*/
html, body, #LAY_app {
height: 100%;
}
.layui-layout-body {
overflow: auto;
}
#LAY-user-login,
.layadmin-user-display-show {
display: block !important;
}
.login-btn{
background-color: #2547e0 !important;
}
.layadmin-user-login {
position: relative;
left: 0;
top: 0;
min-height: 100%;
box-sizing: border-box;
background-image: url(img/login/skin/2/beijng.png);
background-size: 100% 95%;
}
.layadmin-user-login-body{
overflow: hidden;
width: 335px;
background-color: #fff;
border-radius: 10px;
margin-left: calc((100% - 575px));
margin-top: 300px;
}
.layadmin-user-login-main {
margin: 0 auto;
box-sizing: border-box;
overflow: hidden;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 850px;
position: relative;
}
.layadmin-user-login-box {
padding: 20px;
}
.layadmin-user-login-header {
text-align: center;
}
.layadmin-user-login-header h2 {
margin-bottom: 10px;
font-weight: 300;
font-size: 30px;
color: #000;
}
.layadmin-user-login-header p {
font-weight: 300;
color: #999;
}
.layadmin-user-login-body .layui-form-item {
position: relative;
width: 335px;
float: right;
}
.layadmin-user-login-icon {
position: absolute;
left: 1px;
top: 1px;
width: 38px;
line-height: 36px;
text-align: center;
color: #d2d2d2;
}
.layadmin-user-login-body .layui-form-item .layui-input {
padding-left: 38px;
}
.layadmin-user-login-codeimg {
max-height: 38px;
width: 100%;
cursor: pointer;
box-sizing: border-box;
}
.layadmin-user-login-other {
position: relative;
font-size: 0;
line-height: 38px;
padding-top: 20px;
}
.layadmin-user-login-other > * {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
font-size: 14px;
}
.layadmin-user-login-other .layui-icon {
position: relative;
top: 2px;
font-size: 26px;
}
.layadmin-user-login-other a:hover {
opacity: 0.8;
}
.layadmin-user-jump-change {
float: right;
}
.layadmin-user-login-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
line-height: 30px;
padding: 20px;
text-align: center;
box-sizing: border-box;
color: rgba(0, 0, 0, .5)
}
.layadmin-user-login-footer span {
padding: 0 5px;
}
.layadmin-user-login-footer a {
padding: 0 5px;
color: rgba(0, 0, 0, .5);
}
.layadmin-user-login-footer a:hover {
color: rgba(0, 0, 0, 1);
}
/* 有背景图时 */
.layadmin-user-login-main[bgimg] {
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}
/* 主题背景 */
.ladmin-user-login-theme {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
.ladmin-user-login-theme ul {
display: inline-block;
padding: 5px;
background-color: #fff;
}
.ladmin-user-login-theme ul li {
display: inline-block;
vertical-align: top;
width: 64px;
height: 43px;
cursor: pointer;
transition: all .3s;
-webkit-transition: all .3s;
background-color: #f2f2f2;
}
.ladmin-user-login-theme ul li:hover {
opacity: 0.9
}
.checkcodearea{
margin-left: 5px;
display: inline-flex;
line-height: 38px;
}
.checkcode {
font-style: italic;
color:#6EA6C2;
font-size: 20px;
font-weight: bolder;
float: left;
cursor: pointer;
height: 37px;
line-height: 37px;
text-align: center;
letter-spacing: 8px;
border: 1px solid #E6E6E6;
padding-left: 5px;
background-color:#fff;
min-width: 100px;
}
.refresh {
color:#009688;
}
@media screen and (max-width: 768px) {
.layadmin-user-login {
padding-top: 60px;
}
.layadmin-user-login-main {
width: 300px;
}
.layadmin-user-login-box {
padding: 10px;
}
}
... ...
<script type="text/html" template>
<link rel="stylesheet" href="{{ layui.setter.base }}style/login.css?v={{ layui.admin.v }}-1" media="all">
</script>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
<div class="layadmin-user-login-box layadmin-user-login-header">
<!--<h2>国家税务总局浙江省税务局运行监控平台</h2>-->
<img src="/src/style/img/logo.png">
</div>
<div class="layadmin-user-login-main">
<div class="layadmin-user-login-box layadmin-user-login-body layui-form">
<div class="layui-form-item">
<h2>用户登录</h2>
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="userName"></label>
<input type="text" name="username" id="userName" lay-verify="required" placeholder="用户名" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="loginPswd"></label>
<input type="password" name="password" id="loginPswd" lay-verify="required|password" placeholder="密码"
class="layui-input">
</div>
<!--验证码-->
<div class="layui-form-item" id="validCodeLine" style="display: none">
<div class="layui-row">
<div class="layui-col-xs7">
<input id="validCode" name="validCode" style="width:170px" type="text" placeholder="验证码" class="layui-input">
</div>
<div class="layui-col-xs5">
<img class="login-captcha" src="#">
</div>
</div>
</div>
<div class="layui-form-item" style="margin-bottom: 20px;">
<!-- <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">-->
<!-- <a lay-href="/user/forget" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码?</a>-->
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid login-btn" lay-submit lay-filter="LAY-user-login-submit">登 入</button>
</div>
<div class="layui-form-item">
<span style="color: red;word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;" class="login-tips-span"></span>
</div>
</div>
</div>
</div>
<script>
layui.use('login',function (fn) {
fn();
});
(function() {
// Private array of chars to use
var CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
Math.uuid = function (len, radix) {
var chars = CHARS, uuid = [], i;
radix = radix || chars.length;
if (len) {
// Compact form
for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
} else {
// rfc4122, version 4 form
var r;
// rfc4122 requires these characters
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
uuid[14] = '4';
// Fill in random data. At i==19 set the high bits of clock sequence as
// per rfc4122, sec. 4.1.5
for (i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | Math.random()*16;
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
}
}
}
return uuid.join('');
};
})();
</script>
... ...
<script type="text/html" template>
<link rel="stylesheet" href="{{ layui.setter.base }}style/login-skin1.css?v={{ layui.admin.v }}-1" media="all">
</script>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
<div class="layadmin-user-login-box layadmin-user-login-header">
<!--<h2>国家税务总局浙江省税务局运行监控平台</h2>-->
<img src="/src/style/img/login/skin/1/11.png">
</div>
<div class="layadmin-user-login-main">
<div class="layadmin-user-login-box layadmin-user-login-body layui-form">
<div class="layui-form-item" style="color: #2887FD;font-weight: bold;text-align: center;font-size: 18px;">
<h2>用户登录</h2>
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="userName"></label>
<input type="text" name="username" id="userName" lay-verify="required" placeholder="用户名" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="loginPswd"></label>
<input type="password" name="password" id="loginPswd" lay-verify="required|password" placeholder="密码"
class="layui-input">
</div>
<!--验证码-->
<div class="layui-form-item" id="validCodeLine" style="display: none">
<div class="layui-row">
<div class="layui-col-xs7">
<input id="validCode" name="validCode" style="width:170px" type="text" placeholder="验证码" class="layui-input">
</div>
<div class="layui-col-xs5">
<img class="login-captcha" src="#">
</div>
</div>
</div>
<div class="layui-form-item" style="margin-bottom: 20px;">
<!-- <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">-->
<!-- <a lay-href="/user/forget" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码?</a>-->
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid login-btn" lay-submit lay-filter="LAY-user-login-submit">登 入</button>
</div>
<div class="layui-form-item">
<span style="color: red;word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;" class="login-tips-span"></span>
</div>
</div>
</div>
</div>
<script>
layui.use('login',function (fn) {
fn();
});
(function() {
// Private array of chars to use
var CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
Math.uuid = function (len, radix) {
var chars = CHARS, uuid = [], i;
radix = radix || chars.length;
if (len) {
// Compact form
for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
} else {
// rfc4122, version 4 form
var r;
// rfc4122 requires these characters
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
uuid[14] = '4';
// Fill in random data. At i==19 set the high bits of clock sequence as
// per rfc4122, sec. 4.1.5
for (i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | Math.random()*16;
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
}
}
}
return uuid.join('');
};
})();
</script>
... ...
<script type="text/html" template>
<link rel="stylesheet" href="{{ layui.setter.base }}style/login-skin2.css?v={{ layui.admin.v }}-1" media="all">
</script>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
<div class="layadmin-user-login-box layadmin-user-login-header">
<!--<h2>国家税务总局浙江省税务局运行监控平台</h2>-->
</div>
<div class="layadmin-user-login-main">
<img src="/src/style/img/login/skin/2/22.png" style="border: none;position: absolute;margin-left: calc(100% - 663px);margin-top: 145px;">
<div class="layadmin-user-login-box layadmin-user-login-body layui-form">
<div class="layui-form-item" style="color: #2887FD;font-weight: bold;text-align: center;font-size: 18px;">
<h2>用户登录</h2>
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="userName"></label>
<input type="text" name="username" id="userName" lay-verify="required" placeholder="用户名" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="loginPswd"></label>
<input type="password" name="password" id="loginPswd" lay-verify="required|password" placeholder="密码"
class="layui-input">
</div>
<!--验证码-->
<div class="layui-form-item" id="validCodeLine" style="display: none">
<div class="layui-row">
<div class="layui-col-xs7">
<input id="validCode" name="validCode" style="width:170px" type="text" placeholder="验证码" class="layui-input">
</div>
<div class="layui-col-xs5">
<img class="login-captcha" src="#">
</div>
</div>
</div>
<div class="layui-form-item" style="margin-bottom: 20px;">
<!-- <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">-->
<!-- <a lay-href="/user/forget" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码?</a>-->
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid login-btn" lay-submit lay-filter="LAY-user-login-submit">登 入</button>
</div>
<div class="layui-form-item">
<span style="color: red;word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;" class="login-tips-span"></span>
</div>
</div>
</div>
</div>
<script>
layui.use('login',function (fn) {
fn();
});
(function() {
// Private array of chars to use
var CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
Math.uuid = function (len, radix) {
var chars = CHARS, uuid = [], i;
radix = radix || chars.length;
if (len) {
// Compact form
for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
} else {
// rfc4122, version 4 form
var r;
// rfc4122 requires these characters
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
uuid[14] = '4';
// Fill in random data. At i==19 set the high bits of clock sequence as
// per rfc4122, sec. 4.1.5
for (i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | Math.random()*16;
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
}
}
}
return uuid.join('');
};
})();
</script>
... ...