VASCO DEMOedit icon

创建者：
用户tc1qd0BG
Fork(复制)
图库
图片、视频、音频、图标
下载
嵌入
BUG反馈
index.html
index.html
            
            <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#EF4444',
secondary: '#10B981'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<style>
.font-pacifico {
font-family: 'Pacifico', serif;
}
.rounded-button {
border-radius: 4px;
}
.fa-icon {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
}
.category-icon {
width: 64px;
height: 64px;
object-fit: contain;
}
.product-card {
transition: all 0.3s ease;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.scroll-container {
scrollbar-width: none;
}
.scroll-container::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800 relative" style="width: 375px; min-height: 762px; margin: 0 auto;">
<!-- 顶部导航栏 -->
<nav class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50">
<div class="flex items-center justify-between px-4 py-3">
<div class="flex items-center space-x-2">
<span class="text-primary text-xl font-[cursive]" >VASCO</span>
</div>
<div class="flex items-center space-x-4">
<button class="text-gray-600">
<i class="fas fa-globe fa-icon"></i>
</button>
<button class="text-gray-600 relative">
<i class="fas fa-bell fa-icon"></i>
<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
</button>
<button class="text-gray-600">
<i class="fas fa-headset fa-icon"></i>
</button>
</div>
</div>
</nav>
<!-- 主内容区域 -->
<main class="pt-16 pb-20 px-4">
<!-- 签证申请信息页面 -->
<div id="visa-form" class="hidden space-y-6">
<!-- 返回按钮 -->
<div class="flex items-center mb-4">
<button class="text-gray-600" onclick="hideVisaForm()">
<i class="fas fa-arrow-left fa-icon mr-2"></i>
</button>
<h2 class="text-lg font-medium">Application details</h2>
</div>
<!-- 申请进度 -->
<div class="flex items-center justify-between px-4">
<div class="flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center text-sm">1</div>
<span class="text-xs mt-1 text-primary">Application details</span>
</div>
<div class="flex-1 h-1 bg-gray-200 mx-2">
<div class="w-0 h-full bg-primary"></div>
</div>
<div class="flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center text-sm">2</div>
<span class="text-xs mt-1 text-gray-500">Upload files</span>
</div>
<div class="flex-1 h-1 bg-gray-200 mx-2"></div>
<div class="flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center text-sm">3</div>
<span class="text-xs mt-1 text-gray-500">Review</span>
</div>
</div>
<!-- 基本信息表单 -->
<div class="space-y-4">
<div class="bg-white rounded-xl shadow-sm p-4 space-y-4">
<h3 class="font-medium">Personal Information</h3>
<div>
<label class="block text-sm text-gray-600 mb-1">Name(Chinese)</label>
<input type="text" class="w-full px-3 py-2 border border-gray-200 rounded-button text-sm" placeholder="Please entry Chinese name">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Name(English)</label>
<input type="text" class="w-full px-3 py-2 border border-gray-200 rounded-button text-sm" placeholder="Please enter the nama in pinyin, consistent with your passport">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Birthday</label>
<input type="date" class="w-full px-3 py-2 border border-gray-200 rounded-button text-sm">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Gender</label>
<div class="flex space-x-4">
<label class="flex items-center">
<input type="radio" name="gender" class="mr-2">
<span class="text-sm">Male</span>
</label>
<label class="flex items-center">
<input type="radio" name="gender" class="mr-2">
<span class="text-sm">Female</span>
</label>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-4 space-y-4">
<h3 class="font-medium">Passport</h3>
<div class="border-2 border-dashed border-gray-200 rounded-xl p-4 mb-4">
<div class="flex flex-col items-center justify-center space-y-2">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
<i class="fas fa-passport text-blue-500 text-xl"></i>
</div>
<p class="text-sm text-gray-600">Upload the passport information page photo, automatic recognition to fill in the</p>
<button class="px-4 py-2 bg-primary text-white rounded-button text-sm">
<i class="fas fa-camera mr-2">Take a photo</i>
</button>
</div>
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Passport Number</label>
<div class="relative">
<input type="text" class="w-full px-3 py-2 border border-gray-200 rounded-button text-sm" placeholder="Please entry passport number">
<span class="absolute right-2 top-2 text-green-500">
<i class="fas fa-check-circle"></i>
</span>
</div>
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Issue Date</label>
<div class="relative">
<input type="date" class="w-full px-3 py-2 border border-gray-200 rounded-button text-sm">
<span class="absolute right-2 top-2 text-green-500">
<i class="fas fa-check-circle"></i>
</span>
</div>
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Valid till</label>
<div class="relative">
<input type="date" class="w-full px-3 py-2 border border-gray-200 rounded-button text-sm">
<span class="absolute right-2 top-2 text-green-500">
<i class="fas fa-check-circle"></i>
</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-4 space-y-4">
<h3 class="font-medium">Contacts</h3>
<div>
<label class="block text-sm text-gray-600 mb-1">Phone Number</label>
<input type="tel" class="w-full px-3 py-2 border border-gray-200 rounded-button text-sm" placeholder="Please entery phone number">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Email</label>
<input type="email" class="w-full px-3 py-2 border border-gray-200 rounded-button text-sm" placeholder="Please entery email address">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Address</label>
<input type="text" class="w-full px-3 py-2 border border-gray-200 rounded-button text-sm" placeholder="Please entery address">
</div>
</div>
<!-- 下一步按钮 -->
<button class="w-full py-3 bg-primary text-white rounded-button text-lg font-medium shadow-md hover:shadow-lg transition-shadow" onclick="showUploadMaterials()">
下一步
</button>
</div>
</div>
<!-- Upload Files页面 -->
<div id="upload-materials" class="hidden space-y-6">
<!-- 返回按钮 -->
<div class="flex items-center mb-4">
<button class="text-gray-600" onclick="hideUploadMaterials()">
<i class="fas fa-arrow-left fa-icon mr-2"></i>
</button>
<h2 class="text-lg font-medium">Upload files</h2>
</div>
<!-- 申请进度 -->
<div class="flex items-center justify-between px-4">
<div class="flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center text-sm">
<i class="fas fa-check text-sm"></i>
</div>
<span class="text-xs mt-1 text-primary">Application details</span>
</div>
<div class="flex-1 h-1 bg-primary mx-2"></div>
<div class="flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center text-sm">2</div>
<span class="text-xs mt-1 text-primary">Upload Files</span>
</div>
<div class="flex-1 h-1 bg-gray-200 mx-2"></div>
<div class="flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center text-sm">3</div>
<span class="text-xs mt-1 text-gray-500">review</span>
</div>
</div>
<!-- 材料上传列表 -->
<div class="space-y-4">
<div class="bg-white rounded-xl shadow-sm p-4 space-y-4">
<h3 class="font-medium">Mandatory</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between items-center mb-2">
<label class="text-sm text-gray-600">Passport</label>
<span class="text-xs text-red-500">Mandatory</span>
</div>
<div class="border border-dashed border-gray-300 rounded-xl p-4 flex flex-col items-center justify-center">
<i class="fas fa-cloud-upload-alt text-gray-400 text-xl mb-2"></i>
<p class="text-sm text-gray-500 mb-2">Upload</p>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<label class="text-sm text-gray-600">Photo</label>
<span class="text-xs text-red-500">Mandatory</span>
</div>
<div class="border border-dashed border-gray-300 rounded-xl p-4 flex flex-col items-center justify-center">
<i class="fas fa-cloud-upload-alt text-gray-400 text-xl mb-2"></i>
<p class="text-sm text-gray-500 mb-2">Upload</p>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<label class="text-sm text-gray-600">ID card copy</label>
<span class="text-xs text-red-500">Mandatory</span>
</div>
<div class="border border-dashed border-gray-300 rounded-xl p-4 flex flex-col items-center justify-center">
<i class="fas fa-cloud-upload-alt text-gray-400 text-xl mb-2"></i>
<p class="text-sm text-gray-500 mb-2">Upload</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-4 space-y-4">
<h3 class="font-medium">Supporting documents</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between items-center mb-2">
<label class="text-sm text-gray-600">Certificate of employment</label>
<span class="text-xs text-gray-500">Optional</span>
</div>
<div class="border border-dashed border-gray-300 rounded-xl p-4 flex flex-col items-center justify-center">
<i class="fas fa-cloud-upload-alt text-gray-400 text-xl mb-2"></i>
<p class="text-sm text-gray-500 mb-2">Upload</p>

</div>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<label class="text-sm text-gray-600">Proof of Assets</label>
<span class="text-xs text-gray-500">Optional</span>
</div>
<div class="border border-dashed border-gray-300 rounded-xl p-4 flex flex-col items-center justify-center">
<i class="fas fa-cloud-upload-alt text-gray-400 text-xl mb-2"></i>
<p class="text-sm text-gray-500 mb-2">Upload</p>

</div>
</div>
</div>
</div>
<!-- 下一步按钮 -->
<button class="w-full py-3 bg-primary text-white rounded-button text-lg font-medium shadow-md hover:shadow-lg transition-shadow" onclick="showAppointment()">
Next
</button>
</div>
</div>
<!-- 预约面签页面 -->
<div id="appointment" class="hidden space-y-6">
<!-- 返回按钮 -->
<div class="flex items-center mb-4">
<button class="text-gray-600" onclick="hideAppointment()">
<i class="fas fa-arrow-left fa-icon mr-2"></i>
</button>
<h2 class="text-lg font-medium">Review</h2>
</div>
<!-- 申请进度 -->
<div class="flex items-center justify-between px-4">
<div class="flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center text-sm">
<i class="fas fa-check text-sm"></i>
</div>
<span class="text-xs mt-1 text-primary">Application details</span>
</div>
<div class="flex-1 h-1 bg-primary mx-2"></div>
<div class="flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center text-sm">
<i class="fas fa-check text-sm"></i>
</div>
<span class="text-xs mt-1 text-primary">Upload files</span>
</div>
<div class="flex-1 h-1 bg-primary mx-2"></div>
<div class="flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center text-sm">3</div>
<span class="text-xs mt-1 text-primary">Courier</span>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-4 space-y-4">
<h3 class="font-medium">Document precheck </h3>
<div class="space-y-3">
<div class="flex items-center space-x-3 p-3 bg-gray-50 rounded-xl">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
<i class="fas fa-passport text-green-500"></i>
</div>
<div>
<h4 class="text-sm font-medium">Passport</h4>
<p class="text-xs text-gray-500">Identification is complete and the information is correct</p>
</div>
<i class="fas fa-check-circle text-green-500 ml-auto"></i>
</div>
<div class="flex items-center space-x-3 p-3 bg-gray-50 rounded-xl">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
<i class="fas fa-id-card text-green-500"></i>
</div>
<div>
<h4 class="text-sm font-medium">ID card</h4>
<p class="text-xs text-gray-500">Clearly visible on both sides</p>
</div>
<i class="fas fa-check-circle text-green-500 ml-auto"></i>
</div>
<div class="flex items-center space-x-3 p-3 bg-gray-50 rounded-xl">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
<i class="fas fa-image text-green-500"></i>
</div>
<div>
<h4 class="text-sm font-medium">Photo</h4>
<p class="text-xs text-gray-500">Clear</p>
</div>
<i class="fas fa-check-circle text-green-500 ml-auto"></i>
</div>
</div>
</div>
<!-- 预约信息 -->
<div class="bg-white rounded-xl shadow-sm p-4 space-y-4">
<h3 class="font-medium">Courier Address</h3>
<div class="space-y-4">
<div>
<label class="block text-sm text-gray-600 mb-1">Name</label>
<input type="text" class="w-full px-3 py-2 border border-gray-200 rounded-button text-sm" placeholder="">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Phone number</label>
<input type="tel" class="w-full px-3 py-2 border border-gray-200 rounded-button text-sm" placeholder="">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Address</label>
<div class="space-y-2">
<div class="flex space-x-2">
<select class="flex-1 px-3 py-2 border border-gray-200 rounded-button text-sm">
<option selected disabled>Province</option>
<option></option>
</select>
<select class="flex-1 px-3 py-2 border border-gray-200 rounded-button text-sm">
<option selected disabled>City</option>
</select>
<select class="flex-1 px-3 py-2 border border-gray-200 rounded-button text-sm">
<option selected disabled>District</option>
</select>
</div>
<input type="text" class="w-full px-3 py-2 border border-gray-200 rounded-button text-sm" placeholder="Please enter detailed address, e.g. street name, house number, etc.">
</div>
</div>
<div class="flex items-center space-x-2">
<div class="w-4 h-4 rounded border-2 border-primary flex items-center justify-center">
<div class="w-2 h-2 rounded-full bg-primary"></div>
</div>
<p class="text-xs text-gray-500">Set to default address</p>
</div>
</div>
</div>

<!-- 提交按钮 -->
<button class="w-full py-3 bg-primary text-white rounded-button text-lg font-medium shadow-md hover:shadow-lg transition-shadow" onclick="submitApplication()">
Courier
</button>
</div>
<!-- 支付页面 -->
<div id="payment" class="hidden space-y-6">
<!-- 返回按钮 -->
<div class="flex items-center mb-4">
<button class="text-gray-600" onclick="hideOrderForm()">
<i class="fas fa-arrow-left fa-icon mr-2"></i>
</button>
<h2 class="text-lg font-medium">Oreder Details</h2>
</div>
<!-- 产品信息 -->
<div class="bg-white rounded-xl shadow-sm p-4">
<div class="flex justify-between items-start mb-3">
<div>
<h3 class="font-medium">Japan Single Entry Visa</h3>
<p class="text-xs text-gray-500">alid for 3 months, stay 15 days</p>
</div>
<span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">hot selling</span>
</div>
<div class="flex justify-between items-center">
<p class="text-sm text-gray-600">x1</p>
<p class="text-lg font-bold text-primary">¥399</p>
</div>
</div>
<!-- 申请人信息 -->
<div class="bg-white rounded-xl shadow-sm p-4">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium">Applicant details</h3>
<button class="text-sm text-primary font-medium">Frequent Applicants</button>
</div>
<!-- 快速选择常用申请人 -->
<div class="flex space-x-2 overflow-x-auto scroll-container mb-4">
<button class="flex-shrink-0 px-3 py-2 border border-primary text-primary rounded-button text-sm">Tester One</button>
<button class="flex-shrink-0 px-3 py-2 border border-gray-200 rounded-button text-sm">Tester Two</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm text-gray-600 mb-1">Name</label>
<input type="text" class="w-full px-3 py-2 border border-gray-200 rounded-button text-sm" value="Tester One" placeholder="请输入姓名">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Phone Number</label>
<input type="tel" class="w-full px-3 py-2 border border-gray-200 rounded-button text-sm" value="13812345678" placeholder="请输入手机号码">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Email</label>
<input type="email" class="w-full px-3 py-2 border border-gray-200 rounded-button text-sm" value="[email protected]" placeholder="请输入电子邮箱">
</div>
</div>
</div>
<!-- 出行日期 -->
<div class="bg-white rounded-xl shadow-sm p-4">
<h3 class="text-lg font-medium mb-4">Travel Information</h3>
<div>
<label class="block text-sm text-gray-600 mb-1">Planned Travel Dates</label>
<input type="date" class="w-full px-3 py-2 border border-gray-200 rounded-button text-sm text-gray-700">
</div>
</div>
<!-- 支付方式 -->
<div class="bg-white rounded-xl shadow-sm p-4">
<h3 class="text-lg font-medium mb-4">Payment options</h3>
<div class="space-y-3">
<div class="flex items-center justify-between p-3 border border-primary rounded-button">
<div class="flex items-center space-x-3">
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center">
<i class="fab fa-alipay text-blue-500"></i>
</div>
<span class="text-sm">Alipay</span>
</div>
<div class="w-4 h-4 rounded-full border-2 border-primary flex items-center justify-center">
<div class="w-2 h-2 rounded-full bg-primary"></div>
</div>
</div>
<div class="flex items-center justify-between p-3 border border-gray-200 rounded-button">
<div class="flex items-center space-x-3">
<div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center">
<i class="fab fa-weixin text-green-500"></i>
</div>
<span class="text-sm">WeChat Pay</span>
</div>
<div class="w-4 h-4 rounded-full border-2 border-gray-300"></div>
</div>
</div>
</div>
<!-- 服务协议 -->
<div class="flex items-center space-x-2">
<div class="w-4 h-4 rounded border-2 border-primary flex items-center justify-center">
<div class="w-2 h-2 rounded-full bg-primary"></div>
</div>
<p class="text-xs text-gray-500">I have read and agree to the Service Agreement and Privacy Policy</p>
</div>
<!-- 底部支付按钮 -->
<div class="fixed bottom-8 left-0 right-0 bg-white border-t border-gray-100" style="width: 375px; margin: 0 auto; z-index: 40;">
<div class="flex items-center justify-between px-4 py-3">
<div class="flex flex-col">
<span class="text-sm text-gray-600">Total</span>
<span class="text-xl font-bold text-primary">¥399</span>
</div>
<button class="flex-1 py-3 px-4 bg-primary text-white rounded-button text-base font-medium whitespace-nowrap" onclick="showPaymentSuccess()">
Pay
</button>
</div>
</div>
</div>
<!-- 产品详情页 -->
<div id="product-detail" class="hidden space-y-6">
<!-- 返回按钮 -->
<div class="flex items-center mb-4">
<button class="text-gray-600" onclick="hideProductDetail()">
<i class="fas fa-arrow-left fa-icon mr-2"></i>
</button>
<h2 class="text-lg font-medium">产品详情</h2>
</div>
<!-- 产品头图 -->
<div class="relative rounded-xl overflow-hidden h-48">
<img src="https://ai-public.mastergo.com/ai/img_res/822896e3771de28bbefb9482e95bcebb.jpg"
class="w-full h-full object-cover" alt="日本签证">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 to-transparent p-4">
<h3 class="text-white font-medium">Japan Single Entry</h3>
<p class="text-white text-xs">有效期3个月，停留15天</p>
</div>
</div>
<!-- 产品介绍 -->
<div class="bg-white rounded-xl shadow-sm p-4 space-y-4">
<div class="flex justify-between items-start">
<div>
<p class="text-2xl font-bold text-primary">¥399</p>
<p class="text-sm text-gray-500 line-through">原价: ¥599</p>
</div>
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">热销产品</span>
</div>
<div class="space-y-2">
<p class="text-sm text-gray-600">办理时长: 7-10个工作日</p>
<p class="text-sm text-gray-600">领区: 全国受理</p>
<p class="text-sm text-gray-600">签发地: 日本驻华大使馆/总领事馆</p>
</div>
</div>
<!-- 办理要求 -->
<div class="bg-white rounded-xl shadow-sm p-4">
<h3 class="text-lg font-medium mb-4">办理要求</h3>
<div class="space-y-4">
<div class="flex items-start space-x-3">
<div class="w-6 h-6 rounded-full bg-blue-100 flex-shrink-0 flex items-center justify-center">
<i class="fas fa-passport text-blue-500 text-xs"></i>
</div>
<div>
<h4 class="text-sm font-medium">护照要求</h4>
<p class="text-sm text-gray-600">有效期在 6 个月以上的有效护照</p>
</div>
</div>
<div class="flex items-start space-x-3">
<div class="w-6 h-6 rounded-full bg-green-100 flex-shrink-0 flex items-center justify-center">
<i class="fas fa-camera text-green-500 text-xs"></i>
</div>
<div>
<h4 class="text-sm font-medium">照片要求</h4>
<p class="text-sm text-gray-600">近 6 个月内拍摄的 2 寸白底彩色照片</p>
</div>
</div>
<div class="flex items-start space-x-3">
<div class="w-6 h-6 rounded-full bg-yellow-100 flex-shrink-0 flex items-center justify-center">
<i class="fas fa-building text-yellow-500 text-xs"></i>
</div>
<div>
<h4 class="text-sm font-medium">Certificate of employment</h4>
<p class="text-sm text-gray-600">需要提供盖章的Certificate of employment原件</p>
</div>
</div>
<div class="flex items-start space-x-3">
<div class="w-6 h-6 rounded-full bg-purple-100 flex-shrink-0 flex items-center justify-center">
<i class="fas fa-money-check text-purple-500 text-xs"></i>
</div>
<div>
<h4 class="text-sm font-medium">资产证明</h4>
<p class="text-sm text-gray-600">近 3 个月的银行流水，余额不低于 2 万元</p>
</div>
</div>
</div>
</div>
<!-- 其他说明 -->
<div class="bg-white rounded-xl shadow-sm p-4">
<h3 class="text-lg font-medium mb-4">其他说明</h3>
<div class="space-y-2 text-sm text-gray-600">
<p>1. Visa Validity自签发之日起计算</p>
<p>2. 签证处理期间护照将被使领馆留存</p>
<p>3. 申请人需要在预约时间到指定地点提交材料</p>
<p>4. 最终签发结果以使领馆审核为准</p>
</div>
</div>
<!-- 底部按钮 -->
<div class="fixed bottom-0 left-0 right-0 px-4 py-3 bg-white border-t border-gray-100" style="width: 375px; margin: 0 auto; z-index: 40;">
<div class="flex space-x-3">
<button class="flex-1 py-3 px-4 bg-gray-100 text-gray-600 rounded-button text-base font-medium flex items-center justify-center">
<i class="far fa-heart mr-2"></i>
收藏
</button>
<button class="flex-1 py-3 px-4 bg-primary/10 text-primary rounded-button text-base font-medium flex items-center justify-center">
<i class="far fa-comments mr-2"></i>
客服咨询
</button>
<button class="flex-1 py-3 bg-primary text-white rounded-button text-base font-medium" onclick="showOrderForm()">
立即下单
</button>
</div>
</div>
</div>
<!-- 首页内容 -->
<div id="home" class="space-y-6">
<!-- 搜索区域 -->
<div class="bg-white rounded-xl shadow-sm p-4">
<div class="flex items-center space-x-2">
<i class="fas fa-search text-gray-400"></i>
<select class="flex-1 border-none focus:ring-0 text-sm">
<option selected disabled>选择签证目的地</option>
<option>日本</option>
<option>韩国</option>
<option>美国</option>
<option>英国</option>
<option>澳大利亚</option>
</select>
</div>
</div>
<!-- 广告轮播 -->
<div class="relative rounded-xl overflow-hidden h-40">
<div class="w-full h-full bg-gray-100 flex items-center justify-center">
<i class="fas fa-image text-gray-400 text-4xl"></i>
</div>
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 to-transparent p-4">
<h3 class="text-white font-medium">日本签证限时特惠</h3>
<p class="text-white text-xs">单次签证仅需 ¥399</p>
</div>
</div>
<!-- 热门目的地 -->
<div>
<h2 class="text-lg font-medium mb-3">热门目的地</h2>
<div class="grid grid-cols-3 gap-3">
<div class="bg-white rounded-xl shadow-sm overflow-hidden product-card">
<div class="w-full h-24 bg-gray-100 flex items-center justify-center">
<i class="fas fa-image text-gray-400 text-2xl"></i>
</div>
<div class="p-2">
<h3 class="text-sm font-medium truncate">Korea</h3>
<p class="text-xs text-gray-500">¥399起</p>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm overflow-hidden product-card">
<div class="w-full h-24 bg-gray-100 flex items-center justify-center">
<i class="fas fa-image text-gray-400 text-2xl"></i>
</div>
<div class="p-2">
<h3 class="text-sm font-medium truncate">USA</h3>
<p class="text-xs text-gray-500">¥499起</p>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm overflow-hidden product-card">
<div class="w-full h-24 bg-gray-100 flex items-center justify-center">
<i class="fas fa-image text-gray-400 text-2xl"></i>
</div>
<div class="p-2">
<h3 class="text-sm font-medium truncate">UK</h3>
<p class="text-xs text-gray-500">¥1299起</p>
</div>
</div>
</div>
</div>
<!-- 相关服务 -->
<div>
<h2 class="text-lg font-medium mb-3">Travel Related Service</h2>
<div class="grid grid-cols-2 gap-3">
<!-- 住宿服务 -->
<div class="bg-white rounded-xl shadow-sm p-4">
<div class="flex items-center mb-2">
<div class="bg-red-50 rounded-lg w-8 h-8 flex items-center justify-center mr-2">
<i class="fas fa-hotel text-red-500"></i>
</div>
<h3 class="text-sm font-medium">Accomodation</h3>
</div>
<div class="space-y-2">
<div class="flex items-center justify-between text-sm">
<span>Hotel</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
<div class="flex items-center justify-between text-sm">
<span>Homestay</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
</div>
</div>
<!-- 交通服务 -->
<div class="bg-white rounded-xl shadow-sm p-4">
<div class="flex items-center mb-2">
<div class="bg-green-50 rounded-lg w-8 h-8 flex items-center justify-center mr-2">
<i class="fas fa-plane text-green-500"></i>
</div>
<h3 class="text-sm font-medium">Transporation</h3>
</div>
<div class="space-y-2">
<div class="flex items-center justify-between text-sm">
<span>Airticket</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
<div class="flex items-center justify-between text-sm">
<span>Car rental</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
</div>
</div>
<!-- 保险服务 -->
<div class="bg-white rounded-xl shadow-sm p-4">
<div class="flex items-center mb-2">
<div class="bg-purple-50 rounded-lg w-8 h-8 flex items-center justify-center mr-2">
<i class="fas fa-shield-alt text-purple-500"></i>
</div>
<h3 class="text-sm font-medium">Insurance</h3>
</div>
<div class="space-y-2">
<div class="flex items-center justify-between text-sm">
<span>Travel insurance</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
<div class="flex items-center justify-between text-sm">
<span>Medical insurance</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
</div>
</div>
<!-- 金融服务 -->
<div class="bg-white rounded-xl shadow-sm p-4">
<div class="flex items-center mb-2">
<div class="bg-blue-50 rounded-lg w-8 h-8 flex items-center justify-center mr-2">
<i class="fas fa-money-check-alt text-blue-500"></i>
</div>
<h3 class="text-sm font-medium">Bank</h3>
</div>
<div class="space-y-2">
<div class="flex items-center justify-between text-sm">
<span>Credit Card</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
<div class="flex items-center justify-between text-sm">
<span>Currency Exchange</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
</div>
</div>
</div>
</div>
<!-- 品牌介绍 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="w-full h-32 bg-gray-100 flex items-center justify-center">
<i class="fas fa-image text-gray-400 text-3xl"></i>
</div>
<div class="p-4">
<h3 class="text-lg font-medium mb-2">关于我们</h3>
<p class="text-sm text-gray-600">专业签证服务平台，10年签证办理经验，成功服务超过100万用户</p>
<button class="mt-3 text-sm text-primary font-medium">了解更多</button>
</div>
</div>
</div>
<!-- 目的地页面 -->
<div id="destination" class="hidden space-y-6">
<!-- 大洲分类 -->
<div class="bg-white rounded-xl shadow-sm p-3">
<div class="flex space-x-1 overflow-x-auto scroll-container pb-2">
<button class="flex-shrink-0 px-3 py-1 bg-primary text-white rounded-full text-sm">全部</button>
<button class="flex-shrink-0 px-3 py-1 bg-gray-100 rounded-full text-sm">亚洲</button>
<button class="flex-shrink-0 px-3 py-1 bg-gray-100 rounded-full text-sm">欧洲</button>
<button class="flex-shrink-0 px-3 py-1 bg-gray-100 rounded-full text-sm">美洲</button>
<button class="flex-shrink-0 px-3 py-1 bg-gray-100 rounded-full text-sm">大洋洲</button>
<button class="flex-shrink-0 px-3 py-1 bg-gray-100 rounded-full text-sm">非洲</button>
</div>
</div>
<!-- 国家列表 -->
<div class="grid grid-cols-2 gap-3">
<div class="bg-white rounded-xl shadow-sm overflow-hidden product-card" onclick="showJapanProducts()">
<div class="w-full h-24 bg-gray-100 flex items-center justify-center">
<i class="fas fa-image text-gray-400 text-2xl"></i>
</div>
<div class="p-2">
<h3 class="text-sm font-medium">日本</h3>
<p class="text-xs text-gray-500">单次/多次签证</p>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm overflow-hidden product-card">
<div class="w-full h-24 bg-gray-100 flex items-center justify-center">
<i class="fas fa-image text-gray-400 text-2xl"></i>
</div>
<div class="p-2">
<h3 class="text-sm font-medium">韩国</h3>
<p class="text-xs text-gray-500">单次/五年多次</p>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm overflow-hidden product-card">
<div class="w-full h-24 bg-gray-100 flex items-center justify-center">
<i class="fas fa-image text-gray-400 text-2xl"></i>
</div>
<div class="p-2">
<h3 class="text-sm font-medium">美国</h3>
<p class="text-xs text-gray-500">B1/B2签证</p>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm overflow-hidden product-card">
<div class="w-full h-24 bg-gray-100 flex items-center justify-center">
<i class="fas fa-image text-gray-400 text-2xl"></i>
</div>
<div class="p-2">
<h3 class="text-sm font-medium">英国</h3>
<p class="text-xs text-gray-500">2年/5年/10年</p>
</div>
</div>
</div>
</div>
<!-- 日本产品列表页面 -->
<div id="japan-products" class="hidden space-y-6">
<!-- 返回按钮 -->
<div class="flex items-center mb-4">
<button class="text-gray-600" onclick="hideJapanProducts()">
<i class="fas fa-arrow-left fa-icon mr-2"></i>
</button>
<h2 class="text-lg font-medium">日本签证产品</h2>
</div>
<!-- 产品筛选 -->
<div class="bg-white rounded-xl shadow-sm p-3">
<div class="flex space-x-1 overflow-x-auto scroll-container pb-2">
<button class="flex-shrink-0 px-3 py-1 bg-primary text-white rounded-full text-sm">全部</button>
<button class="flex-shrink-0 px-3 py-1 bg-gray-100 rounded-full text-sm">单次签证</button>
<button class="flex-shrink-0 px-3 py-1 bg-gray-100 rounded-full text-sm">三年多次</button>
<button class="flex-shrink-0 px-3 py-1 bg-gray-100 rounded-full text-sm">五年多次</button>
</div>
</div>
<!-- 产品列表 -->
<div class="space-y-4">
<!-- 产品1 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden product-card">
<div class="p-4">
<div class="flex justify-between items-start mb-3">
<div>
<h3 class="font-medium">Japan Single Entry</h3>
<p class="text-xs text-gray-500">有效期3个月，停留15天</p>
</div>
<span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">热销</span>
</div>
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600">办理时长: 7-10个工作日</p>
<p class="text-sm text-gray-600">领区: 全国受理</p>
</div>
<div class="text-right">
<p class="text-sm text-gray-500 line-through">¥599</p>
<p class="text-lg font-bold text-primary">¥399</p>
</div>
</div>
<div class="mt-3 flex justify-end">
<button class="px-4 py-2 bg-primary text-white rounded-button text-sm" onclick="showProductDetail()">立即办理</button>
</div>
</div>
</div>
<!-- 产品2 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden product-card">
<div class="p-4">
<div class="flex justify-between items-start mb-3">
<div>
<h3 class="font-medium">日本三年多次往返签证</h3>
<p class="text-xs text-gray-500">有效期3年，每次停留30天</p>
</div>
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">推荐</span>
</div>
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600">办理时长: 10-12个工作日</p>
<p class="text-sm text-gray-600">领区: 北京/上海/广州</p>
</div>
<div class="text-right">
<p class="text-sm text-gray-500 line-through">¥1299</p>
<p class="text-lg font-bold text-primary">¥999</p>
</div>
</div>
<div class="mt-3 flex justify-end">
<button class="px-4 py-2 bg-primary text-white rounded-button text-sm" onclick="showProductDetail()">立即办理</button>
</div>
</div>
</div>
<!-- 产品3 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden product-card">
<div class="p-4">
<div class="flex justify-between items-start mb-3">
<div>
<h3 class="font-medium">日本五年多次往返签证</h3>
<p class="text-xs text-gray-500">有效期5年，每次停留90天</p>
</div>
<span class="px-2 py-1 bg-purple-100 text-purple-800 rounded-full text-xs">高端</span>
</div>
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600">办理时长: 12-15个工作日</p>
<p class="text-sm text-gray-600">领区: 北京/上海/广州</p>
</div>
<div class="text-right">
<p class="text-sm text-gray-500 line-through">¥1999</p>
<p class="text-lg font-bold text-primary">¥1599</p>
</div>
</div>
<div class="mt-3 flex justify-end">
<button class="px-4 py-2 bg-primary text-white rounded-button text-sm" onclick="showProductDetail()">立即办理</button>
</div>
</div>
</div>
</div>
</div>
<!-- 订单页面 -->
<div id="orders" class="hidden">
<!-- 订单状态切换 -->
<div class="bg-white rounded-xl shadow-sm mb-4">
<div class="flex">
<button class="flex-1 py-3 text-sm font-medium border-b-2 border-primary text-primary" onclick="showOrderStatus('pending-payment')">Unpaid</button>
<button class="flex-1 py-3 text-sm font-medium text-gray-500" onclick="showOrderStatus('pending-submit')">To Submit</button>
<button class="flex-1 py-3 text-sm font-medium text-gray-500" onclick="showOrderStatus('processing')">Processing</button>
<button class="flex-1 py-3 text-sm font-medium text-gray-500" onclick="showOrderStatus('completed')">Completed</button>
</div>
</div>
<!-- 订单列表 -->
<div class="space-y-3">
<!-- Unpaid订单 -->
<div class="bg-white rounded-xl shadow-sm p-4">
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="font-medium">Japan Single Entry</h3>
<p class="text-xs text-gray-500">Order No.: JP20230512001</p>
</div>
<span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">Unpaid</span>
</div>
<div class="flex justify-between items-center text-sm mb-3">
<span>¥399 x 1</span>
<span class="font-medium">Total: ¥399</span>
</div>
<div class="flex justify-end space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm">Cancel Order</button>
<button class="px-3 py-1 bg-primary text-white rounded-button text-sm">Pay Now</button>
</div>
</div>
<!-- To Submit订单 -->
<div class="bg-white rounded-xl shadow-sm p-4 hidden">
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="font-medium">UK Visit Visa(2 Years)</h3>
<p class="text-xs text-gray-500">Order No.: UK20230515003</p>
</div>
<span class="px-2 py-1 bg-red-100  rounded-full text-xs">To Submit</span>

</div>
<div class="flex justify-between items-center text-sm mb-3">

</div>
<div class="flex justify-end space-x-2">
<button class="px-3 py-1 bg-primary text-white rounded-button text-sm">Upload Files</button>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm p-4 hidden">
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="font-medium">USA B1/B2 Visit Visa</h3>
<p class="text-xs text-gray-500">Order No.: US20230516002</p>
</div>
<span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">To Submit</span>
</div>
<div class="flex justify-between items-center text-sm mb-3">

</div>
<div class="flex justify-end space-x-2">
<button class="px-3 py-1 bg-primary text-white rounded-button text-sm">Upload Files</button>
</div>
</div>
<!-- Processing订单 -->
<div class="bg-white rounded-xl shadow-sm p-4 hidden">
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="font-medium">Korea five-year multiple-entry visa</h3>
<p class="text-xs text-gray-500">Order No.: KR20230510004</p>
</div>
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Processing</span>
</div>
<div class="space-y-2 mb-3">
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Appointment</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Submission at VAC</span>
</div>
<div class="flex items-center text-sm">
<i class="fas fa-circle text-gray-300 mr-2"></i>
<span class="text-gray-500">Visa Result</span>
</div>
</div>
<div class="flex justify-end">
<button class="px-3 py-1 border border-primary text-primary rounded-button text-sm">View Progress</button>
</div>
</div>
<!-- 办理中订单（材料审核未通过） -->
<div class="bg-white rounded-xl shadow-sm p-4 hidden">
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="font-medium">USA B1/B2 Visa</h3>
<p class="text-xs text-gray-500"> Order No: 944194419441</p>
</div>
<span class="px-2 py-1 bg-red-100 text-green-800 rounded-full text-xs">To add info</span>
</div>
<div class="space-y-2 mb-3">
<div class="flex items-center text-sm">
<i class="fas fa-times-circle text-red-500 mr-2"></i>
<span class="text-red-500">Additional information required</span>
</div>
<div class="p-3 bg-red-50 rounded-lg mt-2">
<p class="text-sm text-red-700">
<i class="fas fa-exclamation-circle mr-2"></i>
It has been more than 3 months since the issuance of the certificate of employment, please provide a new original certificate of employment issued recently
</p>
</div>
</div>
<div class="flex justify-end space-x-2">
<button class="px-3 py-1 border border-primary text-primary rounded-button text-sm">Update</button>
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm">View Status</button>
</div>
</div>
<!-- Completed订单 -->
<div class="bg-white rounded-xl shadow-sm p-4 hidden">
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="font-medium">Australia Tourist Visa</h3>
<p class="text-xs text-gray-500">Order No.: AU20230428005</p>
</div>
<span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs">Completed</span>
</div>
<div class="space-y-2 mb-3">
<p class="text-sm text-gray-600">Visa Validity: 2023.05.10-2024.05.09</p>
<p class="text-sm text-gray-600">Duration of stay: up to 90 days at a time</p>
</div>
<div class="flex justify-end space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm">View Details</button>
<button class="px-3 py-1 bg-primary text-white rounded-button text-sm">Apply Again</button>
</div>
</div>
</div>
</div>
<!-- 登录页面 -->
<div id="login-page" class="hidden space-y-6">
<div class="pt-12 px-4">
  <div class="text-center mb-8">
    <span class="text-primary text-3xl font-['Pacifico']">VASCO</span>
    <p class="text-gray-500 mt-2">全球签证服务专家</p>
  </div>
  
  <div class="space-y-4">
    <div>
      <input type="tel" class="w-full px-4 py-3 border border-gray-200 rounded-button text-sm" placeholder="请输入手机号码">
    </div>
    <div class="relative">
      <input type="text" class="w-full px-4 py-3 border border-gray-200 rounded-button text-sm" placeholder="请输入验证码">
      <button class="absolute right-2 top-2 px-3 py-1 text-sm text-primary">获取验证码</button>
    </div>
    <button class="w-full py-3 bg-primary text-white rounded-button text-base font-medium">登录 / 注册</button>
    
    <div class="flex items-center justify-center space-x-2 text-xs text-gray-500 mt-4">
      <input type="checkbox" class="w-4 h-4 rounded border-gray-300">
      <span>我已阅读并同意《用户协议》和《隐私政策》</span>
    </div>
  </div>
  
  <div class="mt-8">
    <div class="relative">
      <div class="absolute inset-0 flex items-center">
        <div class="w-full border-t border-gray-200"></div>
      </div>
      <div class="relative flex justify-center text-sm">
        <span class="px-2 bg-gray-50 text-gray-500">其他登录方式</span>
      </div>
    </div>
    
    <div class="mt-6 flex justify-center space-x-12">
      <button class="flex flex-col items-center">
        <div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center mb-1">
          <i class="fab fa-weixin text-2xl text-green-500"></i>
        </div>
        <span class="text-xs text-gray-500">微信</span>
      </button>
      <button class="flex flex-col items-center">
        <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mb-1">
          <i class="fab fa-qq text-2xl text-blue-500"></i>
        </div>
        <span class="text-xs text-gray-500">QQ</span>
      </button>
    </div>
  </div>
</div>
</div>

<!-- 我的页面 -->
<div id="profile" class="hidden">
<!-- 常用申请人页面 -->
<div id="applicants" class="hidden">
<div class="flex items-center mb-4">
<button class="text-gray-600" onclick="hideApplicants()">
<i class="fas fa-arrow-left fa-icon mr-2"></i>
</button>
<h2 class="text-lg font-medium">常用申请人</h2>
</div>
<div class="space-y-4">
<!-- 张三 -->
<div class="bg-white rounded-xl shadow-sm p-4">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
<i class="fas fa-user text-blue-500"></i>
</div>
<h3 class="font-medium">张三</h3>
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm hover:bg-gray-50">
<i class="fas fa-edit mr-1"></i>编辑
</button>
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm text-red-500 hover:bg-gray-50">
<i class="fas fa-trash-alt mr-1"></i>删除
</button>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="text-sm">
<p class="text-gray-500 mb-1">性别</p>
<p>男</p>
</div>
<div class="text-sm">
<p class="text-gray-500 mb-1">出生日期</p>
<p>1990-05-15</p>
</div>
<div class="text-sm">
<p class="text-gray-500 mb-1">护照号码</p>
<p>E12345678</p>
</div>
<div class="text-sm">
<p class="text-gray-500 mb-1">签发日期</p>
<p>2020-06-01</p>
</div>
<div class="text-sm">
<p class="text-gray-500 mb-1">手机号码</p>
<p>138 1234 5678</p>
</div>
<div class="text-sm">
<p class="text-gray-500 mb-1">电子邮箱</p>
<p class="truncate">[email protected]</p>
</div>
<div class="text-sm col-span-2">
<p class="text-gray-500 mb-1">居住地址</p>
<p>上海市浦东新区张江高科技园区科苑路 88 号</p>
</div>
</div>
</div>
<!-- 李四 -->
<div class="bg-white rounded-xl shadow-sm p-4">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
<i class="fas fa-user text-purple-500"></i>
</div>
<h3 class="font-medium">李四</h3>
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm hover:bg-gray-50">
<i class="fas fa-edit mr-1"></i>编辑
</button>
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm text-red-500 hover:bg-gray-50">
<i class="fas fa-trash-alt mr-1"></i>删除
</button>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="text-sm">
<p class="text-gray-500 mb-1">性别</p>
<p>女</p>
</div>
<div class="text-sm">
<p class="text-gray-500 mb-1">出生日期</p>
<p>1988-07-22</p>
</div>
<div class="text-sm">
<p class="text-gray-500 mb-1">护照号码</p>
<p>G87654321</p>
</div>
<div class="text-sm">
<p class="text-gray-500 mb-1">签发日期</p>
<p>2021-03-15</p>
</div>
<div class="text-sm">
<p class="text-gray-500 mb-1">手机号码</p>
<p>139 8765 4321</p>
</div>
<div class="text-sm">
<p class="text-gray-500 mb-1">电子邮箱</p>
<p class="truncate">[email protected]</p>
</div>
<div class="text-sm col-span-2">
<p class="text-gray-500 mb-1">居住地址</p>
<p>北京市朝阳区建国门外大街 1 号国贸大厦</p>
</div>
</div>
</div>
<!-- 王五 -->
<div class="bg-white rounded-xl shadow-sm p-4">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
<i class="fas fa-user text-green-500"></i>
</div>
<h3 class="font-medium">王五</h3>
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm hover:bg-gray-50">
<i class="fas fa-edit mr-1"></i>编辑
</button>
<button class="px-3 py-1 border border-gray-300 rounded-button text-sm text-red-500 hover:bg-gray-50">
<i class="fas fa-trash-alt mr-1"></i>删除
</button>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="text-sm">
<p class="text-gray-500 mb-1">性别</p>
<p>男</p>
</div>
<div class="text-sm">
<p class="text-gray-500 mb-1">出生日期</p>
<p>1992-11-30</p>
</div>
<div class="text-sm">
<p class="text-gray-500 mb-1">护照号码</p>
<p>H98765432</p>
</div>
<div class="text-sm">
<p class="text-gray-500 mb-1">签发日期</p>
<p>2022-08-20</p>
</div>
<div class="text-sm">
<p class="text-gray-500 mb-1">手机号码</p>
<p>137 1234 8765</p>
</div>
<div class="text-sm">
<p class="text-gray-500 mb-1">电子邮箱</p>
<p class="truncate">[email protected]</p>
</div>
<div class="text-sm col-span-2">
<p class="text-gray-500 mb-1">居住地址</p>
<p>广州市天河区珠江新城花城大道 68 号</p>
</div>
</div>
</div>
<!-- 添加新申请人按钮 -->
<button class="w-full py-4 border-2 border-dashed border-gray-200 rounded-xl flex items-center justify-center space-x-2 text-gray-500 hover:border-primary hover:text-primary transition-colors">
<i class="fas fa-plus-circle text-xl"></i>
<span>添加常用申请人</span>
</button>
</div>
</div>
<!-- 用户信息 -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
<div class="flex items-center space-x-3">
<div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
<i class="fas fa-user text-red-500 text-xl"></i>
</div>
<div>
<h3 class="font-medium">Tester Customer</h3>
</div>
</div>
</div>
<!-- 功能列表 -->
<div class="bg-white rounded-xl shadow-sm mb-4">
<div class="p-3 border-b border-gray-100 flex items-center justify-between" onclick="showApplicants()">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
<i class="fas fa-users text-green-500"></i>
</div>
<span class="text-sm">Frequent Applicants</span>
</div>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
<div class="p-3 border-b border-gray-100 flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center">
<i class="fas fa-map-marker-alt text-yellow-500"></i>
</div>
<span class="text-sm">Privacy</span>
</div>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
<div class="p-3 border-b border-gray-100 flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center">
<i class="fas fa-headset text-red-500"></i>
</div>
<span class="text-sm">Customer service</span>
</div>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
<div class="p-3 border-b border-gray-100 flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
<i class="fas fa-cog text-gray-500"></i>
</div>

<span class="text-sm">Seetings</span>
</div>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
<div class="p-3 border-b border-gray-100 flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
<i class="fas fa-exchange-alt text-blue-500"></i>
</div>
<span class="text-sm">Switch Account</span>
</div>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
<div class="p-3 flex items-center justify-between" onclick="showLoginPage()">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center">
<i class="fas fa-sign-out-alt text-red-500"></i>
</div>
<span class="text-sm">Sign out</span>
</div>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
</div>
</div>
</main>
<!-- 底部导航栏 -->
<nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-100 z-50">
<div class="flex justify-around items-center py-2">
<button class="flex flex-col items-center text-primary" onclick="showTab('home')">
<i class="fas fa-home fa-icon mb-1"></i>
<span class="text-xs">Home</span>
</button>
<button class="flex flex-col items-center text-gray-500" onclick="showTab('destination')">
<i class="fas fa-map-marked-alt fa-icon mb-1"></i>
<span class="text-xs">Countries</span>
</button>
<button class="flex flex-col items-center text-gray-500" onclick="showTab('orders')">
<i class="fas fa-clipboard-list fa-icon mb-1"></i>
<span class="text-xs">Orders</span>
</button>
<button class="flex flex-col items-center text-gray-500" onclick="showTab('profile')">
<i class="fas fa-user fa-icon mb-1"></i>
<span class="text-xs">Account</span>
</button>
</div>
</nav>
<script>
// 显示对应标签页
function showTab(tabId) {
document.getElementById('home').classList.add('hidden');
document.getElementById('destination').classList.add('hidden');
document.getElementById('orders').classList.add('hidden');
document.getElementById('profile').classList.add('hidden');
document.getElementById('japan-products').classList.add('hidden');
document.getElementById('product-detail').classList.add('hidden');
document.getElementById('payment').classList.add('hidden');
document.getElementById('visa-form').classList.add('hidden');
document.getElementById('upload-materials').classList.add('hidden');
document.getElementById('appointment').classList.add('hidden');
document.getElementById('applicants').classList.add('hidden');
document.getElementById('login-page').classList.add('hidden');
document.getElementById(tabId).classList.remove('hidden');
// 更新底部导航栏选中状态
const navItems = document.querySelectorAll('nav.bottom-0 button');
navItems.forEach(item => {
item.classList.remove('text-primary');
item.classList.add('text-gray-500');
});
// 设置当前选中项
const currentNavItem = document.querySelector(`nav.bottom-0 button[onclick="showTab('${tabId}')"]`);
if(currentNavItem) {
currentNavItem.classList.remove('text-gray-500');
currentNavItem.classList.add('text-primary');
}
}
// 显示日本产品列表
function showJapanProducts() {
document.getElementById('destination').classList.add('hidden');
document.getElementById('japan-products').classList.remove('hidden');
}
// 隐藏日本产品列表
function hideJapanProducts() {
document.getElementById('japan-products').classList.add('hidden');
document.getElementById('destination').classList.remove('hidden');
}
// 显示产品详情
function showProductDetail() {
document.getElementById('japan-products').classList.add('hidden');
document.getElementById('product-detail').classList.remove('hidden');
}
// 隐藏产品详情
function hideProductDetail() {
document.getElementById('product-detail').classList.add('hidden');
document.getElementById('japan-products').classList.remove('hidden');
}
// 显示支付页面
function showOrderForm() {
document.getElementById('product-detail').classList.add('hidden');
document.getElementById('payment').classList.remove('hidden');
}
// 隐藏支付页面
function hideOrderForm() {
document.getElementById('payment').classList.add('hidden');
document.getElementById('product-detail').classList.remove('hidden');
}
// 显示支付成功页面
function showPaymentSuccess() {
document.getElementById('payment').classList.add('hidden');
document.getElementById('visa-form').classList.remove('hidden');
}
// 返回填写个人信息
function hideVisaForm() {
document.getElementById('visa-form').classList.add('hidden');
document.getElementById('payment').classList.remove('hidden');
}
// 显示材料上传页面
function showUploadMaterials() {
document.getElementById('visa-form').classList.add('hidden');
document.getElementById('upload-materials').classList.remove('hidden');
}
// 返回材料上传页面
function hideUploadMaterials() {
document.getElementById('upload-materials').classList.add('hidden');
document.getElementById('visa-form').classList.remove('hidden');
}
// 显示预约面签页面
function showAppointment() {
document.getElementById('upload-materials').classList.add('hidden');
document.getElementById('appointment').classList.remove('hidden');
}
// 返回预约面签页面
function hideAppointment() {
document.getElementById('appointment').classList.add('hidden');
document.getElementById('upload-materials').classList.remove('hidden');
}
// 提交申请
function submitApplication() {
alert('申请已提交成功！');
showTab('orders');
}
// 订单状态切换
function showOrderStatus(status) {
// 更新按钮样式
const buttons = document.querySelectorAll('.bg-white.rounded-xl.shadow-sm.mb-4 .flex button');
buttons.forEach(button => {
button.classList.remove('border-b-2', 'border-primary', 'text-primary');
button.classList.add('text-gray-500');
});
const selectedButton = document.querySelector(`button[onclick="showOrderStatus('${status}')"]`);
selectedButton.classList.remove('text-gray-500');
selectedButton.classList.add('border-b-2', 'border-primary', 'text-primary');
// 隐藏所有订单
const allOrders = document.querySelectorAll('.space-y-3 .bg-white.rounded-xl.shadow-sm.p-4');
allOrders.forEach(order => {
order.classList.add('hidden');
});
// 显示对应状态的订单
const targetOrders = document.querySelectorAll(`.space-y-3 .bg-white.rounded-xl.shadow-sm.p-4${status === 'pending-payment' ? ':not(.hidden)' : '.hidden'}`);
targetOrders.forEach(order => {
if (status === 'pending-payment' && order.querySelector('.text-yellow-800')) {
order.classList.remove('hidden');
} else if (status === 'pending-submit' && order.querySelector('.text-red-800')) {
order.classList.remove('hidden');
} else if (status === 'processing' && order.querySelector('.text-green-800')) {
order.classList.remove('hidden');
} else if (status === 'completed' && order.querySelector('.text-gray-800')) {
order.classList.remove('hidden');
}
});
}
// 显示常用申请人
function showApplicants() {
document.getElementById('profile').classList.add('hidden');
document.getElementById('applicants').classList.remove('hidden');
}
// 隐藏常用申请人
function hideApplicants() {
document.getElementById('applicants').classList.add('hidden');
document.getElementById('profile').classList.remove('hidden');
}

// 显示登录页面
function showLoginPage() {
document.getElementById('profile').classList.add('hidden');
document.getElementById('login-page').classList.remove('hidden');
}

// 默认显示首页
showTab('home');
</script>
</body>
</html>
编辑器加载中
预览
控制台