使用 Amaze UI 开发漂亮的后台管理页面，管理端登录页面、管理端列表页面、管理端保存页面。
页面布局样式使用固定定位和flex实现。
创作时间：2022年10月9日09:21:36
登录页面效果
列表页面效果
保存页面效果
引入 妹子UI 样式文件
<link rel="stylesheet" href="/assets/css/amazeui.min.css">
开发登录页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录</title><link rel="stylesheet" href="/assets/css/amazeui.min.css"><link rel="stylesheet" href="/assets/css/lss-admin.css">
</head>
<body>
<div class="lss-admin lss-admin-login"><div class="lss-admin-login-container"><form class="am-form" action="/admin/list"><div class="am-form-group"><label for="loginName">账号</label><input type="text" class="" id="loginName" placeholder="输入账号"></div><div class="am-form-group"><label for="password">密码</label><input type="password" class="" id="password" placeholder="输入密码"></div><button type="submit" class="am-btn am-btn-primary">登录</button></form></div>
</div>
</body>
</html>
开发列表页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表</title><link rel="stylesheet" href="/assets/css/amazeui.min.css"><link rel="stylesheet" href="/assets/css/lss-admin.css"><link rel="stylesheet" href="/assets/css/lss.css">
</head>
<body>
<div class="lss-admin"><div class="lss-admin-list-left"><ul class="am-list am-list-border"><li><a href="#" class="current"><i class="am-icon-pencil am-icon-fw"></i>链接管理</a></li><li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>项目管理</a></li><li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>日志管理</a></li><li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>报销管理</a></li><li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>加班管理</a></li></ul></div><div class="lss-admin-list-right"><ol class="am-breadcrumb am-breadcrumb-slash"><li class="am-active">用户管理</li></ol><form class="am-form-inline lss-mb30" role="form"><div class="am-form-group"><input type="text" class="am-form-field" placeholder="名称"></div><button type="submit" class="am-btn am-btn-primary">查询</button><button type="button" class="am-btn am-btn-default">清空</button></form><div class="lss-mb20"><a class="am-btn am-btn-primary" href="/admin/save">添加</a><button class="am-btn am-btn-danger">删除</button></div><table class="am-table am-table-bordered"><thead><tr><th>网站名称</th><th>网址</th><th>创建时间</th><th>操作</th></tr></thead><tbody><tr><td>Amaze UI</td><td>http://amazeui.org</td><td>2012-10-01</td><td><a href="/admin/save" class="am-btn am-btn-primary am-btn-xs">修改</a><button class="am-btn am-btn-danger am-btn-xs">删除</button></td></tr><tr><td>Amaze UI</td><td>http://amazeui.org</td><td>2012-10-01</td><td><a href="/admin/save" class="am-btn am-btn-primary am-btn-xs">修改</a><button class="am-btn am-btn-danger am-btn-xs">删除</button></td></tr><tr class="am-active"><td>Amaze UI(Active)</td><td>http://amazeui.org</td><td>2012-10-01</td><td><a href="/admin/save" class="am-btn am-btn-primary am-btn-xs">修改</a><button class="am-btn am-btn-danger am-btn-xs">删除</button></td></tr><tr><td>Amaze UI</td><td>http://amazeui.org</td><td>2012-10-01</td><td><a href="/admin/save" class="am-btn am-btn-primary am-btn-xs">修改</a><button class="am-btn am-btn-danger am-btn-xs">删除</button></td></tr><tr><td>Amaze UI</td><td>http://amazeui.org</td><td>2012-10-01</td><td><a href="/admin/save" class="am-btn am-btn-primary am-btn-xs">修改</a><button class="am-btn am-btn-danger am-btn-xs">删除</button></td></tr></tbody></table><ul class="am-pagination"><li class="am-disabled"><a href="#">«</a></li><li class="am-active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">»</a></li></ul></div>
</div>
</body>
</html>
开发保存页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>保存</title><link rel="stylesheet" href="/assets/css/amazeui.min.css"><link rel="stylesheet" href="/assets/css/lss-admin.css"><link rel="stylesheet" href="/assets/css/lss.css">
</head>
<body>
<div class="lss-admin"><div class="lss-admin-save-left"><ul class="am-list am-list-border"><li><a href="#" class="current"><i class="am-icon-pencil am-icon-fw"></i>链接管理</a></li><li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>项目管理</a></li><li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>日志管理</a></li><li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>报销管理</a></li><li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>加班管理</a></li></ul></div><div class="lss-admin-save-right"><ol class="am-breadcrumb am-breadcrumb-slash"><li><a href="/admin/list" id="goBack">用户管理</a></li><li class="am-active">用户保存</li></ol><form class="am-form am-form-horizontal"><div class="am-form-group"><label for="doc-ipt-3" class="am-u-sm-2 am-form-label">电子邮件</label><div class="am-u-sm-10"><input type="email" id="doc-ipt-3" placeholder="输入你的电子邮件"></div></div><div class="am-form-group"><label for="doc-ipt-pwd-2" class="am-u-sm-2 am-form-label">密码</label><div class="am-u-sm-10"><input type="password" id="doc-ipt-pwd-2" placeholder="设置一个密码吧"></div></div><div class="am-form-group"><div class="am-u-sm-10 am-u-sm-offset-2"><button type="submit" class="am-btn am-btn-primary">保存</button><button type="button" class="am-btn am-btn-default" id="goBackBtn">返回</button></div></div></form></div>
</div><script src="/assets/js/jquery.min.js"></script>
<script>$("#goBackBtn").click(function(){location.href=$("#goBack").attr("href");})
</script>
</body>
</html>
lss-admin.css 样式文件
.lss-admin {position: fixed;left: 0;right: 0;top: 0;bottom: 0;/*设置背景图片*/background-image: url("/assets/i/login.jpg");background-repeat: no-repeat;background-position: center 0;background-size: cover;
}/*后台登录页面*/
.lss-admin-login {display: flex;align-items: center;justify-content: center;
}.lss-admin-login-container {background-color: rgba(255, 255, 255, .85);width: 400px;overflow-y: hidden;padding: 20px;
}/*后台列表页面、保存页面*/
.lss-admin-list-left, .lss-admin-save-left {position: fixed;left: 20px;top: 20px;bottom: 20px;width: 300px;background-color: rgba(255, 255, 255, .85);border-radius: 16px;padding: 20px;overflow: auto;
}.lss-admin-list-right, .lss-admin-save-right {position: fixed;left: 340px;top: 20px;right: 20px;bottom: 20px;background-color: rgba(255, 255, 255, .85);border-radius: 16px;padding: 20px;overflow: auto;
}.lss-admin-list-left .am-list-border > li > a:focus, .lss-admin-list-left .am-list-border > li > a:hover, .lss-admin-save-left .am-list-border > li > a:focus, .lss-admin-save-left .am-list-border > li > a:hover {background-color: transparent;
}.lss-admin-list-left .am-list > li, .lss-admin-save-left .am-list > li {margin-bottom: 0;background-color: transparent;border: none;
}.lss-admin-list-right hr {margin: 20px 0;
}.lss-admin-save-right .am-form-group, .lss-admin-login .am-form-group {margin-bottom: 20px;
}.am-pagination > .am-disabled > a, .am-pagination > li > a {background-color: transparent;
}.am-form input[type=number], .am-form input[type=search], .am-form input[type=text], .am-form input[type=password], .am-form input[type=datetime], .am-form input[type=datetime-local], .am-form input[type=date], .am-form input[type=month], .am-form input[type=time], .am-form input[type=week], .am-form input[type=email], .am-form input[type=url], .am-form input[type=tel], .am-form input[type=color], .am-form select, .am-form textarea, .am-form-field {background-color: transparent;
}.lss-admin-list-left .current, .lss-admin-save-left .current {color: #095f8a !important;
}
