隐藏/显示左边菜单+美化welcome.html页面
Mr.X
parent
88b63f2fc4
commit
724e55ba67
|
|
@ -1,6 +1,34 @@
|
|||
@charset "utf-8";
|
||||
@import "../lib/layui/css/layui.css";
|
||||
|
||||
/*顶部导航菜单*/
|
||||
.layui-layout-admin .layui-logo {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.layui-nav {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layui-layout-left {
|
||||
left: 235px;
|
||||
}
|
||||
|
||||
.menu-switch {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
left: 200px;
|
||||
top: 18px;
|
||||
color: #fff;
|
||||
background-color: #1AA094;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*主体内容*/
|
||||
.content-body {
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
|
|
@ -37,12 +65,9 @@
|
|||
|
||||
.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;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -55,11 +80,36 @@
|
|||
}*/
|
||||
|
||||
/*美化滚动条代码*/
|
||||
::-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;}
|
||||
::-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;
|
||||
}
|
||||
27
index.html
27
index.html
|
|
@ -14,6 +14,9 @@
|
|||
<!--头部导航-->
|
||||
<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>
|
||||
|
|
@ -93,8 +96,30 @@
|
|||
<script src="lib/layui/layui.js"></script>
|
||||
<script>
|
||||
var element
|
||||
layui.use('element', function () {
|
||||
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() {
|
||||
|
|
|
|||
176
user.html
176
user.html
|
|
@ -61,6 +61,182 @@
|
|||
<td>2016-11-28</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<!--分页-->
|
||||
|
|
|
|||
124
welcome.html
124
welcome.html
|
|
@ -12,27 +12,119 @@
|
|||
<body>
|
||||
<div class="ok-body">
|
||||
<blockquote class="layui-elem-quote">
|
||||
欢迎管理员：<span class="x-red">test</span>！当前时间:2018-04-25 20:50:53
|
||||
欢迎管理员：<span class="x-red">bobi</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>
|
||||
|
||||
<blockquote class="layui-elem-quote">
|
||||
系统基本参数
|
||||
</blockquote>
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="300">
|
||||
<col>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>本机IP地址</td>
|
||||
<td>1.1.1.1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>服务器地址</td>
|
||||
<td>http://ok-admin.xlbweb.cn</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>操作系统</td>
|
||||
<td>CentOS</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>运行环境</td>
|
||||
<td>JDK 1.8.0_171</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>数据库版本</td>
|
||||
<td>MySQL 5.7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>最大上传限制</td>
|
||||
<td>5M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>当前用户权限</td>
|
||||
<td>超级管理员</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>剩余空间</td>
|
||||
<td>888888M</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<blockquote class="layui-elem-quote">
|
||||
作者信息
|
||||
</blockquote>
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="300">
|
||||
<col>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>开发者</td>
|
||||
<td>bobi(jxjy.ing@foxmail.com)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<blockquote class="layui-elem-quote">
|
||||
更新日志
|
||||
</blockquote>
|
||||
<ul class="layui-timeline">
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<h3 class="layui-timeline-title">8月18日</h3>
|
||||
<p>
|
||||
layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
|
||||
<br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
|
||||
<br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<h3 class="layui-timeline-title">8月16日</h3>
|
||||
<p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
|
||||
<ul>
|
||||
<li>《登高》</li>
|
||||
<li>《茅屋为秋风所破歌》</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<h3 class="layui-timeline-title">8月15日</h3>
|
||||
<p>
|
||||
中国人民抗日战争胜利72周年
|
||||
<br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
|
||||
<br>铭记、感恩
|
||||
<br>所有为中华民族浴血奋战的英雄将士
|
||||
<br>永垂不朽
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<div class="layui-timeline-title">过去</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue