127 lines
5.9 KiB
HTML
127 lines
5.9 KiB
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>
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- Font Awesome -->
|
|
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
|
|
<!-- 配置Tailwind自定义颜色和字体 -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#2563eb',
|
|
secondary: '#f3f4f6',
|
|
'primary-light': '#dbeafe',
|
|
'primary-dark': '#1d4ed8',
|
|
'table-header': '#f9fafb',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!-- 自定义工具类 -->
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.card-shadow {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
|
}
|
|
.input-focus {
|
|
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
|
|
}
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.3s ease-out forwards;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-secondary min-h-screen font-sans">
|
|
{% include 'header.html' %}
|
|
|
|
<!-- 主要内容区域 -->
|
|
<main class="container mx-auto px-4 pt-24 pb-12">
|
|
<!-- 返回按钮 -->
|
|
<div class="mb-6 flex justify-end">
|
|
<a href="{{ url_for('query') }}" class="inline-flex items-center text-primary hover:text-primary-dark transition-colors">
|
|
<i class="fa fa-arrow-left mr-2"></i> 返回主页面
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 个人信息表单 -->
|
|
<div class="max-w-md mx-auto bg-white rounded-lg shadow-xl p-8 animate-fade-in">
|
|
<div class="text-center mb-6">
|
|
<div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i class="fa fa-user text-primary text-2xl"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-800">个人信息</h2>
|
|
<p class="text-gray-500 mt-2">请查看并更新您的个人信息</p>
|
|
</div>
|
|
|
|
<!-- 消息提示区域 -->
|
|
{% if error %}
|
|
<div class="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md flex items-start animate-fade-in">
|
|
<i class="fa fa-exclamation-circle mt-1 mr-3"></i>
|
|
<span>{{ error }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if success %}
|
|
<div class="mb-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md flex items-start animate-fade-in">
|
|
<i class="fa fa-check-circle mt-1 mr-3"></i>
|
|
<span>{{ success }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- 表单 -->
|
|
<form id="userProfileForm" method="POST" class="space-y-4">
|
|
<div class="mb-4">
|
|
<label for="profile_username" class="block text-gray-700 text-sm font-medium mb-2">用户名</label>
|
|
<input type="text" id="profile_username" value="{{ user.username }}" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors bg-gray-50 cursor-not-allowed" disabled>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="profile_name" class="block text-gray-700 text-sm font-medium mb-2">姓名 <span class="text-red-500">*</span></label>
|
|
<input type="text" id="profile_name" name="name" value="{{ user.name }}" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入姓名" required>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="profile_phone" class="block text-gray-700 text-sm font-medium mb-2">联系电话 <span class="text-red-500">*</span></label>
|
|
<input type="tel" id="profile_phone" name="phone" value="{{ user.phone }}" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入联系电话" required>
|
|
</div>
|
|
<div class="mb-6">
|
|
<label for="profile_department" class="block text-gray-700 text-sm font-medium mb-2">部门名称 <span class="text-red-500">*</span></label>
|
|
<input type="text" id="profile_department" name="department" value="{{ user.department }}" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入部门名称" required>
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<button type="submit" class="flex-1 bg-primary hover:bg-primary-dark text-white py-2 px-4 rounded-md transition-colors shadow-sm hover:shadow">
|
|
保存修改
|
|
</button>
|
|
<button type="button" onclick="window.location.href='{{ url_for('query') }}'" class="flex-1 border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-4 rounded-md transition-colors">
|
|
取消
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
|
|
{% include 'footer.html' %}
|
|
</body>
|
|
</html> |