mirror of https://gitee.com/stylefeng/guns
442 lines
15 KiB
HTML
442 lines
15 KiB
HTML
<div class="lock-screen-wrapper">
|
||
<div class="lock-screen-time"></div>
|
||
<div class="lock-screen-date"></div>
|
||
<div class="lock-screen-form">
|
||
<input placeholder="输入123456解锁" autocomplete="new-password" class="lock-screen-psw" maxlength="20" type="password" name="newpwd" id="newpwd"/>
|
||
<i class="layui-icon layui-icon-right lock-screen-enter"></i>
|
||
<br/>
|
||
<div class="lock-screen-tip"></div>
|
||
</div>
|
||
<div class="lock-screen-tool">
|
||
<div class="lock-screen-tool-item">
|
||
<i class="layui-icon layui-icon-logout" data-confirm="false" id="logoutBtn"></i>
|
||
<div class="lock-screen-tool-tip">退出登录</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
layui.use(['util', 'admin', 'HttpRequest'], function () {
|
||
var $ = layui.jquery;
|
||
var util = layui.util;
|
||
var admin = layui.admin;
|
||
var HttpRequest = layui.HttpRequest;
|
||
var rightPsw = 'e10adc3949ba59abbe56e057f20f883e'; // 正确密码的MD5密文
|
||
|
||
// 获取各个组件
|
||
var $form = $('.lock-screen-wrapper .lock-screen-form');
|
||
var $psw = $form.find('.lock-screen-psw');
|
||
var $tip = $form.find('.lock-screen-tip');
|
||
var $time = $('.lock-screen-wrapper .lock-screen-time');
|
||
var $date = $('.lock-screen-wrapper .lock-screen-date');
|
||
|
||
// 监听退出
|
||
$('#logoutBtn').click(function (e) {
|
||
|
||
//解锁锁屏
|
||
admin.unlockScreen();
|
||
|
||
var request = new HttpRequest(Feng.ctxPath + "/logout", 'post', function (data) {
|
||
Feng.success("退出成功!");
|
||
location.replace(Feng.ctxPath + "/");
|
||
}, function (data) {
|
||
layer.msg("退出失败！" + data.message, {icon: 5, anim: 6});
|
||
});
|
||
request.start();
|
||
});
|
||
|
||
// 监听enter键
|
||
$(window).keydown(function (event) {
|
||
if (admin.isLockScreen) {
|
||
if (event.keyCode === 13) {
|
||
doVer();
|
||
} else if (event.keyCode === 8 && !$psw.val()) {
|
||
restForm();
|
||
if (event.preventDefault) event.preventDefault();
|
||
if (event.returnValue) event.returnValue = false;
|
||
}
|
||
}
|
||
});
|
||
|
||
// 监听输入
|
||
$psw.on('input', function () {
|
||
var psw = $psw.val();
|
||
if (rightPsw === toMd5Hex(psw)) {
|
||
restForm();
|
||
admin.unlockScreen();
|
||
} else if (psw) {
|
||
$form.removeClass('show-back');
|
||
$tip.text('');
|
||
} else {
|
||
$form.addClass('show-back');
|
||
}
|
||
});
|
||
|
||
// 监听按钮点击
|
||
$form.find('.lock-screen-enter').click(function (e) {
|
||
doVer(true);
|
||
});
|
||
|
||
// 处理事件
|
||
function doVer(emptyRest) {
|
||
if ($form.hasClass('show-psw')) {
|
||
$psw.focus();
|
||
var psw = $psw.val();
|
||
if (!psw) {
|
||
emptyRest ? restForm() : $tip.text('请输入解锁密码');
|
||
} else if (rightPsw === toMd5Hex(psw)) {
|
||
restForm();
|
||
admin.unlockScreen();
|
||
} else {
|
||
$psw.val('');
|
||
$tip.text('密码不正确');
|
||
$form.addClass('show-back');
|
||
}
|
||
} else {
|
||
$form.addClass('show-psw show-back');
|
||
$psw.focus();
|
||
}
|
||
}
|
||
|
||
// 重置
|
||
function restForm() {
|
||
$psw.blur();
|
||
$psw.val('');
|
||
$tip.text('');
|
||
$form.removeClass('show-psw show-back');
|
||
}
|
||
|
||
// 时间、日期
|
||
function setDate() {
|
||
var date = new Date();
|
||
$time.text(util.toDateString(date, 'HH:mm'));
|
||
var weeks = ['日', '一', '二', '三', '四', '五', '六'];
|
||
$date.text(util.toDateString(date, 'MM月dd日，星期') + weeks[date.getDay()]);
|
||
}
|
||
|
||
setDate();
|
||
|
||
setInterval(function () {
|
||
if (admin.isLockScreen) setDate();
|
||
}, 1000);
|
||
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.lock-screen-wrapper {
|
||
color: #ffffff;
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
padding: 50px 60px 0 60px;
|
||
background-color: #000000;
|
||
background-image: url("${ctxPath}/assets/common/images/bg-screen.jpg");
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
position: relative;
|
||
}
|
||
|
||
.lock-screen-time {
|
||
font-size: 88px;
|
||
}
|
||
|
||
.lock-screen-date {
|
||
font-size: 24px;
|
||
padding: 0 0 0 13px;
|
||
}
|
||
|
||
.lock-screen-form {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 65%;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.lock-screen-psw {
|
||
color: #ffffff;
|
||
font-size: 22px;
|
||
width: 0;
|
||
height: 0;
|
||
line-height: 40px;
|
||
border-radius: 40px;
|
||
border: 2px solid transparent;
|
||
background-color: transparent;
|
||
box-sizing: border-box;
|
||
vertical-align: middle;
|
||
-webkit-transition: all .3s;
|
||
transition: all .3s;
|
||
text-align: center;
|
||
}
|
||
|
||
.lock-screen-psw::-webkit-input-placeholder {
|
||
color: #F6F6F6;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.lock-screen-psw::-moz-placeholder {
|
||
color: #F6F6F6;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.lock-screen-psw::-ms-input-placeholder {
|
||
color: #F6F6F6;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.lock-screen-enter {
|
||
width: 65px;
|
||
height: 65px;
|
||
line-height: 1;
|
||
font-size: 28px;
|
||
padding-top: 18px;
|
||
border: 2px solid #ffffff;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
vertical-align: middle;
|
||
transition: all .3s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.lock-screen-enter:hover {
|
||
background-color: rgba(255, 255, 255, .3);
|
||
}
|
||
|
||
.lock-screen-form.show-psw .lock-screen-psw {
|
||
height: 40px;
|
||
width: 180px;
|
||
padding: 0 5px;
|
||
margin-right: 10px;
|
||
border-color: #ffffff;
|
||
background-color: rgba(255, 255, 255, .3);
|
||
}
|
||
|
||
.lock-screen-form.show-psw .lock-screen-enter {
|
||
width: 40px;
|
||
height: 40px;
|
||
font-size: 20px;
|
||
padding-top: 8px;
|
||
}
|
||
|
||
.lock-screen-form.show-back .lock-screen-enter:before {
|
||
content: "\e603";
|
||
}
|
||
|
||
.lock-screen-tip {
|
||
color: red;
|
||
width: 230px;
|
||
padding: 0 3px;
|
||
font-size: 14px;
|
||
text-align: left;
|
||
box-sizing: border-box;
|
||
display: none;
|
||
}
|
||
|
||
.lock-screen-form.show-psw .lock-screen-tip {
|
||
display: inline-block;
|
||
}
|
||
|
||
.lock-screen-tool {
|
||
width: 20px;
|
||
position: absolute;
|
||
right: 20px;
|
||
bottom: 20px;
|
||
}
|
||
|
||
.lock-screen-tool .lock-screen-tool-item {
|
||
position: relative;
|
||
width: 20px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
margin-top: 15px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.lock-screen-tool .lock-screen-tool-item:hover .layui-icon {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.lock-screen-tool .layui-icon {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.lock-screen-tool .lock-screen-tool-item .lock-screen-tool-tip {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 100%;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
width: 60px;
|
||
width: max-content;
|
||
text-align: center;
|
||
margin-right: 10px;
|
||
margin-top: -12px;
|
||
font-size: 12px;
|
||
padding: 0 8px;
|
||
color: #eee;
|
||
border-radius: 3px;
|
||
background-color: rgba(255, 255, 255, .3);
|
||
word-break: break-all;
|
||
display: none;
|
||
}
|
||
|
||
.lock-screen-tool .lock-screen-tool-item:hover .lock-screen-tool-tip {
|
||
display: inline-block;
|
||
}
|
||
|
||
.lock-screen-tool .lock-screen-tool-item .lock-screen-tool-tip:before {
|
||
content: "";
|
||
border: 4px solid transparent;
|
||
border-left-color: rgba(255, 255, 255, .3);
|
||
position: absolute;
|
||
right: -8px;
|
||
top: 50%;
|
||
margin-top: -4px;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
/** MD5加密 */
|
||
function toMd5Hex(text) {
|
||
var hexcase = 0;
|
||
var chrsz = 8;
|
||
|
||
function core_md5(x, len) {
|
||
x[len >> 5] |= 0x80 << ((len) % 32);
|
||
x[(((len + 64) >>> 9) << 4) + 14] = len;
|
||
var a = 1732584193;
|
||
var b = -271733879;
|
||
var c = -1732584194;
|
||
var d = 271733878;
|
||
for (var i = 0; i < x.length; i += 16) {
|
||
var olda = a;
|
||
var oldb = b;
|
||
var oldc = c;
|
||
var oldd = d;
|
||
a = md5_ff(a, b, c, d, x[i + 0], 7, -680876936);
|
||
d = md5_ff(d, a, b, c, x[i + 1], 12, -389564586);
|
||
c = md5_ff(c, d, a, b, x[i + 2], 17, 606105819);
|
||
b = md5_ff(b, c, d, a, x[i + 3], 22, -1044525330);
|
||
a = md5_ff(a, b, c, d, x[i + 4], 7, -176418897);
|
||
d = md5_ff(d, a, b, c, x[i + 5], 12, 1200080426);
|
||
c = md5_ff(c, d, a, b, x[i + 6], 17, -1473231341);
|
||
b = md5_ff(b, c, d, a, x[i + 7], 22, -45705983);
|
||
a = md5_ff(a, b, c, d, x[i + 8], 7, 1770035416);
|
||
d = md5_ff(d, a, b, c, x[i + 9], 12, -1958414417);
|
||
c = md5_ff(c, d, a, b, x[i + 10], 17, -42063);
|
||
b = md5_ff(b, c, d, a, x[i + 11], 22, -1990404162);
|
||
a = md5_ff(a, b, c, d, x[i + 12], 7, 1804603682);
|
||
d = md5_ff(d, a, b, c, x[i + 13], 12, -40341101);
|
||
c = md5_ff(c, d, a, b, x[i + 14], 17, -1502002290);
|
||
b = md5_ff(b, c, d, a, x[i + 15], 22, 1236535329);
|
||
a = md5_gg(a, b, c, d, x[i + 1], 5, -165796510);
|
||
d = md5_gg(d, a, b, c, x[i + 6], 9, -1069501632);
|
||
c = md5_gg(c, d, a, b, x[i + 11], 14, 643717713);
|
||
b = md5_gg(b, c, d, a, x[i + 0], 20, -373897302);
|
||
a = md5_gg(a, b, c, d, x[i + 5], 5, -701558691);
|
||
d = md5_gg(d, a, b, c, x[i + 10], 9, 38016083);
|
||
c = md5_gg(c, d, a, b, x[i + 15], 14, -660478335);
|
||
b = md5_gg(b, c, d, a, x[i + 4], 20, -405537848);
|
||
a = md5_gg(a, b, c, d, x[i + 9], 5, 568446438);
|
||
d = md5_gg(d, a, b, c, x[i + 14], 9, -1019803690);
|
||
c = md5_gg(c, d, a, b, x[i + 3], 14, -187363961);
|
||
b = md5_gg(b, c, d, a, x[i + 8], 20, 1163531501);
|
||
a = md5_gg(a, b, c, d, x[i + 13], 5, -1444681467);
|
||
d = md5_gg(d, a, b, c, x[i + 2], 9, -51403784);
|
||
c = md5_gg(c, d, a, b, x[i + 7], 14, 1735328473);
|
||
b = md5_gg(b, c, d, a, x[i + 12], 20, -1926607734);
|
||
a = md5_hh(a, b, c, d, x[i + 5], 4, -378558);
|
||
d = md5_hh(d, a, b, c, x[i + 8], 11, -2022574463);
|
||
c = md5_hh(c, d, a, b, x[i + 11], 16, 1839030562);
|
||
b = md5_hh(b, c, d, a, x[i + 14], 23, -35309556);
|
||
a = md5_hh(a, b, c, d, x[i + 1], 4, -1530992060);
|
||
d = md5_hh(d, a, b, c, x[i + 4], 11, 1272893353);
|
||
c = md5_hh(c, d, a, b, x[i + 7], 16, -155497632);
|
||
b = md5_hh(b, c, d, a, x[i + 10], 23, -1094730640);
|
||
a = md5_hh(a, b, c, d, x[i + 13], 4, 681279174);
|
||
d = md5_hh(d, a, b, c, x[i + 0], 11, -358537222);
|
||
c = md5_hh(c, d, a, b, x[i + 3], 16, -722521979);
|
||
b = md5_hh(b, c, d, a, x[i + 6], 23, 76029189);
|
||
a = md5_hh(a, b, c, d, x[i + 9], 4, -640364487);
|
||
d = md5_hh(d, a, b, c, x[i + 12], 11, -421815835);
|
||
c = md5_hh(c, d, a, b, x[i + 15], 16, 530742520);
|
||
b = md5_hh(b, c, d, a, x[i + 2], 23, -995338651);
|
||
a = md5_ii(a, b, c, d, x[i + 0], 6, -198630844);
|
||
d = md5_ii(d, a, b, c, x[i + 7], 10, 1126891415);
|
||
c = md5_ii(c, d, a, b, x[i + 14], 15, -1416354905);
|
||
b = md5_ii(b, c, d, a, x[i + 5], 21, -57434055);
|
||
a = md5_ii(a, b, c, d, x[i + 12], 6, 1700485571);
|
||
d = md5_ii(d, a, b, c, x[i + 3], 10, -1894986606);
|
||
c = md5_ii(c, d, a, b, x[i + 10], 15, -1051523);
|
||
b = md5_ii(b, c, d, a, x[i + 1], 21, -2054922799);
|
||
a = md5_ii(a, b, c, d, x[i + 8], 6, 1873313359);
|
||
d = md5_ii(d, a, b, c, x[i + 15], 10, -30611744);
|
||
c = md5_ii(c, d, a, b, x[i + 6], 15, -1560198380);
|
||
b = md5_ii(b, c, d, a, x[i + 13], 21, 1309151649);
|
||
a = md5_ii(a, b, c, d, x[i + 4], 6, -145523070);
|
||
d = md5_ii(d, a, b, c, x[i + 11], 10, -1120210379);
|
||
c = md5_ii(c, d, a, b, x[i + 2], 15, 718787259);
|
||
b = md5_ii(b, c, d, a, x[i + 9], 21, -343485551);
|
||
a = safe_add(a, olda);
|
||
b = safe_add(b, oldb);
|
||
c = safe_add(c, oldc);
|
||
d = safe_add(d, oldd);
|
||
}
|
||
return Array(a, b, c, d);
|
||
}
|
||
|
||
function md5_cmn(q, a, b, x, s, t) {
|
||
return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b);
|
||
}
|
||
|
||
function md5_ff(a, b, c, d, x, s, t) {
|
||
return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
|
||
}
|
||
|
||
function md5_gg(a, b, c, d, x, s, t) {
|
||
return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
|
||
}
|
||
|
||
function md5_hh(a, b, c, d, x, s, t) {
|
||
return md5_cmn(b ^ c ^ d, a, b, x, s, t);
|
||
}
|
||
|
||
function md5_ii(a, b, c, d, x, s, t) {
|
||
return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
|
||
}
|
||
|
||
function safe_add(x, y) {
|
||
var lsw = (x & 0xFFFF) + (y & 0xFFFF);
|
||
var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
|
||
return (msw << 16) | (lsw & 0xFFFF);
|
||
}
|
||
|
||
function bit_rol(num, cnt) {
|
||
return (num << cnt) | (num >>> (32 - cnt));
|
||
}
|
||
|
||
function str2binl(str) {
|
||
var bin = Array();
|
||
var mask = (1 << chrsz) - 1;
|
||
for (var i = 0; i < str.length * chrsz; i += chrsz)
|
||
bin[i >> 5] |= (str.charCodeAt(i / chrsz) & mask) << (i % 32);
|
||
return bin;
|
||
}
|
||
|
||
function binl2hex(binarray) {
|
||
var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
|
||
var str = "";
|
||
for (var i = 0; i < binarray.length * 4; i++) {
|
||
str += hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8 + 4)) & 0xF) +
|
||
hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8)) & 0xF);
|
||
}
|
||
return str;
|
||
}
|
||
|
||
return binl2hex(core_md5(str2binl(text), text.length * chrsz));
|
||
}
|
||
</script> |