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

作者：菜鸟追梦旅行 | 2024-04-15 18:08:51

踩

使用 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

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

登录页面效果

列表页面效果

保存页面效果

引入 妹子UI 样式文件

开发登录页面

开发列表页面

开发保存页面

lss-admin.css 样式文件

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

引入妹子UI 样式文件