diff --git a/frontend/src/views/user/Home.vue b/frontend/src/views/user/Home.vue
index b267cd0..98bf8ad 100644
--- a/frontend/src/views/user/Home.vue
+++ b/frontend/src/views/user/Home.vue
@@ -3,7 +3,7 @@
-
+
@@ -193,17 +193,32 @@ onMounted(async () => {
.announcement-bar {
display: flex;
align-items: center;
- gap: 10px;
- padding: 10px 16px;
- background: #2d2d44;
- border: 1px solid rgba(255, 255, 255, 0.06);
+ gap: 12px;
+ padding: 8px 16px;
+ background: linear-gradient(135deg, rgba(78, 110, 242, 0.15), rgba(124, 92, 252, 0.15));
+ border: 1px solid rgba(78, 110, 242, 0.2);
border-radius: 10px;
margin-bottom: 16px;
}
.announcement-icon {
- color: #f59e0b;
+ width: 28px;
+ height: 28px;
+ border-radius: 6px;
+ background: linear-gradient(135deg, #4e6ef2, #7c5cfc);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
flex-shrink: 0;
+ animation: bell-ring 2s ease-in-out infinite;
+}
+
+@keyframes bell-ring {
+ 0%, 100% { transform: rotate(0); }
+ 10%, 30% { transform: rotate(10deg); }
+ 20%, 40% { transform: rotate(-10deg); }
+ 50% { transform: rotate(0); }
}
.announcement-content {
@@ -214,7 +229,7 @@ onMounted(async () => {
.announcement-text {
font-size: 14px;
- color: rgba(255, 255, 255, 0.75);
+ color: rgba(255, 255, 255, 0.85);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;