root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

impr:导航展开收缩icon

v1.0
bobi 2020-04-06 17:50:36 +08:00
parent 5db09bd503
commit 5524a9cdf4
4 changed files with 81 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
css/okadmin.css
View File

@ -1,8 +1,17 @@
@import "../lib/layui/css/layui.css";
@import "../font/iconfont.css";
@import "../lib/animate/animate.css";
/*所有页面的CSS代码都写在这里*/
/*全局样式*/
html,body{width: 100%;height: 100%;}
/*全站黑白色*/
/*html{webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);filter:gray}*/
/* 公共样式 */
.tal{text-align:left;}
.tac{text-align:center;}
.tar{text-align:right;}
/*登陆页面*/
.login-body{background:url(../imgs/bg.png) no-repeat center center fixed;background-size:cover}
.login-body .login-box{width:300px;height:300px;border:1px solid #1a312c;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-150px;border-radius:5px}
@ -26,7 +35,16 @@ html,body{width: 100%;height: 100%;}
.menu-switch{width:30px;height:30px;position:relative;left:200px;top:16px;color:#fff;background-color:#1AA094;text-align:center;line-height:30px;cursor:pointer}
.weather{margin: 15px 0 0 20px;}
.textMarquee{float:left;width:450px;margin-top: 20px;}
.layui-nav-tree .layui-nav-child a{padding-left:36px}
/*nav导航菜单展开收缩图标 start*/
.layui-nav.arrow1 .layui-nav-more{font-family:layui-icon !important;font-size:12px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;width:auto;height:auto;line-height:normal;border:none;top:15px;margin:0;padding:0;display:inline-block;transition:all .1s;-webkit-transition:all .1s}
.layui-nav.arrow1 .layui-nav-more:before{content:"\e654"}
.layui-nav.arrow1 .layui-nav-itemed > a > .layui-nav-more{transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);width:12px;text-align:center}
.layui-nav.arrow1 .layui-nav-itemed > a > .layui-nav-more:before{content:'';width:8px;height:2px;background-color:rgba(255,255,255,.7);display:inline-block;vertical-align:middle}
.layui-nav.arrow2 .layui-nav-more{font-family:layui-icon!important;font-size:12px;font-weight:600;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;line-height:normal;border:0;margin:-7px 0 0 0;padding:0;width:12px;height:12px;display:inline-block;-webkit-transition:all .3s ease;transition:all .3s ease}
.layui-nav.arrow2 .layui-nav-more:before{content:"\e61a"}
.layui-nav.arrow2 .layui-nav-itemed>a>.layui-nav-more{-ms-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
/*nav导航菜单展开收缩图标 end*/
.layui-nav-tree .layui-nav-child a{padding-left:36px;}
.content-body{position:absolute;top:60px;right:0;bottom:42px;left:200px;z-index:1;overflow:hidden;}
.content-body .layui-tab{margin:0;}
.content-body .layui-tab-content{position:absolute;top:40px;bottom:0;width:100%;padding:0;z-index:-999;overflow:hidden}
@ -85,11 +103,6 @@ okToolbar span{float:right;line-height:30px}
::-webkit-scrollbar-corner:vertical{background-color:#535353}
::-webkit-scrollbar-resizer:vertical{background-color:#FF6E00}
/* 公共样式 */
.tal{text-align:left;}
.tac{text-align:center;}
.tar{text-align:right;}
/*三级菜单、四级菜单、五级菜单、六级菜单、七级菜单、八级菜单、九级菜单、十级菜单*/
.layui-nav-tree .layui-nav-item .layui-nav-child .layui-nav-child a{padding-left: 54px;}
.layui-nav-tree .layui-nav-item .layui-nav-child .layui-nav-child .layui-nav-child a{padding-left: 74px;}

26
data/menu.json
View File

@ -98,52 +98,52 @@
"spread": false,
"children": [
{
"title": "登陆",
"title": "登陆页面",
"path": "pages/other/login.html",
"font": "layui-icon",
"icon": "",
"icon": "",
"spread": false
},
{
"title": "注册",
"title": "注册页面",
"path": "pages/other/reg.html",
"font": "layui-icon",
"icon": "",
"icon": "",
"spread": false
},
{
"title": "忘记密码",
"path": "pages/other/forget.html",
"font": "layui-icon",
"icon": "",
"icon": "",
"spread": false
},
{
"title": "403页面",
"path": "pages/other/403.html",
"font": "iconfont",
"icon": "",
"font": "layui-icon",
"icon": "",
"spread": false
},
{
"title": "404页面",
"path": "pages/other/404.html",
"font": "iconfont",
"icon": "",
"font": "layui-icon",
"icon": "",
"spread": false
},
{
"title": "500页面",
"path": "pages/other/500.html",
"font": "iconfont",
"icon": "",
"font": "layui-icon",
"icon": "",
"spread": false
},
{
"title": "捐赠列表",
"path": "pages/other/donate.html",
"font": "iconfont",
"icon": "",
"font": "layui-icon",
"icon": "",
"spread": false
}
]

3
index.html
View File

@ -46,7 +46,8 @@
<!--左侧导航区域-->
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="navFilter">
<!--可自定义选择展开收缩图标: 默认|arrow1|arrow2-->
<ul class="layui-nav layui-nav-tree arrow2" lay-shrink="all" lay-filter="navFilter">
</ul>
</div>
</div>

62
js/okadmin.js
View File

@ -1,16 +1,35 @@
layui.use(["element", "layer", "okTab", "okMenu", "okUtils", "okLayer"], function () {
var element = layui.element;
var layer = layui.layer;
var okTab = layui.okTab;
var okMenu = layui.okMenu;
var $ = layui.jquery;
var okUtils = layui.okUtils;
var okLayer = layui.okLayer;
let element = layui.element;
let layer = layui.layer;
let okTab = layui.okTab;
let okMenu = layui.okMenu;
let $ = layui.jquery;
let okUtils = layui.okUtils;
let okLayer = layui.okLayer;
let config = {
/**
* 刷新页面后是否记住上次打开tab菜单
*/
isRememberTab: true,
/**
* 是否显示底部版权信息
*/
isShowCopyright: true,
/**
* 是否显示公告
*/
isShowNotice: true,
/**
* 是否显示天气信息
*/
isShowWeather: true
};
/**
* localhost运行提示
*/
var href = location.href;
let href = location.href;
if (href.substring(0, 4) != "http") {
layer.msg("请先部署到localhost环境下再访问！", {icon: 7, time: 3000, anim: 1});
}
@ -40,21 +59,25 @@ layui.use(["element", "layer", "okTab", "okMenu", "okUtils", "okLayer"], functio
* 监听导航菜单的点击
*/
element.on("nav(navFilter)", function (elem) {
var path = elem.context.attributes.path;
let path = elem.context.attributes.path;
if (path && path.textContent != "") {
// var title = elem.context.innerHTML;
var title = elem.context.innerText;
let title = elem.context.innerText;
title = title.substring(title.indexOf(" "), title.length);
var path = path.textContent;
okTab.add(title, path)
let pathValue = path.textContent;
okTab.add(title, pathValue)
}
});
/**
* 修改copyright结束时间
*/
var data = new Date();
var year = data.getFullYear();
// if (!config.isShowCopyright) {
// $(".layui-footer").remove();
// $(".content-body").css("bottom", "0px");
// }
let data = new Date();
let year = data.getFullYear();
$("#endYear").text(year);
/**
@ -99,7 +122,9 @@ layui.use(["element", "layer", "okTab", "okMenu", "okUtils", "okLayer"], functio
* 弹窗皮肤
*/
$("#alertSkin").click(function () {
okLayer.open("皮肤动画", "pages/system/alertSkin.html", "50%", "45%", function (layero) {}, function () {});
okLayer.open("皮肤动画", "pages/system/alertSkin.html", "50%", "45%", function (layero) {
}, function () {
});
});
/**
@ -109,7 +134,12 @@ layui.use(["element", "layer", "okTab", "okMenu", "okUtils", "okLayer"], functio
okLayer.confirm("确定要锁定账户吗？", function (index) {
layer.close(index);
$(".yy").show();
layer.prompt({btn: ['确定'], title: '输入密码解锁(123456)', closeBtn: 0, formType: 1}, function (value, index, elem) {
layer.prompt({
btn: ['确定'],
title: '输入密码解锁(123456)',
closeBtn: 0,
formType: 1
}, function (value, index, elem) {
if (value == "123456") {
layer.close(index);
$(".yy").hide();