From 70cdc6fea46f9b0fe2dd94a142f5889e82714026 Mon Sep 17 00:00:00 2001
From: superlishunqin <852326703@qq.com>
Date: Mon, 12 May 2025 20:38:34 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E7=9F=A5=E4=B8=AD=E5=BF=83=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...cement-form.css  => announcement-form.css} |   0
 app/static/css/announcement-list.css          | 312 ++++++++++++++++
 app/static/css/announcement-list.css          | 130 -------
 app/static/css/notifications.css              | 349 ++++++++++++++----
 app/templates/announcement/list.html          |  33 +-
 app/templates/announcement/notifications.html |  25 +-
 6 files changed, 635 insertions(+), 214 deletions(-)
 rename app/static/css/{announcement-form.css  => announcement-form.css} (100%)
 create mode 100644 app/static/css/announcement-list.css
 delete mode 100644 app/static/css/announcement-list.css 

diff --git a/app/static/css/announcement-form.css  b/app/static/css/announcement-form.css
similarity index 100%
rename from app/static/css/announcement-form.css 
rename to app/static/css/announcement-form.css
diff --git a/app/static/css/announcement-list.css b/app/static/css/announcement-list.css
new file mode 100644
index 0000000..1fc037c
--- /dev/null
+++ b/app/static/css/announcement-list.css
@@ -0,0 +1,312 @@
+/* Fresh & Vibrant Style for Announcement List */
+
+:root {
+    --mint-green: #A8E6CF;
+    --pale-yellow: #FFD3B6;
+    --coral-pink: #FFAAA5;
+    --sky-blue: #BDE4F4;
+    --clean-white: #FFFFFF;
+    --bright-orange: #FF8C69; /* Emphasis for buttons/key info */
+    --lemon-yellow: #FFFACD;
+
+    --text-dark: #424242;
+    --text-medium: #616161; /* Slightly darker medium for better contrast */
+    --text-light: #888888; /* Adjusted light text */
+
+    --font-title: 'Poppins', sans-serif;
+    --font-body: 'Nunito Sans', sans-serif;
+
+    --card-shadow: 0 5px 18px rgba(0, 0, 0, 0.07);
+    --card-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+    --border-radius-main: 16px; /* Slightly larger radius for a softer look */
+    --border-radius-small: 10px;
+}
+
+/* Apply base font and background to body (likely in base.css) */
+body {
+    font-family: var(--font-body);
+    background-color: #fcfdfe; /* Very light off-white, almost white */
+    color: var(--text-dark);
+    line-height: 1.65;
+}
+
+.announcement-container {
+    padding: 25px 30px;
+    max-width: 960px;
+    margin: 25px auto;
+    background-color: var(--clean-white);
+    border-radius: var(--border-radius-main);
+    /* Optional: Subtle gradient background for the container itself */
+    /* background-image: linear-gradient(to bottom right, #f0f9ff, #ffffff); */
+}
+
+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #eef2f5; /* Softer border */
+}
+
+.page-header h1 {
+    font-family: var(--font-title);
+    font-size: 2.2rem;
+    font-weight: 700;
+    color: var(--text-dark);
+    margin: 0;
+    display: flex;
+    align-items: center;
+}
+.page-icon { /* Icon for page title */
+    color: var(--coral-pink);
+    margin-right: 12px;
+    font-size: 1.8rem;
+}
+
+/* Optional: Style for a "Create New" button if you add one */
+.btn-fresh-create {
+    background-color: var(--mint-green);
+    color: #3a7c68; /* Darker mint for text */
+    border: none;
+    padding: 10px 20px;
+    border-radius: 25px;
+    font-family: var(--font-body);
+    font-weight: 600;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    font-size: 0.9rem;
+    box-shadow: 0 2px 8px rgba(168, 230, 207, 0.4);
+}
+
+.btn-fresh-create:hover {
+    background-color: #97e0c6;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(168, 230, 207, 0.5);
+}
+.btn-fresh-create i {
+    margin-right: 8px;
+}
+
+
+.announcement-list {
+    margin-top: 20px;
+    display: grid;
+    gap: 25px; /* Spacing between announcement items */
+}
+
+.announcement-item {
+    background-color: var(--clean-white);
+    border-radius: var(--border-radius-main);
+    box-shadow: var(--card-shadow);
+    padding: 25px 30px;
+    position: relative; /* For pin-badge */
+    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
+    overflow: hidden; /* If using pseudo-elements for borders */
+}
+
+.announcement-item:hover {
+    transform: translateY(-5px) scale(1.01);
+    box-shadow: var(--card-hover-shadow);
+}
+
+.announcement-item.pinned {
+    /* Use a top border or a more distinct background */
+    border-top: 4px solid var(--mint-green);
+    background-color: #f6fffb; /* Light mint */
+}
+
+.pin-badge {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    background: linear-gradient(135deg, var(--mint-green), #8fdcc3);
+    color: var(--clean-white);
+    padding: 6px 15px 6px 20px;
+    border-radius: 0 0 0 var(--border-radius-main); /* Creative corner */
+    font-size: 0.8rem;
+    font-weight: 600;
+    font-family: var(--font-body);
+    box-shadow: -2px 2px 8px rgba(168, 230, 207, 0.3);
+}
+.pin-badge i {
+    margin-right: 6px;
+    font-size: 0.75rem;
+}
+
+.announcement-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start; /* Align date to top if title wraps */
+    margin-bottom: 10px;
+}
+
+.announcement-header h3 {
+    margin: 0;
+    font-size: 1.4rem; /* Slightly larger title */
+    font-family: var(--font-title);
+    font-weight: 600;
+    line-height: 1.3;
+    margin-right: 15px; /* Space between title and date */
+}
+
+.announcement-header h3 a {
+    color: var(--text-dark);
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+.announcement-header h3 a:hover {
+    color: var(--coral-pink);
+}
+
+.date {
+    color: var(--text-light);
+    font-size: 0.85rem;
+    font-weight: 400;
+    white-space: nowrap; /* Prevent date from wrapping */
+    padding-top: 3px; /* Align better with h3 */
+}
+
+.announcement-preview {
+    margin: 15px 0;
+    color: var(--text-medium);
+    line-height: 1.7;
+    font-size: 0.95rem;
+    letter-spacing: 0.1px;
+}
+
+.announcement-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 20px;
+    padding-top: 15px;
+    border-top: 1px solid #f0f4f7; /* Lighter separator */
+}
+
+.publisher {
+    color: var(--text-light);
+    font-size: 0.85rem;
+    display: flex;
+    align-items: center;
+}
+.publisher i {
+    margin-right: 6px;
+    color: var(--sky-blue);
+}
+
+.read-more {
+    color: var(--bright-orange);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 0.9rem;
+    font-family: var(--font-body);
+    display: inline-flex; /* Allows icon alignment and hover effects */
+    align-items: center;
+    padding: 6px 12px;
+    border-radius: 20px;
+    background-color: transparent;
+    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
+}
+
+.read-more:hover {
+    background-color: var(--bright-orange);
+    color: var(--clean-white);
+    transform: translateX(3px);
+}
+
+.read-more i {
+    margin-left: 6px;
+    transition: transform 0.2s ease-in-out;
+}
+/* .read-more:hover i {
+    transform: translateX(4px);
+} */ /* Handled by transform on .read-more now */
+
+/* Pagination Styles (copied and adapted from previous for consistency) */
+.pagination-container {
+    margin-top: 40px;
+    display: flex;
+    justify-content: center;
+}
+
+.pagination {
+    display: flex;
+    list-style: none;
+    padding-left: 0;
+}
+
+.pagination .page-item .page-link {
+    color: var(--coral-pink);
+    background-color: var(--clean-white);
+    border: 1px solid var(--pale-yellow);
+    margin: 0 5px; /* Slightly more spacing */
+    border-radius: 50%;
+    width: 40px; /* Slightly larger */
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 0.95rem;
+    font-family: var(--font-body);
+    transition: all 0.25s ease-in-out;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+
+.pagination .page-item .page-link:hover {
+    background-color: var(--pale-yellow);
+    color: var(--coral-pink);
+    border-color: var(--coral-pink);
+    text-decoration: none;
+    transform: translateY(-2px);
+    box-shadow: 0 3px 8px rgba(255, 211, 182, 0.5);
+}
+
+.pagination .page-item.active .page-link {
+    background-color: var(--coral-pink);
+    border-color: var(--coral-pink);
+    color: var(--clean-white);
+    box-shadow: 0 4px 10px rgba(255, 170, 165, 0.6);
+}
+
+.pagination .page-item.disabled .page-link {
+    color: #cccccc;
+    background-color: #f9f9f9;
+    border-color: #eeeeee;
+    pointer-events: none;
+    box-shadow: none;
+}
+
+.no-records {
+    text-align: center;
+    padding: 60px 30px;
+    background-color: #fffaf8; /* Very light coral/yellow tint */
+    border-radius: var(--border-radius-main);
+    color: var(--text-medium);
+    margin-top: 20px;
+    box-shadow: var(--card-shadow);
+}
+
+.no-records-icon {
+    width: 60px;
+    height: 60px;
+    margin-bottom: 20px;
+    opacity: 0.9;
+}
+/* Fallback for FontAwesome if SVG doesn't load or is removed */
+.no-records .fas.fa-info-circle {
+    font-size: 3.5rem;
+    margin-bottom: 20px;
+    color: var(--coral-pink);
+    opacity: 0.8;
+}
+
+.no-records p {
+    font-size: 1.15rem;
+    font-family: var(--font-body);
+    font-weight: 600;
+    color: var(--text-dark);
+    line-height: 1.6;
+}
diff --git a/app/static/css/announcement-list.css  b/app/static/css/announcement-list.css 
deleted file mode 100644
index b3d588f..0000000
--- a/app/static/css/announcement-list.css 	
+++ /dev/null
@@ -1,130 +0,0 @@
-.announcement-container {
-    padding: 20px;
-}
-
-.page-header {
-    margin-bottom: 25px;
-    border-bottom: 1px solid #e3e3e3;
-    padding-bottom: 10px;
-}
-
-.announcement-list {
-    margin-top: 20px;
-}
-
-.announcement-item {
-    background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
-    padding: 20px;
-    margin-bottom: 20px;
-    position: relative;
-    transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.announcement-item:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-}
-
-.announcement-item.pinned {
-    border-left: 4px solid #dc3545;
-    background-color: #fff9f9;
-}
-
-.pin-badge {
-    position: absolute;
-    top: 0;
-    right: 0;
-    background-color: #dc3545;
-    color: white;
-    padding: 5px 10px;
-    border-radius: 0 8px 0 8px;
-    font-size: 0.8rem;
-}
-
-.announcement-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.announcement-header h3 {
-    margin: 0;
-    font-size: 1.3rem;
-}
-
-.announcement-header h3 a {
-    color: #333;
-    text-decoration: none;
-}
-
-.announcement-header h3 a:hover {
-    color: #007bff;
-}
-
-.date {
-    color: #6c757d;
-    font-size: 0.9rem;
-}
-
-.announcement-preview {
-    margin: 15px 0;
-    color: #495057;
-    line-height: 1.6;
-}
-
-.announcement-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 15px;
-    padding-top: 15px;
-    border-top: 1px solid #f1f1f1;
-}
-
-.publisher {
-    color: #6c757d;
-    font-style: italic;
-    font-size: 0.9rem;
-}
-
-.read-more {
-    color: #007bff;
-    text-decoration: none;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-}
-
-.read-more i {
-    margin-left: 5px;
-    transition: transform 0.2s;
-}
-
-.read-more:hover i {
-    transform: translateX(3px);
-}
-
-.pagination-container {
-    margin-top: 30px;
-    display: flex;
-    justify-content: center;
-}
-
-.no-records {
-    text-align: center;
-    padding: 50px 20px;
-    background-color: #f8f9fa;
-    border-radius: 8px;
-    color: #6c757d;
-}
-
-.no-records i {
-    font-size: 3rem;
-    margin-bottom: 15px;
-}
-
-.no-records p {
-    font-size: 1.2rem;
-}
diff --git a/app/static/css/notifications.css b/app/static/css/notifications.css
index e384379..0fe8a61 100644
--- a/app/static/css/notifications.css
+++ b/app/static/css/notifications.css
@@ -1,148 +1,338 @@
+/* Fresh & Vibrant Style for Notifications */
+
+:root {
+    --mint-green: #A8E6CF;
+    --pale-yellow: #FFD3B6;
+    --coral-pink: #FFAAA5;
+    --sky-blue: #BDE4F4;
+    --clean-white: #FFFFFF;
+    --bright-orange: #FF8C69; /* Emphasis for buttons/key info */
+    --lemon-yellow: #FFFACD; /* Can be used for subtle highlights */
+
+    --text-dark: #424242; /* Slightly softer than pure black */
+    --text-medium: #757575;
+    --text-light: #9E9E9E;
+
+    --font-title: 'Poppins', sans-serif;
+    --font-body: 'Nunito Sans', sans-serif;
+
+    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
+    --card-hover-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+    --border-radius-main: 12px;
+    --border-radius-small: 8px;
+}
+
+/* Apply base font and background to body (likely in base.css, but good for context) */
+body {
+    font-family: var(--font-body);
+    background-color: var(--clean-white); /* Or a very light tint like #FDFCFA */
+    color: var(--text-dark);
+    line-height: 1.6;
+    font-weight: 400;
+}
+
 .notifications-container {
-    padding: 20px;
+    padding: 25px 30px;
+    max-width: 900px;
+    margin: 20px auto;
+    background-color: var(--clean-white);
+    /* Optional: add a subtle pattern or a large soft circular gradient */
+    /* background-image: linear-gradient(135deg, var(--mint-green) -20%, var(--clean-white) 30%); */
+    border-radius: var(--border-radius-main);
+   /* box-shadow: 0 10px 30px rgba(168, 230, 207, 0.2); */ /* Subtle shadow for container */
 }
 
 .page-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 25px;
-    border-bottom: 1px solid #e3e3e3;
-    padding-bottom: 15px;
+    margin-bottom: 30px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #f0f0f0; /* Softer border */
 }
 
-.notification-actions {
-    display: flex;
-    gap: 10px;
+.page-header h1 {
+    font-family: var(--font-title);
+    font-size: 2rem; /* Slightly larger */
+    font-weight: 600;
+    color: var(--text-dark);
+    margin: 0;
+}
+
+/* Fresh Action Button Style */
+.btn-fresh-action {
+    background-color: var(--bright-orange);
+    color: var(--clean-white);
+    border: none;
+    padding: 10px 20px;
+    border-radius: 25px; /* Pill shape */
+    font-family: var(--font-body);
+    font-weight: 600;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    font-size: 0.9rem;
+    box-shadow: 0 2px 8px rgba(255, 140, 105, 0.3);
+}
+
+.btn-fresh-action:hover {
+    background-color: #ff7b5a; /* Slightly darker orange */
+    color: var(--clean-white);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(255, 140, 105, 0.4);
+}
+
+.btn-fresh-action i {
+    margin-right: 8px;
 }
 
 .filter-tabs {
     display: flex;
-    margin-bottom: 20px;
-    border-bottom: 1px solid #dee2e6;
+    margin-bottom: 25px;
+    gap: 10px;
+    /* border-bottom: 2px solid var(--pale-yellow); */ /* Optional subtle line */
 }
 
 .filter-tab {
     padding: 10px 20px;
-    color: #495057;
+    color: var(--text-medium);
     text-decoration: none;
-    border-bottom: 2px solid transparent;
-    font-weight: 500;
+    border-radius: var(--border-radius-small); /* Rounded tabs */
+    font-weight: 600;
+    font-size: 0.95rem;
+    transition: all 0.3s ease;
+    border-bottom: 3px solid transparent; /* Underline effect for active */
 }
 
 .filter-tab:hover {
-    color: #007bff;
-    text-decoration: none;
+    color: var(--coral-pink);
+    background-color: rgba(255, 170, 165, 0.1); /* Light coral tint on hover */
 }
 
 .filter-tab.active {
-    color: #007bff;
-    border-bottom-color: #007bff;
+    color: var(--coral-pink);
+    border-bottom-color: var(--coral-pink);
+    /* background-color: var(--coral-pink); */
+    /* color: var(--clean-white); */
 }
 
 .notifications-list {
     margin-top: 20px;
+    display: grid;
+    gap: 20px;
 }
 
 .notification-card {
-    background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
-    padding: 20px;
-    margin-bottom: 15px;
-    transition: transform 0.2s, box-shadow 0.2s;
+    background-color: var(--clean-white);
+    border-radius: var(--border-radius-main);
+    box-shadow: var(--card-shadow);
+    padding: 20px 25px;
+    transition: transform 0.25s ease, box-shadow 0.25s ease;
+    display: flex; /* For icon alignment */
+    align-items: flex-start; /* Align icon to top of content */
+    gap: 15px;
+    border-left: 5px solid transparent; /* Placeholder for unread state */
+}
+.notification-icon-area {
+    font-size: 1.5rem;
+    color: var(--sky-blue);
+    padding-top: 5px; /* Align with title */
+}
+.notification-card.unread .notification-icon-area {
+    color: var(--mint-green);
 }
 
+
 .notification-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    transform: translateY(-4px);
+    box-shadow: var(--card-hover-shadow);
 }
 
 .notification-card.unread {
-    border-left: 4px solid #007bff;
-    background-color: #f8fbff;
+    border-left-color: var(--mint-green);
+    background-color: #f6fffb; /* Very light mint */
+}
+
+.notification-content {
+    flex-grow: 1;
 }
 
 .notification-title {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     margin-top: 0;
-    margin-bottom: 10px;
-    font-size: 1.2rem;
+    margin-bottom: 8px;
+    font-size: 1.15rem; /* Adjusted size */
+    font-family: var(--font-title);
+    font-weight: 600;
 }
 
 .notification-title a {
-    color: #333;
+    color: var(--text-dark);
     text-decoration: none;
+    transition: color 0.2s ease;
 }
 
 .notification-title a:hover {
-    color: #007bff;
+    color: var(--coral-pink);
 }
 
 .unread-badge {
-    background-color: #007bff;
+    background-color: var(--bright-orange);
     color: white;
-    font-size: 0.75rem;
-    padding: 2px 8px;
-    border-radius: 10px;
+    font-size: 0.7rem;
+    padding: 4px 10px;
+    border-radius: 15px; /* Pill shape */
     margin-left: 10px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
 }
 
 .notification-text {
-    color: #495057;
+    color: var(--text-medium);
     margin-bottom: 15px;
-    line-height: 1.5;
+    line-height: 1.6;
+    font-size: 0.9rem;
+    letter-spacing: 0.2px;
 }
 
 .notification-meta {
     display: flex;
     justify-content: space-between;
-    color: #6c757d;
-    font-size: 0.85rem;
+    align-items: center;
+    color: var(--text-light);
+    font-size: 0.8rem;
 }
 
 .notification-type {
-    background-color: #f1f1f1;
-    padding: 2px 8px;
-    border-radius: 4px;
+    background-color: var(--sky-blue); /* Sky Blue for type */
+    color: #3E84A8; /* Darker text for contrast on sky blue */
+    padding: 3px 10px;
+    border-radius: var(--border-radius-small);
+    font-weight: 600;
 }
 
+.notification-time {
+    font-style: italic;
+}
+
+/* Pagination */
+.pagination-container {
+    margin-top: 30px;
+    display: flex;
+    justify-content: center;
+}
+
+.pagination {
+    display: flex;
+    list-style: none;
+    padding-left: 0;
+}
+
+.pagination .page-item .page-link {
+    color: var(--coral-pink);
+    background-color: var(--clean-white);
+    border: 1px solid var(--pale-yellow);
+    margin: 0 4px;
+    border-radius: 50%; /* Circular pagination items */
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 0.9rem;
+    transition: all 0.2s ease-in-out;
+}
+
+.pagination .page-item .page-link:hover {
+    background-color: var(--pale-yellow);
+    color: var(--coral-pink);
+    border-color: var(--coral-pink);
+    text-decoration: none;
+}
+
+.pagination .page-item.active .page-link {
+    background-color: var(--coral-pink);
+    border-color: var(--coral-pink);
+    color: var(--clean-white);
+    box-shadow: 0 2px 5px rgba(255, 170, 165, 0.5);
+}
+
+.pagination .page-item.disabled .page-link {
+    color: #ccc;
+    background-color: #f8f8f8;
+    border-color: #eee;
+    pointer-events: none;
+}
+
+
 .no-records {
     text-align: center;
     padding: 50px 20px;
-    background-color: #f8f9fa;
-    border-radius: 8px;
-    color: #6c757d;
+    background-color: #fafffd; /* Very light mint/yellow mix */
+    border-radius: var(--border-radius-main);
+    color: var(--text-medium);
+    margin-top: 20px;
 }
 
-.no-records i {
-    font-size: 3rem;
-    margin-bottom: 15px;
+.no-records-icon { /* Style for the inline SVG */
+    width: 60px;
+    height: 60px;
+    margin-bottom: 20px;
+    opacity: 0.8;
 }
+/* If using Font Awesome for no-records icon: */
+.no-records .fas.fa-bell-slash {
+    font-size: 3.5rem;
+    margin-bottom: 20px;
+    color: var(--mint-green);
+    opacity: 0.7;
+}
+
 
 .no-records p {
-    font-size: 1.2rem;
+    font-size: 1.1rem;
+    font-family: var(--font-body);
+    font-weight: 600;
+    color: var(--text-dark);
 }
 
-/* 通知下拉菜单样式 */
+/* Notification Dropdown Styles (assuming this is for a navbar dropdown or similar) */
+/* These are kept minimal as the main focus was the page content */
 .notification-dropdown {
-    width: 320px;
+    width: 350px; /* Wider for more content */
     padding: 0;
-    max-height: 400px;
+    max-height: 450px;
     overflow-y: auto;
+    border-radius: var(--border-radius-small);
+    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
+    background-color: var(--clean-white);
 }
 
 .notification-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0.5rem 1rem;
+    padding: 12px 15px;
+    background-color: var(--pale-yellow); /* Light yellow header */
+    border-bottom: 1px solid #f0e0d0;
+}
+.notification-header h5 {
+    margin:0;
+    font-family: var(--font-title);
+    font-weight: 600;
+    color: var(--text-dark);
 }
 
-.mark-all-read {
+.mark-all-read { /* Link in dropdown header */
     font-size: 0.8rem;
-    color: #007bff;
+    color: var(--coral-pink);
+    font-weight: 600;
+    text-decoration: none;
+}
+.mark-all-read:hover {
+    text-decoration: underline;
 }
 
 .notification-items {
@@ -151,38 +341,61 @@
 }
 
 .notification-item {
-    padding: 10px 15px;
-    border-bottom: 1px solid #f1f1f1;
+    padding: 12px 15px;
+    border-bottom: 1px solid #f5f5f5;
+    transition: background-color 0.2s ease;
+}
+.notification-item:last-child {
+    border-bottom: none;
+}
+
+.notification-item:hover {
+    background-color: var(--mint-green-light, #e6f7f0); /* Very light mint on hover */
 }
 
 .notification-item.unread {
-    background-color: #f8fbff;
+    background-color: #fff8f0; /* Very light orange/yellow for unread in dropdown */
+    border-left: 3px solid var(--bright-orange);
+    padding-left: 12px;
 }
 
-.notification-content h6 {
+.notification-item .notification-content h6 { /* Assuming title in dropdown is h6 */
     margin-bottom: 5px;
     font-size: 0.9rem;
+    font-family: var(--font-title);
+    font-weight: 600;
+    color: var(--text-dark);
 }
 
-.notification-text {
+.notification-item .notification-text { /* Text snippet in dropdown */
     font-size: 0.8rem;
-    color: #6c757d;
+    color: var(--text-medium);
     margin-bottom: 5px;
+    line-height: 1.4;
 }
 
-.notification-time {
+.notification-item .notification-time {
     font-size: 0.75rem;
-    color: #999;
+    color: var(--text-light);
 }
 
-.view-all {
+.view-all { /* Footer link in dropdown */
     text-align: center;
-    font-weight: 500;
+    font-weight: 600;
+    padding: 12px 15px;
+    display: block;
+    text-decoration: none;
+    color: var(--bright-orange);
+    background-color: #fffaf5;
+    transition: background-color 0.2s ease;
+}
+.view-all:hover {
+    background-color: var(--pale-yellow);
 }
 
-.no-notifications {
-    padding: 20px;
+.no-notifications { /* Message in empty dropdown */
+    padding: 25px;
     text-align: center;
-    color: #6c757d;
+    color: var(--text-medium);
+    font-size: 0.9rem;
 }
-
diff --git a/app/templates/announcement/list.html b/app/templates/announcement/list.html
index c87a8e8..d8b88e6 100644
--- a/app/templates/announcement/list.html
+++ b/app/templates/announcement/list.html
@@ -3,13 +3,20 @@
 {% block title %}通知公告 - 图书管理系统{% endblock %}
 
 {% block head %}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="{{ url_for('static', filename='css/announcement-list.css') }}">
 {% endblock %}
 
 {% block content %}
 <div class="announcement-container">
     <div class="page-header">
-        <h1>通知公告</h1>
+        <h1><i class="fas fa-bullhorn page-icon"></i> 通知公告</h1>
+        {# Optional: Add a create button if applicable for admins #}
+        {# <a href="{{ url_for('announcement.create_announcement') }}" class="btn btn-fresh-create">
+            <i class="fas fa-plus"></i> 发布新公告
+        </a> #}
     </div>
 
     <div class="announcement-list">
@@ -18,19 +25,24 @@
                 <div class="announcement-item {% if announcement.is_top %}pinned{% endif %}">
                     {% if announcement.is_top %}
                     <div class="pin-badge">
-                        <i class="fas fa-thumbtack"></i> 置顶
+                        <i class="fas fa-thumbtack"></i> 置顶推荐
                     </div>
                     {% endif %}
                     <div class="announcement-header">
                         <h3><a href="{{ url_for('announcement.announcement_detail', announcement_id=announcement.id) }}">{{ announcement.title }}</a></h3>
-                        <span class="date">{{ announcement.created_at }}</span>
+                        <span class="date">{{ announcement.created_at.strftime('%Y年%m月%d日') }}</span>
                     </div>
                     <div class="announcement-preview">
-                        {{ announcement.content|striptags|truncate(150) }}
+                        {{ announcement.content|striptags|truncate(130) }}
                     </div>
                     <div class="announcement-footer">
-                        <span class="publisher">发布者: {{ announcement.publisher.username if announcement.publisher else '系统' }}</span>
-                        <a href="{{ url_for('announcement.announcement_detail', announcement_id=announcement.id) }}" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
+                        <span class="publisher">
+                            <i class="fas fa-user-circle"></i>
+                            发布者: {{ announcement.publisher.username if announcement.publisher else '系统管理员' }}
+                        </span>
+                        <a href="{{ url_for('announcement.announcement_detail', announcement_id=announcement.id) }}" class="read-more">
+                            阅读全文 <i class="fas fa-arrow-right"></i>
+                        </a>
                     </div>
                 </div>
             {% endfor %}
@@ -54,7 +66,7 @@
                         </li>
                         {% endif %}
 
-                        {% for page_num in pagination.iter_pages(left_edge=2, right_edge=2, left_current=2, right_current=2) %}
+                        {% for page_num in pagination.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=1) %}
                             {% if page_num %}
                                 {% if page_num == pagination.page %}
                                 <li class="page-item active">
@@ -91,8 +103,8 @@
             </div>
         {% else %}
             <div class="no-records">
-                <i class="fas fa-info-circle"></i>
-                <p>目前没有通知公告</p>
+                 <img src="data:image/svg+xml;charset=UTF-8,%3csvg width='80' height='80' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V15H13V17ZM13 13H11V7H13V13Z' fill='%23FFAAA5'/%3e%3c/svg%3e" alt="No announcements icon" class="no-records-icon">
+                <p>暂时还没有新的通知公告哦，敬请期待！</p>
             </div>
         {% endif %}
     </div>
@@ -100,5 +112,6 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="{{ url_for('static', filename='js/announcement-list.js') }}"></script>
+{# <script src="{{ url_for('static', filename='js/announcement-list.js') }}"></script> #}
+{# Assuming announcement-list.js is for interactivity not directly tied to styling #}
 {% endblock %}
diff --git a/app/templates/announcement/notifications.html b/app/templates/announcement/notifications.html
index 935001b..ed3852c 100644
--- a/app/templates/announcement/notifications.html
+++ b/app/templates/announcement/notifications.html
@@ -3,6 +3,9 @@
 {% block title %}我的通知 - 图书管理系统{% endblock %}
 
 {% block head %}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="{{ url_for('static', filename='css/notifications.css') }}">
 {% endblock %}
 
@@ -12,7 +15,7 @@
         <h1>我的通知</h1>
         <div class="notification-actions">
             {% if pagination.items and not (unread_only and pagination.total == 0) %}
-                <a href="{{ url_for('announcement.mark_all_as_read') }}" class="btn btn-outline-primary">
+                <a href="{{ url_for('announcement.mark_all_as_read') }}" class="btn btn-fresh-action">
                     <i class="fas fa-check-double"></i> 全部标为已读
                 </a>
             {% endif %}
@@ -28,6 +31,14 @@
         {% if pagination.items %}
             {% for notification in pagination.items %}
                 <div class="notification-card {% if notification.status == 0 %}unread{% endif %}">
+                    <div class="notification-icon-area">
+                        <!-- Example: could use different icons based on notification.type -->
+                        {% if notification.status == 0 %}
+                            <i class="fas fa-envelope"></i> {# Icon for unread #}
+                        {% else %}
+                            <i class="fas fa-envelope-open-text"></i> {# Icon for read #}
+                        {% endif %}
+                    </div>
                     <div class="notification-content">
                         <h3 class="notification-title">
                             <a href="{{ url_for('announcement.view_notification', notification_id=notification.id) }}">{{ notification.title }}</a>
@@ -35,7 +46,7 @@
                                 <span class="unread-badge">未读</span>
                             {% endif %}
                         </h3>
-                        <div class="notification-text">{{ notification.content|striptags|truncate(150) }}</div>
+                        <div class="notification-text">{{ notification.content|striptags|truncate(120) }}</div>
                         <div class="notification-meta">
                             <span class="notification-type">{{ notification.type }}</span>
                             <span class="notification-time">{{ notification.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
@@ -63,7 +74,7 @@
                         </li>
                         {% endif %}
 
-                        {% for page_num in pagination.iter_pages(left_edge=2, right_edge=2, left_current=2, right_current=2) %}
+                        {% for page_num in pagination.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=1) %}
                             {% if page_num %}
                                 {% if page_num == pagination.page %}
                                 <li class="page-item active">
@@ -100,8 +111,9 @@
             </div>
         {% else %}
             <div class="no-records">
-                <i class="fas fa-bell-slash"></i>
-                <p>{{ '暂无未读通知' if unread_only else '暂无通知' }}</p>
+                {# Suggestion: Use a more vibrant/friendly icon or illustration #}
+                <img src="data:image/svg+xml;charset=UTF-8,%3csvg width='80' height='80' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%23A8E6CF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M12 16.5C12.9665 16.5 13.75 15.7165 13.75 14.75C13.75 13.7835 12.9665 13 12 13C11.0335 13 10.25 13.7835 10.25 14.75C10.25 15.7165 11.0335 16.5 12 16.5Z' fill='%23A8E6CF'/%3e%3cpath d='M12 7V10' stroke='%23A8E6CF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e" alt="No notifications icon" class="no-records-icon">
+                <p>{{ '还没有未读通知哦～' if unread_only else '这里空空如也，暂时没有新通知。' }}</p>
             </div>
         {% endif %}
     </div>
@@ -109,5 +121,6 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="{{ url_for('static', filename='js/notifications.js') }}"></script>
+{# <script src="{{ url_for('static', filename='js/notifications.js') }}"></script> #}
+{# Assuming notifications.js is for interactivity not directly tied to styling #}
 {% endblock %}