<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>
<title>响应式后台管理系统</title>
<style>
/* ===== 全局重置与变量 ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--header-height: 56px;
--sidebar-width: 240px;
--primary: #1677ff;
--bg-body: #f5f5f5;
--bg-card: #ffffff;
--border-color: #e8e8e8;
--text-primary: #1d2129;
--text-secondary: #4e5969;
--radius: 8px;
--transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
background: var(--bg-body);
color: var(--text-primary);
-webkit-tap-highlight-color: transparent;
/* 安全区适配 */
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
/* ===== 整体布局（Flex） ===== */
.layout {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
/* 顶栏 */
.header {
height: var(--header-height);
background: #001529;
color: #fff;
display: flex;
align-items: center;
padding: 0 16px;
flex-shrink: 0;
z-index: 100;
gap: 12px;
}
.menu-btn {
display: none; /* 桌面端隐藏 */
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
padding: 8px;
line-height: 1;
border-radius: 4px;
}
.logo {
font-weight: 700;
font-size: 18px;
white-space: nowrap;
}
.header-right {
margin-left: auto;
display: flex;
align-items: center;
gap: 16px;
}
.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: #1677ff;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
}
/* 主体区域：侧边栏 + 内容 */
.body {
display: flex;
flex: 1;
min-height: 0;
position: relative;
}
/* 侧边栏 */
.sidebar {
width: var(--sidebar-width);
background: #fff;
border-right: 1px solid var(--border-color);
display: flex;
flex-direction: column;
padding: 16px 0;
overflow-y: auto;
flex-shrink: 0;
transition: transform var(--transition);
z-index: 90;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
color: var(--text-secondary);
text-decoration: none;
font-size: 15px;
transition: background 0.15s;
cursor: pointer;
min-height: 48px; /* 触控友好 */
}
.nav-item.active,
.nav-item:hover {
background: #f0f5ff;
color: var(--primary);
font-weight: 500;
}
.nav-icon {
width: 20px;
text-align: center;
font-size: 16px;
}
/* 遮罩层 */
.overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 80;
transition: opacity var(--transition);
}
/* 主内容区 */
.main {
flex: 1;
overflow-y: auto;
padding: 20px;
background: var(--bg-body);
}
/* ===== 仪表盘卡片网格（Grid） ===== */
.card-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.stat-card {
background: var(--bg-card);
border-radius: var(--radius);
padding: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.stat-title {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.stat-value {
font-size: 28px;
font-weight: 700;
color: var(--text-primary);
}
.stat-sub {
font-size: 13px;
color: #52c41a;
margin-top: 4px;
}
/* ===== 表格响应式 ===== */
.table-wrapper {
background: var(--bg-card);
border-radius: var(--radius);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
overflow-x: auto; /* 移动端横向滚动 */
-webkit-overflow-scrolling: touch;
}
.data-table {
width: 100%;
min-width: 600px; /* 确保出现横向滚动条 */
border-collapse: collapse;
white-space: nowrap;
}
.data-table th,
.data-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid var(--border-color);
font-size: 14px;
min-width: 100px;
}
.data-table th {
background: #fafafa;
font-weight: 600;
color: var(--text-secondary);
position: sticky;
top: 0;
}
/* 固定首列（复选框列） */
.data-table th:first-child,
.data-table td:first-child {
position: sticky;
left: 0;
background: #fff;
z-index: 2;
min-width: 50px;
text-align: center;
}
.data-table th:first-child {
background: #fafafa;
}
.data-table tr:hover td {
background: #fafafa;
}
.data-table td:first-child {
background: #fff;
}
.data-table tr:hover td:first-child {
background: #fafafa;
}
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 12px;
background: #e6f7ff;
color: #1677ff;
}
.badge.success {
background: #f6ffed;
color: #52c41a;
}
/* 移动端卡片替代表格（备用，示例保留横向滚动作为主要方案） */
.mobile-card-list {
display: none;
}
/* ===== 浮动操作按钮 ===== */
.fab {
display: none; /* 桌面端隐藏 */
position: fixed;
right: 20px;
bottom: 24px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--primary);
color: #fff;
border: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
font-size: 28px;
cursor: pointer;
z-index: 50;
align-items: center;
justify-content: center;
transition:
transform 0.2s,
box-shadow 0.2s;
}
.fab:active {
transform: scale(0.95);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* ===== 表单/搜索框 ===== */
.search-bar {
display: flex;
align-items: center;
background: var(--bg-card);
border-radius: var(--radius);
padding: 12px 16px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
gap: 12px;
}
.search-input {
flex: 1;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 10px 14px;
font-size: 15px;
min-height: 44px; /* 触控尺寸 ≥ 44px */
outline: none;
transition: border-color 0.2s;
}
.search-input:focus {
border-color: var(--primary);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
border-radius: 6px;
font-size: 15px;
border: none;
cursor: pointer;
font-weight: 500;
min-height: 44px; /* 触控友好 */
min-width: 44px;
transition: opacity 0.2s;
}
.btn-primary {
background: var(--primary);
color: #fff;
}
.btn:active {
opacity: 0.8;
}
/* ===== 响应式断点 ===== */
@media (max-width: 1024px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
/* 显示汉堡按钮 */
.menu-btn {
display: block;
}
/* 侧边栏变为抽屉 */
.sidebar {
position: fixed;
top: var(--header-height);
left: 0;
bottom: 0;
transform: translateX(-100%);
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
z-index: 100;
}
.sidebar.open {
transform: translateX(0);
}
.overlay.show {
display: block;
}
/* 卡片单列 */
.card-grid {
grid-template-columns: 1fr;
}
/* 显示悬浮按钮 */
.fab {
display: flex;
}
/* 移动端搜索栏堆叠 */
.search-bar {
flex-wrap: wrap;
}
.search-input {
width: 100%;
}
.btn {
width: 100%;
}
/* 表格横向滚动保留，不再额外处理 */
.main {
padding: 12px;
}
}
</style>
</head>
<body>
<div class="layout">
<!-- ========== 顶栏 ========== -->
<header class="header">
<button class="menu-btn" id="menuBtn" aria-label="菜单">☰</button>
<span class="logo">Admin Pro</span>
<div class="header-right">
<span style="font-size: 14px">管理员</span>
<div class="avatar">A</div>
</div>
</header>
<!-- ========== 遮罩层 ========== -->
<div class="overlay" id="overlay"></div>
<div class="body">
<!-- ========== 侧边栏 ========== -->
<aside class="sidebar" id="sidebar">
<a class="nav-item active">
<span class="nav-icon">📊</span> 仪表盘
</a>
<a class="nav-item"> <span class="nav-icon">👥</span> 用户管理 </a>
<a class="nav-item"> <span class="nav-icon">📦</span> 订单列表 </a>
<a class="nav-item"> <span class="nav-icon">📈</span> 数据分析 </a>
<a class="nav-item"> <span class="nav-icon">⚙️</span> 系统设置 </a>
</aside>
<!-- ========== 主内容区 ========== -->
<main class="main">
<!-- 搜索栏 -->
<div class="search-bar">
<input
type="search"
class="search-input"
placeholder="搜索订单、用户..."
/>
<button class="btn btn-primary">搜索</button>
</div>
<!-- 统计卡片网格 -->
<div class="card-grid">
<div class="stat-card">
<div class="stat-title">总订单</div>
<div class="stat-value">1,286</div>
<div class="stat-sub">↑ 12.5%</div>
</div>
<div class="stat-card">
<div class="stat-title">活跃用户</div>
<div class="stat-value">8,421</div>
<div class="stat-sub">↑ 3.2%</div>
</div>
<div class="stat-card">
<div class="stat-title">营收</div>
<div class="stat-value">¥126,560</div>
<div class="stat-sub">↑ 8.9%</div>
</div>
<div class="stat-card">
<div class="stat-title">转化率</div>
<div class="stat-value">24.6%</div>
<div class="stat-sub">↓ 2.1%</div>
</div>
</div>
<!-- 数据表格 -->
<h3 style="margin-bottom: 12px">最近订单</h3>
<div class="table-wrapper">
<table class="data-table">
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>订单号</th>
<th>客户</th>
<th>金额</th>
<th>状态</th>
<th>时间</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>#ORD-001</td>
<td>张三</td>
<td>¥1,200</td>
<td><span class="badge">进行中</span></td>
<td>2026-07-16</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>#ORD-002</td>
<td>李四</td>
<td>¥3,450</td>
<td><span class="badge success">已完成</span></td>
<td>2026-07-16</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>#ORD-003</td>
<td>王五</td>
<td>¥860</td>
<td><span class="badge">进行中</span></td>
<td>2026-07-15</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>#ORD-004</td>
<td>赵六</td>
<td>¥2,100</td>
<td><span class="badge success">已完成</span></td>
<td>2026-07-15</td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
<!-- ========== 悬浮操作按钮 ========== -->
<button class="fab" aria-label="新建">+</button>
</div>
<script>
;(function () {
const menuBtn = document.getElementById('menuBtn')
const sidebar = document.getElementById('sidebar')
const overlay = document.getElementById('overlay')
function openSidebar() {
sidebar.classList.add('open')
overlay.classList.add('show')
document.body.style.overflow = 'hidden' // 防止背景滚动
}
function closeSidebar() {
sidebar.classList.remove('open')
overlay.classList.remove('show')
document.body.style.overflow = ''
}
menuBtn.addEventListener('click', () => {
if (sidebar.classList.contains('open')) {
closeSidebar()
} else {
openSidebar()
}
})
overlay.addEventListener('click', closeSidebar)
// 在移动端点击导航项后自动关闭侧边栏（可选）
const navItems = document.querySelectorAll('.nav-item')
navItems.forEach((item) => {
item.addEventListener('click', (e) => {
// 移除所有active，添加当前
navItems.forEach((el) => el.classList.remove('active'))
item.classList.add('active')
if (window.innerWidth <= 768) {
closeSidebar()
}
})
})
// 桌面端调整窗口时，确保侧边栏和overflow重置
window.addEventListener('resize', () => {
if (window.innerWidth > 768) {
closeSidebar()
}
})
})()
</script>
</body>
</html>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。