<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>云端中国城后台管理系统</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
html,body{height: 100%;width: 100%;}
body {
margin: 0;
padding: 0;
display: flex;
}
.sidebar {
width: 200px;
background-color: #2c3e50;
color: white;
padding: 20px;
height: 100%;
}
.sidebar h2 {
margin-top: 0;
text-align: center;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar ul li {
margin: 10px 0;
}
.sidebar ul li a {
color: white;
text-decoration: none;
}
.content {
flex-grow: 1;
padding: 20px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #34495e;
color: white;
padding: 10px 20px;
}
.header h1 {
margin: 0;
}
.tabs {
margin-bottom: 20px;
}
.tabs span {
margin-right: 20px;
cursor: pointer;
}
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.actions button {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="sidebar">
<h2>云端中国城</h2>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">设置</a></li>
<li><a href="#">用户管理</a></li>
<li><a href="#">奖池管理</a></li>
<li><a href="#">主播认证</a></li>
<li><a href="#">直播管理</a></li>
<li><a href="#">视频管理</a></li>
<li><a href="#">财务管理</a></li>
<li><a href="#">家族管理</a></li>
<li><a href="#">道具管理</a></li>
<li><a href="#">红包管理</a></li>
<li><a href="#">守护管理</a></li>
<li><a href="#">等级管理</a></li>
<li><a href="#">邀请奖励</a></li>
</ul>
</div>
<div class="content">
<div class="header">
<h1>云端中国城后台管理系统</h1>
<div>
<span>网站数据大屏</span>
<span>网站设置-主页</span>
<span>设置-秘密设置</span>
<span>用户-管理员</span>
<span>用户-操作日志</span>
<span>用户-本站用户</span>
<span>主播管理</span>
</div>
</div>
<div class="tabs">
<span>列表</span>
<span>添加</span>
</div>
<div>
<label for="status">审核状态：</label>
<span id="status">待审核</span>
<label for="date">开始时间：</label>
<span id="date">2024-01-01</span>
<label for="to">结束时间：</label>
<span id="to">2024-12-31</span>
<label for="user-id">用户 ID：</label>
<span id="user-id">12345</span>
</div>
<table>
<thead>
<tr>
<th>会员 ID</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>wwf9uMMCjQ</td>
<td>0</td>
<td>15:29:20</td>
<td>16:36:29</td>
<td class="actions">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Kaneko Misaki</td>
<td>Kaneko Misaki</td>
<td>212-245-5016</td>
<td>U2Di9QDk7b</td>
<td>0</td>
<td>10:45:13</td>
<td>15:11:59</td>
<td class="actions">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Jose Rose</td>
<td>Jose Rose</td>
<td>213-587-8144</td>
<td>KlkyLqHCPJ</td>
<td>0</td>
<td>11:22:04</td>
<td>09:06:02</td>
<td class="actions">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>4</td>
<td>Willie Payne</td>
<td>Willie Payne</td>
<td>838-548-1353</td>
<td>iXbzdADd7J</td>
<td>1</td>
<td>17:41:37</td>
<td>17:22:06</td>
<td class="actions">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>5</td>
<td>Karen Silva</td>
<td>Karen Silva</td>
<td>66-687-3075</td>
<td>3e8jgrhgzl</td>
<td>0</td>
<td>09:27:04</td>
<td>12:12:56</td>
<td class="actions">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>6</td>
<td>Yip Ka Ming</td>
<td>Yip Ka Ming</td>
<td>5633 951236</td>
<td>g80cyYV6qx</td>
<td>0</td>
<td>16:18:02</td>
<td>17:48:10</td>
<td class="actions">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>7</td>
<td>Fung Ka Keung</td>
<td>Fung Ka Keung</td>
<td>3-6084-8930</td>
<td>9ejLXN8peM</td>
<td>0</td>
<td>10:29:43</td>
<td>17:58:02</td>
<td class="actions">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
</body>
</html>web第二次作业
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
