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>設(shè)置</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>財務(wù)管理</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>云端中國城管理系統(tǒng)</div><hr>
        <div class="s"><h style="font-weight: 600;">云端中國城</h>  /  主播管理</div><hr>
        <div class="main">
            <div class="one">
                <div class="wzsj">網(wǎng)站數(shù)據(jù)大屏</div>
                <div class="wzsz">網(wǎng)站設(shè)置-主頁</div>
                <div class="mmsz">設(shè)置-秘密設(shè)置</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>審核狀態(tài):</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>關(guān)鍵字:</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>審核狀態(tài)</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">
            云端中國城·延安大學(xué)版權(quán)所有
        </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
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 用戶表示他主要做Flutter開發(fā)，已經(jīng)完成了一些項目，但感覺只掌握了基礎(chǔ)的UI開發(fā)，對更深層的內(nèi)容不了解，詢問應(yīng)...
    myjourney閱讀 45評論 0贊 0
  • 一、應(yīng)用場景 app冷啟動/熱啟動-有廣告需求，就打開廣告頁，沒有的話就去登錄或者主頁 華為有廣告業(yè)務(wù)，但是我們不...
    啊是是是_a74f閱讀 35評論 0贊 0
  • **有趣的測量——探索不規(guī)則物體的體積** --- ### **教學(xué)目標** 1. 理解不規(guī)則物體體積的測量原理，...
    吳國花閱讀 77評論 0贊 0
  • 連著三天晚上都做夢，第一天是在山上遇到警察斷案，第二天是在文具店里找哪吒的盲盒卻被媽媽催得很著急，第三天是什么呢，...
    扶云淺出閱讀 35評論 0贊 0
  • 翡翠店 到某處旅游，導(dǎo)游帶我們到一家翡翠店。店里的老板問我們這些游客，是不是之前在別的店里買過翡翠，并且用火燒纏繞...
    小小瑩兒閱讀 27評論 0贊 0

友情鏈接更多精彩內(nèi)容