2025-03-17

云端中国城
代码演示:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云端中国城</title>
    <link rel="stylesheet" href="../css/总体.css">
    <link rel="stylesheet" href="../css/云端中国城.css">
    <link rel="stylesheet" href="./download (3)/font_kgyt5cgpimo/iconfont.css">
</head>
<body>
    <!-- 左边部分 START-->
    <div class="left">
        <div class="up"><img src="../images/微信图片_20250313170208.png" alt="">云端中国城</div>
        <div class="down">
            <ul>
                <li><i class="iconfont icon-shouye"></i>首页</li>
                <li><span class="iconfont icon-shezhi"></span>设置</li>
                <li><span class="iconfont icon-yonghu"></span>用户管理</li>
                <li><span class="iconfont icon-zhibo"></span>奖池管理</li>
                <li><span class="iconfont icon-shenfenzheng"></span>主播认证</li>
                <li><span class="iconfont icon-shipindianshi"></span>直播管理</li>
                <li><span class="iconfont icon-shipin"></span>视频管理</li>
                <li><span class="iconfont icon-caiwu"></span>财务管理</li>
                <li><span class="iconfont icon-jiazu"></span>家族管理</li>
                <li><span class="iconfont icon-daoju"></span>道具管理</li>
                <li><span class="iconfont icon-hongbao"></span>红包管理</li>
                <li><span class="iconfont icon-dunpai"></span>守护管理</li>
                <li><span class="iconfont icon-dengji"></span>等级管理</li>
                <li><span class="iconfont icon-dengji"></span>邀请管理</li>
            </ul>
              </div>
    </div>
    <!-- 左边部分 END -->

    <!-- 右边部分 START-->
    <div class="right">
        <div class="header"><span class="iconfont icon-choutitubiaoxiangzuo"></span>云端中国城管理系统</div><hr>
        <div class="s"><h style="font-weight: 600;">云端中国城</h>  /  主播管理</div><hr>
        <div class="main">
            <div class="one">
                <div class="wzsj">网站数据大屏</div>
                <div class="wzsz">网站设置-主页</div>
                <div class="mmsz">设置-秘密设置</div>
                <div class="yh">用户-管理员</div>
                <div class="czrz">用户-操作日志</div>
                <div class="bzyh">用户-本站用户</div>
                <div class="zbgl">主播管理</div>
             </div>
             <div class="two">
                <button>列表</button>
                <button>添加</button>
             </div>
             <div class="three">
                <div class="search-bar">
                    <div class="search-item">
                        <label>审核状态:</label>
                        <select>
                            <option value="">全部</option>
                            <option value="0">已审核</option>
                            <option value="1">待审核</option>
                        </select>
                    </div>
                    <div class="search-item">
                        <label>提交时间:</label>
                        <input type="datetime-local"> To <input type="datetime-local">
                    </div>
                    <div class="search-item">
                        <label>用户 ID:</label>
                        <input type="text" placeholder="请输入会员ID">
                    </div>
                    <div class="search-item">
                        <label>关键字:</label>
                        <input type="text" placeholder="请输入姓名、手机">
                    </div>
                    <button class="search-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>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Xie Jiehong</td>
                            <td>Xie Jiehong</td>
                            <td>143-1189-4868</td>
                            <td>wwft9uMMCj</td>
                            <td class="status-0">已审核</td>
                            <td>15:29:20</td>
                            <td>16:36:29</td>
                            <td>
                                <div class="action-buttons">
                                    <button class="edit-btn">编辑</button>
                                    <button class="delete-btn">删除</button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Kaneko Misaki</td>
                            <td>Kaneko Misaki</td>
                            <td>212-245-5016</td>
                            <td>U2Di9QDk7b</td>
                            <td class="status-0">已审核</td>
                            <td>10:45:13</td>
                            <td>15:11:59</td>
                            <td>
                                <div class="action-buttons">
                                    <button class="edit-btn">编辑</button>
                                    <button class="delete-btn">删除</button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
             </div>
        </div>
        <div class="footer">
            云端中国城·延安大学版权所有
        </div>
    </div>
    <!-- 右边部分 END -->
</body>
</html>
css样式：
body{
    overflow: hidden;
}
/* 左边部分 START */
.left{
    height: 100%;
    width: 200px;
    background-color:#939ca3;
    
}
.up{
    width: 100%;
    height:60px;
    background-color: #171616;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
}
.down{
    height: 100%;
    width: 100%;
    display: flex;
}
ul{
    width: 100%;
    height: 900px;;
    /* display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column; */
    list-style: none;
}
.down ul li{
    width: 100%;
    height: 65px;
    text-align: center;
    line-height: 60px;
    border-top: solid 1px #fff;
    cursor: pointer;
    color: #fff;
    border-style: none;
}
.down ul li:hover{
    background-color: #96cff1;
    color: #0f0e0e;
}
.up img{
    width: 23px;
    height: 23px;
    /* border: 1px solid grey; */
}
/* 左边部分 END */

/* 右边部分 START */
.right{
    height: 100%;
    flex: 1;
    /* background-color: #c35959; */
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 20px;
}
.header{
    font-size: 30px;
    height: 60px;
    width: 100%;
    background-color: #fff;
    color: black;
    margin-left: 30px;
    margin-top: 30px;
}
.header span{font-size: 30px;
margin-right: 50px;}
.s{
    height: 60px;
    width: 100%;
    font-size: 20px;
    /* background-color: #b4c589; */
    line-height: 60px;
}
.main{
    width: 100%;
    height: 780px;
    /* background-color: #0f0e0e; */
    /* margin-top: 30px ; */
}
.one{
    width: 1000px;
    height:50px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    /* background-color: #fff; */
    margin-left: 60px;
    gap: 35px;
    border: 1px solid grey;
    padding-left: 30px;
}
.two button{
    margin-left: 15px;
    width: 50px;
    height: 35px;
    border-radius: 5px;
    background-color: #b2d2e5; margin-top: 30px;
}
.three{
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
}
.search-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    /* flex-wrap: wrap; */
}

.search-item {
    display: flex;
    align-items: center;
}

.search-item label {
    margin-right: 8px;
    color: #666;
    white-space: nowrap;
}

.search-item select,
.search-item input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    min-width: 180px;
}

.search-item input[type="datetime-local"] {
    min-width: 200px;
}

.search-button {
    background: #4a90e2;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.search-button:hover {
    background: #357abd;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

th {
    background: #f8f9fa;
    color: #333;
    font-weight: 600;
}

tr:hover {
    background: #f5f7fa;
}

.action-buttons {
    display: flex;
    gap: 8px;
}

.edit-btn, .delete-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.edit-btn {
    background: #4a90e2;
    color: white;
}

.delete-btn {
    background: #dc3545;
    color: white;
}

.edit-btn:hover {
    background: #357abd;
}

.delete-btn:hover {
    background: #c82333;
}

.status-0 {
    color: #28a745;
}

.status-1 {
    color: #ffc107; 
}
.footer{
    width: 100%;
    height: 50px;
  /* background-color: #272626; */
  border: 1px solid grey;
   text-align: center;
   /* margin-top: 30px; */
   line-height: 50px;
}
/* 右边部分 END */

图片展示：


屏幕截图 2025-03-17 122445.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2025-03-17
    用户表示他主要做Flutter开发，已经完成了一些项目，但感觉只掌握了基础的UI开发，对更深层的内容不了解，询问应...
    myjourney阅读 27评论 0赞 0
  • 2025-03-17
    一、应用场景 app冷启动/热启动-有广告需求，就打开广告页，没有的话就去登录或者主页 华为有广告业务，但是我们不...
    啊是是是_a74f阅读 22评论 0赞 0
  • 2025-03-17
    **有趣的测量——探索不规则物体的体积** --- ### **教学目标** 1. 理解不规则物体体积的测量原理，...
    吴国花阅读 65评论 0赞 0
  • 2025-03-17
    连着三天晚上都做梦，第一天是在山上遇到警察断案，第二天是在文具店里找哪吒的盲盒却被妈妈催得很着急，第三天是什么呢，...
    扶云浅出阅读 27评论 0赞 0
  • 2025-03-17
    翡翠店 到某处旅游，导游带我们到一家翡翠店。店里的老板问我们这些游客，是不是之前在别的店里买过翡翠，并且用火烧缠绕...
    小小莹儿阅读 22评论 0赞 0