diff --git a/frontend/src/components/Recommendations.css b/frontend/src/components/Recommendations.css
index c1e42cb..5bce4b9 100644
--- a/frontend/src/components/Recommendations.css
+++ b/frontend/src/components/Recommendations.css
@@ -336,7 +336,7 @@
 }
 
 .user-guide.sell-bg{
-  background: linear-gradient(135deg, #f51b0c 0%, #f51b0c 100%);
+  background: linear-gradient(135deg, #e72215 0%, #891810 100%);
 }
 
 
diff --git a/recommendations-viewer/src/components/RecommendationsViewer.css b/recommendations-viewer/src/components/RecommendationsViewer.css
index 259ae74..2e5da3b 100644
--- a/recommendations-viewer/src/components/RecommendationsViewer.css
+++ b/recommendations-viewer/src/components/RecommendationsViewer.css
@@ -459,6 +459,14 @@
   margin: 10px 0;
 }
 
+.user-guide.buy-bg{
+  background: linear-gradient(135deg, #05e567 0%, #795f94 100%);
+}
+
+.user-guide.sell-bg{
+  background: linear-gradient(135deg, #e72215 0%, #891810 100%);
+}
+
 .user-guide-head {
   display: flex;
   justify-content: space-between;
diff --git a/recommendations-viewer/src/components/RecommendationsViewer.jsx b/recommendations-viewer/src/components/RecommendationsViewer.jsx
index 5ac9005..5108750 100644
--- a/recommendations-viewer/src/components/RecommendationsViewer.jsx
+++ b/recommendations-viewer/src/components/RecommendationsViewer.jsx
@@ -319,7 +319,7 @@ function RecommendationsViewer() {
 
                   {/* 用户指南（人话版计划） */}
                   {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">