From b390a3ca07dcafbb18e7bf740c4dec6241f730d2 Mon Sep 17 00:00:00 2001
From: nuyue <nuyue@users.noreply.github.com>
Date: Thu, 16 Jul 2026 15:53:57 +0800
Subject: [PATCH] Revert "style: simplify announcement bar design, remove
 gradient background"

This reverts commit 2790310a25536cf33efbeed644d6d401592c5b65.
---
 frontend/src/views/user/Home.vue | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

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 @@
     <!-- 公告区域 -->
     <div class="announcement-bar" v-if="announcements.length">
       <div class="announcement-icon">
-        <el-icon :size="20"><Bell /></el-icon>
+        <el-icon><Bell /></el-icon>
       </div>
       <div class="announcement-content">
         <el-carousel height="32px" direction="vertical" :autoplay="true" :interval="4000" indicator-position="none">
@@ -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;