Backend - Contentedit icon

创建者：
用户tc1qd0BG
Fork(复制)
图库
图片、视频、音频、图标
下载
嵌入
BUG反馈
index.html
index.html
            
            <!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-3 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">交易明细</h3>
<button class="text-primary hover:text-primary-dark text-sm">查看全部</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">今日交易金额</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">导出</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">订单号：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">订单号：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">订单号：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">结算明细</h3>
<button class="text-primary hover:text-primary-dark text-sm">查看全部</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">待结算金额</p>
<p class="text-2xl font-semibold mt-1">¥158,688.00</p>
</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">导出</span>
</button>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between py-3 border-b">
<div>
<p class="font-medium">结算单号：ST944194419441</p>
<p class="text-sm text-gray-500 mt-1">2025-07-05</p>
</div>
<div class="text-right">
<p class="text-lg font-medium">¥86,688.00</p>
<span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">已完成</span>
</div>
</div>
<div class="flex items-center justify-between py-3 border-b">
<div>
<p class="font-medium">结算单号：ST944194419442</p>
<p class="text-sm text-gray-500 mt-1">2025-07-04</p>
</div>
<div class="text-right">
<p class="text-lg font-medium">¥92,688.00</p>
<span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">已完成</span>
</div>
</div>
<div class="flex items-center justify-between py-3">
<div>
<p class="font-medium">结算单号：ST944194419443</p>
<p class="text-sm text-gray-500 mt-1">2025-07-03</p>
</div>
<div class="text-right">
<p class="text-lg font-medium">¥78,688.00</p>
<span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">处理中</span>
</div>
</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">待退款订单</h3>
<button class="text-primary hover:text-primary-dark text-sm">查看全部</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">待退款总额</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 笔</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">导出</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">订单号：944194419444</p>
<p class="text-sm text-gray-500 mt-1">申请时间：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">处理</button>
</div>
</div>
<div class="flex items-center justify-between py-3 border-b">
<div>
<p class="font-medium">订单号：944194419445</p>
<p class="text-sm text-gray-500 mt-1">申请时间：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">处理</button>
</div>
</div>
<div class="flex items-center justify-between py-3">
<div>
<p class="font-medium">订单号：944194419446</p>
<p class="text-sm text-gray-500 mt-1">申请时间：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">处理</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">导出报表</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">导出格式</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">确认导出</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">处理结果</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>请选择处理结果</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">文件预览</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>导出中...';
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">Content 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="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">Country</h3>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<input type="text" placeholder="Search Country Name" 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>New Country
</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">Country Name</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Code</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Stauts</th>
<th class="px-4 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-4 py-4 text-sm">UK</td>
<td class="px-4 py-4 text-sm">gbr</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">enabled</span>
</td>
<td class="px-4 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-4 py-4 text-sm">Germany</td>
<td class="px-4 py-4 text-sm">Deu</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">enabled</span>
</td>
<td class="px-4 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>
</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">Product</h3>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<input type="text" placeholder="Product Name" 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>New Product
</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">Product name</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Price</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">STATUS</th>
<th class="px-4 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-4 py-4 text-sm">Standard visa</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">enabled</span>
</td>
<td class="px-4 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-4 py-4 text-sm">B1/B2</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">enabled</span>
</td>
<td class="px-4 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>
</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">Documents setup</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="">Country</option>
</select>
<select class="border border-gray-300 rounded-button px-4 py-2 text-sm">
<option value="">Product</option>

</select>
</div>
<button class="bg-primary text-white px-4 py-2 rounded-button">
<i class="fas fa-plus mr-2"></i>New documents
</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">Doc. Name</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Mandatory</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Requirement</th>
<th class="px-4 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-4 py-4 text-sm">Passport scan copy</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">Mandatory</span>
</td>
<td class="px-4 py-4 text-sm">Passport must be valid for more than 6 months</td>
<td class="px-4 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">Delete</button>
</td>
</tr>
<tr>
<td class="px-4 py-4 text-sm">ID Card</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">Mandatory</span>
</td>
<td class="px-4 py-4 text-sm">Scanned front and back of clear ID card</td>
<td class="px-4 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">Delete</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="">placement</option>
</select>
<button class="bg-primary text-white px-4 py-2 rounded-button">
<i class="fas fa-plus mr-2"></i>New 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">UK ODMV</h4>
<p class="text-sm text-gray-500">Placement：Homepage banner</p>
<p class="text-sm text-gray-500">Priority:1</p>
</div>
</div>
<div class="flex items-center space-x-3">
<button class="text-primary hover:text-primary-dark">Edit</button>
<button class="text-red-600 hover:text-red-800">Disable</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">Bank</h4>
<p class="text-sm text-gray-500">Placement：Travel related service</p>
<p class="text-sm text-gray-500">Priority：4</p>
</div>
</div>
<div class="flex items-center space-x-3">
<button class="text-primary hover:text-primary-dark">Edit</button>
<button class="text-red-600 hover:text-red-800">Disable</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</nav>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
编辑器加载中
预览
控制台