submit: head
zhizous
parent
c039d16d1f
commit
0376a25fbe
|
|
@ -707,14 +707,17 @@
|
|||
color: #f4f4f4;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.lock-screen .time .hhmmss,
|
||||
.lock-screen .time .yyyymmdd,
|
||||
.lock-screen .quit .layui-icon,
|
||||
.lock-screen .lock-content p[lock='lock']{
|
||||
color: transparent;
|
||||
.lock-screen .lock-content p[lock='lock'] {
|
||||
color: #4690FF;
|
||||
/*color: transparent;
|
||||
background: linear-gradient(to bottom right, #1E9FFF, #6086ff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-background-clip: text;*/
|
||||
}
|
||||
|
||||
.lock-screen .time .hhmmss {
|
||||
font-size: 64px;
|
||||
letter-spacing: 5px;
|
||||
|
|
@ -725,16 +728,15 @@
|
|||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.lock-screen .quit{
|
||||
.lock-screen .quit {
|
||||
position: absolute;
|
||||
z-index: 19;
|
||||
right: 10%;
|
||||
bottom: 10%;
|
||||
transition: all .5s;
|
||||
}
|
||||
.lock-screen .quit .layui-icon{
|
||||
|
||||
.lock-screen .quit .layui-icon {
|
||||
font-size: 64px;
|
||||
cursor: pointer;
|
||||
height: 64px;
|
||||
|
|
@ -744,7 +746,8 @@
|
|||
-webkit-background-clip: text;*/
|
||||
font-weight: bolder;
|
||||
}
|
||||
.lock-screen .quit:hover{
|
||||
|
||||
.lock-screen .quit:hover {
|
||||
transform: scale(1.3);
|
||||
-webkit-transform: scale(1.3);
|
||||
}
|
||||
|
|
@ -758,6 +761,7 @@
|
|||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.lock-screen .unlock tr,
|
||||
.lock-screen .unlock td {
|
||||
text-align: center;
|
||||
|
|
@ -774,18 +778,59 @@
|
|||
letter-spacing: 5px;
|
||||
font-family: '微软雅黑', '新宋体', '宋体', arial, tahoma, sans-serif;
|
||||
}
|
||||
.lock-screen .lock-form{
|
||||
|
||||
.lock-screen .lock-form {
|
||||
position: relative;
|
||||
bottom: 50px;
|
||||
bottom: 64px;
|
||||
}
|
||||
.lock-screen .lock-form .layui-form-item{
|
||||
.unlock{
|
||||
/*background: black!important;*/
|
||||
}
|
||||
.unlock .lock-head {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
padding: 2px;
|
||||
background: #FFFFFF;
|
||||
margin: 24px auto;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
border: 1px solid #FFFFFF;
|
||||
box-shadow: 0 0 10px #FFFFFF;
|
||||
overflow: hidden;
|
||||
animation-name: lock-head;
|
||||
-webkit-animation-name: lock-head;
|
||||
|
||||
animation-delay: 1s;
|
||||
-webkit-animation-delay: 1s;
|
||||
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-duration: 2s;
|
||||
|
||||
animation-timing-function: ease-in-out; /**播放的速度曲线 动画从头到尾的速度是相同的*/
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
|
||||
animation-iteration-count: infinite; /**无限循环播放*/
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
|
||||
animation-direction: alternate; /**规定动画在下一周期逆向地播放*/
|
||||
-webkit-animation-direction: alternate;
|
||||
}
|
||||
|
||||
.unlock .lock-head img {
|
||||
display: inline-block;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.lock-screen .lock-form .layui-form-item {
|
||||
width: 80%;
|
||||
max-width: 450px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/**雪花*/
|
||||
.lock-screen .snowflake{
|
||||
.lock-screen .snowflake {
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
height: 100%;
|
||||
|
|
@ -822,6 +867,16 @@
|
|||
-webkit-animation-direction: alternate;
|
||||
}
|
||||
|
||||
@keyframes lock-head {
|
||||
0% {
|
||||
box-shadow: 0 0 10px #FFFFFF;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 30px #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes lock-gradual {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
@ -830,31 +885,36 @@
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lock-cursor {
|
||||
0% {
|
||||
color: transparent;
|
||||
color: #4690FF;
|
||||
/*color: transparent;
|
||||
background: linear-gradient(to bottom right, #1E9FFF, #6086ff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-background-clip: text;*/
|
||||
}
|
||||
25% {
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
50% {
|
||||
color: transparent;
|
||||
color: #4690FF;
|
||||
/*color: transparent;
|
||||
background: linear-gradient(to bottom right, #1E9FFF, #6086ff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-background-clip: text;*/
|
||||
}
|
||||
75% {
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
100% {
|
||||
color: transparent;
|
||||
color: #4690FF;
|
||||
/*color: transparent;
|
||||
background: linear-gradient(to bottom right, #1E9FFF, #6086ff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-background-clip: text;*/
|
||||
}
|
||||
}
|
||||
|
||||
/**==================锁屏样式 End==================*/
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -186,6 +186,9 @@
|
|||
<tr>
|
||||
<td>
|
||||
<div class="layui-form lock-form">
|
||||
<div class="lock-head">
|
||||
<img src="./images/avatar.png" alt="avatar.png" />
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-col-xs8 layui-col-sm8 layui-col-md8">
|
||||
<input type="password"
|
||||
|
|
|
|||
|
|
@ -1,52 +1,53 @@
|
|||
var ok_load_options = {
|
||||
time: 1000,
|
||||
content: "ok-admin..."
|
||||
time: 1000,
|
||||
content: "ok-admin..."
|
||||
};
|
||||
|
||||
!function (content, options) {
|
||||
var config = localStorage.getItem("okConfig") || window.okConfig || {};
|
||||
var load_config = localStorage.getItem("okConfig") || window.okConfig || {};
|
||||
|
||||
if(typeof config == "string"){
|
||||
config = JSON.parse(config);
|
||||
if (typeof load_config == "string") {
|
||||
load_config = JSON.parse(load_config);
|
||||
}
|
||||
function templateFun(options) {
|
||||
return `<div class="ok-loading ${config.theme}">
|
||||
<div class="ball-loader">
|
||||
<span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function headerInit(content, options) {
|
||||
options = options || {};
|
||||
if (typeof content == "string") {
|
||||
options["content"] = content || ok_load_options.content;
|
||||
} else if (typeof content == "object") {
|
||||
options = content;
|
||||
}
|
||||
options.time = options.time || ok_load_options.time;
|
||||
options.content = options.content || ok_load_options.content;
|
||||
return options;
|
||||
}
|
||||
function templateFun(options) {
|
||||
return "<div class='ok-loading ${config.theme}'>" +
|
||||
"<div class='ball-loader'>" +
|
||||
"<span></span><span></span><span></span><span></span>" +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
}
|
||||
|
||||
ok_load_options = headerInit(content, options);
|
||||
var template = templateFun(ok_load_options);
|
||||
document.writeln(template);
|
||||
function headerInit(content, options) {
|
||||
options = options || {};
|
||||
if (typeof content == "string") {
|
||||
options["content"] = content || ok_load_options.content;
|
||||
} else if (typeof content == "object") {
|
||||
options = content;
|
||||
}
|
||||
options.time = options.time || ok_load_options.time;
|
||||
options.content = options.content || ok_load_options.content;
|
||||
return options;
|
||||
}
|
||||
|
||||
ok_load_options = headerInit(content, options);
|
||||
var template = templateFun(ok_load_options);
|
||||
document.writeln(template);
|
||||
}();
|
||||
|
||||
var okLoading = {
|
||||
close: function (time, dom) {
|
||||
time = time || ok_load_options.time;
|
||||
dom = dom || document.getElementsByClassName("ok-loading")[0];
|
||||
var setTime1 = setTimeout(function () {
|
||||
clearTimeout(setTime1);
|
||||
dom.classList.add("close");
|
||||
var setTime2 = setTimeout(function () {
|
||||
clearTimeout(setTime2);
|
||||
dom.parentNode.removeChild(dom);/**删除当前节点*/
|
||||
}, 800);
|
||||
}, time);
|
||||
}
|
||||
close: function (time, dom) {
|
||||
time = time || ok_load_options.time;
|
||||
dom = dom || document.getElementsByClassName("ok-loading")[0];
|
||||
var setTime1 = setTimeout(function () {
|
||||
clearTimeout(setTime1);
|
||||
dom.classList.add("close");
|
||||
var setTime2 = setTimeout(function () {
|
||||
clearTimeout(setTime2);
|
||||
dom.parentNode.removeChild(dom);/**删除当前节点*/
|
||||
}, 800);
|
||||
}, time);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue