From 65724ce6a8523db8e762915fb0080661a0ea0842 Mon Sep 17 00:00:00 2001 From: zhizous Date: Wed, 8 Apr 2020 23:12:48 +0800 Subject: [PATCH] =?UTF-8?q?submit:=20=E9=94=81=E5=B1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/okadmin.css | 128 +++++++++++++++++++++++++++++++++++++++--------- index.html | 14 +++--- js/okadmin.js | 30 +++++++----- 3 files changed, 131 insertions(+), 41 deletions(-) diff --git a/css/okadmin.css b/css/okadmin.css index fd49b68..a9031f3 100644 --- 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; + } +} + /* * 以下都是移动端的处理响应 */ diff --git a/index.html b/index.html index 183c3b1..3e05a17 100644 --- a/index.html +++ b/index.html @@ -159,13 +159,13 @@
- - - - - - - + + + + + + +
diff --git a/js/okadmin.js b/js/okadmin.js index 13d55cf..3a2f4e5 100644 --- 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

:

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

:

mm")); + }, 1000); } console.log(" __ .___ .__ \n" +