协议设计Zz5555555

Zz5-XDU

已于 2024-09-09 11:53:13 修改

阅读量321

点赞数 3

文章标签： segmentfault

于 2024-09-02 08:37:40 首次发布

本文链接：https://blog.csdn.net/weixin_43360895/article/details/141802683

版权

根据你的需求，我将为你设计一个简洁美观的前端界面，实现主菜单和子菜单的动态展开效果。前端代码将使用 HTML、CSS 和 JavaScript 实现。

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECSP 协议管理平台</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="header">
        <h1>ECSP 协议管理平台</h1>
        <div class="user-info">
            <span>Admin</span>
            <button class="logout-btn">退出</button>
        </div>
    </div>
    <div class="container">
        <div class="sidebar">
            <ul class="menu">
                <li class="menu-item" onclick="toggleSubmenu('protocol-design')">协议设计</li>
                <ul id="protocol-design" class="submenu">
                    <li>已发布协议</li>
                    <li>待评审协议</li>
                </ul>
                <li class="menu-item" onclick="toggleSubmenu('device-list')">设备列表</li>
                <ul id="device-list" class="submenu">
                    <li>未知设备</li>
                    <li>管理中设备</li>
                </ul>
            </ul>
        </div>
        <div class="content">
            <h2>协议设计</h2>
            <form class="protocol-form">
                <label>报文类型</label>
                <input type="text" placeholder="请输入报文类型">
                <label>类型值</label>
                <input type="text" placeholder="请输入类型值">
                <label>支持设备类型</label>
                <select>
                    <option>请选择支持设备</option>
                </select>
                <label>版本号</label>
                <input type="text" placeholder="请输入版本号">
                <label>依赖协议版本</label>
                <select>
                    <option>无</option>
                </select>
                <button type="submit">下一步</button>
            </form>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 样式 (styles.css)

body {
    font-family: Arial, sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.header {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #2c3e50;
    color: white;
}

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

.logout-btn {
    margin-left: 10px;
    padding: 5px 10px;
    background-color: #e74c3c;
    color: white;
    border: none;
    cursor: pointer;
}

.container {
    display: flex;
    height: calc(100vh - 50px);
}

.sidebar {
    width: 200px;
    background-color: #ecf0f1;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.menu {
    list-style: none;
    padding: 0;
}

.menu-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #bdc3c7;
    transition: background 0.3s;
}

.menu-item:hover {
    background-color: #bdc3c7;
}

.submenu {
    list-style: none;
    padding: 0;
    margin-top: 5px;
    display: none;
    padding-left: 20px;
}

.submenu li {
    padding: 5px 0;
}

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

.protocol-form {
    display: flex;
    flex-direction: column;
}

.protocol-form label {
    margin-top: 10px;
}

.protocol-form input, .protocol-form select {
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
}

.protocol-form button {
    margin-top: 20px;
    padding: 10px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.protocol-form button:hover {
    background-color: #2980b9;
}

JavaScript (script.js)

function toggleSubmenu(id) {
    const submenu = document.getElementById(id);
    if (submenu.style.display === 'block') {
        submenu.style.display = 'none';
    } else {
        submenu.style.display = 'block';
    }
}