<!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 showFinanceManagement(e) {
e.preventDefault();
const menuItems = document.querySelectorAll('.sidebar-item');
menuItems.forEach(item => {
item.classList.remove('bg-gray-800', 'text-white');
item.classList.add('text-gray-300');
});
e.currentTarget.classList.add('bg-gray-800', 'text-white');
e.currentTarget.classList.remove('text-gray-300');
document.querySelector('h2').textContent = '财务管理';
const mainContent = document.querySelector('main .container');
mainContent.innerHTML = `
<div class="grid grid-cols-2 gap-6 mb-8">
<!-- 交易明细 -->
<div class="bg-white rounded-lg shadow-lg">
<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-lg font-medium">Transaction Detail</h3>
<button class="text-primary hover:text-primary-dark text-sm">View All</button>
</div>
<div class="p-6">
<div class="space-y-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Daily Transaction amount</p>
<p class="text-2xl font-semibold mt-1">¥26,888.00</p>
</div>
<div class="flex items-center space-x-4">
<div class="text-green-600 flex items-center">
<i class="fas fa-arrow-up mr-1"></i>
<span>12.5%</span>
</div>
<button onclick="exportReport()" class="flex items-center text-primary hover:text-primary-dark">
<i class="fas fa-file-export mr-1"></i>
<span class="whitespace-nowrap">Export</span>
</button>
</div>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between py-3 border-b">
<div>
<p class="font-medium">Order No.：944194419441</p>
<p class="text-sm text-gray-500 mt-1">2025-07-06 10:30:25</p>
</div>
<p class="text-lg font-medium">+1,688.00</p>
</div>
<div class="flex items-center justify-between py-3 border-b">
<div>
<p class="font-medium">Order No.：944194419442</p>
<p class="text-sm text-gray-500 mt-1">2025-07-06 09:15:36</p>
</div>
<p class="text-lg font-medium">+2,688.00</p>
</div>
<div class="flex items-center justify-between py-3">
<div>
<p class="font-medium">Order No.：944194419443</p>
<p class="text-sm text-gray-500 mt-1">2025-07-06 08:45:12</p>
</div>
<p class="text-lg font-medium text-red-600">-688.00</p>
</div>
</div>
</div>
</div>
</div>
<!-- 待退款订单 -->
<div class="bg-white rounded-lg shadow-lg">
<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-lg font-medium">Refund</h3>
<button class="text-primary hover:text-primary-dark text-sm">View All</button>
</div>
<div class="p-6">
<div class="space-y-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Amount to refund</p>
<p class="text-2xl font-semibold mt-1">¥12,688.00</p>
</div>
<div class="flex items-center space-x-4">
<span class="text-sm text-gray-500"> 8 Request</span>
<button onclick="exportReport()" class="flex items-center text-primary hover:text-primary-dark">
<i class="fas fa-file-export mr-1"></i>
<span class="whitespace-nowrap">Export</span>
</button>
</div>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between py-3 border-b">
<div>
<p class="font-medium">Order No.：944194419444</p>
<p class="text-sm text-gray-500 mt-1">Request time：2025-07-06</p>
</div>
<div class="text-right">
<p class="text-lg font-medium">¥1,688.00</p>
<button class="text-primary hover:text-primary-dark text-sm">Action</button>
</div>
</div>
<div class="flex items-center justify-between py-3 border-b">
<div>
<p class="font-medium">Order No.：944194419445</p>
<p class="text-sm text-gray-500 mt-1">Request time：2025-07-06</p>
</div>
<div class="text-right">
<p class="text-lg font-medium">¥2,688.00</p>
<button class="text-primary hover:text-primary-dark text-sm">Action</button>
</div>
</div>
<div class="flex items-center justify-between py-3">
<div>
<p class="font-medium">Order No.：944194419446</p>
<p class="text-sm text-gray-500 mt-1">Request time：2025-07-05</p>
</div>
<div class="text-right">
<p class="text-lg font-medium">¥1,688.00</p>
<button class="text-primary hover:text-primary-dark text-sm">Action</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
}
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">Export格式</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">时间范围</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">取消</button>
<button onclick="handleExport(this)" class="bg-primary text-white px-4 py-2 rounded-button">确认Export</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">订单详情</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">基本信息</h4>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="text-sm text-gray-500">订单编号</label>
<p class="mt-1">944194419441</p>
</div>
<div>
<label class="text-sm text-gray-500">支付金额</label>
<p class="mt-1">1688.00</p>
</div>
<div>
<label class="text-sm text-gray-500">客户姓名</label>
<p class="mt-1">张伟明</p>
</div>
<div>
<label class="text-sm text-gray-500">手机号码</label>
<p class="mt-1">13526539598</p>
</div>
<div>
<label class="text-sm text-gray-500">交易编号</label>
<p class="mt-1">944194419441994419441</p>
</div>
</div>
</div>
<!-- 签证申请信息 -->
<div>
<h4 class="text-lg font-medium mb-4">签证申请信息</h4>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="text-sm text-gray-500">护照号</label>
<p class="mt-1">E12345678</p>
</div>
<div>
<label class="text-sm text-gray-500">护照有效期</label>
<p class="mt-1">2030-06-30</p>
</div>
<div>
<label class="text-sm text-gray-500">计划出行日期</label>
<p class="mt-1">2025-08-15</p>
</div>
<div>
<label class="text-sm text-gray-500">计划返回日期</label>
<p class="mt-1">2025-08-30</p>
</div>
<div class="col-span-2">
<label class="text-sm text-gray-500">国内住址</label>
<p class="mt-1">广东省深圳市南山区科技园南区科技南十二路 2 号金蝶软件园</p>
</div>
</div>
</div>
<!-- 材料信息 -->
<div>
<div class="flex justify-between items-center mb-4">
<h4 class="text-lg font-medium">材料信息</h4>
<button onclick="toggleAllMaterials()" class="text-primary flex items-center text-sm hover:text-primary-dark">
<i class="fas fa-download mr-1"></i>下载材料
</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">护照扫描件</span>
</div>
<span class="text-xs text-green-600">已上传</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>预览
</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">机票行程单</span>
</div>
<span class="text-xs text-green-600">已上传</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>预览
</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">酒店预订单</span>
</div>
<span class="text-xs text-green-600">已上传</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>预览
</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">财力证明</span>
</div>
<span class="text-xs text-red-600">未上传</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 opacity-50 cursor-not-allowed">
<i class="fas fa-eye mr-1"></i>预览
</button>
</div>
</div>
</div>
</div>
<!-- 审核操作 -->
<div>
<h4 class="text-lg font-medium mb-4">审核操作</h4>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Action结果</label>
<select class="w-full border border-gray-300 rounded-button px-3 py-2" id="orderStatus">
<option value="">请选择</option>
<option value="approved">已审核</option>
<option value="needMore">待补充材料</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">返回信息</label>
<textarea class="w-full border border-gray-300 rounded-lg px-3 py-2 h-24 resize-none" placeholder="请输入返回信息..."></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">取消</button>
<button onclick="handleOrderStatus(this)" class="bg-primary text-white px-4 py-2 rounded-button">确认</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>已选择全部可下载材料</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>请选择Action结果</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>Action中...';
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">文件预览</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">文件预览区域</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>Export中...';
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>报表Export成功</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 font-">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">订单管理</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">用户与权限管理</span>
</a>
<a href="#" class="sidebar-item flex items-center px-4 py-3 bg-gray-800 text-white">
<i class="fas fa-cog w-6 h-6 flex items-center justify-center"></i>
<span class="ml-3">系统内容管理</span>
</a>
<a href="#" onclick="showFinanceManagement(event)" 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">财务管理</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">客服咨询</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">系统内容管理</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="grid grid-cols-2 gap-6">
<!-- 国家配置 -->
<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">国家配置</h3>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<input type="text" placeholder="搜索国家名称" 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">
<i class="fas fa-plus mr-2"></i>新增国家
</button>
</div>
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">国家名称</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">英文名称</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">状态</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">操作</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="px-4 py-4 text-sm">马来西亚</td>
<td class="px-4 py-4 text-sm">Malaysia</td>
<td class="px-4 py-4">
<span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">启用</span>
</td>
<td class="px-4 py-4 text-sm space-x-3">
<button class="text-primary hover:text-primary-dark">编辑</button>
<button class="text-red-600 hover:text-red-800">禁用</button>
</td>
</tr>
<tr>
<td class="px-4 py-4 text-sm">新加坡</td>
<td class="px-4 py-4 text-sm">Singapore</td>
<td class="px-4 py-4">
<span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">启用</span>
</td>
<td class="px-4 py-4 text-sm space-x-3">
<button class="text-primary hover:text-primary-dark">编辑</button>
<button class="text-red-600 hover:text-red-800">禁用</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">产品配置</h3>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<input type="text" placeholder="搜索产品名称" 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">
<i class="fas fa-plus mr-2"></i>新增产品
</button>
</div>
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">产品名称</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">价格</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">状态</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">操作</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="px-4 py-4 text-sm">标准签证</td>
<td class="px-4 py-4 text-sm">¥1688.00</td>
<td class="px-4 py-4">
<span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">在售</span>
</td>
<td class="px-4 py-4 text-sm space-x-3">
<button class="text-primary hover:text-primary-dark">编辑</button>
<button class="text-red-600 hover:text-red-800">下架</button>
</td>
</tr>
<tr>
<td class="px-4 py-4 text-sm">加急签证</td>
<td class="px-4 py-4 text-sm">¥2688.00</td>
<td class="px-4 py-4">
<span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">在售</span>
</td>
<td class="px-4 py-4 text-sm space-x-3">
<button class="text-primary hover:text-primary-dark">编辑</button>
<button class="text-red-600 hover:text-red-800">下架</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">材料清单配置</h3>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<div class="flex space-x-4">
<select class="border border-gray-300 rounded-button px-4 py-2 text-sm">
<option value="">选择国家</option>
<option value="1">马来西亚</option>
<option value="2">新加坡</option>
</select>
<select class="border border-gray-300 rounded-button px-4 py-2 text-sm">
<option value="">选择产品</option>
<option value="1">标准签证</option>
<option value="2">加急签证</option>
</select>
</div>
<button class="bg-primary text-white px-4 py-2 rounded-button">
<i class="fas fa-plus mr-2"></i>添加材料
</button>
</div>
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">材料名称</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">是否必填</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">材料说明</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">操作</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="px-4 py-4 text-sm">护照扫描件</td>
<td class="px-4 py-4">
<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">必填</span>
</td>
<td class="px-4 py-4 text-sm">护照有效期需超过 6 个月</td>
<td class="px-4 py-4 text-sm space-x-3">
<button class="text-primary hover:text-primary-dark">编辑</button>
<button class="text-red-600 hover:text-red-800">删除</button>
</td>
</tr>
<tr>
<td class="px-4 py-4 text-sm">身份证正反面</td>
<td class="px-4 py-4">
<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">必填</span>
</td>
<td class="px-4 py-4 text-sm">清晰完整的身份证扫描件</td>
<td class="px-4 py-4 text-sm space-x-3">
<button class="text-primary hover:text-primary-dark">编辑</button>
<button class="text-red-600 hover:text-red-800">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Banner配置 -->
<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">Banner 配置</h3>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<select class="border border-gray-300 rounded-button px-4 py-2 text-sm w-64">
<option value="">全部位置</option>
<option value="1">首页轮播</option>
<option value="2">活动专区</option>
</select>
<button class="bg-primary text-white px-4 py-2 rounded-button">
<i class="fas fa-plus mr-2"></i>新增 Banner
</button>
</div>
<div class="space-y-4">
<div class="border rounded-lg p-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<div class="w-24 h-24 flex items-center justify-center bg-blue-50 rounded-lg">
<i class="fas fa-umbrella-beach text-4xl text-blue-500"></i>
</div>
<div>
<h4 class="font-medium mb-2">暑期畅游新马泰</h4>
<p class="text-sm text-gray-500">展示位置：首页轮播</p>
<p class="text-sm text-gray-500">有效期：2025-07-01 至 2025-08-31</p>
</div>
</div>
<div class="flex items-center space-x-3">
<button class="text-primary hover:text-primary-dark">编辑</button>
<button class="text-red-600 hover:text-red-800">下架</button>
</div>
</div>
</div>
<div class="border rounded-lg p-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<div class="w-24 h-24 flex items-center justify-center bg-orange-50 rounded-lg">
<i class="fas fa-moon text-4xl text-orange-500"></i>
</div>
<div>
<h4 class="font-medium mb-2">中秋特惠活动</h4>
<p class="text-sm text-gray-500">展示位置：活动专区</p>
<p class="text-sm text-gray-500">有效期：2025-09-01 至 2025-09-30</p>
</div>
</div>
<div class="flex items-center space-x-3">
<button class="text-primary hover:text-primary-dark">编辑</button>
<button class="text-red-600 hover:text-red-800">下架</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<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">用户管理</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="搜索用户名/手机号" 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">搜索</button>
</div>
<button class="bg-green-600 text-white px-4 py-2 rounded-button">
<i class="fas fa-plus mr-2"></i>新增用户
</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">用户ID</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">用户名</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">手机号</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">注册时间</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">最后登录</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">状态</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">操作</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">陈明宇</td>
<td class="px-6 py-4 text-sm text-gray-900">13912345678</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">正常</span>
</td>
<td class="px-6 py-4 text-sm space-x-3">
<button class="text-primary hover:text-primary-dark">编辑</button>
<button class="text-red-600 hover:text-red-800">禁用</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">林雨晴</td>
<td class="px-6 py-4 text-sm text-gray-900">13823456789</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-green-100 text-green-800 rounded-full">正常</span>
</td>
<td class="px-6 py-4 text-sm space-x-3">
<button class="text-primary hover:text-primary-dark">编辑</button>
<button class="text-red-600 hover:text-red-800">禁用</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">权限管理</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">角色列表</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">管理员</span>
</div>
<button class="text-primary hover:text-primary-dark text-sm">编辑权限</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">财务</span>
</div>
<button class="text-primary hover:text-primary-dark text-sm">编辑权限</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">店员</span>
</div>
<button class="text-primary hover:text-primary-dark text-sm">编辑权限</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">店长</span>
</div>
<button class="text-primary hover:text-primary-dark text-sm">编辑权限</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">权限设置 - 管理员</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">系统管理</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>用户管理</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>角色管理</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>权限设置</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">订单管理</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>查看订单</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">财务管理</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>收支管理</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>结算管理</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>财务报表</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-6">
<div class="flex flex-col">
<label class="text-sm text-gray-600 mb-2">订单编号</label>
<input type="text" class="border border-gray-300 rounded-button px-3 py-2 text-sm" placeholder="请输入订单编号">
</div>
<div class="flex flex-col">
<label class="text-sm text-gray-600 mb-2">渠道来源</label>
<select class="border border-gray-300 rounded-button px-3 py-2 text-sm">
<option value="">全部</option>
</select>
</div>
<div class="flex flex-col">
<label class="text-sm text-gray-600 mb-2">客户类型</label>
<select class="border border-gray-300 rounded-button px-3 py-2 text-sm">
<option value="">全部</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">重置</button>
<button class="bg-primary text-white px-4 py-2 rounded-button">搜索</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">未付款订单</button>
<button class="text-gray-600">待上传材料</button>
<button class="text-gray-600">待审核</button>
<button class="text-gray-600">已Action</button>
<button class="text-gray-600">待签收</button>
<button class="text-gray-600">待退款</button>
<button class="text-gray-600">可结算</button>
<button class="text-gray-600">已归档</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">订单编号</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">支付金额</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">公司名称</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">客户姓名</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">手机号码</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">国家/地区</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">交易编号</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</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-500">---</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">张伟明</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">中国</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">查看</button>
<a href="#" class="text-primary hover:text-primary-dark mr-3">上传材料</a>
<a href="#" class="text-primary hover:text-primary-dark">申请退款</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">上一页</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">下一页</button>
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700">
显示第 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共 <span class="font-medium">97</span> 条记录
</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">上一页</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">下一页</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