WEB05

作業(yè)分析

需要實現(xiàn)圖片中的網(wǎng)頁，使用html標(biāo)簽，css層疊樣式表，js。


登錄頁面.png

菜單管理.png

個人中心.png

代碼實現(xiàn)

1.登錄頁面

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陸頁面</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/sign.css">
</head>
<body>
    <div class="bj">
        <div class="box">
            <div class="left" >
                 
                    <div class="nr">
                        <div id="shang">
                            <div class="wz">django-vue-lyadmin pro版</div>
                           <div class="wzx">Vue3 + Django4.x 易于DIY+低代碼開發(fā)平臺</div>
                     </div>
                        <div id="xia">
                            <div class="wzy">Copyright ? 2022 django-vue-lyadmin All rights reserved.</div>
                        </div>
                    </div>
            </div>
            <div class="right">
                    <div class="dl">
                        <div class="bt">
                            <img src="./img/bang.png" alt="">
                            <h1> lyadmin后臺管理系統(tǒng)</h1>
                        </div>
                       
                       <div>
                            <label for="account" id="a">賬號登錄</label>
                       </div>
                       <div class="zhanghao">
                            <input type="text" id="account" placeholder="請輸入賬號">
                            <select name="" id="role">
                            <option value="admin">管理人員</option>
                            <option value="admin">工作人員</option>
                            </select>
                       </div>
                       <div class="mima">
                                 <input type="password" id="mm" placeholder="請輸入密碼">
                       </div>
                       <div class="yzm">
                                    <input type="text" id="captcha" placeholder="驗證碼">
                                    <span class="captcha-code"></span>
                       </div>
                       <button type="submit" class="denglu">登錄</button>
                       <div class="other-login">
                                    <span class="divider"></span>
                                    <span>其他登錄方式</span>
                                    <span class="divider"></span>
                      </div>
                      <div class="wxyp">
                        <img src="./img/wx.png" alt="微信登錄" class="wx">
                      </div>
                    </div>
            </div>  
        </div>
    </div>
    
    
</body>
</html>


.bj{
    width: 100%;
    height: 100%;
    /* background-color:red; */
    
     /* text-align: left; */
     /* float: left; */
     /* justify-content: center; */
     /* align-items: center; */
}


    .box{
    display: flex;

}



    .left{  
    /* background-color: rgb(49, 185, 70); */

 width: 40rem;
 height: 69rem;

    background-image: url("../img/auth_banner.jpg");
    background-size: cover;


      display: flex; 
    justify-content: center;
     align-items: center;
}
.nr{
    width: 40rem;
    height: 68.5rem;
    /* background-color: blueviolet; */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
     gap: 54rem;
}


#shang{
    width: 40rem;
    height: 10rem;
    /* background-color: aqua; */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
       padding: 3.5rem;
}
.wz{
    color: aliceblue;
    font-size: 2.5rem;
}
.wzx{
    color: gray;
    font-size: 1.5rem;
}

#xia{
    width: 40rem;
    height: 5rem;
    /* background-color: brown; */

       padding: 1.5rem;
 }
.wzy{
    color: aliceblue;
    font-size: 1.35rem;
}

.right{
     /* background-color: blue; */

    width:90rem;
    height: 69rem;
     
    display: flex;
    justify-content: center;
   align-items: center;
}
.dl{
    width: 40rem;
    height: 45rem;
    /* background-color: brown; */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
   align-items: center;
   gap: 2rem;
}
.bt{
    display: flex;
    justify-content: center;
   align-items: center;
}
#a{
    font-size: 1.5rem;
}
.zhanghao{

    display: flex;
    
}
#account{
    width: 15rem;
    height: 2rem;
    font-size: 1.5rem;
}
#role{
    width: auto;
    height: 2rem;
}
#mm,#captcha{
    width: 23rem;
    height: 2rem;
    font-size: 1.5rem;

}
.denglu{
    width: 23rem;
    height: auto;
    color: aliceblue;
    background-color: rgb(57, 57, 231);
    border: none;
    outline: none;
    border-radius: 20px;
    cursor: pointer;
}
.other-login {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 10px;
  }
.divider{
    width: 100px;
    height: 1px;
    background-color: #ccc;
}
.wx{
    width: 4rem;
    height: 4rem;
    border: none;
    outline: none;
    border-radius: 100%;
}

2.菜單頁面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>django-vue-lyadmin-pro后臺管理系統(tǒng) - 菜單管理</title>
    <link rel="stylesheet" href="./css/caidan2.css">
    <link rel="stylesheet" href="./js/caidan.js">
</head>
<body>
   <div class="container">
        <div class="sidebar">
            <div class="sidebar-header">django-vue-lyadmin-pro后臺管理系統(tǒng)</div>
            <ul class="sidebar-menu">
                <li>Dashboard
                    <ul class="sidebar-submenu">
                        <li>數(shù)據(jù)面板</li>
                    </ul>
                </li>
                <li>管理員管理</li>
                <li>用戶管理</li>
                <li>基礎(chǔ)管理</li>
                <li>商城管理</li>
                <li>流程管理</li>
                <li>功能大全</li>
                <li>個人中心</li>
                <li>系統(tǒng)監(jiān)控</li>
                <li>系統(tǒng)工具</li>
                <li>系統(tǒng)管理</li>
                <li>日志管理</li>
            </ul>
        </div>
        
        <div class="main-content">
            <div class="header">
                <div class="breadcrumb">Dashboard / 數(shù)據(jù)面板 / 菜單管理</div>
                <div class="user-info">
                    <span>管理員</span>
                </div>
            </div>
            
            <div class="card">
                <div class="card-title">文件管理</div>
                <div class="card-body">
                    <div class="search-bar">
                        <div class="search-item">
                            <label>關(guān)鍵詞</label>
                            <input type="text" placeholder="關(guān)鍵詞">
                        </div>
                        <div class="search-item">
                            <label>關(guān)鍵詞</label>
                            <input type="text" placeholder="關(guān)鍵詞">
                        </div>
                        <div class="search-item">
                            <label>創(chuàng)建/可見</label>
                            <input type="text" placeholder="創(chuàng)建/可見">
                        </div>
                        <div class="search-item">
                            <label>篩選率</label>
                            <input type="text" placeholder="篩選率">
                        </div>
                        <div class="search-item">
                            <label>狀態(tài)：</label>
                            <select>
                                <option>請選擇</option>
                                <option>啟用</option>
                                <option>禁用</option>
                            </select>
                        </div>
                        <button class="btn btn-primary">查詢</button>
                        <button class="btn btn-default">重置</button>
                        <button class="btn btn-primary">新增</button>
                    </div>
                    
                    <table class="table">
                        <thead>
                            <tr>
                                <th>序號</th>
                                <th>菜單名稱</th>
                                <th>圖標(biāo)</th>
                                <th>排序</th>
                                <th>路由地址</th>
                                <th>權(quán)限</th>
                                <th>創(chuàng)建/可見</th>
                                <th>狀態(tài)</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Dashboard</td>
                                <td>1</td>
                                <td>analysis</td>
                                <td>查詢</td>
                                <td>查詢</td>
                                <td>是</td>
                                <td><span class="status status-enabled">啟用</span></td>
                                <td>
                                    <span class="action-btn">編輯</span>
                                    <span class="action-btn">刪除</span>
                                    <span class="action-btn">按鈕配置</span>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>數(shù)據(jù)庫</td>
                                <td>2</td>
                                <td>lyDataPanel</td>
                                <td>查詢</td>
                                <td>查詢</td>
                                <td>是</td>
                                <td><span class="status status-enabled">啟用</span></td>
                                <td>
                                    <span class="action-btn">編輯</span>
                                    <span class="action-btn">刪除</span>
                                    <span class="action-btn">按鈕配置</span>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>管理員管理</td>
                                <td>3</td>
                                <td>adminManage</td>
                                <td>查詢</td>
                                <td>查詢</td>
                                <td>是</td>
                                <td><span class="status status-enabled">啟用</span></td>
                                <td>
                                    <span class="action-btn">編輯</span>
                                    <span class="action-btn">刪除</span>
                                    <span class="action-btn">按鈕配置</span>
                                </td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>用戶管理</td>
                                <td>6</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>是</td>
                                <td><span class="status status-enabled">啟用</span></td>
                                <td>
                                    <span class="action-btn">編輯</span>
                                    <span class="action-btn">刪除</span>
                                    <span class="action-btn">按鈕配置</span>
                                </td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>基礎(chǔ)管理</td>
                                <td>9</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>是</td>
                                <td><span class="status status-enabled">啟用</span></td>
                                <td>
                                    <span class="action-btn">編輯</span>
                                    <span class="action-btn">刪除</span>
                                    <span class="action-btn">按鈕配置</span>
                                </td>
                            </tr>
                            <tr>
                                <td>15</td>
                                <td>商城管理</td>
                                <td>180</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>是</td>
                                <td><span class="status status-enabled">啟用</span></td>
                                <td>
                                    <span class="action-btn">編輯</span>
                                    <span class="action-btn">刪除</span>
                                    <span class="action-btn">按鈕配置</span>
                                </td>
                            </tr>
                            <tr>
                                <td>26</td>
                                <td>流程管理</td>
                                <td>186</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>是</td>
                                <td><span class="status status-enabled">啟用</span></td>
                                <td>
                                    <span class="action-btn">編輯</span>
                                    <span class="action-btn">刪除</span>
                                    <span class="action-btn">按鈕配置</span>
                                </td>
                            </tr>
                            <tr>
                                <td>29</td>
                                <td>功能大全</td>
                                <td>188</td>
                                <td>lyFunctionSets</td>
                                <td>查詢</td>
                                <td>查詢</td>
                                <td>是</td>
                                <td><span class="status status-enabled">啟用</span></td>
                                <td>
                                    <span class="action-btn">編輯</span>
                                    <span class="action-btn">刪除</span>
                                    <span class="action-btn">按鈕配置</span>
                                </td>
                            </tr>
                            <tr>
                                <td>30</td>
                                <td>個人中心</td>
                                <td>866</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>是</td>
                                <td><span class="status status-enabled">啟用</span></td>
                                <td>
                                    <span class="action-btn">編輯</span>
                                    <span class="action-btn">刪除</span>
                                    <span class="action-btn">按鈕配置</span>
                                </td>
                            </tr>
                            <tr>
                                <td>33</td>
                                <td>系統(tǒng)監(jiān)控</td>
                                <td>888</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>是</td>
                                <td><span class="status status-enabled">啟用</span></td>
                                <td>
                                    <span class="action-btn">編輯</span>
                                    <span class="action-btn">刪除</span>
                                    <span class="action-btn">按鈕配置</span>
                                </td>
                            </tr>
                            <tr>
                                <td>39</td>
                                <td>系統(tǒng)工具</td>
                                <td>990</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>是</td>
                                <td><span class="status status-enabled">啟用</span></td>
                                <td>
                                    <span class="action-btn">編輯</span>
                                    <span class="action-btn">刪除</span>
                                    <span class="action-btn">按鈕配置</span>
                                </td>
                            </tr>
                            <tr>
                                <td>45</td>
                                <td>系統(tǒng)管理</td>
                                <td>990</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>是</td>
                                <td><span class="status status-enabled">啟用</span></td>
                                <td>
                                    <span class="action-btn">編輯</span>
                                    <span class="action-btn">刪除</span>
                                    <span class="action-btn">按鈕配置</span>
                                </td>
                            </tr>
                            <tr>
                                <td>57</td>
                                <td>日志管理</td>
                                <td>999</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>是</td>
                                <td><span class="status status-enabled">啟用</span></td>
                                <td>
                                    <span class="action-btn">編輯</span>
                                    <span class="action-btn">刪除</span>
                                    <span class="action-btn">按鈕配置</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
    background-color: #f0f2f5;
    color: #333;
    line-height: 1.5;
}

.container {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 220px;
    background-color: #001529;
    color: #fff;
    padding: 20px 0;
}

.sidebar-header {
    padding: 0 20px 20px;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #303030;
    margin-bottom: 10px;
}

.sidebar-menu {
    list-style: none;
}

.sidebar-menu li {
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.sidebar-menu li:hover {
    background-color: #1890ff;
}

.sidebar-submenu {
    list-style: none;
    padding-left: 20px;
    display: none;
}

.sidebar-submenu li {
    padding: 8px 20px;
}

.main-content {
    flex: 1;
    padding: 20px;
}

.header {
    background-color: #fff;
    padding: 16px 20px;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.breadcrumb {
    font-size: 14px;
}

.user-info {
    display: flex;
    align-items: center;
}

.card {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    margin-bottom: 20px;
}

.card-title {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 16px;
    font-weight: 500;
}

.card-body {
    padding: 20px;
}

.search-bar {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 10px;
}

.search-item {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

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

.search-item input, .search-item select {
    padding: 6px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    height: 32px;
}

.btn {
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    height: 32px;
    font-size: 14px;
}

.btn-primary {
    background-color: #1890ff;
    color: #fff;
}

.btn-default {
    background-color: #fff;
    border-color: #d9d9d9;
    color: #333;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th, .table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

.table th {
    background-color: #fafafa;
    font-weight: 500;
}

.table tr:hover {
    background-color: #fafafa;
}

.status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.status-enabled {
    background-color: #f6ffed;
    border: 1px solid #b7eb8f;
    color: #52c41a;
}

.status-disabled {
    background-color: #fff2f0;
    border: 1px solid #ffccc7;
    color: #ff4d4f;
}

.action-btn {
    color: #1890ff;
    cursor: pointer;
    margin-right: 8px;
}

.action-btn:hover {
    color: #40a9ff;
}

.action-btn:last-child {
    margin-right: 0;
}

  // 簡單的側(cè)邊欄菜單交互
  document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.sidebar-menu > li');
    
    menuItems.forEach(item => {
        if (item.querySelector('.sidebar-submenu')) {
            item.addEventListener('click', function(e) {
                const submenu = this.querySelector('.sidebar-submenu');
                if (submenu.style.display === 'block') {
                    submenu.style.display = 'none';
                } else {
                    submenu.style.display = 'block';
                }
            });
        }
    });
    
    // 模擬表格行的點擊效果
    const tableRows = document.querySelectorAll('.table tbody tr');
    tableRows.forEach(row => {
        row.addEventListener('click', function() {
            tableRows.forEach(r => r.style.backgroundColor = '');
            this.style.backgroundColor = '#f5f5f5';
        });
    });
    
    // 操作按鈕點擊事件
    const actionButtons = document.querySelectorAll('.action-btn');
    actionButtons.forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            const action = this.textContent.trim();
            alert(`執(zhí)行操作: ${action}`);
        });
    });
    
    // 搜索按鈕事件
    document.querySelector('.btn-primary').addEventListener('click', function() {
        alert('執(zhí)行查詢操作');
    });
    
    // 重置按鈕事件
    document.querySelector('.btn-default').addEventListener('click', function() {
        const inputs = document.querySelectorAll('.search-bar input, .search-bar select');
        inputs.forEach(input => {
            if (input.tagName === 'SELECT') {
                input.selectedIndex = 0;
            } else {
                input.value = '';
            }
        });
    });
    
    // 新增按鈕事件
    document.querySelectorAll('.btn-primary')[1].addEventListener('click', function() {
        alert('打開新增菜單對話框');
    });
});

3.個人中心

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>django-vue-lyadmin-pro后臺管理系統(tǒng)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #f0f2f5;
            color: #333;
        }
        
        .container {
            display: flex;
            min-height: 100vh;
        }
        
        .sidebar {
            width: 220px;
            background-color: #001529;
            color: #fff;
        }
        
        .sidebar-header {
            padding: 16px 20px;
            font-size: 18px;
            font-weight: bold;
            border-bottom: 1px solid #303030;
        }
        
        .menu {
            list-style: none;
        }
        
        .menu-item {
            padding: 12px 20px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .menu-item:hover {
            background-color: #1890ff;
        }
        
        .menu-item.active {
            background-color: #1890ff;
        }
        
        .main {
            flex: 1;
            padding: 20px;
        
        }
        .ss{
            display: flex;
        }
        
        .header {
            background-color: #fff;
            padding: 16px 20px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
        }
        
        .breadcrumb {
            font-size: 14px;
        }
        
        .user-info {
            font-size: 14px;
        }
        
        .card {
            background-color: #fff;
            width: 600px;
            height: 489px;
            border-radius: 2px;
            box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
            margin-bottom: 20px;
            max-width: 600px;
            
        }

        
        .card-header {
            padding: 16px 20px;
            border-bottom: 1px solid #f0f0f0;
            font-size: 16px;
            font-weight: 500;
        }
        
        .card-body {
            padding: 20px;
        }
        
        .profile-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .profile-table tr {
            border-bottom: 1px solid #f0f0f0;
        }
        
        .profile-table tr:last-child {
            border-bottom: none;
        }
        
        .profile-table td {
            padding: 16px 0;
            vertical-align: top;
        }
        
        .profile-table td:first-child {
            width: 100px;
            font-weight: 500;
        }
        
        .account-note {
            color: #999;
            font-size: 12px;
            margin-top: 4px;
        }
        
        .form-input {
            width: 100%;
            padding: 4px 11px;
            height: 32px;
            border: 1px solid #d9d9d9;
            border-radius: 2px;
            font-size: 14px;
        }
        
        .form-input:focus {
            border-color: #40a9ff;
            outline: 0;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
        
        .form-input[readonly] {
            background-color: #f5f5f5;
            cursor: not-allowed;
            color: rgba(0, 0, 0, 0.65);
        }
        
        .radio-group {
            display: flex;
            gap: 16px;
        }
        
        .radio-option {
            display: flex;
            align-items: center;
        }
        
        .radio-option input {
            margin-right: 6px;
        }
        
        .btn-save {
            height: 32px;
            padding: 4px 15px;
            font-size: 14px;
            border-radius: 2px;
            color: #fff;
            background-color: #1890ff;
            border: 1px solid #1890ff;
            cursor: pointer;
        }
        
        .btn-save:hover {
            background-color: #40a9ff;
            border-color: #40a9ff;
        }
        
        .required {
            color: #f5222d;
            margin-right: 4px;
        }
        .grzx{
            background-color: #f2eded7f;
            height: 400px;
            width: 300px;
            border-radius: 2px;
            box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
            margin-bottom: 20px;
            max-width: 600px;
            display: flex;
             flex-direction: column;
             justify-content: center;
            align-items: center;
            gap: 30px;
            
        }
        .tx{
            background-color: #1890ff;
            width: 60px;
            height: 60px;
            border-radius: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

        }
        .gly{
            font-size: 20px;
            font-weight: 800;
        }
        .a:hover{
            background-color: #1890ff;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <!-- 左側(cè)導(dǎo)航菜單 -->
        <div class="sidebar">
            <div class="sidebar-header">django-vue-lyadmin-pro后臺管理系統(tǒng)</div>
            <ul class="menu">
                <li class="menu-item">Dashboard</li>
                <li class="menu-item">管理員管理</li>
                <li class="menu-item">用戶管理</li>
                <li class="menu-item">基礎(chǔ)管理</li>
                <li class="menu-item">商城管理</li>
                <li class="menu-item">流程管理</li>
                <li class="menu-item">功能大全</li>
                <li class="menu-item" id="profile-menu">個人中心</li>
                <li class="menu-item">系統(tǒng)監(jiān)控</li>
                <li class="menu-item">系統(tǒng)工具</li>
                <li class="menu-item">系統(tǒng)管理</li>
                <li class="menu-item">日志管理</li>
            </ul>
        </div>
        
        <!-- 主內(nèi)容區(qū)域 -->
        <div class="main">
            <div class="header">
                <div class="breadcrumb"> 個人信息</div>
                <div class="user-info">admin</div>
            </div>
            
            <!-- 個人中心內(nèi)容 -->
            <div class="ss">
            <div class="card" id="profile-card">
                <div class="card-header">個人信息</div>
                <div class="card-body">
                    <table class="profile-table">
                        <tr>
                            <td>賬號</td>
                            <td>
                                <input type="text" class="form-input" value="admin" readonly>
                                <div class="account-note">賬號信息用于登錄，系統(tǒng)不允許修改</div>
                            </td>
                        </tr>
                        <tr>
                            <td><span class="required">*</span>姓名</td>
                            <td><input type="text" class="form-input" value="管理員"></td>
                        </tr>
                        <tr>
                            <td>電話</td>
                            <td><input type="text" class="form-input"></td>
                        </tr>
                        <tr>
                            <td>郵箱</td>
                            <td><input type="text" class="form-input"></td>
                        </tr>
                        <tr>
                            <td>性別</td>
                            <td>
                                <div class="radio-group">
                                    <label class="radio-option">
                                        <input type="radio" name="gender" value="male"> 男
                                    </label>
                                    <label class="radio-option">
                                        <input type="radio" name="gender" value="female"> 女
                                    </label>
                                    <label class="radio-option">
                                        <input type="radio" name="gender" value="unknown" checked> 未知
                                    </label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><button type="button" class="btn-save">保存</button></td>
                        </tr>
                    </table>
                </div>
               
            </div> 
            <div class="grzx">
                <div>
                    <div class="tx">頭像</div>
                    <div class="gly">管理員</div>
                </div>
                    <li class="a">賬號信息</li>
                    <li class="a">賬號密碼</li>
                    <li class="a">操作日志</li>
                   


            </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 獲取菜單項和個人中心卡片
            const profileMenu = document.getElementById('profile-menu');
            const profileCard = document.getElementById('profile-card');
            const menuItems = document.querySelectorAll('.menu-item');
            
            // 默認(rèn)顯示個人中心
            profileMenu.classList.add('active');
            profileCard.style.display = 'block';
            
            // 菜單點擊事件
            menuItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有菜單項的active類
                    menuItems.forEach(i => i.classList.remove('active'));
                    
                    // 給當(dāng)前點擊的菜單項添加active類
                    this.classList.add('active');
                    
                    // 如果是個人中心菜單，顯示個人中心卡片
                    if (this === profileMenu) {
                        profileCard.style.display = 'block';
                    } else {
                        profileCard.style.display = 'none';
                    }
                });
            });
            
            // 保存按鈕點擊事件
            const saveBtn = document.querySelector('.btn-save');
            saveBtn.addEventListener('click', function() {
                const nameInput = document.querySelector('.profile-table input[type="text"]:not([readonly])');
                const name = nameInput.value.trim();
                
                // 驗證姓名是否為空
                if (!name) {
                    alert('姓名不能為空');
                    nameInput.focus();
                    return;
                }
                
                // 獲取其他表單值
                const phone = document.querySelector('.profile-table input[placeholder="電話"]').value;
                const email = document.querySelector('.profile-table input[placeholder="郵箱"]').value;
                const gender = document.querySelector('.profile-table input[name="gender"]:checked').value;
                
                // 模擬保存操作
                alert(`保存成功！\n姓名: ${name}\n電話: ${phone}\n郵箱: ${email}\n性別: ${getGenderText(gender)}`);
                
                // 實際應(yīng)用中這里可以發(fā)送AJAX請求到服務(wù)器
                // saveProfile({ name, phone, email, gender });
            });
            
            // 獲取性別文本
            function getGenderText(value) {
                switch(value) {
                    case 'male': return '男';
                    case 'female': return '女';
                    default: return '未知';
                }
            }
            
            // 模擬保存到服務(wù)器的函數(shù)
            function saveProfile(data) {
                // 實際應(yīng)用中這里應(yīng)該是fetch或axios請求
                console.log('保存數(shù)據(jù):', data);
                 fetch('/api/profile', {
                 method: 'POST',
                 headers: {
                         'Content-Type': 'application/json'
                     },
                     body: JSON.stringify(data)
                })
                 .then(response => response.json())
                 .then(data => {
                     alert('保存成功');
                })
                 .catch(error => {
                     alert('保存失敗');
                });
            }
        });
    </script>
</body>
</html>

個人總結(jié)

登錄頁面沒有寫js，因為我還沒有掌握，后面我會繼續(xù)努力學(xué)習(xí)的，菜單頁面和個人中心頁面是AI生成，使用AI確實可以高速寫出代碼，但是計算機(jī)專業(yè)的我還是應(yīng)該把技術(shù)掌握在自己手里，后面我會勤加練習(xí)。

?著作權(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)容

  • 用兩張圖告訴你，為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料？ 從這篇文章中你...
    hw1212閱讀 13,929評論 2贊 59
  • 前言 面試題是永遠(yuǎn)都準(zhǔn)備不完的?。。。?！ 前端常見的一些問題 1.前端性能優(yōu)化手段？ 1. 盡可能使用雪碧圖 2....
    Rebirth_Wang閱讀 939評論 0贊 0
  • 學(xué)會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,443評論 2贊 66
  • 第二章 偵查 作者：Gilberto Najera-Gutierrez 譯者：飛龍 協(xié)議：CC BY-NC-SA ...
    布客飛龍閱讀 3,933評論 0贊 52
  • 課程目標(biāo): 學(xué)會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握C...
    桃花蘭島主閱讀 610評論 0贊 1

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