">
当前位置:   article > 正文

使用 妹子UI 开发后台管理页面_

使用 Amaze UI 开发漂亮的后台管理页面,管理端登录页面、管理端列表页面、管理端保存页面。
页面布局样式使用固定定位和flex实现。
创作时间:2022年10月9日09:21:36

登录页面效果

在这里插入图片描述

列表页面效果

在这里插入图片描述

保存页面效果

在这里插入图片描述

引入 妹子UI 样式文件

<link rel="stylesheet" href="/assets/css/amazeui.min.css">
  • 1

开发登录页面

<!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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

开发列表页面

<!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="#">&laquo;</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="#">&raquo;</a></li>
        </ul>
    </div>
</div>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106

开发保存页面

<!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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58

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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/429301?site
推荐阅读
相关标签
  

闽ICP备14008679号