home_page_fix

2025-05-17 05:11:18 +08:00 · 2025-05-17 05:11:18 +08:00 · 48d2cb593d
commit 48d2cb593d
parent 05bbf80663
2 changed files with 236 additions and 38 deletions
--- 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;
+    }
 }
--- 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,14 +150,17 @@
                            </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">
+                        <a href="#" class="user-info-toggle" id="userMenuButton">
                            <div class="user-avatar">
                                {{ current_user.username[0] }}
                            </div>
@ -164,7 +168,8 @@
                                <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>
+                        <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,23 +198,46 @@
    <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');
+
+            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 (!userInfo.contains(e.target)) {
-                        userInfo.classList.remove('active');
+                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');