WEB05

作业分析

需要实现图片中的网页，使用html标签，css层叠样式表，js。


登录页面.png

菜单管理.png

个人中心.png

代码实现

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+低代码开发平台</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后台管理系统</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后台管理系统 - 菜单管理</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后台管理系统</div>
            <ul class="sidebar-menu">
                <li>Dashboard
                    <ul class="sidebar-submenu">
                        <li>数据面板</li>
                    </ul>
                </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">
                <div class="breadcrumb">Dashboard / 数据面板 / 菜单管理</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>关键词</label>
                            <input type="text" placeholder="关键词">
                        </div>
                        <div class="search-item">
                            <label>关键词</label>
                            <input type="text" placeholder="关键词">
                        </div>
                        <div class="search-item">
                            <label>创建/可见</label>
                            <input type="text" placeholder="创建/可见">
                        </div>
                        <div class="search-item">
                            <label>筛选率</label>
                            <input type="text" placeholder="筛选率">
                        </div>
                        <div class="search-item">
                            <label>状态：</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>图标</th>
                                <th>排序</th>
                                <th>路由地址</th>
                                <th>权限</th>
                                <th>创建/可见</th>
                                <th>状态</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>数据库</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>基础管理</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>系统监控</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>系统工具</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>系统管理</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;
}

  // 简单的侧边栏菜单交互
  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(`执行操作: ${action}`);
        });
    });
    
    // 搜索按钮事件
    document.querySelector('.btn-primary').addEventListener('click', function() {
        alert('执行查询操作');
    });
    
    // 重置按钮事件
    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后台管理系统</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">
        <!-- 左侧导航菜单 -->
        <div class="sidebar">
            <div class="sidebar-header">django-vue-lyadmin-pro后台管理系统</div>
            <ul class="menu">
                <li class="menu-item">Dashboard</li>
                <li class="menu-item">管理员管理</li>
                <li class="menu-item">用户管理</li>
                <li class="menu-item">基础管理</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">系统监控</li>
                <li class="menu-item">系统工具</li>
                <li class="menu-item">系统管理</li>
                <li class="menu-item">日志管理</li>
            </ul>
        </div>
        
        <!-- 主内容区域 -->
        <div class="main">
            <div class="header">
                <div class="breadcrumb"> 个人信息</div>
                <div class="user-info">admin</div>
            </div>
            
            <!-- 个人中心内容 -->
            <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">账号信息用于登录，系统不允许修改</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');
            
            // 默认显示个人中心
            profileMenu.classList.add('active');
            profileCard.style.display = 'block';
            
            // 菜单点击事件
            menuItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有菜单项的active类
                    menuItems.forEach(i => i.classList.remove('active'));
                    
                    // 给当前点击的菜单项添加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)}`);
                
                // 实际应用中这里可以发送AJAX请求到服务器
                // saveProfile({ name, phone, email, gender });
            });
            
            // 获取性别文本
            function getGenderText(value) {
                switch(value) {
                    case 'male': return '男';
                    case 'female': return '女';
                    default: return '未知';
                }
            }
            
            // 模拟保存到服务器的函数
            function saveProfile(data) {
                // 实际应用中这里应该是fetch或axios请求
                console.log('保存数据:', 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>

个人总结

登录页面没有写js，因为我还没有掌握，后面我会继续努力学习的，菜单页面和个人中心页面是AI生成，使用AI确实可以高速写出代码，但是计算机专业的我还是应该把技术掌握在自己手里，后面我会勤加练习。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • Android - 收藏集
    用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你...
    hw1212阅读 14,519评论 2赞 59
  • web前端面试题
    前言 面试题是永远都准备不完的！！！！！ 前端常见的一些问题 1.前端性能优化手段？ 1. 尽可能使用雪碧图 2....
    Rebirth_Wang阅读 4,388评论 0赞 0
  • 前端之路——笔记（基础css）
    学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 11,445评论 2赞 66
  • Kali Linux Web 渗透测试秘籍 第二章 侦查
    第二章 侦查 作者：Gilberto Najera-Gutierrez 译者：飞龙 协议：CC BY-NC-SA ...
    布客飞龙阅读 9,214评论 0赞 52
  • CSS
    课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    桃花兰岛主阅读 3,627评论 0赞 1

友情链接更多精彩内容