submit: system

css/okadmin.animate.css

@@ -3478,6 +3478,7 @@
     animation-name: slideOutLeft;
 }
 
+
 @-webkit-keyframes slideOutRight {
     from {
         -webkit-transform: translate3d(0, 0, 0);
@@ -3534,12 +3535,77 @@
         transform: translate3d(0, -100%, 0);
     }
 }
-
 .slideOutUp {
     -webkit-animation-name: slideOutUp;
     animation-name: slideOutUp;
 }
 
+
+/**从小到大旋转**/
+.scale {
+    animation-name: scale;
+    animation-duration: 1s;
+    animation-timing-function: linear;
+}
+@keyframes scale {
+    0% {
+        transform: translate3d(0, 0, 0) rotate(0deg) scale(0);
+    }
+    50% {
+        transform: translate3d(0, 0, 0) rotate(1440deg) scale(1.2);
+    }
+    100% {
+        transform: translate3d(0, 0, 0) rotate(2880deg) scale(1);
+    }
+}
+/**渐变*/
+.gradual{
+    animation-name: gradual;
+    animation-duration: 1.5s;
+    animation-timing-function: linear;
+}
+
+@keyframes gradual {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+/**文字颜色渐变*/
+.colorGradual{
+    color: transparent;
+    /*background: linear-gradient(to top right, green, greenyellow);
+    -webkit-background-clip: text;*/
+    animation-name: colorGradual;
+    animation-duration: 16s;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+}
+/*red, orange, yellow, green, greenyellow, blue, and violet;*/
+@keyframes colorGradual {
+    0% {
+        color: red;
+    }
+    20% {
+        color: orange;
+    }
+    40% {
+        color: yellow;
+    }
+    60% {
+        color: green;
+    }
+    80% {
+        color: blue;
+    }
+    100% {
+        color: violet;
+    }
+}
+
 .ok-anim {
     -webkit-animation-duration: 1s;
     animation-duration: 1s;
@@ -3547,11 +3613,64 @@
     animation-fill-mode: both;
 }
 
+/**无限循环播放*/
 .ok-anim.infinite {
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
 }
+/**动画应该轮流反向播放*/
+.ok-anim.alternate{
+    -webkit-animation-direction: alternate;
+    animation-direction: alternate;
+}
 
+
+
+.ok-anim.duration-05s{
+    -webkit-animation-duration: .5s;
+    animation-duration: .5s;
+}
+.ok-anim.duration-1s{
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+}
+.ok-anim.duration-1-5s{
+    -webkit-animation-duration: 1.5s;
+    animation-duration: 1.5s;
+}
+.ok-anim.duration-2s{
+    -webkit-animation-duration: 2s;
+    animation-duration: 2s;
+}
+.ok-anim.duration-2-5s{
+    -webkit-animation-duration: 2.5s;
+    animation-duration: 2.5s;
+}
+.ok-anim.duration-3s{
+    -webkit-animation-duration: 3s;
+    animation-duration: 3s;
+}
+.ok-anim.duration-3-5s{
+    -webkit-animation-duration: 3.5s;
+    animation-duration: 3.5s;
+}
+.ok-anim.duration-4s{
+    -webkit-animation-duration: 4s;
+    animation-duration: 4s;
+}
+.ok-anim.duration-4-5s{
+    -webkit-animation-duration: 4.5s;
+    animation-duration: 4.5s;
+}
+.ok-anim.duration-5s{
+    -webkit-animation-duration: 5s;
+    animation-duration: 5s;
+}
+
+.ok-anim.delay-05s {
+    -webkit-animation-delay: .5s;
+    animation-delay: .5s;
+}
 .ok-anim.delay-1s {
     -webkit-animation-delay: 1s;
     animation-delay: 1s;

css/okadmin.css

@@ -642,6 +642,81 @@
     overflow-y: auto;
 }
 
+/**锁屏样式*/
+.lock-screen{
+    position: fixed;
+    z-index: 999999999;
+    top:0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #0C0C0C;
+    /*display: none;*/
+}
+.lock-screen .lock-bg{
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    z-index: 8;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top:0;
+}
+.lock-screen .lock-bg img{
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    display: none;
+}
+.lock-screen .lock-bg img.active{
+    display: block;
+}
+.lock-screen .lock-content{
+    height: 100%;
+    width: 100%;
+    background: transparent;
+    position: relative;
+    z-index: 9;
+}
+.lock-screen .time{
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    color: #f4f4f4;
+    font-weight: 500;
+}
+.lock-screen .time .hhmmss{
+    font-size: 64px;
+    letter-spacing: 5px;
+}
+.lock-screen .time .yyyymmdd{
+    font-size: 32px;
+    letter-spacing: 5px;
+}
+.lock-screen .unlock{
+    height: 100%;
+    width: 100%;
+    position: relative;
+    z-index: 19;
+    color: #f4f4f4;
+    background: transparent;
+}
+.lock-screen .unlock tr,
+.lock-screen .unlock td{
+    text-align: center;
+    align-content: center;
+}
+.lock-screen .unlock .lock-text{
+    font-size: 42px;
+    font-weight: bolder;
+    color: transparent;
+    background: linear-gradient(to top right, green, greenyellow);
+    -webkit-background-clip: text;
+    text-shadow: 0 0 15px rgba(173,255,47,.8);
+    letter-spacing: 5px;
+    font-family: '微软雅黑', '新宋体', '宋体', arial, tahoma, sans-serif;
+}
 
 /*
 * 以下都是移动端的处理响应

index.html

@@ -155,7 +155,34 @@
       <button class="layui-btn layui-btn-danger layui-btn-xs communication">QQ群交流</button>
    </div>
 </div>
-<div class="yy"></div>
+
+<!-- 锁屏 -->
+<div class="lock-screen">
+   <div class="lock-bg">
+      <img class="active gradual" src="./images/wallpaper/9f28afe0e71b3ba8778e307bea2f006K.jpg" alt="" />
+      <img class="gradual" src="./images/wallpaper/9f28afe0e71b3ba8778e307bea2f006d.jpg" alt="" />
+      <img class="gradual" src="./images/wallpaper/29bce2d5cf30fc96866dcb5e287661ea.jpg" alt="" />
+      <img class="gradual" src="./images/wallpaper/b4b55f8ec6b2763a737a2d6e1c50b71e.jpg" alt="" />
+      <img class="gradual" src="./images/wallpaper/b8df65c6452dcf8b0302b8bfce9e7ec9.jpg" alt="" />
+      <img class="gradual" src="./images/wallpaper/b390e4c33b7d656f09dc7fd155759a4f.jpg" alt="" />
+      <img class="duration-1s ok-anim heartBeat" src="./images/wallpaper/e1739f3b0f386e719bd4b4503fd3cc3a.jpg" alt="" />
+   </div>
+   <div class="lock-content">
+      <div class="time">
+         <div>
+            <div class="hhmmss"></div>
+            <div class="yyyymmdd"></div>
+         </div>
+      </div>
+      <table class="unlock">
+         <tr>
+            <td>
+               <div class="lock-text">最近头疼还没来得及写完</div>
+            </td>
+         </tr>
+      </table>
+   </div>
+</div>
 <!--js逻辑-->
 <script src="lib/layui/layui.js"></script>
 <script src="js/okadmin.js"></script>

js/okadmin.js

@@ -1,9 +1,10 @@
 /^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问');
 
 var objOkTab = "";
-layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "okHoliday"], function () {
+layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "okHoliday", "laydate"], function () {
    var okUtils = layui.okUtils;
    var $ = layui.jquery;
+   var laydate = layui.laydate;
    var layer = layui.layer;
    var okLayer = layui.okLayer;
    var okHoliday = layui.okHoliday;
@@ -342,11 +343,13 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
    /**
     * 锁定账户
     */
+   var lock_inter = "";
    $("#lock").click(function () {
       okLayer.confirm("确定要锁定账户吗？", function (index) {
          layer.close(index);
-         $(".yy").show();
+         $(".lock-screen").show();
-         layer.prompt({
+         lockInit(okUtils);
+         /*layer.prompt({
             btn: ['确定'],
             title: '输入密码解锁(123456)',
             closeBtn: 0,
@@ -358,9 +361,22 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
             } else {
                layer.msg('密码错误', {anim: 6, time: 1000});
             }
+         });*/
       });
    });
-   });
+   /**锁屏内容*/
+   function lockInit(okUtils){
+      var lock_bgs = $(".lock-screen .lock-bg img");
+      var fmt = okUtils.dateFormat("","yyyy 年 M 月 s 日");
+      var hhmmss = okUtils.dateFormat("","hh : mm");
+      $(".lock-content .time .hhmmss").html(hhmmss);
+      $(".lock-content .time .yyyymmdd").html(fmt);
+      lock_inter = setInterval(function () {
+         var random_num = Math.floor( Math.random()*lock_bgs.length);
+         lock_bgs.removeClass("active");
+         $(lock_bgs[random_num]).addClass("active");
+      },5000);
+   }
 
    console.log("        __                         .___      .__        \n" +
       "  ____ |  | __         _____     __| _/_____ |__| ____  \n" +

lib/layui/lay/okmodules/okUtils.js

@@ -1,4 +1,45 @@
 "use strict";
+var date_format = function (timestamp, format) {
+   format = format || 'yyyy年MM月dd';
+   timestamp = timestamp + "";
+   if (timestamp * 1 > 0 && timestamp.length == 10) {
+      timestamp = timestamp * 1000;
+   }
+
+   // 通过getDate()方法获取date类型的时间
+   var regYear = new RegExp("(y+)", "i");
+   var realDate = new Date(timestamp);
+
+   function timeFormat(num) {
+      return num < 10 ? '0' + num : num;
+   }
+
+   var date = [
+      ["M+", timeFormat(realDate.getMonth() + 1)],
+      ["d+", timeFormat(realDate.getDate())],
+      ["h+", timeFormat(realDate.getHours())],
+      ["m+", timeFormat(realDate.getMinutes())],
+      ["s+", timeFormat(realDate.getSeconds())],
+      ["q+", Math.floor((realDate.getMonth() + 3) / 3)],
+      ["S+", realDate.getMilliseconds()],
+   ];
+   var reg1 = regYear.exec(format);
+
+   if (reg1) {
+      format = format.replace(reg1[1], (realDate.getFullYear() + '').substring(4 - reg1[1].length));
+   }
+   for (var i = 0; i < date.length; i++) {
+      var k = date[i][0];
+      var v = date[i][1];
+      // getRegExp初始化一个正则表达式对象
+      var reg2 = new RegExp("(" + k + ")").exec(format);
+      if (reg2) {
+         format = format.replace(reg2[1], reg2[1].length == 1
+            ? v : ("00" + v).substring(("" + v).length));
+      }
+   }
+   return format;
+};
 layui.define(["layer"], function (exprots) {
    var $ = layui.jquery;
    var okUtils = {
@@ -162,6 +203,8 @@ layui.define(["layer"], function (exprots) {
        * @returns {void | string}
        */
       dateFormat: function (date, fmt) {
+         date = date || new Date();
+         fmt = fmt || "yyyy年M月s日";
          var o = {
             "M+": date.getMonth() + 1,
             "d+": date.getDate(),
@@ -203,7 +246,8 @@ layui.define(["layer"], function (exprots) {
                return false;
             }
          },
-      }
+      },
+
    };
    exprots("okUtils", okUtils);
 });