bwadmin/QueryCarInfo2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20250922

Browse Source
This commit is contained in:
bwadmin
2025-09-22 07:33:37 +08:00
parent b34e97b93b
commit 0cae9749a8
19 changed files with 2557 additions and 1225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/user_profile.html
+103 -111
View File
@@ -4,124 +4,116 @@
<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 -->
<!-- 引入Layui CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}">
<!-- 引入Font Awesome -->
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
<!-- 配置Tailwind自定义颜色和字体 -->
<!-- 引入自定义CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
<!-- 引入Layui JS -->
<script src="{{ url_for('static', filename='layui.js') }}"></script>
<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'],
},
}
}
}
layui.use(['layer', 'form', 'element'], function(){
var layer = layui.layer;
var form = layui.form;
var element = layui.element;
});
</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">
<body>
<!-- 引入统一的顶部导航栏 -->
{% 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 class="content-container">
<div class="content-wrapper">
<div class="card">
<div class="card-header">
<i class="fa fa-user"></i> 个人信息
<a href="{{ url_for('query') }}" class="layui-btn layui-btn-xs layui-btn-primary" style="float: right;">
<i class="fa fa-arrow-left"></i> 返回主页面
</a>
</div>
<div class="card-body">
<!-- 消息提示区域 -->
{% if error %}
<div class="layui-bg-red message-box">
<i class="fa fa-exclamation-circle"></i> {{ error }}
</div>
{% endif %}
{% if success %}
<div class="layui-bg-green message-box">
<i class="fa fa-check-circle"></i> {{ success }}
</div>
{% endif %}
<div class="layui-text" style="text-align: center; margin-bottom: 20px;">
<div style="width: 80px; height: 80px; background-color: #f2f2f2; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
<i class="fa fa-user" style="font-size: 40px; color: #009688;"></i>
</div>
<p style="color: #666;">请查看并更新您的个人信息</p>
</div>
<!-- 表单 -->
<form class="layui-form" id="userProfileForm" method="POST" style="max-width: 500px; margin: 0 auto;">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" id="profile_username" value="{{ user.username }}" class="layui-input" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" id="profile_name" name="name" value="{{ user.name }}" class="layui-input" placeholder="请输入姓名" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">联系电话</label>
<div class="layui-input-block">
<input type="tel" id="profile_phone" name="phone" value="{{ user.phone }}" class="layui-input" placeholder="请输入联系电话" lay-verify="required|phone">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">部门名称</label>
<div class="layui-input-block">
<input type="text" id="profile_department" name="department" value="{{ user.department }}" class="layui-input" placeholder="请输入部门名称" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit>保存修改</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</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>
</div>
<!-- 页脚 -->
{% include 'footer.html' %}
<script>
layui.use(['form', 'element'], function(){
var form = layui.form;
var element = layui.element;
// 表单验证
form.verify({
phone: [
/^1\d{10}$/,
'请输入正确的手机号'
]
});
// 表单提交
form.on('submit(userProfileForm)', function(data){
// 表单数据会自动提交，这里可以添加额外的验证逻辑
return true;
});
});
</script>
</body>
</html>