submit: 锁屏

2020-04-08 23:12:48 +08:00 · 2020-04-08 23:12:48 +08:00 · 65724ce6a8
parent 71fc2899b2
commit 65724ce6a8
3 changed files with 131 additions and 41 deletions
--- a/css/okadmin.css
+++ b/css/okadmin.css
@ -3,6 +3,7 @@
@import "./okadmin.theme.css";
@import "./okadmin.animate.css";
@import "../lib/layui/css/okmodules/jquery.contextMenu.css";
+
 /*html{
    webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
@ -13,11 +14,12 @@
    filter: gray;
 }*/
 /*边距*/
-.ptb20{
+.ptb20 {
    padding-top: 20px;
    padding-bottom: 20px;
 }
-.ptb10{
+
+.ptb10 {
    padding-top: 10px;
    padding-bottom: 10px;
 }
@ -391,6 +393,7 @@
 .ok-tab {
    background: #F5F7F9;
 }
+
 .okadmin-pagetabs {
    padding: 0 80px 0 40px;
    background-color: transparent;
@ -399,6 +402,7 @@
    height: 40px;
    z-index: 1;
 }
+
 .okadmin-tabs-control {
    height: 32px;
    line-height: 32px;
@ -416,20 +420,25 @@
    /*background: #FFF;*/
    z-index: 10;
 }
+
 .okadmin-tabs-control:hover {
    /*background: #F2F2F2;*/
    color: #009688;
 }
+
 .ok-tab .move-left {
    left: 0;
    border-left: none;
 }
+
 .ok-tab .move-right {
    right: 40px;
 }
+
 .layui-icon-down {
    right: 0;
 }
+
 .okadmin-tabs-select.layui-nav {
    position: absolute;
    left: 0;
@ -442,11 +451,12 @@

 /**tab的菜单**/
 .okadmin-nav a,
-.okadmin-tab a{
+.okadmin-tab a {
    cursor: pointer;
 }
-.ok-right-nav-menu{
-    top:0;
+
+.ok-right-nav-menu {
+    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
@ -455,11 +465,13 @@
    display: flex;
    align-items: center;
 }
-.okadmin-tab{
+
+.okadmin-tab {
    height: 32px;
    line-height: 32px;
    width: 32px;
 }
+
 .okadmin-tab .okadmin-tab-item .okadmin-link {
    display: block;
    width: 100%;
@ -495,9 +507,11 @@
    -webkit-transition: all .3s;
    font-size: 14px;
 }
+
 .okadmin-tab .okadmin-tab-item a:hover {
    background: #F5F7F9;
 }
+
 .okadmin-tab .okadmin-tab-item .okadmin-tab-child:visited {
    display: none !important;
 }
@ -514,13 +528,15 @@
    line-height: 40px;
    border: 0;
 }
-.ok-tab .layui-tab-title li{
+
+.ok-tab .layui-tab-title li {
    height: 32px;
    line-height: 32px;
    background: #fff;
    border-radius: 3px;
    margin-right: 15px;
 }
+
 .ok-tab .layui-tab-brief > .layui-tab-more li.layui-this,
 .ok-tab .layui-tab-brief > .layui-tab-title .layui-this,
 .ok-tab .layui-tab-title li.layui-this {
@ -632,10 +648,10 @@
 /**
 弹出系统设置
 */
-.layui-layer.ok-setting{
+.layui-layer.ok-setting {
    -webkit-animation-duration: .25s;
    animation-duration: .25s;
-    top: 50px!important;
+    top: 50px !important;
    bottom: 0;
    height: 100%;
    min-height: 500px;
@ -643,17 +659,18 @@
 }

 /**锁屏样式*/
-.lock-screen{
+.lock-screen {
    position: fixed;
    z-index: 999999999;
-    top:0;
+    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0C0C0C;
    display: none;
 }
-.lock-screen .lock-bg{
+
+.lock-screen .lock-bg {
    height: 100%;
    width: 100%;
    position: absolute;
@ -661,40 +678,47 @@
    left: 0;
    right: 0;
    bottom: 0;
-    top:0;
+    top: 0;
 }
-.lock-screen .lock-bg img{
+
+.lock-screen .lock-bg img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: none;
 }
-.lock-screen .lock-bg img.active{
+
+.lock-screen .lock-bg img.active {
    display: block;
 }
-.lock-screen .lock-content{
+
+.lock-screen .lock-content {
    height: 100%;
    width: 100%;
    background: transparent;
    position: relative;
    z-index: 9;
 }
-.lock-screen .time{
+
+.lock-screen .time {
    position: absolute;
    top: 10%;
    left: 10%;
    color: #f4f4f4;
    font-weight: 500;
 }
-.lock-screen .time .hhmmss{
+
+.lock-screen .time .hhmmss {
    font-size: 64px;
    letter-spacing: 5px;
 }
-.lock-screen .time .yyyymmdd{
+
+.lock-screen .time .yyyymmdd {
    font-size: 32px;
    letter-spacing: 5px;
 }
-.lock-screen .unlock{
+
+.lock-screen .unlock {
    height: 100%;
    width: 100%;
    position: relative;
@ -702,22 +726,80 @@
    color: #f4f4f4;
    background: transparent;
 }
+
 .lock-screen .unlock tr,
-.lock-screen .unlock td{
+.lock-screen .unlock td {
    text-align: center;
    align-content: center;
 }
-.lock-screen .unlock .lock-text{
+
+.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);
+    text-shadow: 0 0 15px rgba(173, 255, 47, .8);
    letter-spacing: 5px;
    font-family: '微软雅黑', '新宋体', '宋体', arial, tahoma, sans-serif;
 }

+.lock-screen .lock-content p[lock='lock'] {
+    display: inline-block;
+    animation-name: lock-cursor;
+    -webkit-animation-name: lock-cursor;
+
+    animation-duration: 2s;
+    -webkit-animation-duration: 2s;
+
+    animation-iteration-count: infinite; /**无限循环播放*/
+    -webkit-animation-iteration-count: infinite;
+
+}
+
+.lock-gradual {
+    animation-name: lock-gradual;
+    -webkit-animation-name: lock-gradual;
+
+    animation-duration: 4s;
+    -webkit-animation-duration: 4s;
+
+    animation-iteration-count: infinite; /**无限循环播放*/
+    -webkit-animation-iteration-count: infinite;
+
+    animation-timing-function: linear; /**播放的速度曲线 动画从头到尾的速度是相同的*/
+    -webkit-animation-timing-function: linear;
+
+    animation-direction: alternate; /**规定动画在下一周期逆向地播放*/
+    -webkit-animation-direction: alternate;
+}
+
+@keyframes lock-gradual {
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 1;
+    }
+}
+@keyframes lock-cursor {
+    0% {
+        color: white;
+    }
+    25% {
+        color: transparent;
+    }
+    50% {
+        color: white;
+    }
+    75% {
+        color: transparent;
+    }
+    100% {
+        color: white;
+    }
+}
+
 /*
 * 以下都是移动端的处理响应
 */
--- a/index.html
+++ b/index.html
@ -159,13 +159,13 @@
 <!-- 锁屏 -->
 <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="" />
+      <img class="active lock-gradual" src="./images/wallpaper/9f28afe0e71b3ba8778e307bea2f006K.jpg" alt="" />
+      <img class="lock-gradual" src="./images/wallpaper/9f28afe0e71b3ba8778e307bea2f006d.jpg" alt="" />
+      <img class="lock-gradual" src="./images/wallpaper/29bce2d5cf30fc96866dcb5e287661ea.jpg" alt="" />
+      <img class="lock-gradual" src="./images/wallpaper/b4b55f8ec6b2763a737a2d6e1c50b71e.jpg" alt="" />
+      <img class="lock-gradual" src="./images/wallpaper/b8df65c6452dcf8b0302b8bfce9e7ec9.jpg" alt="" />
+      <img class="lock-gradual" src="./images/wallpaper/b390e4c33b7d656f09dc7fd155759a4f.jpg" alt="" />
+      <img class="lock-gradual" src="./images/wallpaper/3fded2e777723f145a4773dfdb68a9e3.jpg" alt="" />
   </div>
   <div class="lock-content">
      <div class="time">
--- a/js/okadmin.js
+++ b/js/okadmin.js
@ -20,12 +20,13 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
   });
   var config = okUtils.local("okConfig") || okConfig || {};
   objOkTab = okTab;
-   okLoading && okLoading.close();/**关闭加载动画*/
+   okLoading && okLoading.close();
+   /**关闭加载动画*/

   $(".layui-layout-admin").removeClass("orange_theme blue_theme");
   $(".layui-layout-admin").addClass(config.theme);

-   if(config.menuArrow){ //tab箭头样式
+   if (config.menuArrow) { //tab箭头样式
      $("#navBar").addClass(config.menuArrow);
   }

@ -364,18 +365,25 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
         });*/
      });
   });
+   $(".lock-screen").show();
+   lockInit(okUtils);
+
   /**锁屏内容*/
-   function lockInit(okUtils){
+   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-content .time .hhmmss").html(okUtils.dateFormat("", "hh <p lock='lock'>:</p> mm"));
+      $(".lock-content .time .yyyymmdd").html(okUtils.dateFormat("", "yyyy 年 M 月 dd 日"));
+      var i = 0, k = 0;
      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);
+         i++;
+         if (i % 8 == 0) {
+            k = k + 1 >= lock_bgs.length ? 0 : k + 1;
+            i = 0;
+            lock_bgs.removeClass("active");
+            $(lock_bgs[k]).addClass("active");
+         }
+         $(".lock-content .time .hhmmss").html(okUtils.dateFormat("", "hh <p lock='lock'>:</p> mm"));
+      }, 1000);
   }

   console.log("        __                         .___      .__        \n" +