You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.3 KiB
86 lines
2.3 KiB
style.
|
|
.navbar {
|
|
height: 60px;
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(12px);
|
|
color: #fff;
|
|
&::after {
|
|
display: table;
|
|
clear: both;
|
|
content: '';
|
|
}
|
|
}
|
|
.navbar .site {
|
|
float: left;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
.menu {
|
|
height: 100%;
|
|
margin-left: 20px;
|
|
.menu-item {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
cursor: pointer;
|
|
&+.menu-item {
|
|
margin-left: 5px;
|
|
}
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
}
|
|
.menu.left {
|
|
float: left;
|
|
.menu-item {
|
|
float: left;
|
|
}
|
|
}
|
|
.right.menu {
|
|
float: right;
|
|
.menu-item {
|
|
padding: 0 20px;
|
|
float: right;
|
|
}
|
|
}
|
|
script.
|
|
window.addEventListener('pageshow', function(event) {
|
|
// event.persisted 为 true 表示页面从缓存中恢复
|
|
if (event.persisted) {
|
|
// 执行需要更新的操作，例如：
|
|
console.log('页面从缓存加载，需要更新数据');
|
|
|
|
// 1. 刷新页面（简单直接的方式）
|
|
//- window.location.reload();
|
|
|
|
// 2. 重新请求数据（更优雅的方式）
|
|
//- fetchData(); // 假设这是你的数据请求函数
|
|
|
|
// 3. 更新页面状态
|
|
//- updatePageState(); // 假设这是你的状态更新函数
|
|
}
|
|
});
|
|
|
|
.navbar
|
|
.site #{$site.site_title}
|
|
.left.menu
|
|
a.menu-item(href="/about") 明月照佳人
|
|
a.menu-item(href="/about") 岁月催人老
|
|
if !isLogin
|
|
.right.menu
|
|
a.menu-item(href="/login") 登录
|
|
a.menu-item(href="/register") 注册
|
|
else
|
|
.right.menu
|
|
a.menu-item(hx-post="/logout") 退出
|
|
a.menu-item(href="/profile") 欢迎您 , #{$user.username}
|