1 Star 0 Fork 67

nie/勾股Admin Layui

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
index.html 9.20 KB
一键复制 编辑 原始数据 按行查看 历史
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>勾股Admin - 通用后台管理模板</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale,maximum-scale=1,user-scalable=0">
<link rel="stylesheet" href="/assets/gougu/css/gougu.css">
<link rel="stylesheet" href="/assets/gougu/css/layout.css">
<script>
/^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问');
</script>
</head>
<body class="layui-layout-body">
<div id="GouguApp">
<div class="layui-layout gg-layout">
<div class="layui-header">
<!-- 头部区域 -->
<div class="layui-layout-left">
<span class="gg-head-item">
<a href="javascript:;" gg-event="shrink" title="侧边伸缩">
<i class="layui-icon layui-icon-shrink-right"></i>
</a>
</span>
<span class="gg-head-item">
<a href="https://www.gougucms.com/" target="_blank" title="前台首页">
<i class="layui-icon layui-icon-website"></i>
</a>
</span>
</div>
<div class="layui-layout-right">
<span class="gg-head-item gg-head-refresh">
<a href="javascript:;" class="refreshThis" gg-event="refresh" title="刷新">
<i class="layui-icon layui-icon-refresh"></i>
</a>
</span>
<span class="gg-head-item gg-head-screen">
<a href="javascript:;" gg-event="screen" data-screen="full">
<i class="fullScreen layui-icon layui-icon-screen-full"></i>
</a>
</span>
<span class="gg-head-item gg-head-set">
<a href="javascript:;" id="theme">
<i class="layui-icon layui-icon-set"></i>
</a>
</span>
<span class="gg-head-item gg-head-message">
<a data-text="消息中心" data-url="view/app/message/index.html" gg-event="message" title="消息中心">
<i class="layui-icon layui-icon-notice"></i>
<!-- 如果有新消息,则显示 -->
<div class="gg-message-num"><span>99</span></div>
</a>
</span>
<span class="gg-head-item gg-head-avatar">
<ul class="layui-nav">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="https://dev.gougucms.com/static/home/images/icon.png">
<cite>勾股挨踢</cite>
</a>
<dl class="layui-nav-child" style="text-align: center;">
<dd><a data-url="view/user/info.html" data-id="0101" data-title="基本资料" class="side-menu-item">基本资料</a></dd>
<dd><a data-url="view/user/password.html" data-id="0102" data-title="修改密码" class="side-menu-item">修改密码</a></dd>
<hr>
<dd gg-event="logout"><a>退出</a></dd>
</dl>
</li>
</ul>
</span>
</div>
</div>
<!-- 侧边菜单 -->
<div class="layui-side layui-side-menu layui-side-black">
<div class="layui-side-scroll">
<div class="layui-logo" gg-event="closeAllTabs">
<img src="/assets/gougu/images/gouguadmin.png" style="height: 40px;">
</div>
<ul id="menuList" class="layui-nav layui-nav-tree layui-inline" lay-shrink="all"></ul>
</div>
</div>
<!-- 页面标签 -->
<div id="pageTabs" class="page-tabs">
<div class="layui-icon gg-tabs-control layui-icon-prev" gg-event="tabRollLeft"></div>
<div class="layui-icon gg-tabs-control layui-icon-next" gg-event="tabRollRight"></div>
<div class="layui-icon gg-tabs-control layui-icon-down">
<ul class="layui-nav gg-tabs-select">
<li class="layui-nav-item">
<a href="javascript:;"></a>
<dl class="layui-nav-child layui-anim-fadein">
<dd gg-event="closeThisTabs"><a href="javascript:;">关闭当前</a></dd>
<dd gg-event="closeOtherTabs"><a href="javascript:;">关闭其它</a></dd>
<dd gg-event="closeAllTabs"><a href="javascript:;">关闭全部</a></dd>
</dl>
</li>
</ul>
</div>
<div class="layui-tab gg-admin-tab" lay-unauto lay-allowClose="true" lay-filter="gg-admin-tab">
<ul class="layui-tab-title" id="pageTabUl">
<li lay-id="0" lay-attr="view/home/index.html" class="layui-this"><i class="layui-icon layui-icon-home"></i></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="layui-body" id="GouguAppBody">
<div class="gg-tab-page layui-show">
<iframe id="0" data-frameid="0" name="myiframe" src="view/home/index.html" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe>
</div>
</div>
<!-- 辅助元素,用于移动设备下遮罩 -->
<div class="gg-body-shade" gg-event="shade"></div>
</div>
</div>
<script>
var buildMenu = function (data) {
var menu = '';
data.forEach(function (item, index) {
var isopen = index==0?'layui-nav-itemed':''
if (item.type == 0) {
if (item.children) {
menu += `<li class="menu-li layui-nav-item ${isopen}">
<a href="javascript:;" lay-tips="${item.title}" lay-direction="2">
<i class="bi ${item.icon}"></i>
<cite>${item.title}</cite>
</a>
<dl class="layui-nav-child">`;
menu += buildMenu(item.children);
menu += `</dl></li>`;
} else {
menu += `<li class="menu-li layui-nav-item">
<a href="javascript:;" lay-tips="${item.title}" lay-direction="2">
<i class="bi ${item.icon}"></i>
<cite>${item.title}</cite>
</a>
</li>`;
}
}
else {
if (item.children) {
menu += `<dd><a href="javascript:;">${item.title}</a><dl class="layui-nav-child">`
menu += buildMenu(item.children);
menu += `</dl></dd>`;
} else {
if(item.target=='_blank'){
menu += `<dd><a target='_blank' class="side-menu-item" data-id="${item.id}" data-title="${item.title}" href="${item.href}">${item.title}</a></dd>`;
}
else{
menu += `<dd><a href="javascript:;" class="side-menu-item" data-id="${item.id}" data-title="${item.title}" data-href="${item.href}">${item.title}</a></dd>`;
}
}
}
})
return menu;
}
//需要加载的模块
const moduleInit = ['tool', 'admin'];
//初始化操作
function gouguInit() {
var tool = layui.tool, element = layui.element;
tool.get('json/menu.json', {}, function (data) {
$('#menuList').html(buildMenu(data));
element.init();
});
//切换主题
layui.dropdown.render({
elem: '#theme',
trigger: 'mousedown',
align: 'center',
data: [{
title: '经典黑',
theme: 'black'
},{
title: '简约白',
theme: 'white'
}],
click: function(data, othis){
if(data.theme == 'black'){
$('.layui-side-menu').removeClass('layui-side-white').addClass('layui-side-black');
}
else{
$('.layui-side-menu').removeClass('layui-side-black').addClass('layui-side-white');
}
}
});
}
</script>
<script src="/assets/layui/layui.js"></script>
<script src="/assets/gougu/gouguInit.js"></script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/jhnie/guoguadmin.git
git@gitee.com:jhnie/guoguadmin.git
jhnie
guoguadmin
勾股Admin Layui
master

搜索帮助