云端中国城管理系统-优快云博客

本文链接：https://blog.youkuaiyun.com/2403_88079353/article/details/146185376
<!DOCTYPE html>
<html>
<head>
<title>云端中国城管理系统</title>
<style>
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
}
.sidebar {
    width: 200px;
    height: 100%;
    background-color: #333;
    color: #ffffff;
    border:solid 1px #dc6f0a;
    box-shadow: rgb(255, 132, 0) 5px 5px 5px; /* 边框阴影效果 */
}

.sidebar h1 {
    width: 100%;
        height: 50px;
        list-style: none;
        padding: 0;
        margin: 0;

        background-color: black;
        color: #fff;
        text-align: center;
}
.sidebar ul {
    list-style: none;
        padding: 0;
        margin: 0;
}

.sidebar li {
    padding: 22px 50px;
    cursor: pointer;
}

.sidebar li:hover {
    background-color: #555;
}
.main-content {
    flex: 1;
    padding: 20px;
}

.header {
    display: flexbox;
    padding: 10px;
    border-bottom: 1px solid #ffffff;
}

.breadcrumbs {
    width: 100%;
    margin-bottom: 10px;
    box-shadow: rgb(249, 207, 161) 5px 5px 5px; /* 边框阴影效果 */

}
.tabs {
    margin-bottom: 10px;
    }

.tabs button {
    padding: 8px 16px;
    border: none;
    background-color:#f4f4f4;
    cursor: pointer;
}
.search-form {
    margin-bottom: 20px;
}

.search-form label {
    margin-right: 5px;
}

.search-form input, .search-form select {
    padding: 5px;
    margin-right: 10px;
}

.search-form button {
    padding: 8px 16px;
    background-color: #7aa8e4;
    color: white;
    border: none;
    cursor: pointer;
}
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
}

.action-buttons button1 {
    padding: 5px 5px;
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
    margin-right: 0;
}
.action-buttons button2 {
    padding: 5px 5px;
    background-color: #db6634;
    color: white;
    border: none;
    cursor: pointer;
    margin-right: 0;
}
.footer {
    width: 85%;
    height: 50px;
    border: none;
    padding: 20px;
    margin: 0;
    background-color: #ffffff;
    color: #aca9a9;
    display: flex;
    position: absolute;
    bottom: 0px;
    border:solid 1px #edb683;
    box-shadow: rgb(243, 190, 134) 5px 5px 5px; /* 边框阴影效果 */
    justify-content:center;
    align-items: center;

}

</style>
</head>
<body>

<div class="container">
    <div class="sidebar">
        <div class="biaoti"><h1>云端中国城</h1></div>
        <ul>
            <li>首页</li>
            <li>设置</li>
            <li>用户管理</li>
            <li>奖池管理</li>
            <li>主播认证</li>
            <li>直播管理</li>
            <li>视频管理</li>
            <li>财务管理</li>
            <li>家族管理</li>
            <li>道具管理</li>
            <li>红包管理</li>
            <li>守护管理</li>
            <li>等级管理</li>
            <li>邀请奖励</li>
        </ul>
    </div>
    <div class="main-content">
        <div class="header">
            <h1>云端中国城后台管理系统</h1>
            <div class="breadcrumbs">
                <p>云端中国城<span style="color: #333;">
                    <span style="color: #c3c1c1;">/主播管理</span>
                </span></p></div>
            <div class="tabs">
                <button>网站数据大屏</button>
                <button>网站设置-主页</button>
                <button>设置-秘密设置</button>
                <button>用户-管理员</button>
                <button>用户-操作日志</button>
                <button>用户-本站用户</button>
                <button style="background-color: #706969;">主播管理</button>
            </div>
        </div>
        <div class="content-area">
            <div class="tabs">
                <button style="background-color: #6b6161;">列表</button>
                <button>添加</button>
            </div>
            <div class="search-form">
                <label for="status">审核状态:</label>
                <select id="status">
                    <option value="">请选择</option>
                </select>

                <label for="time">提交时间:</label>
                <input type="date" id="time"> To <input type="date">

                <label for="userID">用户ID:</label>
                <input type="text" id="userID" placeholder="请输入会员ID、靓号">

                <label for="keyword">关键字:</label>
                <input type="text" id="keyword" placeholder="请输入姓名、手机">
                 <br>
                <button>搜索</button>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>会员 ID</th>
                        <th>会员</th>
                        <th>真实姓名</th>
                        <th>手机号码</th>
                        <th>身份证号</th>
                        <th>审核状态</th>
                        <th>提交时间</th>
                        <th>处理时间</th>
                        <th> 操作 </th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Xie Jiehong</td>
                        <td>Xie Jiehong</td>
                        <td>143-1189-4868</td>
                        <td>wwft9uMMCj</td>
                        <td>0</td>
                        <td>15:29:20</td>
                        <td>16:36:29</td>
                        <td class="action-buttons">
                            <button1>编辑</button>
                        </td>
                        <td class="action-buttons">
                            <button2>删除</button>
                        </td>
                    </tr>
                </tbody>
            </div>
        </div>
    </div>
    <div class="footer">
        云端中国城 延安大学 版权所有
        <br>
       2024 EduCoder 公安备案222222
    </div>
</body>
</html>