后台管理系统框架
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能后台管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
},
secondary: {
50: '#fafafa',
100: '#f4f4f5',
200: '#e4e4e7',
300: '#d4d4d8',
400: '#a1a1aa',
500: '#71717a',
600: '#52525b',
700: '#3f3f46',
800: '#27272a',
900: '#18181b',
}
},
animation: {
'fade-in': 'fadeIn 0.5s ease-out',
'slide-in': 'slideIn 0.3s ease-out',
'bounce-light': 'bounceLight 1s infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideIn: {
'0%': { transform: 'translateX(-100%)' },
'100%': { transform: 'translateX(0)' },
},
bounceLight: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-5px)' },
}
}
}
}
}
</script>
<style type="text/css">
body {
font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
transition: all 0.3s ease;
}
.sidebar {
scrollbar-width: thin;
scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}
.sidebar::-webkit-scrollbar {
width: 4px;
}
.sidebar::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 4px;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.notification-dot {
position: absolute;
top: -5px;
right: -5px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ef4444;
}
.menu-item {
transition: all 0.2s ease;
}
.menu-item:hover {
background-color: rgba(14, 165, 233, 0.1);
border-left: 4px solid #0ea5e9;
}
.active-menu {
background-color: rgba(14, 165, 233, 0.15);
border-left: 4px solid #0ea5e9;
color: #0ea5e9;
}
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
position: fixed;
z-index: 40;
height: 100vh;
}
.sidebar-open {
transform: translateX(0);
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 30;
}
.overlay-open {
display: block;
}
}
</style>
</head>
<body class="bg-gray-50">
<!-- 移动端遮罩层 -->
<div class="overlay" id="overlay"></div>
<div class="flex h-screen">
<!-- 侧边栏 -->
<aside class="sidebar w-64 bg-white shadow-md overflow-y-auto" id="sidebar">
<div class="p-5 flex items-center justify-between border-b">
<div class="flex items-center">
<div class="w-10 h-10 rounded-lg bg-primary-500 flex items-center justify-center text-white">
<i class="fa-solid fa-gear text-xl"></i>
</div>
<h1 class="text-xl font-bold ml-3 text-secondary-800">智能管理系统</h1>
</div>
<button class="md:hidden text-gray-500" id="close-sidebar">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<!-- 用户信息 -->
<div class="p-4 border-b">
<div class="flex items-center">
<div class="relative">
<img src="https://page.mixinnet.cn/api/placeholder?w=100&h=100" class="w-12 h-12 rounded-full border-2 border-white shadow">
<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
</div>
<div class="ml-3">
<h3 class="font-semibold text-secondary-800">管理员</h3>
<p class="text-sm text-secondary-500">超级管理员</p>
</div>
</div>
</div>
<!-- 导航菜单 -->
<nav class="mt-4">
<div class="px-4 mb-2">
<p class="text-xs uppercase text-secondary-500 font-semibold">主导航</p>
</div>
<a href="#" class="menu-item active-menu flex items-center px-4 py-3 text-secondary-800">
<i class="fa-solid fa-gauge-high w-5"></i>
<span class="ml-3">控制台</span>
</a>
<a href="#" class="menu-item flex items-center px-4 py-3 text-secondary-800">
<i class="fa-solid fa-table-cells w-5"></i>
<span class="ml-3">数据管理</span>
</a>
<a href="#" class="menu-item flex items-center px-4 py-3 text-secondary-800">
<i class="fa-solid fa-chart-simple w-5"></i>
<span class="ml-3">统计分析</span>
</a>
<a href="#" class="menu-item flex items-center px-4 py-3 text-secondary-800">
<i class="fa-solid fa-user-group w-5"></i>
<span class="ml-3">用户管理</span>
</a>
<div class="px-4 mt-6 mb-2">
<p class="text-xs uppercase text-secondary-500 font-semibold">系统设置</p>
</div>
<a href="#" class="menu-item flex items-center px-4 py-3 text-secondary-800">
<i class="fa-solid fa-gear w-5"></i>
<span class="ml-3">系统设置</span>
</a>
<a href="#" class="menu-item flex items-center px-4 py-3 text-secondary-800">
<i class="fa-solid fa-shield w-5"></i>
<span class="ml-3">权限管理</span>
</a>
<a href="#" class="menu-item flex items-center px-4 py-3 text-secondary-800">
<i class="fa-solid fa-circle-question w-5"></i>
<span class="ml-3">帮助中心</span>
</a>
</nav>
<!-- 底部信息 -->
<div class="absolute bottom-0 w-full p-4 border-t">
<div class="flex items-center">
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
<span class="text-sm text-secondary-600">系统运行中</span>
</div>
</div>
</aside>
<!-- 主内容区 -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- 顶部导航 -->
<header class="bg-white shadow-sm z-10">
<div class="flex items-center justify-between p-4">
<div class="flex items-center">
<button class="md:hidden text-secondary-600" id="open-sidebar">
<i class="fa-solid fa-bars"></i>
</button>
<div class="relative ml-4 md:ml-0">
<i class="fa-solid fa-search absolute left-3 top-2.5 text-secondary-400"></i>
<input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 w-64 rounded-lg border border-secondary-200 focus:outline-none focus:ring-2 focus:ring-primary-300 focus:border-transparent">
</div>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<button class="p-2 rounded-full hover:bg-secondary-100">
<i class="fa-regular fa-bell text-secondary-600"></i>
<span class="notification-dot"></span>
</button>
</div>
<div class="relative">
<button class="p-2 rounded-full hover:bg-secondary-100">
<i class="fa-regular fa-envelope text-secondary-600"></i>
<span class="notification-dot"></span>
</button>
</div>
<div class="border-l pl-4">
<div class="flex items-center">
<img src="https://page.mixinnet.cn/api/placeholder?w=100&h=100" class="w-10 h-10 rounded-full">
<div class="ml-2 hidden md:block">
<p class="text-sm font-medium text-secondary-800">管理员</p>
<p class="text-xs text-secondary-500">admin@example.com</p>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- 内容区域 -->
<main class="flex-1 overflow-y-auto p-6 bg-gray-50">
<div class="max-w-7xl mx-auto">
<!-- 欢迎标题 -->
<div class="mb-6">
<h2 class="text-2xl font-bold text-secondary-800">控制台</h2>
<p class="text-secondary-500">欢迎回来，今天是 <?php echo date('Y年m月d日'); ?></p>
</div>
<!-- 数据概览卡片 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="card-hover bg-white rounded-xl shadow-sm p-6 border border-secondary-100">
<div class="flex items-center">
<div class="p-3 rounded-lg bg-blue-100 text-blue-600">
<i class="fa-solid fa-users text-xl"></i>
</div>
<div class="ml-4">
<h3 class="text-sm text-secondary-500">用户总数</h3>
<p class="text-2xl font-bold text-secondary-800">2,842</p>
</div>
</div>
<div class="mt-4 pt-4 border-t border-secondary-100">
<p class="text-sm text-green-600"><i class="fa-solid fa-arrow-up"></i> 12.5% 增长</p>
</div>
</div>
<div class="card-hover bg-white rounded-xl shadow-sm p-6 border border-secondary-100">
<div class="flex items-center">
<div class="p-3 rounded-lg bg-green-100 text-green-600">
<i class="fa-solid fa-cart-shopping text-xl"></i>
</div>
<div class="ml-4">
<h3 class="text-sm text-secondary-500">订单总数</h3>
<p class="text-2xl font-bold text-secondary-800">5,281</p>
</div>
</div>
<div class="mt-4 pt-4 border-t border-secondary-100">
<p class="text-sm text-green-600"><i class="fa-solid fa-arrow-up"></i> 7.3% 增长</p>
</div>
</div>
<div class="card-hover bg-white rounded-xl shadow-sm p-6 border border-secondary-100">
<div class="flex items-center">
<div class="p-3 rounded-lg bg-amber-100 text-amber-600">
<i class="fa-solid fa-credit-card text-xl"></i>
</div>
<div class="ml-4">
<h3 class="text-sm text-secondary-500">总收入</h3>
<p class="text-2xl font-bold text-secondary-800">¥86,752</p>
</div>
</div>
<div class="mt-4 pt-4 border-t border-secondary-100">
<p class="text-sm text-red-600"><i class="fa-solid fa-arrow-down"></i> 3.1% 下降</p>
</div>
</div>
<div class="card-hover bg-white rounded-xl shadow-sm p-6 border border-secondary-100">
<div class="flex items-center">
<div class="p-3 rounded-lg bg-purple-100 text-purple-600">
<i class="fa-solid fa-chart-line text-xl"></i>
</div>
<div class="ml-4">
<h3 class="text-sm text-secondary-500">转化率</h3>
<p class="text-2xl font-bold text-secondary-800">24.8%</p>
</div>
</div>
<div class="mt-4 pt-4 border-t border-secondary-100">
<p class="text-sm text-green-600"><i class="fa-solid fa-arrow-up"></i> 9.6% 增长</p>
</div>
</div>
</div>
<!-- 图表区域 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="bg-white rounded-xl shadow-sm p-6 border border-secondary-100">
<div class="flex items-center justify-between mb-6">
<h3 class="font-semibold text-secondary-800">访问趋势</h3>
<button class="text-sm text-primary-600">查看详情</button>
</div>
<div class="h-64 flex items-center justify-center">
<img src="https://page.mixinnet.cn/api/placeholder?w=600&h=300" alt="访问趋势图表" class="rounded-lg">
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-6 border border-secondary-100">
<div class="flex items-center justify-between mb-6">
<h3 class="font-semibold text-secondary-800">用户分布</h3>
<button class="text-sm text-primary-600">查看详情</button>
</div>
<div class="h-64 flex items-center justify-center">
<img src="https://page.mixinnet.cn/api/placeholder?w=600&h=300" alt="用户分布图表" class="rounded-lg">
</div>
</div>
</div>
<!-- 最近活动 -->
<div class="bg-white rounded-xl shadow-sm p-6 border border-secondary-100 mb-8">
<div class="flex items-center justify-between mb-6">
<h3 class="font-semibold text-secondary-800">最近活动</h3>
<button class="text-sm text-primary-600">查看全部</button>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="text-left text-secondary-500 text-sm border-b">
<th class="pb-3">用户</th>
<th class="pb-3">活动</th>
<th class="pb-3">时间</th>
<th class="pb-3">状态</th>
</tr>
</thead>
<tbody class="divide-y">
<tr>
<td class="py-4">
<div class="flex items-center">
<img src="https://page.mixinnet.cn/api/placeholder?w=100&h=100" class="w-8 h-8 rounded-full mr-3">
<span>张三</span>
</div>
</td>
<td class="py-4">创建了新订单</td>
<td class="py-4">2023-07-15 14:28</td>
<td class="py-4"><span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">已完成</span></td>
</tr>
<tr>
<td class="py-4">
<div class="flex items-center">
<img src="https://page.mixinnet.cn/api/placeholder?w=100&h=100" class="w-8 h-8 rounded-full mr-3">
<span>李四</span>
</div>
</td>
<td class="py-4">更新了个人信息</td>
<td class="py-4">2023-07-15 13:45</td>
<td class="py-4"><span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">进行中</span></td>
</tr>
<tr>
<td class="py-4">
<div class="flex items-center">
<img src="https://page.mixinnet.cn/api/placeholder?w=100&h=100" class="w-8 h-8 rounded-full mr-3">
<span>王五</span>
</div>
</td>
<td class="py-4">提交了退款申请</td>
<td class="py-4">2023-07-15 11:20</td>
<td class="py-4"><span class="px-2 py-1 bg-amber-100 text-amber-800 text-xs rounded-full">待处理</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</div>
<script>
// 移动端菜单切换
document.getElementById('open-sidebar').addEventListener('click', function() {
document.getElementById('sidebar').classList.add('sidebar-open');
document.getElementById('overlay').classList.add('overlay-open');
});
document.getElementById('close-sidebar').addEventListener('click', function() {
document.getElementById('sidebar').classList.remove('sidebar-open');
document.getElementById('overlay').classList.remove('overlay-open');
});
document.getElementById('overlay').addEventListener('click', function() {
document.getElementById('sidebar').classList.remove('sidebar-open');
this.classList.remove('overlay-open');
});
// 菜单项点击效果
const menuItems = document.querySelectorAll('.menu-item');
menuItems.forEach(item => {
item.addEventListener('click', function(e) {
e.preventDefault();
menuItems.forEach(i => i.classList.remove('active-menu'));
this.classList.add('active-menu');
});
});
// 模拟数据加载效果
document.addEventListener('DOMContentLoaded', function() {
const cards = document.querySelectorAll('.card-hover');
cards.forEach((card, index) => {
card.style.animationDelay = `${index * 0.1}s`;
card.classList.add('animate-fade-in');
});
});
</script>
</body>
</html>这个后台管理系统框架包含以下特点：
- 响应式设计：适配桌面和移动设备，小屏幕下侧边栏可折叠
- 现代化UI：采用圆角设计、柔和阴影和清晰布局
- 交互体验：包含悬停效果、平滑过渡和微动画
- 功能区域：包含数据概览卡片、图表区域和最近活动列表
- 色彩方案：使用柔和的蓝色为主色调，搭配辅助色形成专业感
您可以直接复制代码到HTML文件中运行，或根据需要进行进一步定制。
需支付 5元 阅读剩余内容
