mirror of
https://gitee.com/zoujingli/ThinkAdmin.git
synced 2025-04-05 19:41:44 +08:00
329 lines
8.8 KiB
HTML
329 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Layout Demo</title>
|
|
|
|
<!-- 引入 layui.css -->
|
|
<link rel="stylesheet" href="https://unpkg.com/layui@2.6.8/dist/css/layui.css">
|
|
|
|
<style type="text/less">
|
|
|
|
@TopHeadHeight: 60px;
|
|
@TopHeadNormalBackColor: #925cc3;
|
|
@TopHeadNormalTextColor: #eee;
|
|
@TopHeadActiveTextColor: #fff;
|
|
@TopHeadActiveBackColor: rgba(0, 0, 0, .1);
|
|
|
|
@LeftMainWidth: 60px;
|
|
@LeftTreeWidth: 200px;
|
|
|
|
@LeftMainNormalBackColor: #563d7c;
|
|
@LeftMainActiveBackColor: #FFF;
|
|
@LeftMainActiveTextColor: #000;
|
|
|
|
@LeftTreeNormalBackColor: #FFF;
|
|
|
|
@BodyMainBackColor: #EEE;
|
|
|
|
.layout-menu,
|
|
.layout-body {
|
|
top: @TopHeadHeight;
|
|
bottom: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.layout-menu {
|
|
top: 0;
|
|
width: @LeftMainWidth+@LeftTreeWidth;
|
|
bottom: 0;
|
|
position: absolute;
|
|
|
|
&-head {
|
|
height: @TopHeadHeight;
|
|
font-size: 20px;
|
|
background: @TopHeadNormalBackColor;
|
|
text-align: center;
|
|
line-height: @TopHeadHeight;
|
|
|
|
a {
|
|
font-weight: bold;
|
|
color: @TopHeadNormalTextColor;
|
|
}
|
|
}
|
|
|
|
&-main {
|
|
top: @TopHeadHeight;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: @LeftMainWidth;
|
|
background: @LeftMainNormalBackColor;
|
|
position: absolute;
|
|
|
|
a {
|
|
color: #fff;
|
|
padding: 0;
|
|
display: block;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
line-height: @LeftMainWidth;
|
|
|
|
&.active {
|
|
color: @LeftMainActiveTextColor;
|
|
background: @LeftMainActiveBackColor;
|
|
}
|
|
|
|
&:hover:not(.active) {
|
|
background: rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
i {
|
|
display: block;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-tree {
|
|
top: @TopHeadHeight;
|
|
left: @LeftMainWidth;
|
|
width: @LeftTreeWidth;
|
|
bottom: 0;
|
|
position: absolute;
|
|
background: @LeftTreeNormalBackColor;
|
|
|
|
.layui-menu {
|
|
margin: 0;
|
|
|
|
li {
|
|
line-height: 40px;
|
|
|
|
&:after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-head {
|
|
left: @LeftMainWidth+@LeftTreeWidth;
|
|
right: 0;
|
|
height: @TopHeadHeight;
|
|
position: absolute;
|
|
background: @TopHeadNormalBackColor;
|
|
|
|
.layui-nav {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: @TopHeadNormalBackColor;
|
|
|
|
&.layout-head-left {
|
|
float: left;
|
|
}
|
|
|
|
&.layout-head-right {
|
|
float: right;
|
|
}
|
|
|
|
.layui-nav-item {
|
|
height: @TopHeadHeight;
|
|
|
|
> li {
|
|
color: @TopHeadNormalTextColor;
|
|
height: @TopHeadHeight;
|
|
line-height: @TopHeadHeight;
|
|
|
|
&:after {
|
|
display: none;
|
|
}
|
|
|
|
&.layui-this {
|
|
color: @TopHeadActiveTextColor;
|
|
background: @TopHeadActiveBackColor;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-body {
|
|
top: @TopHeadHeight;
|
|
left: @LeftMainWidth+@LeftTreeWidth;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 20px;
|
|
overflow: auto;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
background: @BodyMainBackColor;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="layout-menu">
|
|
<div class="layout-menu-head">
|
|
<a href="javascript:void(0)">Layout Demo</a>
|
|
<a href="javascript:void(0)" style="position:absolute;right: 10px">
|
|
<i class="layui-icon layui-icon-spread-left"></i>
|
|
</a>
|
|
</div>
|
|
<div class="layout-menu-main">
|
|
<a href="#" title="首页">
|
|
<i class="layui-icon layui-icon-home"></i>
|
|
</a>
|
|
<a href="#" class="active" title="文件上传">
|
|
<i class="layui-icon layui-icon-upload"></i>
|
|
</a>
|
|
<a href="#" title="首页">
|
|
<i class="layui-icon layui-icon-app"></i>
|
|
</a>
|
|
<a href="#" title="首页">
|
|
<i class="layui-icon layui-icon-camera"></i>
|
|
</a>
|
|
<a href="#" title="首页">
|
|
<i class="layui-icon layui-icon-about"></i>
|
|
</a>
|
|
</div>
|
|
<div class="layout-menu-tree">
|
|
<ul class="layui-menu">
|
|
<li lay-options="{id: 100}">
|
|
<div class="layui-menu-body-title">menu item 1</div>
|
|
</li>
|
|
<li lay-options="{id: 101}">
|
|
<div class="layui-menu-body-title">
|
|
<a href="#">menu item 2 <span class="layui-badge-dot"></span></a>
|
|
</div>
|
|
</li>
|
|
<li class="layui-menu-item-divider"></li>
|
|
<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
|
|
<div class="layui-menu-body-title">menu item 3 group <i class="layui-icon layui-icon-up"></i></div>
|
|
<ul>
|
|
<li lay-options="{id: 1031}">menu item 3-1</li>
|
|
<li lay-options="{id: 1032}">
|
|
<div class="layui-menu-body-title">menu item 3-2</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="layui-menu-item-divider"></li>
|
|
<li lay-options="{id: 104}">
|
|
<div class="layui-menu-body-title">menu item 4</div>
|
|
</li>
|
|
<li lay-options="{id: 106}">
|
|
<div class="layui-menu-body-title">menu item 6</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layout-head">
|
|
<ul class="layui-nav layout-head-left">
|
|
<li class="layui-nav-item layui-this"><a href="javascript:void(0)"><span>应用管理</span></a></li>
|
|
<li class="layui-nav-item"><a href="javascript:void(0)"><span>系统管理</span></a></li>
|
|
</ul>
|
|
<ul class="layui-nav layout-head-right">
|
|
<li class="layui-nav-item"><a data-reload=""><i class="layui-icon layui-icon-refresh-3"></i></a></li>
|
|
<li class="layui-nav-item">
|
|
<dl class="layui-nav-child">
|
|
<dd><a><i class="layui-icon layui-icon-set-fill"></i> 基本资料</a></dd>
|
|
<dd><a><i class="layui-icon layui-icon-component"></i> 安全设置</a></dd>
|
|
<dd><a><i class="layui-icon layui-icon-template-1"></i> 缓存加速</a></dd>
|
|
<dd><a><i class="layui-icon layui-icon-fonts-clear"></i> 清理缓存</a></dd>
|
|
<dd><a><i class="layui-icon layui-icon-release"></i> 退出登录</a></dd>
|
|
</dl>
|
|
<a class="layui-elip">
|
|
<span class="headimg" data-lazy-src="https://v6.thinkadmin.top/upload/fa/16bb16ed899662e4776762c4c8253f.jpg"></span>
|
|
<span>admin</span><i class="layui-icon layui-icon-down layui-nav-more"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="layout-body">
|
|
<div class="layout-body-nav"></div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
<div>首页</div>
|
|
</div>
|
|
|
|
|
|
<!-- 引入 layui.js -->
|
|
<script src="https://unpkg.com/layui@2.6.8/dist/layui.js"></script>
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
|
|
|
|
</body>
|
|
</html> |