隐藏/显示左边菜单+美化welcome.html页面
Mr.X
parent
88b63f2fc4
commit
724e55ba67
|
|
@ -1,6 +1,34 @@
|
||||||
@charset "utf-8";
|
@charset "utf-8";
|
||||||
@import "../lib/layui/css/layui.css";
|
@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 {
|
.content-body {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 46px;
|
top: 46px;
|
||||||
|
|
@ -37,12 +65,9 @@
|
||||||
|
|
||||||
.ok-body-breadcrumb {
|
.ok-body-breadcrumb {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 99;
|
|
||||||
line-height: 39px;
|
line-height: 39px;
|
||||||
height: 39px;
|
height: 39px;
|
||||||
padding: 0px 20px;
|
|
||||||
border-bottom: 1px solid rgb(229, 229, 229);
|
border-bottom: 1px solid rgb(229, 229, 229);
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -55,11 +80,36 @@
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
/*美化滚动条代码*/
|
/*美化滚动条代码*/
|
||||||
::-webkit-scrollbar{width:10px;height:10px;}
|
::-webkit-scrollbar {
|
||||||
::-webkit-scrollbar-button:vertical{display:none;}
|
width: 10px;
|
||||||
::-webkit-scrollbar-track:vertical{background-color:black;}
|
height: 10px;
|
||||||
::-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-button:vertical {
|
||||||
::-webkit-scrollbar-corner:vertical{background-color:#535353;}
|
display: none;
|
||||||
::-webkit-scrollbar-resizer:vertical{background-color:#FF6E00;}
|
}
|
||||||
|
|
||||||
|
::-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-header">
|
||||||
<div class="layui-logo">ok-admin v1.0</div>
|
<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">
|
<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 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>
|
||||||
|
|
@ -93,8 +96,30 @@
|
||||||
<script src="lib/layui/layui.js"></script>
|
<script src="lib/layui/layui.js"></script>
|
||||||
<script>
|
<script>
|
||||||
var element
|
var element
|
||||||
layui.use('element', function () {
|
layui.use(['element', 'jquery'], function () {
|
||||||
element = layui.element;
|
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() {
|
function tabTest() {
|
||||||
|
|
|
||||||
176
user.html
176
user.html
|
|
@ -61,6 +61,182 @@
|
||||||
<td>2016-11-28</td>
|
<td>2016-11-28</td>
|
||||||
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||||
</tr>
|
</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>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<!--分页-->
|
<!--分页-->
|
||||||
|
|
|
||||||
124
welcome.html
124
welcome.html
|
|
@ -12,27 +12,119 @@
|
||||||
<body>
|
<body>
|
||||||
<div class="ok-body">
|
<div class="ok-body">
|
||||||
<blockquote class="layui-elem-quote">
|
<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>
|
</blockquote>
|
||||||
<fieldset class="layui-elem-field">
|
<fieldset class="layui-elem-field">
|
||||||
<legend>数据统计</legend>
|
<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>
|
|
||||||
<h1>666</h1><br>
|
|
||||||
</fieldset>
|
</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>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue