<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>后台管理系统</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#0066FF',
secondary: '#4B5563'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
</head>
<body class="bg-gray-100 min-h-screen">
<div class="flex h-screen">
<!-- 左侧导航栏 -->
<div class="w-64 bg-gray-900 text-white">
<div class="p-4">
<h1 class="text-xl">VASCO</h1>
</div>
<nav class="mt-4">
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-gray-300 hover:text-white">
<i class="fas fa-shopping-cart w-6 h-6 flex items-center justify-center"></i>
<span class="ml-3">Order Management</span>
</a>
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-gray-300 hover:text-white">
<i class="fas fa-users w-6 h-6 flex items-center justify-center"></i>
<span class="ml-3">User Management</span>
</a>
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-gray-300 hover:text-white">
<i class="fas fa-cog w-6 h-6 flex items-center justify-center"></i>
<span class="ml-3">Content Management</span>
</a>
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-gray-300 hover:text-white">
<i class="fas fa-money-bill w-6 h-6 flex items-center justify-center"></i>
<span class="ml-3">Finance</span>
</a>
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-gray-300 hover:text-white">
<i class="fas fa-headset w-6 h-6 flex items-center justify-center"></i>
<span class="ml-3">Customer service</span>
</a>
</nav>
</div>
<!-- 右侧内容区 -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- 顶部导航 -->
<header class="bg-white shadow">
<div class="flex justify-between items-center px-6 py-4">
<h2 class="text-xl font-semibold">User Management</h2>
<div class="flex items-center">
<button class="flex items-center text-gray-700 hover:text-gray-900">
<i class="fas fa-user-circle text-xl"></i>
<span class="ml-2">Admin</span>
</button>
</div>
</div>
</header>
<!-- 主要内容区 -->
<main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100">
<div class="container mx-auto px-6 py-8">
<!-- 用户管理模块 -->
<div class="bg-white rounded-lg shadow-lg mb-8">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-medium">User</h3>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<div class="flex space-x-4">
<input type="text" placeholder="Search User ID/Name/email" class="border border-gray-300 rounded-button px-4 py-2 text-sm w-64">
<button class="bg-primary text-white px-4 py-2 rounded-button">Search</button>
</div>
<button class="bg-green-600 text-white px-4 py-2 rounded-button">
<i class="fas fa-plus mr-2"></i>New User
</button>
</div>
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">User ID</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">email</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">create time</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Latest login</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">status</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">action</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 text-sm text-gray-900">100001</td>
<td class="px-6 py-4 text-sm text-gray-900">Test one</td>
<td class="px-6 py-4 text-sm text-gray-900">[email protected]</td>
<td class="px-6 py-4 text-sm text-gray-500">2025-06-15</td>
<td class="px-6 py-4 text-sm text-gray-500">2025-07-05</td>
<td class="px-6 py-4">
<span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">In use</span>
</td>
<td class="px-6 py-4 text-sm space-x-3">
<button class="text-primary hover:text-primary-dark">Edit</button>
<button class="text-red-600 hover:text-red-800">Disable</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 text-sm text-gray-900">100002</td>
<td class="px-6 py-4 text-sm text-gray-900">Test two</td>
<td class="px-6 py-4 text-sm text-gray-900">[email protected]</td>
<td class="px-6 py-4 text-sm text-gray-500">2025-06-20</td>
<td class="px-6 py-4 text-sm text-gray-500">2025-07-04</td>
<td class="px-6 py-4">
<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">Disabled</span>
</td>
<td class="px-6 py-4 text-sm space-x-3">
<button class="text-primary hover:text-primary-dark">Edit</button>
<button class="text-green-600 hover:text-red-800">Active</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 权限管理模块 -->
<div class="bg-white rounded-lg shadow-lg">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-medium">Role</h3>
</div>
<div class="p-6">
<div class="grid grid-cols-2 gap-6">
<!-- 角色列表 -->
<div class="border rounded-lg">
<div class="px-4 py-3 bg-gray-50 border-b">
<h4 class="font-medium">Role list</h4>
</div>
<div class="p-4">
<div class="space-y-3">
<div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg border border-blue-200">
<div class="flex items-center">
<i class="fas fa-user-shield text-blue-600 mr-3"></i>
<span class="font-medium">Admin</span>
</div>
<button class="text-primary hover:text-primary-dark text-sm">Edit</button>
</div>
<div class="flex items-center justify-between p-3 rounded-lg border">
<div class="flex items-center">
<i class="fas fa-calculator text-gray-600 mr-3"></i>
<span class="font-medium">Finance</span>
</div>
<button class="text-primary hover:text-primary-dark text-sm">Edit</button>
</div>
<div class="flex items-center justify-between p-3 rounded-lg border">
<div class="flex items-center">
<i class="fas fa-user-friends text-gray-600 mr-3"></i>
<span class="font-medium">Ops staff</span>
</div>
<button class="text-primary hover:text-primary-dark text-sm">Edit</button>
</div>
<div class="flex items-center justify-between p-3 rounded-lg border">
<div class="flex items-center">
<i class="fas fa-user-tie text-gray-600 mr-3"></i>
<span class="font-medium">Manager</span>
</div>
<button class="text-primary hover:text-primary-dark text-sm">Edit</button>
</div>
</div>
</div>
</div>
<!-- 权限设置 -->
<div class="border rounded-lg">
<div class="px-4 py-3 bg-gray-50 border-b">
<h4 class="font-medium">Role setup - Admin</h4>
</div>
<div class="p-4">
<div class="space-y-4">
<div>
<label class="flex items-center mb-2">
<input type="checkbox" checked disabled class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary mr-2">
<span class="font-medium">System</span>
</label>
<div class="ml-6 grid grid-cols-3 gap-3">
<label class="flex items-center text-sm text-gray-600">
<input type="checkbox" checked disabled class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary mr-2">
<span>User Management</span>
</label>
<label class="flex items-center text-sm text-gray-600">
<input type="checkbox" checked disabled class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary mr-2">
<span>Role Management</span>
</label>
<label class="flex items-center text-sm text-gray-600">
<input type="checkbox" checked disabled class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary mr-2">
<span>Role setup</span>
</label>
</div>
</div>
<div>
<label class="flex items-center mb-2">
<input type="checkbox" checked disabled class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary mr-2">
<span class="font-medium">Order Management</span>
</label>
<div class="ml-6 grid grid-cols-3 gap-3">
<label class="flex items-center text-sm text-gray-600">
<input type="checkbox" checked disabled class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary mr-2">
<span>View</span>
</label>
<label class="flex items-center text-sm text-gray-600">
<input type="checkbox" checked disabled class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary mr-2">
<span>Action</span>
</label>
<label class="flex items-center text-sm text-gray-600">
<input type="checkbox" checked disabled class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary mr-2">
<span>Export</span>
</label>
</div>
</div>
<div>
<label class="flex items-center mb-2">
<input type="checkbox" checked disabled class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary mr-2">
<span class="font-medium">Finance</span>
</label>
<div class="ml-6 grid grid-cols-3 gap-3">
<label class="flex items-center text-sm text-gray-600">
<input type="checkbox" checked disabled class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary mr-2">
<span>Transaction</span>
</label>
<label class="flex items-center text-sm text-gray-600">
<input type="checkbox" checked disabled class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary mr-2">
<span>Settlement</span>
</label>
<label class="flex items-center text-sm text-gray-600">
<input type="checkbox" checked disabled class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary mr-2">
<span>Refund</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 更多订单数据... -->
</tbody>
</table>
<!-- 分页 -->
</nav>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
index.html
index.html