使用HTML、css、Js实现管理系统企业站网页

代码展示
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>企业管理系统</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="login-container" id="loginPage">
<div class="login-box">
<h2 class="login-title">企业管理系统</h2>
<form class="login-form" id="loginForm">
<input type="text" placeholder="用户名" required>
<input type="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
</div>
</div>

<!-- 主系统页面 -->
<div class="main-container" id="mainPage">
    <header class="header">
        <div class="logo">企业管理系统</div>
        <div class="user-info">
            <span>管理员</span>
            <button class="btn btn-danger" onclick="logout()">退出</button>
        </div>
    </header>
    <div class="content">
        <div class="sidebar">
            <div class="menu-item active" onclick="switchMenu(this, 'dashboard')">控制台</div>
            <div class="menu-item" onclick="switchMenu(this, 'users')">用户管理</div>
            <div class="menu-item" onclick="switchMenu(this, 'products')">产品管理</div>
            <div class="menu-item" onclick="switchMenu(this, 'orders')">订单管理</div>
            <div class="menu-item" onclick="switchMenu(this, 'settings')">系统设置</div>
        </div>
        <div class="main-content">
            <!-- 控制台页面 -->
            <div id="dashboard" class="page-content">
                <div class="dashboard">
                    <div class="card">
                        <div class="card-title">总用户数</div>
                        <div class="card-value">1,234</div>
                    </div>
                    <div class="card">
                        <div class="card-title">今日订单</div>
                        <div class="card-value">56</div>
                    </div>
                    <div class="card">
                        <div class="card-title">本月收入</div>
                        <div class="card-value">¥89,432</div>
                    </div>
                    <div class="card">
                        <div class="card-title">待处理事项</div>
                        <div class="card-value">12</div>
                    </div>
                </div>
                <div class="table-container">
                    <h3>最近订单</h3>
                    <table>
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>客户名称</th>
                                <th>金额</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>ORD20240315001</td>
                                <td>张三</td>
                                <td>¥1,234</td>
                                <td>已完成</td>
                                <td>
                                    <button class="btn btn-primary">查看</button>
                                    <button class="btn btn-danger">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>ORD20240315002</td>
                                <td>李四</td>
                                <td>¥2,345</td>
                                <td>处理中</td>
                                <td>
                                    <button class="btn btn-primary">查看</button>
                                    <button class="btn btn-danger">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 其他页面内容 -->
            <div id="users" class="page-content" style="display: none;">
                <h2>用户管理</h2>
                <!-- 用户管理内容 -->
            </div>
            <div id="products" class="page-content" style="display: none;">
                <h2>产品管理</h2>
                <!-- 产品管理内容 -->
            </div>
            <div id="orders" class="page-content" style="display: none;">
                <h2>订单管理</h2>
                <!-- 订单管理内容 -->
            </div>
            <div id="settings" class="page-content" style="display: none;">
                <h2>系统设置</h2>
                <!-- 系统设置内容 -->
            </div>
        </div>
    </div>
</div>
<script src="script.js"></script>

</body>
</html>

/* 右键菜单样式 */
.context-menu {
position: fixed;
background-color: white;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
min-width: 150px;
z-index: 1000;
padding: 4px 0;
}

.menu-item {
padding: 8px 16px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
color: #333;
font-size: 14px;
transition: background-color 0.2s;
}

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

.has-submenu {
position: relative;
}

.submenu {
position: absolute;
background-color: white;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
min-width: 150px;
left: 100%;
top: 0;
display: none;
}

.submenu-arrow {
margin-left: 8px;
color: #666;
font-size: 12px;
}

/* 动画效果 */
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}

.context-menu {
animation: fadeIn 0.2s ease-out;
}

/* 基础样式重置 */

{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Microsoft YaHei', sans-serif;
background-color: #f0f2f5;
color: #333;
}

/* 登录页面样式 */
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

.login-box {
background: white;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
width: 400px;
transform: translateY(0);
transition: transform 0.3s ease;
}

.login-box:hover {
transform: translateY(-5px);
}

.login-title {
text-align: center;
margin-bottom: 30px;
color: #1890ff;
font-size: 24px;
font-weight: bold;
}

.login-form input {
width: 100%;
padding: 12px;
margin-bottom: 20px;
border: 1px solid #d9d9d9;
border-radius: 4px;
font-size: 14px;
transition: all 0.3s ease;
}

.login-form input:focus {
border-color: #1890ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
outline: none;
}

.login-form button {
width: 100%;
padding: 12px;
background: #1890ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
}

.login-form button:hover {
background: #40a9ff;
transform: translateY(-2px);
}

/* 主系统页面样式 */
.main-container {
display: none;
min-height: 100vh;
}

.header {
background: white;
padding: 0 20px;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}

.logo {
font-size: 20px;
color: #1890ff;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

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

.content {
display: flex;
min-height: calc(100vh - 60px);
margin-top: 60px;
}

.sidebar {
width: 200px;
background: white;
padding: 20px 0;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
position: fixed;
height: calc(100vh - 60px);
overflow-y: auto;
}

.menu-item {
padding: 12px 20px;
cursor: pointer;
transition: all 0.3s;
position: relative;
overflow: hidden;
}

.menu-item:hover {
background: #e6f7ff;
color: #1890ff;
padding-left: 25px;
}

.menu-item.active {
background: #e6f7ff;
color: #1890ff;
border-right: 3px solid #1890ff;
}

.menu-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 3px;
background: #1890ff;
transform: scaleY(0);
transition: transform 0.3s;
}

.menu-item:hover::before {
transform: scaleY(1);
}

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

/* 卡片样式 */
.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 20px;
}

.card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.card-title {
font-size: 16px;
color: #666;
margin-bottom: 10px;
}

.card-value {
font-size: 24px;
color: #1890ff;
font-weight: bold;
}

/* 表格样式 */
.table-container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow-x: auto;
}

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

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

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

tr:hover {
background: #fafafa;
}

/* 按钮样式 */
.btn {
padding: 8px 16px;
border-radius: 4px;
border: none;
cursor: pointer;
margin-right: 8px;
transition: all 0.3s ease;
}

.btn:hover {
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

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

.btn-primary:hover {
background: #40a9ff;
}

.btn-danger {
background: #ff4d4f;
color: white;
}

.btn-danger:hover {
background: #ff7875;
}

/* 响应式设计 */
@media screen and (max-width: 1200px) {
.dashboard {
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width: 768px) {
.sidebar {
width: 160px;
}
.main-content {
margin-left: 160px;
}
.dashboard {
grid-template-columns: 1fr;
}
}

@media screen and (max-width: 480px) {
.sidebar {
width: 100%;
position: relative;
height: auto;
}
.main-content {
margin-left: 0;
}
.content {
flex-direction: column;
}
.login-box {
width: 90%;
margin: 0 20px;
}
}

/* 动画效果 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.page-content {
animation: fadeIn 0.3s ease;
}

/* 滚动条美化 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}

::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}

::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
background: #555;
}
效果展示

屏幕截图 2025-05-06 182935.png

使用HTML、css、Js实现管理系统企业站网页

使用HTML、css、Js实现管理系统企业站网页

相关阅读更多精彩内容

友情链接更多精彩内容