162 lines
4.0 KiB
HTML
162 lines
4.0 KiB
HTML
<!-- templates/navbar.html -->
|
||
<style>
|
||
/* 顶部导航栏样式 */
|
||
.top-bar {
|
||
background-color: #000;
|
||
color: #fff;
|
||
padding: 10px 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: fixed;
|
||
width: 100%;
|
||
top: 0;
|
||
z-index: 1000;
|
||
transition: transform 0.3s ease; /* 平滑显示/隐藏 */
|
||
}
|
||
|
||
/* 隐藏导航栏 */
|
||
.hidden {
|
||
transform: translateY(-100%); /* 向上移出视图 */
|
||
}
|
||
|
||
.top-bar .nav-container {
|
||
width: 100%;
|
||
max-width: 1200px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.navbar-left {
|
||
font-size: 1.2em;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.navbar-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.username {
|
||
/*margin-right: 5px;*/
|
||
font-weight: bold;
|
||
}
|
||
|
||
.logout-button {
|
||
color: #fff;
|
||
text-decoration: none;
|
||
padding: 5px 10px;
|
||
border: 1px solid #fff;
|
||
border-radius: 3px;
|
||
transition: background-color 0.3s ease;
|
||
margin-right: 30px;
|
||
}
|
||
|
||
.logout-button:hover {
|
||
background-color: #555; /* 悬停时背景变为深灰色 */
|
||
}
|
||
|
||
/* 竖直分割线样式 */
|
||
.vertical-divider {
|
||
display: inline-block;
|
||
height: 20px; /* 设置分割线的高度 */
|
||
border-left: 1px solid #fff;
|
||
margin-right: 10px; /* 设置与左右元素的间距 */
|
||
}
|
||
|
||
/* 用户类型标签样式 */
|
||
.user-type {
|
||
display: inline-block;
|
||
margin: 0 10px;
|
||
padding: 3px 8px;
|
||
font-size: 0.9em;
|
||
color: #fff;
|
||
border: 1px solid #fff; /* 边框颜色与文字颜色保持一致 */
|
||
border-radius: 3px; /* 圆角效果 */
|
||
}
|
||
|
||
</style>
|
||
<div id="top-bar" class="top-bar">
|
||
<div class="nav-container">
|
||
<span class="navbar-left">Movie Recommendation System</span>
|
||
<div class="navbar-right">
|
||
<span class="username">{{ session['nickname'] }}</span>
|
||
|
||
<!-- 根据 user_type 显示用户类型 -->
|
||
{% if session['user_type'] == 'U' %}
|
||
<span class="user-type">Normal User</span>
|
||
{% elif session['user_type'] == 'P' %}
|
||
<span class="user-type">Producer</span>
|
||
{% endif %}
|
||
|
||
<!-- 竖直分割线 -->
|
||
<span class="vertical-divider"></span>
|
||
|
||
<a href="{{ url_for('logout') }}" class="logout-button">Logout</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 页面加载后 2 秒隐藏导航栏
|
||
setTimeout(() => {
|
||
document.getElementById('top-bar').classList.add('hidden');
|
||
}, 2000);
|
||
|
||
let lastScrollY = window.scrollY;
|
||
let hideTimer = null; // 用于记录定时器
|
||
|
||
// 显示导航栏的函数
|
||
function showNavbar() {
|
||
document.getElementById('top-bar').classList.remove('hidden');
|
||
resetHideTimer(); // 重置隐藏计时器
|
||
}
|
||
|
||
// 隐藏导航栏的函数
|
||
function hideNavbar() {
|
||
document.getElementById('top-bar').classList.add('hidden');
|
||
}
|
||
|
||
// 重置隐藏计时器的函数
|
||
function resetHideTimer() {
|
||
if (hideTimer) {
|
||
clearTimeout(hideTimer); // 清除之前的计时器
|
||
}
|
||
hideTimer = setTimeout(() => {
|
||
// 检查鼠标是否不在顶部（比如超过50px），如果是则隐藏导航栏
|
||
if (!isMouseAtTop) {
|
||
hideNavbar();
|
||
}
|
||
}, 2000);
|
||
}
|
||
|
||
// 标记鼠标是否在视窗顶部
|
||
let isMouseAtTop = false;
|
||
|
||
// 鼠标移动到顶部时显示导航栏，并更新鼠标位置状态
|
||
document.addEventListener('mousemove', (event) => {
|
||
if (event.clientY <= 50) { // 鼠标在视窗顶部50px范围内
|
||
isMouseAtTop = true;
|
||
showNavbar();
|
||
} else {
|
||
isMouseAtTop = false;
|
||
}
|
||
});
|
||
|
||
// 滚动时控制导航栏显示/隐藏
|
||
window.addEventListener('scroll', () => {
|
||
if (window.scrollY < lastScrollY) {
|
||
// 向上滚动时显示导航栏
|
||
showNavbar();
|
||
} else {
|
||
// 向下滚动时隐藏导航栏
|
||
hideNavbar();
|
||
}
|
||
lastScrollY = window.scrollY;
|
||
});
|
||
</script>
|
||
|
||
|
||
|