diff --git a/frontend/src/components/Recommendations.css b/frontend/src/components/Recommendations.css
index 8eea58d..f95dada 100644
--- a/frontend/src/components/Recommendations.css
+++ b/frontend/src/components/Recommendations.css
@@ -142,12 +142,12 @@
 }
 
 .direction.buy {
-  background-color: #4CAF50;
+  background-color: #00ff6c;
   color: white;
 }
 
 .direction.sell {
-  background-color: #f44336;
+  background-color: #f51b0c;
   color: white;
 }
 
@@ -324,13 +324,22 @@
 
 /* 用户指南 */
 .user-guide {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   padding: 15px;
   border-radius: 8px;
   margin: 10px 0;
 }
 
+
+.user-guide .buy-bg{
+  background: linear-gradient(135deg, #05e567, #795f94);
+}
+
+.user-guide .sell-bg{
+  background: linear-gradient(135deg, #f51b0c 0%, #f51b0c 100%);
+}
+
+
 .user-guide-head {
   display: flex;
   justify-content: space-between;
diff --git a/frontend/src/components/Recommendations.jsx b/frontend/src/components/Recommendations.jsx
index a469d38..a1ae258 100644
--- a/frontend/src/components/Recommendations.jsx
+++ b/frontend/src/components/Recommendations.jsx
@@ -441,7 +441,7 @@ function Recommendations() {
 
                 {/* 用户指南（人话版计划） */}
                 {rec.user_guide && (
-                  <div className="user-guide">
+                  <div className={`user-guide ${rec.direction === 'BUY' ? 'buy-bg' : 'sell-bg'}`}>
                     <div className="user-guide-head">
                       <strong>📋 操作计划</strong>
                       <div className="user-guide-prices">