<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>企业管理系统</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
background: #f0f2f5;
}
/* 顶部导航栏 */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: flex;
align-items: center;
padding: 0 20px;
z-index: 1000;
}
.logo {
font-size: 20px;
font-weight: bold;
color: #1890ff;
}
.nav-right {
margin-left: auto;
display: flex;
align-items: center;
}
.user-info {
display: flex;
align-items: center;
cursor: pointer;
}
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: #1890ff;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
}
/* 侧边栏 */
.sidebar {
position: fixed;
left: 0;
top: 60px;
bottom: 0;
width: 200px;
background: #fff;
box-shadow: 2px 0 8px rgba(0,0,0,0.1);
padding: 20px 0;
overflow-y: auto;
}
.menu-item {
padding: 12px 20px;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
}
.menu-item:hover {
background: #e6f7ff;
color: #1890ff;
}
.menu-item.active {
background: #e6f7ff;
color: #1890ff;
border-right: 3px solid #1890ff;
}
.menu-item i {
margin-right: 8px;
}
/* 主要内容区域 */
.main-content {
margin-left: 200px;
margin-top: 60px;
padding: 20px;
min-height: calc(100vh - 60px);
}
.page-header {
margin-bottom: 20px;
}
.page-title {
font-size: 24px;
color: #333;
}
.card {
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
padding: 20px;
margin-bottom: 20px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.stat-card {
background: #fff;
padding: 20px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.stat-card h3 {
color: #666;
font-size: 14px;
margin-bottom: 8px;
}
.stat-card .number {
font-size: 24px;
font-weight: bold;
color: #1890ff;
}
/* 表格样式 */
.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #e8e8e8;
}
.table th {
background: #fafafa;
font-weight: 500;
}
.table tr:hover {
background: #fafafa;
}
/* 按钮样式 */
.btn {
padding: 8px 16px;
border-radius: 4px;
border: none;
cursor: pointer;
transition: all 0.3s;
}
.btn-primary {
background: #1890ff;
color: #fff;
}
.btn-primary:hover {
background: #40a9ff;
}
/* 响应式设计 */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
transition: transform 0.3s;
}
.sidebar.active {
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
.stats-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">企业管理系统</div>
<div class="nav-right">
<div class="user-info">
<div class="avatar">A</div>
<span>管理员</span>
</div>
</div>
</nav>
<!-- 侧边栏 -->
<div class="sidebar">
<div class="menu-item active">
<i>📊</i>
<span>仪表盘</span>
</div>
<div class="menu-item">
<i>👥</i>
<span>用户管理</span>
</div>
<div class="menu-item">
<i>📦</i>
<span>产品管理</span>
</div>
<div class="menu-item">
<i>📝</i>
<span>订单管理</span>
</div>
<div class="menu-item">
<i>📈</i>
<span>数据统计</span>
</div>
<div class="menu-item">
<i>⚙️</i>
<span>系统设置</span>
</div>
</div>
<!-- 主要内容区域 -->
<div class="main-content">
<div class="page-header">
<h1 class="page-title">仪表盘</h1>
</div>
<!-- 统计卡片 -->
<div class="stats-grid">
<div class="stat-card">
<h3>总用户数</h3>
<div class="number">1,234</div>
</div>
<div class="stat-card">
<h3>今日订单</h3>
<div class="number">56</div>
</div>
<div class="stat-card">
<h3>本月收入</h3>
<div class="number">¥89,432</div>
</div>
<div class="stat-card">
<h3>待处理事项</h3>
<div class="number">12</div>
</div>
</div>
<!-- 数据表格 -->
<div class="card">
<h2>最近订单</h2>
<table class="table">
<thead>
<tr>
<th>订单号</th>
<th>客户名称</th>
<th>订单金额</th>
<th>订单状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>ORD-2024-001</td>
<td>张三</td>
<td>¥1,234</td>
<td>已完成</td>
<td>
<button class="btn btn-primary">查看详情</button>
</td>
</tr>
<tr>
<td>ORD-2024-002</td>
<td>李四</td>
<td>¥2,345</td>
<td>处理中</td>
<td>
<button class="btn btn-primary">查看详情</button>
</td>
</tr>
<tr>
<td>ORD-2024-003</td>
<td>王五</td>
<td>¥3,456</td>
<td>待付款</td>
<td>
<button class="btn btn-primary">查看详情</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
// 侧边栏菜单切换
document.querySelectorAll('.menu-item').forEach(item => {
item.addEventListener('click', function() {
// 移除其他菜单项的active类
document.querySelectorAll('.menu-item').forEach(i => {
i.classList.remove('active');
});
// 为当前点击的菜单项添加active类
this.classList.add('active');
});
});
// 响应式侧边栏
const toggleSidebar = () => {
const sidebar = document.querySelector('.sidebar');
sidebar.classList.toggle('active');
};
// 模拟数据更新
function updateStats() {
const numbers = document.querySelectorAll('.number');
numbers.forEach(number => {
const currentValue = parseInt(number.textContent.replace(/[^0-9]/g, ''));
const newValue = currentValue + Math.floor(Math.random() * 10);
number.textContent = number.textContent.includes('¥')
? `¥${newValue.toLocaleString()}`
: newValue.toLocaleString();
});
}
// 每5秒更新一次统计数据
setInterval(updateStats, 5000);
// 表格行点击事件
document.querySelectorAll('.table tr').forEach(row => {
row.addEventListener('click', function(e) {
if (e.target.tagName !== 'BUTTON') {
console.log('点击了行:', this.cells[0].textContent);
}
});
});
</script>
</body>
</html>
file:///E:/CloudProgram2024/01.web/homework/lesson.07/demo02.html
