102 lines
4.2 KiB
HTML
102 lines
4.2 KiB
HTML
<!-- 顶部导航栏 -->
|
|
<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="header-user">
|
|
<!-- 用户下拉菜单 -->
|
|
<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="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="dropdown-item">
|
|
<i class="fa fa-lock dropdown-icon-item"></i> 修改密码
|
|
</a>
|
|
<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="dropdown-item">
|
|
<i class="fa fa-users dropdown-icon-item"></i> 用户管理
|
|
</a>
|
|
{% endif %}
|
|
<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>
|
|
|
|
<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> |