<!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>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.sidebar-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}
</style>
<script>
function exportReport() {
const modal = document.createElement('div');
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
modal.innerHTML = `
<div class="bg-white rounded-lg p-6 w-96">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium">Export</h3>
<button onclick="this.closest('.fixed').remove()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Document type</label>
<select class="w-full border border-gray-300 rounded-button px-3 py-2">
<option value="excel">Excel</option>
<option value="csv">CSV</option>
<option value="pdf">PDF</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Duration</label>
<div class="flex space-x-2">
<input type="date" class="flex-1 border border-gray-300 rounded-button px-3 py-2">
<input type="date" class="flex-1 border border-gray-300 rounded-button px-3 py-2">
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button onclick="this.closest('.fixed').remove()" class="bg-gray-100 text-gray-700 px-4 py-2 rounded-button">Cancel</button>
<button onclick="handleExport(this)" class="bg-primary text-white px-4 py-2 rounded-button">Confirme</button>
</div>
</div>
</div>
`;
document.body.appendChild(modal);
}
function showOrderDetail() {
const modal = document.createElement('div');
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 overflow-y-auto py-6';
modal.innerHTML = `
<div class="bg-white rounded-lg p-6 w-[800px] max-h-[90vh] overflow-y-auto">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-medium">Details</h3>
<button onclick="this.closest('.fixed').remove()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-6">
<!-- 基本信息 -->
<div>
<h4 class="text-lg font-medium mb-4">Basic Details</h4>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="text-sm text-gray-500">Order No.</label>
<p class="mt-1">944194419441</p>
</div>
<div>
<label class="text-sm text-gray-500">Payment Amount</label>
<p class="mt-1">1688.00</p>
</div>
<div>
<label class="text-sm text-gray-500">Name</label>
<p class="mt-1">Tester Tester</p>
</div>
<div>
<label class="text-sm text-gray-500">Mobile No.</label>
<p class="mt-1">13526539598</p>
</div>
<div>
<label class="text-sm text-gray-500">Transaction ID</label>
<p class="mt-1">944194419441994419441</p>
</div>
</div>
</div>
<!-- 签证申请信息 -->
<div>
<h4 class="text-lg font-medium mb-4">Applicant details</h4>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="text-sm text-gray-500">Passport No.</label>
<p class="mt-1">E12345678</p>
</div>
<div>
<label class="text-sm text-gray-500">Passport Validity</label>
<p class="mt-1">2030-06-30</p>
</div>
<div>
<label class="text-sm text-gray-500">Planned departure date</label>
<p class="mt-1">2025-08-15</p>
</div>
<div>
<label class="text-sm text-gray-500">Planned return date</label>
<p class="mt-1">2025-08-30</p>
</div>
<div class="col-span-2">
<label class="text-sm text-gray-500">Domestic address</label>
<p class="mt-1">#3, test street, test destrict, test city, test province</p>
</div>
</div>
</div>
<!-- 材料信息 -->
<div>
<div class="flex justify-between items-center mb-4">
<h4 class="text-lg font-medium">Documents</h4>
<button onclick="toggleAllMaterials()" class="text-primary flex items-center text-sm hover:text-primary-dark">
<i class="fas fa-download mr-1"></i>Download
</button>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="border rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center">
<input type="checkbox" id="passport" class="material-checkbox w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary mr-2">
<span class="text-sm font-medium">Passport</span>
</div>
<span class="text-xs text-green-600">Uploaded</span>
</div>
<div class="bg-gray-100 rounded-lg h-32 flex items-center justify-center flex-col">
<i class="fas fa-passport text-4xl text-gray-400"></i>
<button onclick="previewDocument('passport')" class="mt-4 text-sm text-primary flex items-center">
<i class="fas fa-eye mr-1"></i>Preview
</button>
</div>
</div>
<div class="border rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center">
<input type="checkbox" id="ticket" class="material-checkbox w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary mr-2">
<span class="text-sm font-medium">Air Ticket</span>
</div>
<span class="text-xs text-green-600">Uploaded</span>
</div>
<div class="bg-gray-100 rounded-lg h-32 flex items-center justify-center flex-col">
<i class="fas fa-plane-departure text-4xl text-gray-400"></i>
<button onclick="previewDocument('ticket')" class="mt-4 text-sm text-primary flex items-center">
<i class="fas fa-eye mr-1"></i>Preview
</button>
</div>
</div>
<div class="border rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center">
<input type="checkbox" id="hotel" class="material-checkbox w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary mr-2">
<span class="text-sm font-medium">Hotel Reservation</span>
</div>
<span class="text-xs text-green-600">Uploaded</span>
</div>
<div class="bg-gray-100 rounded-lg h-32 flex items-center justify-center flex-col">
<i class="fas fa-hotel text-4xl text-gray-400"></i>
<button onclick="previewDocument('hotel')" class="mt-4 text-sm text-primary flex items-center">
<i class="fas fa-eye mr-1"></i>Preview
</button>
</div>
</div>
<div class="border rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center">
<input type="checkbox" id="finance" class="material-checkbox w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary mr-2" disabled>
<span class="text-sm font-medium">Employment Certificate</span>
</div>
<span class="text-xs text-green-600">Uploaded</span>
</div>
<div class="bg-gray-100 rounded-lg h-32 flex items-center justify-center flex-col">
<i class="fas fa-file-invoice-dollar text-4xl text-gray-400"></i>
<button onclick="previewDocument('finance')" class="mt-4 text-sm text-primary flex items-center">
<i class="fas fa-eye mr-1"></i>Preview
</button>
</div>
</div>
</div>
</div>
<!-- 审核操作 -->
<div>
<h4 class="text-lg font-medium mb-4">Action</h4>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Result</label>
<select class="w-full border border-gray-300 rounded-button px-3 py-2" id="orderStatus">
<option value="">please select</option>
<option value="approved">Information confirmed</option>
<option value="needMore">Additional information required</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Feedback</label>
<textarea class="w-full border border-gray-300 rounded-lg px-3 py-2 h-24 resize-none" placeholder="pleaes give feedback.."></textarea>
</div>
</div>
</div>
<div class="flex justify-end space-x-3 pt-4 border-t">
<button onclick="this.closest('.fixed').remove()" class="bg-gray-100 text-gray-700 px-4 py-2 rounded-button">Cancel</button>
<button onclick="handleOrderStatus(this)" class="bg-primary text-white px-4 py-2 rounded-button">Confirm</button>
</div>
</div>
</div>
`;
document.body.appendChild(modal);
}
function toggleAllMaterials() {
const checkboxes = document.querySelectorAll('.material-checkbox:not([disabled])');
const allChecked = Array.from(checkboxes).every(cb => cb.checked);
checkboxes.forEach(checkbox => {
checkbox.checked = !allChecked;
});
if (!allChecked) {
const notification = document.createElement('div');
notification.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
notification.innerHTML = `
<div class="flex items-center">
<i class="fas fa-check-circle mr-2"></i>
<span>已选择All可下载材料</span>
</div>
`;
document.body.appendChild(notification);
setTimeout(() => notification.remove(), 3000);
}
}
function handleOrderStatus(btn) {
const status = document.getElementById('orderStatus').value;
if (!status) {
const notification = document.createElement('div');
notification.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
notification.innerHTML = `
<div class="flex items-center">
<i class="fas fa-exclamation-circle mr-2"></i>
<span>请选择处理结果</span>
</div>
`;
document.body.appendChild(notification);
setTimeout(() => notification.remove(), 3000);
return;
}
const originalText = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>处理中...';
setTimeout(() => {
const notification = document.createElement('div');
notification.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
notification.innerHTML = `
<div class="flex items-center">
<i class="fas fa-check-circle mr-2"></i>
<span>操作成功</span>
</div>
`;
document.body.appendChild(notification);
btn.closest('.fixed').remove();
setTimeout(() => notification.remove(), 3000);
}, 1500);
}
function previewDocument(type) {
if(type === 'finance') return;
const modal = document.createElement('div');
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
modal.innerHTML = `
<div class="bg-white rounded-lg p-6 w-[800px]">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium">Preview</h3>
<button onclick="this.closest('.fixed').remove()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="bg-gray-100 rounded-lg h-[500px] flex items-center justify-center">
<div class="text-center">
<i class="fas fa-file-alt text-6xl text-gray-400 mb-4"></i>
<p class="text-gray-500">文件Preview区域</p>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button onclick="this.closest('.fixed').remove()" class="bg-gray-100 text-gray-700 px-4 py-2 rounded-button">关闭</button>
</div>
</div>
`;
document.body.appendChild(modal);
}
function handleExport(btn) {
const originalText = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>导出中...';
setTimeout(() => {
const notification = document.createElement('div');
notification.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center z-50';
notification.innerHTML = `
<i class="fas fa-check-circle mr-2"></i>
<span>报表导出成功</span>
`;
document.body.appendChild(notification);
btn.closest('.fixed').remove();
setTimeout(() => {
notification.remove();
}, 3000);
}, 2000);
}
</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">Order 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">
<!-- Search区域 -->
<div class="bg-white p-6 rounded-lg shadow mb-6">
<div class="grid grid-cols-3 gap-6">
<div class="flex flex-col">
<label class="text-sm text-gray-600 mb-2">Order No.</label>
<input type="text" class="border border-gray-300 rounded-button px-3 py-2 text-sm" placeholder="请输入Order No.">
</div>
<div class="flex flex-col">
<label class="text-sm text-gray-600 mb-2">Destination</label>
<select class="border border-gray-300 rounded-button px-3 py-2 text-sm">
<option value="">All</option>
</select>
</div>
<div class="flex flex-col">
<label class="text-sm text-gray-600 mb-2">Porduct</label>
<select class="border border-gray-300 rounded-button px-3 py-2 text-sm">
<option value="">All</option>
</select>
</div>
</div>
<div class="flex justify-end mt-6">
<div class="flex-1">
<button onclick="exportReport()" class="flex items-center bg-green-600 text-white px-4 py-2 rounded-button hover:bg-green-700">
<i class="fas fa-file-export mr-2"></i>
<span class="whitespace-nowrap">Export</span>
</button>
</div>
<div>
<button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-button mr-4">Reset</button>
<button class="bg-primary text-white px-4 py-2 rounded-button">Search</button>
</div>
</div>
</div>
<!-- 订单状态标签 -->
<div class="bg-white p-4 rounded-lg shadow mb-6">
<div class="flex space-x-6">
<button class="text-primary font-medium">Unpaid</button>
<button class="text-gray-600">To Submit</button>
<button class="text-gray-600">To be reviewed</button>
<button class="text-gray-600">Processing</button>
<button class="text-gray-600">Refund</button>
<button class="text-gray-600">Completed</button>
</div>
</div>
<!-- 订单列表 -->
<div class="bg-white rounded-lg shadow overflow-hidden">
<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 tracking-wider">Order No.</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Payment Amount</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mobile No.</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Destination</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction ID</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">944194419441</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1688.00</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Tester Tester</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">13526539598</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">USA</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">B1/B2 Visa</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">944194419441994419441</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button onclick="showOrderDetail()" class="text-primary hover:text-primary-dark mr-3">View</button>
<a href="#" class="text-primary hover:text-primary-dark">Initiate Refund</a>
</td>
</tr>
<!-- 更多订单数据... -->
</tbody>
</table>
<!-- 分页 -->
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
<div class="flex-1 flex justify-between sm:hidden">
<button class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-button text-gray-700 bg-white hover:bg-gray-50">Previous</button>
<button class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-button text-gray-700 bg-white hover:bg-gray-50">Next</button>
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700">
From <span class="font-medium">1</span> to <span class="font-medium">10</span> , totla <span class="font-medium">97</span> records
</p>
</div>
<div>
<nav class="relative z-0 inline-flex rounded-button shadow-sm -space-x-px" aria-label="Pagination">
<button class="relative inline-flex items-center px-2 py-2 rounded-l-button border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<span class="sr-only">Previous</span>
<i class="fas fa-chevron-left w-5 h-5"></i>
</button>
<button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">1</button>
<button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">2</button>
<button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">3</button>
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-gray-50 text-sm font-medium text-gray-700">...</span>
<button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">10</button>
<button class="relative inline-flex items-center px-2 py-2 rounded-r-button border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<span class="sr-only">Next</span>
<i class="fas fa-chevron-right w-5 h-5"></i>
</button>
</nav>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
index.html
index.html