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/header.html
+84 -24
View File
@@ -1,42 +1,102 @@
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-10">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fa fa-car text-primary text-2xl"></i>
<h1 class="text-xl font-bold text-gray-800">车主信息查询系统</h1>
<header class="header-navbar">
<div class="header-container">
<div class="header-logo">
<i class="fa fa-car header-icon"></i>
<h1 class="header-title">车主信息查询系统</h1>
</div>
<div class="flex items-center space-x-4">
<div class="header-user">
<!-- 用户下拉菜单 -->
<div class="relative group">
<div class="flex items-center cursor-pointer hover:text-primary transition-colors">
<span class="text-gray-600">欢迎 <strong>{{ session.department }}</strong> <strong>{{ session.name }}</strong></span>
<i class="fa fa-chevron-down ml-2 text-xs transition-transform duration-300 group-hover:rotate-180"></i>
<div class="user-dropdown-container">
<div class="user-dropdown-toggle">
<span class="user-welcome">欢迎 <strong>{{ session.department }}</strong> <strong>{{ session.name }}</strong></span>
<i class="fa fa-chevron-down dropdown-icon" id="dropdown-icon"></i>
</div>
<!-- 下拉菜单 -->
<div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top-right scale-95 group-hover:scale-100 z-20">
<div class="py-1">
<a href="{{ url_for('user.user_profile_page') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-user mr-2"></i> 个人信息
<div class="user-dropdown" id="user-dropdown">
<div class="dropdown-content">
<a href="{{ url_for('user.user_profile_page') }}" class="dropdown-item">
<i class="fa fa-user dropdown-icon-item"></i> 个人信息
</a>
<a href="{{ url_for('user.change_password_page') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-lock mr-2"></i> 修改密码
<a href="{{ url_for('user.change_password_page') }}" class="dropdown-item">
<i class="fa fa-lock dropdown-icon-item"></i> 修改密码
</a>
<a href="{{ url_for('user.parameter_config_page') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-cog mr-2"></i> 参数配置
<a href="{{ url_for('user.parameter_config_page') }}" class="dropdown-item">
<i class="fa fa-cog dropdown-icon-item"></i> 参数配置
</a>
{% if session.username == 'admin' %}
<a href="{{ url_for('user.users_management') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-users mr-2"></i> 用户管理
<a href="{{ url_for('user.users_management') }}" class="dropdown-item">
<i class="fa fa-users dropdown-icon-item"></i> 用户管理
</a>
{% endif %}
<div class="border-t border-gray-200 my-1"></div>
<a href="{{ url_for('user.logout') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary hover:text-white transition-colors">
<i class="fa fa-sign-out mr-2"></i> 退出
<div class="dropdown-divider"></div>
<a href="{{ url_for('user.logout') }}" class="dropdown-item">
<i class="fa fa-sign-out dropdown-icon-item"></i> 退出
</a>
</div>
</div>
</div>
</div>
</div>
</header>
</header>
<script>
document.addEventListener('DOMContentLoaded', function() {
const dropdownContainer = document.querySelector('.user-dropdown-container');
const dropdownToggle = document.querySelector('.user-dropdown-toggle');
const dropdown = document.getElementById('user-dropdown');
const dropdownIcon = document.getElementById('dropdown-icon');
let timeout;
// 点击切换下拉菜单
dropdownToggle.addEventListener('click', function(e) {
e.stopPropagation(); // 阻止冒泡，避免立即关闭
toggleDropdown();
});
// 点击页面其他地方关闭下拉菜单
document.addEventListener('click', function() {
closeDropdown();
});
// 鼠标悬停显示下拉菜单
dropdownContainer.addEventListener('mouseenter', function() {
clearTimeout(timeout);
openDropdown();
});
// 鼠标离开延迟关闭下拉菜单
dropdownContainer.addEventListener('mouseleave', function() {
timeout = setTimeout(closeDropdown, 300);
});
// 下拉菜单内鼠标进入取消关闭计时器
dropdown.addEventListener('mouseenter', function() {
clearTimeout(timeout);
});
// 下拉菜单内鼠标离开延迟关闭
dropdown.addEventListener('mouseleave', function() {
timeout = setTimeout(closeDropdown, 300);
});
function toggleDropdown() {
if (dropdown.classList.contains('show')) {
closeDropdown();
} else {
openDropdown();
}
}
function openDropdown() {
dropdown.classList.add('show');
dropdownIcon.classList.add('rotate');
}
function closeDropdown() {
dropdown.classList.remove('show');
dropdownIcon.classList.remove('rotate');
}
});
</script>