From 48d2cb593d1dfb3d6b4395ec7fe0ffce355b702d Mon Sep 17 00:00:00 2001
From: superlishunqin <852326703@qq.com>
Date: Sat, 17 May 2025 05:11:18 +0800
Subject: [PATCH] home_page_fix

---
 app/static/css/main.css | 190 +++++++++++++++++++++++++++++++++++++---
 app/templates/base.html |  84 ++++++++++++------
 2 files changed, 236 insertions(+), 38 deletions(-)

diff --git a/app/static/css/main.css b/app/static/css/main.css
index fe94da4..b3ab03c 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -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;
+    }
 }
diff --git a/app/templates/base.html b/app/templates/base.html
index e826ffb..1ca92cd 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -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');