diff --git a/css/okadmin.css b/css/okadmin.css index a9031f3..3d35dd7 100644 --- a/css/okadmin.css +++ b/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; - z-index: 19; + position: absolute; + 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==================*/ /* * 以下都是移动端的处理响应 diff --git a/index.html b/index.html index 3e05a17..d29b702 100644 --- a/index.html +++ b/index.html @@ -168,16 +168,45 @@
+ +
+ +
+
+
+ +
-
最近头疼还没来得及写完
+
+
+
+ +
+
+ +
+
+
@@ -185,6 +214,7 @@
+ diff --git a/js/okadmin.js b/js/okadmin.js index bf87b58..a95821c 100644 --- a/js/okadmin.js +++ b/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(); - lockInit(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}); - } - });*/ + okUtils.local("isLock", '1');//设置锁屏缓存防止刷新失效 + lockShowInit(okUtils);//锁屏 }); }); - - /**锁屏内容*/ - function lockInit(okUtils) { + /**锁屏方法*/ + function lockShowInit(okUtils) { + let localLock = okUtils.local("isLock"); + $("#lockPassword").val(""); + if(!localLock){ + return; + } + + $(".lock-screen").show(); + Snowflake("snowflake"); // 雪花 + var lock_bgs = $(".lock-screen .lock-bg img"); $(".lock-content .time .hhmmss").html(okUtils.dateFormat("", "hh

:

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

:

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" + diff --git a/js/snowflake.js b/js/snowflake.js new file mode 100644 index 0000000..ec6f022 --- /dev/null +++ b/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; +} \ No newline at end of file