diff --git a/css/okadmin.animate.css b/css/okadmin.animate.css
index 62965ba..788c424 100644
--- a/css/okadmin.animate.css
+++ b/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;
diff --git a/css/okadmin.css b/css/okadmin.css
index ecdda0c..ff0876c 100644
--- a/css/okadmin.css
+++ b/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;
+}
/*
* 以下都是移动端的处理响应
diff --git a/images/wallpaper/29bce2d5cf30fc96866dcb5e287661ea.jpg b/images/wallpaper/29bce2d5cf30fc96866dcb5e287661ea.jpg
new file mode 100644
index 0000000..8906f10
Binary files /dev/null and b/images/wallpaper/29bce2d5cf30fc96866dcb5e287661ea.jpg differ
diff --git a/images/wallpaper/3fded2e777723f145a4773dfdb68a9e3.jpg b/images/wallpaper/3fded2e777723f145a4773dfdb68a9e3.jpg
new file mode 100644
index 0000000..2e74f5b
Binary files /dev/null and b/images/wallpaper/3fded2e777723f145a4773dfdb68a9e3.jpg differ
diff --git a/images/wallpaper/9f28afe0e71b3ba8778e307bea2f006K.jpg b/images/wallpaper/9f28afe0e71b3ba8778e307bea2f006K.jpg
new file mode 100644
index 0000000..17e9c27
Binary files /dev/null and b/images/wallpaper/9f28afe0e71b3ba8778e307bea2f006K.jpg differ
diff --git a/images/wallpaper/9f28afe0e71b3ba8778e307bea2f006d.jpg b/images/wallpaper/9f28afe0e71b3ba8778e307bea2f006d.jpg
new file mode 100644
index 0000000..b0723ad
Binary files /dev/null and b/images/wallpaper/9f28afe0e71b3ba8778e307bea2f006d.jpg differ
diff --git a/images/wallpaper/b390e4c33b7d656f09dc7fd155759a4f.jpg b/images/wallpaper/b390e4c33b7d656f09dc7fd155759a4f.jpg
new file mode 100644
index 0000000..c843d4f
Binary files /dev/null and b/images/wallpaper/b390e4c33b7d656f09dc7fd155759a4f.jpg differ
diff --git a/images/wallpaper/b4b55f8ec6b2763a737a2d6e1c50b71e.jpg b/images/wallpaper/b4b55f8ec6b2763a737a2d6e1c50b71e.jpg
new file mode 100644
index 0000000..97238cc
Binary files /dev/null and b/images/wallpaper/b4b55f8ec6b2763a737a2d6e1c50b71e.jpg differ
diff --git a/images/wallpaper/b8df65c6452dcf8b0302b8bfce9e7ec9.jpg b/images/wallpaper/b8df65c6452dcf8b0302b8bfce9e7ec9.jpg
new file mode 100644
index 0000000..ad9aa47
Binary files /dev/null and b/images/wallpaper/b8df65c6452dcf8b0302b8bfce9e7ec9.jpg differ
diff --git a/images/wallpaper/e1739f3b0f386e719bd4b4503fd3cc3a.jpg b/images/wallpaper/e1739f3b0f386e719bd4b4503fd3cc3a.jpg
new file mode 100644
index 0000000..5e3061c
Binary files /dev/null and b/images/wallpaper/e1739f3b0f386e719bd4b4503fd3cc3a.jpg differ
diff --git a/index.html b/index.html
index b8107e6..183c3b1 100644
--- a/index.html
+++ b/index.html
@@ -155,7 +155,34 @@
-
+
+
+
diff --git a/js/okadmin.js b/js/okadmin.js
index b2d9056..13d55cf 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"], 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();
- layer.prompt({
+ $(".lock-screen").show();
+ 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" +
diff --git a/lib/layui/lay/okmodules/okUtils.js b/lib/layui/lay/okmodules/okUtils.js
index 17ba314..bcde01e 100644
--- a/lib/layui/lay/okmodules/okUtils.js
+++ b/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);
});
+ 
+ 
+ 
+ 
+ 
+ 
+