submit: 初步完成锁屏

css/okadmin.css

@@ -658,10 +658,10 @@
     overflow-y: auto;
 }
 
-/**锁屏样式*/
+/**==================锁屏样式 Start==================*/
 .lock-screen {
     position: fixed;
-    z-index: 999999999;
+    z-index: 99999999;
     top: 0;
     left: 0;
     right: 0;
@@ -718,15 +718,40 @@
     letter-spacing: 5px;
 }
 
+
+
+.lock-screen .quit{
+    position: absolute;
+    z-index: 19;
+    right: 10%;
+    bottom: 10%;
+    transition: all .5s;
+}
+.lock-screen .quit .layui-icon{
+    font-size: 64px;
+    cursor: pointer;
+    height: 64px;
+    line-height: 64px;
+    color: transparent;
+    background: linear-gradient(to bottom right, red, yellow);
+    -webkit-background-clip: text;
+    font-weight: bolder;
+    text-shadow: 0 0 10px rgba(255, 63, 68, 0.5);
+}
+.lock-screen .quit:hover{
+    transform: scale(1.3);
+    -webkit-transform: scale(1.3);
+}
+
 .lock-screen .unlock {
     height: 100%;
     width: 100%;
-    position: relative;
+    position: absolute;
-    z-index: 19;
+    z-index: 9;
     color: #f4f4f4;
     background: transparent;
+    box-sizing: border-box;
 }
-
 .lock-screen .unlock tr,
 .lock-screen .unlock td {
     text-align: center;
@@ -743,6 +768,23 @@
     letter-spacing: 5px;
     font-family: '微软雅黑', '新宋体', '宋体', arial, tahoma, sans-serif;
 }
+.lock-screen .lock-form{
+    position: relative;
+    bottom: 50px;
+}
+.lock-screen .lock-form .layui-form-item{
+    width: 80%;
+    max-width: 450px;
+    margin: 0 auto;
+}
+
+/**雪花*/
+.lock-screen .snowflake{
+    position: absolute;
+    z-index: 8;
+    height: 100%;
+    width: 100%;
+}
 
 .lock-screen .lock-content p[lock='lock'] {
     display: inline-block;
@@ -799,6 +841,7 @@
         color: white;
     }
 }
+/**==================锁屏样式 End==================*/
 
 /*
 * 以下都是移动端的处理响应

index.html

@@ -168,16 +168,45 @@
       <img class="lock-gradual" src="./images/wallpaper/3fded2e777723f145a4773dfdb68a9e3.jpg" alt="" />
    </div>
    <div class="lock-content">
+      <!--雪花-->
+      <div class="snowflake">
+         <canvas id="snowflake"></canvas>
+      </div>
+      <!--雪花 END-->
       <div class="time">
          <div>
             <div class="hhmmss"></div>
             <div class="yyyymmdd"></div>
          </div>
       </div>
+      <div class="quit" id="lockQuit">
+         <i class="layui-icon layui-icon-logout" title="退出登录"></i>
+      </div>
       <table class="unlock">
          <tr>
             <td>
-               <div class="lock-text">最近头疼还没来得及写完</div>
+               <div class="layui-form lock-form">
+                  <div class="layui-form-item">
+                     <div class="layui-col-xs8 layui-col-sm8 layui-col-md8">
+                        <input type="password"
+                               required
+                               lay-verify="required"
+                               id="lockPassword"
+                               name="lock_password"
+                               style="border-radius: 0;border:0;height: 44px"
+                               placeholder="默认密码123456"
+                               autocomplete="off"
+                               class="layui-input" />
+                     </div>
+                     <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
+                        <button style="width: 100%;box-sizing:border-box;border-radius: 0;"
+                                type="button"
+                                lay-submit
+                                lay-filter="lockSubmit"
+                                class="layui-btn layui-btn-lg layui-btn-normal">确定</button>
+                     </div>
+                  </div>
+               </div>
             </td>
          </tr>
       </table>
@@ -185,6 +214,7 @@
 </div>
 <!--js逻辑-->
 <script src="lib/layui/layui.js"></script>
+<script src="js/snowflake.js?snowflake=雪花"></script>
 <script src="js/okadmin.js"></script>
 </body>
 </html>

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", "laydate"], function () {
+layui.use(["element", "form", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "okHoliday", "laydate"], function () {
    var okUtils = layui.okUtils;
    var $ = layui.jquery;
+   var form = layui.form;
    var laydate = layui.laydate;
    var layer = layui.layer;
    var okLayer = layui.okLayer;
@@ -345,33 +346,30 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
     * 锁定账户
     */
    var lock_inter = "";
+   lockShowInit(okUtils);
    $("#lock").click(function () {
       okLayer.confirm("确定要锁定账户吗？", function (index) {
          layer.close(index);
-         $(".lock-screen").show();
+         okUtils.local("isLock", '1');//设置锁屏缓存防止刷新失效
-         lockInit(okUtils);
+         lockShowInit(okUtils);//锁屏
-         /*layer.prompt({
-            btn: ['确定'],
-            title: '输入密码解锁(123456)',
-            closeBtn: 0,
-            formType: 1
-         }, function (value, index, elem) {
-            if (value == "123456") {
-               layer.close(index);
-               $(".yy").hide();
-            } else {
-               layer.msg('密码错误', {anim: 6, time: 1000});
-            }
-         });*/
       });
    });
 
+   /**锁屏方法*/
+   function lockShowInit(okUtils) {
+      let localLock = okUtils.local("isLock");
+      $("#lockPassword").val("");
+      if(!localLock){
+         return;
+      }
+
+      $(".lock-screen").show();
+      Snowflake("snowflake"); // 雪花
 
-   /**锁屏内容*/
-   function lockInit(okUtils) {
       var lock_bgs = $(".lock-screen .lock-bg img");
       $(".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 () {
          i++;
@@ -383,6 +381,35 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
          }
          $(".lock-content .time .hhmmss").html(okUtils.dateFormat("", "hh <p lock='lock'>:</p> mm"));
       }, 1000);
+
+      //提交密码
+      form.on('submit(lockSubmit)', function (data) {
+         console.log(data);
+         if (data.field.lock_password !== "123456") {
+            layer.msg("密码不正确", {
+               icon: 5,
+               zIndex: 999999991
+            });
+         } else {
+            layer.msg("密码输入正确", {
+               icon: 6,
+               zIndex: 999999992,
+               end: function () {
+                  okUtils.local("isLock", null);   //清除锁屏的缓存
+                  $("#lockPassword").val("");   //清除输入框的密码
+                  $(".lock-screen").hide();
+                  clearInterval(lock_inter);
+               }
+            });
+         }
+         return false;
+      });
+
+      //退出登录
+      $("#lockQuit").click(function () {
+         // window.location.href = "./pages/login.html";
+         window.location.replace("./pages/login.html");  //替换当前页面
+      });
    }
 
    console.log("        __                         .___      .__        \n" +

js/snowflake.js

@@ -0,0 +1,179 @@
+/**
+ * 雪花
+ * canvas版 无需依赖jquery
+ */
+
+
+var configSnowflake = {};
+
+/**
+ * 雪球
+ * eg: Snowflake(canvasID);
+ * @param {[type]} elementName [description]
+ */
+var Snowflake = function (elementName) {
+
+   configInit();
+   var snowElement = document.getElementById(elementName);
+   var canvasContext = snowElement.getContext("2d");
+   var width = configSnowflake.clientWidth;
+   var height = configSnowflake.clientHeight;
+
+   //canvas尺寸修正
+   snowElement.width = width;
+   snowElement.height = height;
+
+   //构建雪球的数量
+   var snowNumber = 50;
+
+   //构建雪球对象
+   var snowArrObjs = initSnow(snowNumber, width, height);
+   var snowArrNum = snowArrObjs.length;
+   /**
+    * 绘制页面
+    * @return {[type]} [description]
+    */
+   var render = function () {
+      //清理之前的矩形数据
+      canvasContext.clearRect(0, 0, width, height);
+      for (var i = 0; i < snowArrNum; ++i) {
+         snowArrObjs[i].render(canvasContext);
+      }
+   };
+
+   /**
+    * 更新雪花
+    * @return {[type]} [description]
+    */
+   var update = function () {
+      for (var i = 0; i < snowArrNum; ++i) {
+         snowArrObjs[i].update();
+      }
+   };
+
+   /**
+    * 绘制与更新
+    * @return {[type]} [description]
+    */
+   var renderAndUpdate = function () {
+      render();
+      update();
+      requestAnimationFrame(renderAndUpdate);
+   };
+
+   renderAndUpdate();
+};
+
+function initSnow(snowNumber, width, height) {
+   //雪球参数
+   var options = {
+      //雪球的半球距离
+      minRadius: 3,
+      maxRadius: 10,
+      // 运动的范围区域
+      maxX: width,
+      maxY: height,
+      //速率
+      minSpeedY: 0.05,
+      maxSpeedY: 2,
+      speedX: 0.05,
+      //滤镜
+      minAlpha: 0.5,
+      maxAlpha: 1.0,
+      minMoveX: 4,
+      maxMoveX: 18
+   };
+   var snowArr = [];
+   for (var i = 0; i < snowNumber; ++i) {
+      snowArr[i] = new Snow(options);
+   }
+   return snowArr;
+}
+
+function configInit() {
+   //rem设置
+   (function(doc, win) {
+      var docEl = doc.documentElement,
+         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+         recalc = function() {
+            var clientWidth = docEl.clientWidth;
+            var clientHeight = docEl.clientHeight;
+            if (!clientWidth) return;
+            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
+            //宽与高度
+            document.body.style.height = clientWidth * (900 / 1440) + "px";
+            configSnowflake.clientWidth = clientWidth;
+            configSnowflake.clientHeight =  clientHeight;//clientWidth * (900 / 1440);
+         };
+      recalc();
+      win.addEventListener(resizeEvt, recalc, false);
+      doc.addEventListener('DOMContentLoaded', recalc, false);
+   })(document, window);
+}
+
+/**
+ * 雪球类
+ */
+function Snow(snowSettings) {
+   this.snowSettings = snowSettings;
+   this.radius = randomInRange(snowSettings.minRadius, snowSettings.maxRadius);
+   //初始的x位置
+   this.initialX = Math.random() * snowSettings.maxX;
+   this.y = -(Math.random() * 500);
+   //运行的速率
+   this.speedY = randomInRange(snowSettings.minSpeedY, snowSettings.maxSpeedY);
+   this.speedX = snowSettings.speedX;
+   //滤镜
+   this.alpha = randomInRange(snowSettings.minAlpha, snowSettings.maxAlpha);
+   //角度.默认是360
+   this.angle = Math.random(Math.PI * 2);
+   //运行的距离
+   this.x = this.initialX + Math.sin(this.angle);
+   //x移动距离
+   this.moveX = randomInRange(snowSettings.minMoveX, snowSettings.maxMoveX);
+}
+
+/**
+ * 绘制雪球
+ * @param  {[type]} canvasContext [description]
+ * @return {[type]}               [description]
+ */
+
+Snow.prototype.render = function (canvasContext) {
+   //清除路径
+   //开始一个画布中的一条新路径（或者子路径的一个集合）
+   canvasContext.beginPath();
+   //用来填充路径的当前的颜色，白色的雪球
+   canvasContext.fillStyle = "rgba(255, 255, 255, " + this.alpha + ")";
+   //一个中心点和半径，为一个画布的当前子路径添加一条弧线
+   //坐标，圆，沿着圆指定弧的开始点和结束点的一个角度
+   //弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历
+   canvasContext.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+   //关闭子路径
+   canvasContext.closePath();
+   //fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径
+   canvasContext.fill();
+};
+
+Snow.prototype.update = function () {
+   this.y += this.speedY;
+   if (this.y > this.snowSettings.maxY) {
+      this.y -= this.snowSettings.maxY;
+   }
+   this.angle += this.speedX;
+   if (this.angle > Math.PI * 2) {
+      this.angle -= Math.PI * 2;
+   }
+   //?
+};
+
+/**
+ * 随机处理
+ * @param  {[type]} min [description]
+ * @param  {[type]} max [description]
+ * @return {[type]}     [description]
+ */
+function randomInRange(min, max) {
+   var random = Math.random() * (max - min) + min;
+   return random;
+}