submit: head

css/okadmin.css

@@ -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;
+    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,8 +728,6 @@
     letter-spacing: 5px;
 }
 
-
-
 .lock-screen .quit {
     position: absolute;
     z-index: 19;
@@ -734,6 +735,7 @@
     bottom: 10%;
     transition: all .5s;
 }
+
 .lock-screen .quit .layui-icon {
     font-size: 64px;
     cursor: pointer;
@@ -744,6 +746,7 @@
     -webkit-background-clip: text;*/
     font-weight: bolder;
 }
+
 .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,10 +778,51 @@
     letter-spacing: 5px;
     font-family: '微软雅黑', '新宋体', '宋体', arial, tahoma, sans-serif;
 }
+
 .lock-screen .lock-form {
     position: relative;
-    bottom: 50px;
+    bottom: 64px;
 }
+.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;
@@ -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==================*/
 
 /*

index.html

@@ -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"

lib/loading/okLoading.js

@@ -4,17 +4,18 @@ var ok_load_options = {
 };
 
 !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>`;
+      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) {