161 lines
7.8 KiB
HTML
161 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>ok-admin | 很赞的后台模版</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<meta name="keywords" content="ok-admin v1.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
|
||
<meta name="description" content="ok-admin v1.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
|
||
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
|
||
<link rel="stylesheet" href="css/okadmin.css">
|
||
</head>
|
||
<body class="layui-layout-body">
|
||
<div class="layui-layout layui-layout-admin">
|
||
<!--头部导航-->
|
||
<div class="layui-header">
|
||
<div class="layui-logo">ok-admin v1.0</div>
|
||
<div class="menu-switch">
|
||
<span class="layui-icon layui-icon-shrink-right"></span>
|
||
</div>
|
||
<ul class="layui-nav layui-layout-left">
|
||
<li class="layui-nav-item layui-this"><a href="">控制台<span class="layui-badge">9</span></a></li>
|
||
<li class="layui-nav-item"><a href="">产品</a></li>
|
||
<li class="layui-nav-item"><a href="">大数据</a></li>
|
||
<li class="layui-nav-item">
|
||
<a href="javascript:;">其它系统</a>
|
||
<dl class="layui-nav-child">
|
||
<dd><a href="">邮件管理</a></dd>
|
||
<dd><a href="">消息管理</a></dd>
|
||
<dd><a href="">授权管理</a></dd>
|
||
</dl>
|
||
</li>
|
||
</ul>
|
||
<ul class="layui-nav layui-layout-right">
|
||
<li class="layui-nav-item">
|
||
<a href="javascript:;">
|
||
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
|
||
bobi
|
||
</a>
|
||
<dl class="layui-nav-child">
|
||
<dd><a href="">个人中心<span class="layui-badge-dot"></span></a></dd>
|
||
<dd><a href="">基本资料</a></dd>
|
||
<dd><a href="">安全设置</a></dd>
|
||
</dl>
|
||
</li>
|
||
<li class="layui-nav-item"><a href="">退出</a></li>
|
||
</ul>
|
||
</div>
|
||
<!--左侧导航区域-->
|
||
<div class="layui-side layui-bg-black">
|
||
<div class="layui-side-scroll">
|
||
<ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="test">
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a class="" href="javascript:;">
|
||
<i class="layui-icon"></i> 常用页面
|
||
</a>
|
||
<dl class="layui-nav-child">
|
||
<dd><a href="javascript:;" onclick="tabTest()">用户列表</a></dd>
|
||
<dd><a href="javascript:;">文章列表</a></dd>
|
||
<dd><a href="javascript:;">404页面</a></dd>
|
||
<dd><a href="javascript:;">500页面</a></dd>
|
||
<dd><a href="javascript:;">403页面</a></dd>
|
||
</dl>
|
||
</li>
|
||
<li class="layui-nav-item">
|
||
<a href="javascript:;">
|
||
<i class="layui-icon"></i> 图表页面
|
||
</a>
|
||
<dl class="layui-nav-child">
|
||
<dd><a href="javascript:;">折线图</a></dd>
|
||
<dd><a href="javascript:;">柱状图</a></dd>
|
||
<dd><a href="javascript:;">雷达图</a></dd>
|
||
<dd><a href="javascript:;">热力图</a></dd>
|
||
<dd><a href="javascript:;">仪表图</a></dd>
|
||
<dd><a href="javascript:;">饼图</a></dd>
|
||
<dd><a href="javascript:;">地图</a></dd>
|
||
</dl>
|
||
</li>
|
||
<li class="layui-nav-item">
|
||
<a href="javascript:;">
|
||
<i class="layui-icon"></i> 图标字体
|
||
</a>
|
||
<dl class="layui-nav-child">
|
||
<dd><a href="javascript:;">Layui内置图标</a></dd>
|
||
<dd><a href="javascript:;">阿里图标库</a></dd>
|
||
</dl>
|
||
</li>
|
||
<li class="layui-nav-item">
|
||
<a href="javascript:;">
|
||
<i class="layui-icon"></i> 系统管理
|
||
</a>
|
||
<dl class="layui-nav-child">
|
||
<dd><a href="javascript:;">系统设置</a></dd>
|
||
<dd><a href="javascript:;">屏蔽词</a></dd>
|
||
<dd><a href="javascript:;">系统日志</a></dd>
|
||
</dl>
|
||
</li>
|
||
<!--<li class="layui-nav-item"><a href="">云市场</a></li>-->
|
||
<!--<li class="layui-nav-item"><a href="">发布商品</a></li>-->
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- 内容主体区域 -->
|
||
<div class="content-body">
|
||
<div class="layui-tab layui-tab-brief" lay-filter="demo" lay-allowClose="true">
|
||
<ul class="layui-tab-title">
|
||
<li class="layui-this"><i class="layui-icon"></i> 控制台</li>
|
||
</ul>
|
||
<div class="layui-tab-content">
|
||
<div class="layui-tab-item layui-show">
|
||
<iframe src='welcome.html' frameborder="0" scrolling="yes" width="100%" height="100%"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--底部信息-->
|
||
<div class="layui-footer">
|
||
Copyright ©2018 ok-admin v1.0 All Rights Reserved
|
||
</div>
|
||
</div>
|
||
|
||
<!--js逻辑-->
|
||
<script src="lib/layui/layui.js"></script>
|
||
<script>
|
||
var element
|
||
layui.use(['element', 'jquery'], function () {
|
||
element = layui.element;
|
||
var $ = layui.jquery;
|
||
|
||
/**
|
||
* 左边菜单显示/隐藏功能
|
||
* @type {boolean}
|
||
*/
|
||
var flag = true;
|
||
$(".menu-switch").click(function () {
|
||
if (flag) {
|
||
$(".layui-layout-admin .layui-side").animate({left: "-200px"});
|
||
$(".layui-layout-admin .content-body").animate({left: "0px"});
|
||
$(".layui-layout-admin .layui-footer").animate({left: "0px"});
|
||
$(".menu-switch span").removeClass("layui-icon-shrink-right").addClass("layui-icon-spread-left");
|
||
flag = false;
|
||
} else {
|
||
$(".layui-layout-admin .layui-side").animate({left: "0px"});
|
||
$(".layui-layout-admin .content-body").animate({left: "200px"});
|
||
$(".layui-layout-admin .layui-footer").animate({left: "200px"});
|
||
$(".menu-switch span").removeClass("layui-icon-spread-left").addClass("layui-icon-shrink-right");
|
||
flag = true;
|
||
}
|
||
});
|
||
});
|
||
|
||
function tabTest() {
|
||
element.tabAdd("demo", {
|
||
title: "用户列表",
|
||
content: "<iframe src='user.html' frameborder=\"0\" scrolling=\"yes\" width=\"100%\" height=\"100%\"></iframe>",
|
||
id: "tt666"
|
||
});
|
||
element.tabChange("demo","tt666");
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |