From 43c33658e00c6e674dd5063eb7c2d43f62e5a64d Mon Sep 17 00:00:00 2001
From: admin <1297598740@qq.com>
Date: Fri, 30 Jan 2026 16:50:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=B4=A2=E5=8A=A1?=
 =?UTF-8?q?=E5=81=A5=E5=BA=B7=E8=AF=84=E5=88=86=E6=A8=A1=E6=80=81=E6=A1=86?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=B1=95=E7=A4=BA=E8=AF=A6=E7=BB=86?=
 =?UTF-8?q?=E8=AF=84=E5=88=86=E3=80=81=E7=BB=86=E5=88=99=E5=8F=8AAI?=
 =?UTF-8?q?=E5=BB=BA=E8=AE=AE=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HealthScoreModal/HealthScoreModal.css     | 67 ++++++++++++++++---
 .../HealthScoreModal/HealthScoreModal.tsx     | 12 ++--
 2 files changed, 63 insertions(+), 16 deletions(-)

diff --git a/src/components/home/HealthScoreModal/HealthScoreModal.css b/src/components/home/HealthScoreModal/HealthScoreModal.css
index 7e6400e..3871cdd 100644
--- a/src/components/home/HealthScoreModal/HealthScoreModal.css
+++ b/src/components/home/HealthScoreModal/HealthScoreModal.css
@@ -464,39 +464,72 @@
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.9);
     line-height: 1.5;
-    padding-left: 0.5rem;
-    border-left: 2px solid rgba(255, 255, 255, 0.2);
+    padding-left: 1rem;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.tip-item::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 8px;
+    width: 6px;
+    height: 6px;
+    background: #60a5fa;
+    border-radius: 50%;
+    opacity: 0.5;
+}
+
+.tip-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    padding-left: 1.5rem;
+    padding-right: 0.5rem;
+}
+
+.tip-item:hover::before {
+    background: #4ade80;
+    opacity: 1;
+    left: 0.5rem;
 }
 
 .ai-advice-container {
     margin-top: 1rem;
     padding-top: 1rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    border-top: 1px dashed rgba(255, 255, 255, 0.15);
+    animation: fadeInUp 0.5s ease-out forwards;
 }
 
 .ai-advice-box {
-    background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), transparent);
-    border-left: 3px solid #60a5fa;
-    padding: 1rem;
-    border-radius: 0 12px 12px 0;
-    font-size: 0.9rem;
+    /* Refactored to blend in */
+    background: transparent;
+    border: none;
+    padding: 0;
+    box-shadow: none;
+    backdrop-filter: none;
+    font-size: 0.95rem;
     line-height: 1.6;
     color: #93c5fd;
+    /* Keep the blue text distinctive */
     position: relative;
+    padding-left: 2rem;
+    /* Space for icon */
 }
 
 .ai-advice-icon {
     position: absolute;
-    top: 1rem;
-    left: 1rem;
+    top: 2px;
+    left: 0;
     color: #60a5fa;
+    filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.4));
 }
 
 .ai-advice-text {
     display: block;
     margin-left: 0;
-    /* Adjusted layout */
     text-align: justify;
+    font-weight: 500;
 }
 
 .ai-loading {
@@ -508,4 +541,16 @@
     align-items: center;
     gap: 8px;
     padding-left: 0.5rem;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
\ No newline at end of file
diff --git a/src/components/home/HealthScoreModal/HealthScoreModal.tsx b/src/components/home/HealthScoreModal/HealthScoreModal.tsx
index d903648..5f9ce8a 100644
--- a/src/components/home/HealthScoreModal/HealthScoreModal.tsx
+++ b/src/components/home/HealthScoreModal/HealthScoreModal.tsx
@@ -257,18 +257,20 @@ export const HealthScoreModal: React.FC<HealthScoreModalProps> = ({
                                 <div className="suggestion-content">
                                     {/* Static Tips */}
                                     {tips && tips.length > 0 && tips.map((tip, i) => (
-                                        <div key={i} style={{ marginBottom: '8px', fontSize: '0.9rem', color: 'rgba(255,255,255,0.9)' }}>{tip}</div>
+                                        <div key={i} className="tip-item">{tip}</div>
                                     ))}
 
                                     {/* AI Dynamic Advice */}
                                     {loadingAdvice ? (
-                                        <div style={{ marginTop: '12px', fontSize: '0.85rem', opacity: 0.7, fontStyle: 'italic', display: 'flex', alignItems: 'center', gap: '6px' }}>
+                                        <div className="ai-loading">
                                             <span className="loading-dots">CFO 正在分析您的财务报表...</span>
                                         </div>
                                     ) : aiAdvice && (
-                                        <div style={{ marginTop: '12px', paddingTop: '12px', borderTop: '1px solid rgba(255,255,255,0.1)', fontSize: '0.9rem', lineHeight: '1.6', color: '#60a5fa' }}>
-                                            <Icon icon="solar:chat-round-line-duotone" style={{ marginRight: '6px', verticalAlign: 'text-bottom' }} />
-                                            {aiAdvice}
+                                        <div className="ai-advice-container">
+                                            <div className="ai-advice-box">
+                                                <Icon icon="solar:chat-round-line-duotone" className="ai-advice-icon" width="20" />
+                                                <span className="ai-advice-text">{aiAdvice}</span>
+                                            </div>
                                         </div>
                                     )}
                                 </div>