大体框架完成
Mr.X
parent
387c4dda7e
commit
88b63f2fc4
|
|
@ -1,26 +1,65 @@
|
|||
@charset "utf-8";
|
||||
@import "../lib/layui/css/layui.css";
|
||||
|
||||
.layui-body {
|
||||
border: 1px solid red;
|
||||
.content-body {
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
right: 0px;
|
||||
bottom: 42px;
|
||||
left: 200px;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layui-body .layui-tab {
|
||||
.content-body .layui-tab-content {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*使iframe高度100%,它的父类高度也需要100%*/
|
||||
.content-body .layui-tab-content .layui-tab-item {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layui-body .layui-tab .layui-tab-title {
|
||||
.content-body .layui-tab-content .layui-tab-item iframe {
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.layui-body .layui-tab .layui-tab-content {
|
||||
height: 100%;
|
||||
/*定义一些常量值*/
|
||||
.ok-body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.layui-body .layui-tab .layui-tab-content .layui-tab-item {
|
||||
height: 100%;
|
||||
.ok-body-breadcrumb {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
line-height: 39px;
|
||||
height: 39px;
|
||||
padding: 0px 20px;
|
||||
border-bottom: 1px solid rgb(229, 229, 229);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layui-body .layui-tab .layui-tab-content .layui-tab-item iframe {
|
||||
height: 100%;
|
||||
}
|
||||
/*
|
||||
.ok-search {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ok-search input.layui-input {
|
||||
width: 190px;
|
||||
}*/
|
||||
|
||||
/*美化滚动条代码*/
|
||||
::-webkit-scrollbar{width:10px;height:10px;}
|
||||
::-webkit-scrollbar-button:vertical{display:none;}
|
||||
::-webkit-scrollbar-track:vertical{background-color:black;}
|
||||
::-webkit-scrollbar-track-piece{background-color:#F5F5F5;}
|
||||
::-webkit-scrollbar-thumb:vertical{margin-right:10px; background-color:#A6A6A6;}
|
||||
::-webkit-scrollbar-thumb:vertical:hover{background-color:#aaa;}
|
||||
::-webkit-scrollbar-corner:vertical{background-color:#535353;}
|
||||
::-webkit-scrollbar-resizer:vertical{background-color:#FF6E00;}
|
||||
164
index.html
164
index.html
|
|
@ -10,105 +10,101 @@
|
|||
<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>
|
||||
<!-- 头部区域（可配合layui已有的水平导航） -->
|
||||
<ul class="layui-nav layui-layout-left">
|
||||
<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="">用户</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="">基本资料</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">
|
||||
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
|
||||
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
||||
<li class="layui-nav-item layui-nav-itemed">
|
||||
<a class="" href="javascript:;">
|
||||
<i class="layui-icon"></i> 用户管理
|
||||
</a>
|
||||
<div class="layui-layout layui-layout-admin">
|
||||
<!--头部导航-->
|
||||
<div class="layui-header">
|
||||
<div class="layui-logo">ok-admin v1.0</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="javascript:;" onclick="tabTest()">用户列表</a></dd>
|
||||
<dd><a href="javascript:;">列表二</a></dd>
|
||||
<dd><a href="javascript:;">列表三</a></dd>
|
||||
<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:;">
|
||||
<i class="layui-icon"></i> 文章管理
|
||||
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
|
||||
bobi
|
||||
</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">文章列表</a></dd>
|
||||
<dd><a href="javascript:;">发布文章</a></dd>
|
||||
<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>
|
||||
<li class="layui-nav-item"><a href="">发布商品</a></li>
|
||||
<li class="layui-nav-item"><a href="">退出</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-body">
|
||||
<!-- 内容主体区域 -->
|
||||
<div class="layui-tab layui-tab-brief" lay-filter="demo" lay-allowClose="true">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">控制台</li>
|
||||
<li>商品管理</li>
|
||||
<li>订单管理</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 class="layui-tab-item">内容2</div>
|
||||
<div class="layui-tab-item">内容3</div>
|
||||
<!--左侧导航区域-->
|
||||
<div class="layui-side layui-bg-black">
|
||||
<div class="layui-side-scroll">
|
||||
<ul class="layui-nav layui-nav-tree" 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:;">列表三</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>
|
||||
</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>
|
||||
|
||||
<div class="layui-footer">
|
||||
<!-- 底部固定区域 -->
|
||||
Copyright ©2018 ok-admin v1.0 All Rights Reserved
|
||||
</div>
|
||||
</div>
|
||||
<script src="lib/layui/layui.js"></script>
|
||||
<script>
|
||||
var element
|
||||
layui.use('element', function () {
|
||||
// var element = layui.element;
|
||||
element = layui.element;
|
||||
});
|
||||
|
||||
function tabTest() {
|
||||
element.tabAdd('demo', {
|
||||
title: '用户列表',
|
||||
content: '选项卡的内容',
|
||||
id: '选项卡标题的lay-id属性值'
|
||||
<!--js逻辑-->
|
||||
<script src="lib/layui/layui.js"></script>
|
||||
<script>
|
||||
var element
|
||||
layui.use('element', function () {
|
||||
element = layui.element;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
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>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>用户列表</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" href="css/okadmin.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="ok-body">
|
||||
<div class="ok-body-breadcrumb">
|
||||
<span class="layui-breadcrumb">
|
||||
<a><cite>首页</cite></a>
|
||||
<a><cite>用户管理</cite></a>
|
||||
<a><cite>微信端用户列表</cite></a>
|
||||
</span>
|
||||
<a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" style="line-height:2.4em;margin-top:3px;float:right" title="刷新">
|
||||
<i class="layui-icon" style="line-height:30px">ဂ</i>
|
||||
</a>
|
||||
</div>
|
||||
<!--模糊搜索区域-->
|
||||
<!--<div class="layui-row">
|
||||
<form class="layui-form layui-col-md12 ok-search">
|
||||
<input class="layui-input" placeholder="开始日" name="start" id="start">
|
||||
<input class="layui-input" placeholder="截止日" name="end" id="end">
|
||||
<input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
|
||||
<button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i></button>
|
||||
</form>
|
||||
</div>-->
|
||||
<!--数据表格-->
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<div class="layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i></div>
|
||||
</th>
|
||||
<th>昵称</th>
|
||||
<th>加入时间</th>
|
||||
<th>签名</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i></div>
|
||||
</td>
|
||||
<td>贤心</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i></div>
|
||||
</td>
|
||||
<td>许闲心</td>
|
||||
<td>2016-11-28</td>
|
||||
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--分页-->
|
||||
</div>
|
||||
<!--js逻辑-->
|
||||
<script src="lib/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.use(['element', 'form'], function () {
|
||||
var element = layui.element;
|
||||
var form = layui.form;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
50
welcome.html
50
welcome.html
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>ok-admin | 很赞的后台模版</title>
|
||||
|
|
@ -7,30 +7,32 @@
|
|||
<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="lib/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="css/okadmin.css">
|
||||
</head>
|
||||
<body>
|
||||
<blockquote class="layui-elem-quote">
|
||||
欢迎管理员：<span class="x-red">test</span>！当前时间:2018-04-25 20:50:53
|
||||
</blockquote>
|
||||
<fieldset class="layui-elem-field">
|
||||
<legend>数据统计</legend>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
</fieldset>
|
||||
<div class="ok-body">
|
||||
<blockquote class="layui-elem-quote">
|
||||
欢迎管理员：<span class="x-red">test</span>！当前时间:2018-04-25 20:50:53
|
||||
</blockquote>
|
||||
<fieldset class="layui-elem-field">
|
||||
<legend>数据统计</legend>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
<h1>666</h1><br>
|
||||
</fieldset>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue