home_page_fix
This commit is contained in:
superlishunqin
parent
05bbf80663
commit
48d2cb593d
@ -138,10 +138,18 @@ body {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 通知图标样式 */
|
||||
.notifications {
|
||||
position: relative;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
cursor: pointer;
|
||||
color: #495057;
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
@ -159,11 +167,139 @@ body {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 通知下拉菜单 */
|
||||
.notification-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: -10px;
|
||||
width: 320px;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.notification-dropdown.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.notification-dropdown::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 15px;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-bottom: 8px solid white;
|
||||
}
|
||||
|
||||
.notification-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.notification-header h6 {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mark-all-read {
|
||||
font-size: 0.8rem;
|
||||
color: #4a6cf7;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mark-all-read:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.notification-items {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.notification-item {
|
||||
display: block;
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.notification-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.notification-item.unread {
|
||||
background-color: #f0f7ff;
|
||||
}
|
||||
|
||||
.notification-title {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.notification-text {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.notification-time {
|
||||
font-size: 0.75rem;
|
||||
color: #999;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.no-notifications {
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
height: 1px;
|
||||
background-color: #eaeaea;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.view-all {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
color: #4a6cf7;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.view-all:hover {
|
||||
background-color: #f8f9fa;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 用户信息样式 */
|
||||
.user-info {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-info-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
@ -194,41 +330,63 @@ body {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.user-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
background-color: white;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
|
||||
border-radius: 5px;
|
||||
width: 200px;
|
||||
padding: 10px 0;
|
||||
padding: 5px 0;
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.user-info.active .dropdown-menu {
|
||||
.user-dropdown.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-menu a {
|
||||
.user-dropdown::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 15px;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-bottom: 8px solid white;
|
||||
}
|
||||
|
||||
.user-dropdown a {
|
||||
display: block;
|
||||
padding: 8px 15px;
|
||||
padding: 10px 15px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.3s;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.dropdown-menu a:hover {
|
||||
.user-dropdown a:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.dropdown-menu a i {
|
||||
.user-dropdown a i {
|
||||
width: 20px;
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-link, .register-link {
|
||||
color: #4a6cf7;
|
||||
text-decoration: none;
|
||||
margin-left: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.login-link:hover, .register-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.content-wrapper {
|
||||
flex: 1;
|
||||
@ -258,4 +416,16 @@ body {
|
||||
.user-details {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.notification-dropdown,
|
||||
.user-dropdown {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
width: calc(100% - 80px);
|
||||
max-width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -108,8 +108,9 @@
|
||||
<input type="text" name="search" placeholder="搜索图书..." class="search-input" id="global-search-input">
|
||||
</form>
|
||||
<div class="user-menu">
|
||||
<div class="notifications dropdown">
|
||||
<a href="#" class="notification-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<!-- 修改通知下拉菜单 -->
|
||||
<div class="notifications">
|
||||
<a href="#" class="notification-icon" id="notificationButton">
|
||||
<i class="fas fa-bell"></i>
|
||||
{% if current_user.is_authenticated %}
|
||||
{% set unread_count = get_unread_notifications_count(current_user.id) %}
|
||||
@ -120,9 +121,9 @@
|
||||
</a>
|
||||
|
||||
{% if current_user.is_authenticated %}
|
||||
<div class="dropdown-menu notification-dropdown">
|
||||
<div class="notification-dropdown" id="notificationDropdown">
|
||||
<div class="notification-header">
|
||||
<h6 class="dropdown-header">通知中心</h6>
|
||||
<h6>通知中心</h6>
|
||||
{% if unread_count > 0 %}
|
||||
<a href="{{ url_for('announcement.mark_all_as_read') }}" class="mark-all-read">全部标为已读</a>
|
||||
{% endif %}
|
||||
@ -132,7 +133,7 @@
|
||||
{% set recent_notifications = get_recent_notifications(current_user.id, 5) %}
|
||||
{% if recent_notifications %}
|
||||
{% for notification in recent_notifications %}
|
||||
<a class="dropdown-item notification-item {% if notification.status == 0 %}unread{% endif %}"
|
||||
<a class="notification-item {% if notification.status == 0 %}unread{% endif %}"
|
||||
href="{{ url_for('announcement.view_notification', notification_id=notification.id) }}">
|
||||
<div class="notification-content">
|
||||
<h6 class="notification-title">{{ notification.title }}</h6>
|
||||
@ -149,22 +150,26 @@
|
||||
</div>
|
||||
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item view-all" href="{{ url_for('announcement.user_notifications') }}">
|
||||
<a class="view-all" href="{{ url_for('announcement.user_notifications') }}">
|
||||
查看所有通知
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- 修改用户信息下拉菜单 -->
|
||||
{% if current_user.is_authenticated %}
|
||||
<div class="user-info">
|
||||
<div class="user-avatar">
|
||||
{{ current_user.username[0] }}
|
||||
</div>
|
||||
<div class="user-details">
|
||||
<span class="user-name">{{ current_user.username }}</span>
|
||||
<span class="user-role">{{ '管理员' if current_user.role_id == 1 else '普通用户' }}</span>
|
||||
</div>
|
||||
<div class="dropdown-menu">
|
||||
<a href="#" class="user-info-toggle" id="userMenuButton">
|
||||
<div class="user-avatar">
|
||||
{{ current_user.username[0] }}
|
||||
</div>
|
||||
<div class="user-details">
|
||||
<span class="user-name">{{ current_user.username }}</span>
|
||||
<span class="user-role">{{ '管理员' if current_user.role_id == 1 else '普通用户' }}</span>
|
||||
</div>
|
||||
</a>
|
||||
<div class="user-dropdown" id="userDropdown">
|
||||
<a href="{{ url_for('user.user_profile') }}"><i class="fas fa-user-circle"></i> 个人中心</a>
|
||||
<a href="#"><i class="fas fa-cog"></i> 设置</a>
|
||||
<a href="{{ url_for('user.logout') }}"><i class="fas fa-sign-out-alt"></i> 退出登录</a>
|
||||
@ -179,7 +184,7 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 内容区 - 这里是核心变化 -->
|
||||
<!-- 内容区 -->
|
||||
<div class="content-wrapper">
|
||||
{% block content %}
|
||||
<!-- 子模板将在这里添加内容 -->
|
||||
@ -193,24 +198,47 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 用户菜单下拉
|
||||
const userInfo = document.querySelector('.user-info');
|
||||
if (userInfo) {
|
||||
userInfo.addEventListener('click', function(e) {
|
||||
if (!e.target.classList.contains('login-link') &&
|
||||
!e.target.classList.contains('register-link')) {
|
||||
userInfo.classList.toggle('active');
|
||||
}
|
||||
});
|
||||
// 通知下拉菜单
|
||||
const notificationButton = document.getElementById('notificationButton');
|
||||
const notificationDropdown = document.getElementById('notificationDropdown');
|
||||
|
||||
// 点击其他区域关闭下拉菜单
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!userInfo.contains(e.target)) {
|
||||
userInfo.classList.remove('active');
|
||||
if (notificationButton && notificationDropdown) {
|
||||
notificationButton.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
notificationDropdown.classList.toggle('show');
|
||||
// 关闭用户菜单
|
||||
if (userDropdown && userDropdown.classList.contains('show')) {
|
||||
userDropdown.classList.remove('show');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 用户菜单下拉
|
||||
const userMenuButton = document.getElementById('userMenuButton');
|
||||
const userDropdown = document.getElementById('userDropdown');
|
||||
|
||||
if (userMenuButton && userDropdown) {
|
||||
userMenuButton.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
userDropdown.classList.toggle('show');
|
||||
// 关闭通知菜单
|
||||
if (notificationDropdown && notificationDropdown.classList.contains('show')) {
|
||||
notificationDropdown.classList.remove('show');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 点击其他区域关闭下拉菜单
|
||||
document.addEventListener('click', function(e) {
|
||||
if (notificationDropdown && notificationButton && !notificationButton.contains(e.target) && !notificationDropdown.contains(e.target)) {
|
||||
notificationDropdown.classList.remove('show');
|
||||
}
|
||||
|
||||
if (userDropdown && userMenuButton && !userMenuButton.contains(e.target) && !userDropdown.contains(e.target)) {
|
||||
userDropdown.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
// 搜索功能
|
||||
const searchForm = document.getElementById('global-search-form');
|
||||
const searchInput = document.getElementById('global-search-input');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user