fix: 修复面试评价页面UI和功能优化

- 重新设计面试评价三板块(专业能力、现场表现力、综合评价)的布局
- 移除专业能力和现场表现力图标的彩色背景框
- 删除综合评价板块的图标
- 修复评价内容字符串解析错误
- 优化三个评价板块的视觉样式和内容提取逻辑

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/pages/InterviewSimulationPage/components/InterviewRating/index.css

@@ -278,16 +278,167 @@
       ol, ul {
         margin: 8px 0;
         padding-left: 24px;
+      }
+    }
+  }
+
+  /* 面试评价三板块样式 */
+  .interview-evaluation-sections {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 0;
+    
+    .evaluation-section {
+      width: 100%;
+      background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
+      border-radius: 12px;
+      padding: 0;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      border: 1px solid #e5e6eb;
+      transition: all 0.3s ease;
+      overflow: hidden;
+      
+      &:hover {
+        box-shadow: 0 4px 16px rgba(44, 122, 255, 0.1);
+        transform: translateY(-2px);
+      }
+      
+      .section-header {
+        display: flex;
+        align-items: center;
+        padding: 16px 20px;
+        background: linear-gradient(90deg, #f7faff 0%, #ffffff 100%);
+        border-bottom: 1px solid #e8e8e8;
+        position: relative;
         
-        li {
-          margin: 6px 0;
-          line-height: 1.8;
-          text-indent: 2em;
+        .section-icon {
+          width: 36px;
+          height: 36px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 12px;
+          
+          img {
+            width: 24px;
+            height: 24px;
+          }
+        }
+        
+        .section-title {
+          font-size: 18px;
+          font-weight: 600;
+          color: #1d2129;
+          margin: 0;
+          flex: 1;
+        }
+        
+        .section-score {
+          display: flex;
+          align-items: baseline;
+          gap: 4px;
+          
+          .score-label {
+            font-size: 13px;
+            color: #86909c;
+            margin-right: 4px;
+          }
+          
+          .score-value {
+            font-size: 24px;
+            font-weight: 700;
+            background: linear-gradient(135deg, #2c7aff 0%, #667eea 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+          }
+          
+          .score-total {
+            font-size: 14px;
+            color: #c9cdd4;
+            font-weight: 500;
+          }
+        }
+        
+        .section-badge {
+          padding: 6px 16px;
+          border-radius: 16px;
+          font-size: 14px;
+          font-weight: 600;
+          color: #fff;
+          background: linear-gradient(135deg, #2c7aff 0%, #4096ff 100%);
+          box-shadow: 0 2px 6px rgba(44, 122, 255, 0.2);
         }
       }
       
-      strong {
-        font-weight: 600;
+      .section-content {
+        padding: 20px;
+        
+        h1, h2, h3 {
+          display: none;
+        }
+        
+        p {
+          margin: 0 0 12px 0;
+          line-height: 1.8;
+          color: #4e5969;
+          font-size: 14px;
+          text-indent: 0;
+        }
+        
+        ol {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+          counter-reset: item;
+          
+          li {
+            margin-bottom: 16px;
+            padding-left: 32px;
+            position: relative;
+            line-height: 1.8;
+            color: #4e5969;
+            font-size: 14px;
+            counter-increment: item;
+            
+            &:before {
+              content: counter(item);
+              position: absolute;
+              left: 0;
+              top: 0;
+              width: 24px;
+              height: 24px;
+              background: linear-gradient(135deg, #e8f3ff 0%, #f0f7ff 100%);
+              border: 1px solid #2c7aff;
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 12px;
+              font-weight: 600;
+              color: #2c7aff;
+            }
+            
+            &:last-child {
+              margin-bottom: 0;
+            }
+          }
+        }
+      }
+      
+      &.comprehensive-section {
+        .section-content {
+          background: linear-gradient(135deg, #f7faff 0%, #ffffff 100%);
+          border-radius: 0 0 12px 12px;
+          
+          p {
+            font-size: 15px;
+            line-height: 1.9;
+            color: #1d2129;
+            text-align: justify;
+          }
+        }
       }
     }
   }

src/pages/InterviewSimulationPage/components/InterviewRating/index.jsx

@@ -339,14 +339,72 @@ export default ({ selectedItem = "求职面试初体验" }) => {
             </div>
           </div>
 
-          {/* 基础面试评价区域 */}
-          <div className="interview-evaluation-text-wrapper">
-            <div className="interview-rating-header" style={{ justifyContent: 'flex-start' }}>
-              <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuUY5vlvUj2X.png" alt="icon" style={{ width: '28px', height: '28px', marginRight: '10px' }} />
-              <span className="interview-rating-header-title">{getEvaluationData().title}</span>
+          {/* 面试评价三板块区域 */}
+          <div className="interview-evaluation-sections">
+            {/* 专业能力板块 */}
+            <div className="evaluation-section">
+              <div className="section-header">
+                <div className="section-icon professional-icon">
+                  <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuUY5vlvUj2X.png" alt="专业能力" />
+                </div>
+                <h3 className="section-title">专业能力</h3>
+                <div className="section-score">
+                  <span className="score-label">得分</span>
+                  <span className="score-value">{getEvaluationData().professionalScore}</span>
+                  <span className="score-total">/60</span>
+                </div>
+              </div>
+              <div className="section-content">
+                <ReactMarkdown>
+                  {(() => {
+                    const content = getEvaluationData().content;
+                    const sections = content.split('#');
+                    if (sections.length > 1) {
+                      const professionalContent = sections[1].split('\n\n');
+                      return professionalContent.slice(1, -1).join('\n\n');
+                    }
+                    return '';
+                  })()}
+                </ReactMarkdown>
+              </div>
             </div>
-            <div className="interview-rating-text">
-              <ReactMarkdown>{getEvaluationData().content}</ReactMarkdown>
+
+            {/* 现场表现力板块 */}
+            <div className="evaluation-section">
+              <div className="section-header">
+                <div className="section-icon performance-icon">
+                  <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuUY5uY7Ek50.png" alt="现场表现力" />
+                </div>
+                <h3 className="section-title">现场表现力</h3>
+                <div className="section-score">
+                  <span className="score-label">得分</span>
+                  <span className="score-value">{getEvaluationData().performanceScore}</span>
+                  <span className="score-total">/40</span>
+                </div>
+              </div>
+              <div className="section-content">
+                <ReactMarkdown>
+                  {getEvaluationData().content.split('# 现场表现力')[1].split('# 综合评价')[0].trim()}
+                </ReactMarkdown>
+              </div>
+            </div>
+
+            {/* 综合评价板块 */}
+            <div className="evaluation-section comprehensive-section">
+              <div className="section-header">
+
+                <h3 className="section-title">综合评价</h3>
+                <div className="section-badge">
+                  {getEvaluationData().totalScore >= 80 ? '优秀' : 
+                   getEvaluationData().totalScore >= 60 ? '良好' : 
+                   getEvaluationData().totalScore >= 40 ? '及格' : '需努力'}
+                </div>
+              </div>
+              <div className="section-content">
+                <ReactMarkdown>
+                  {getEvaluationData().content.split('# 综合评价')[1].trim()}
+                </ReactMarkdown>
+              </div>
             </div>
           </div>
         </>

src/pages/JobStrategyDetailPage/components/CurvedEmployment/index.css

@@ -3,12 +3,18 @@
   height: 100%;
   position: relative;
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   align-items: center;
   flex-direction: column;
+  padding: 20px;
+  box-sizing: border-box;
 
   > img {
-    width: 1056px;
-    height: 561px;
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    display: block;
   }
 }

src/pages/JobStrategyPage/index.jsx

@@ -1,14 +1,17 @@
-import CoursesVideoPlayer from "@/components/CoursesVideoPlayer";
-import LiveSummary from "@/components/LiveSummary";
-import "./index.css";
-
-const JobStrategyPage = () => {
-  return (
-    <div className="job-strategy-page">
-      <CoursesVideoPlayer isLock />
-      <LiveSummary showBtn />
-    </div>
-  );
-};
-
-export default JobStrategyPage;
+import CoursesVideoPlayer from "@/components/CoursesVideoPlayer";
+import LiveSummary from "@/components/LiveSummary";
+import "./index.css";
+
+const JobStrategyPage = () => {
+  return (
+    <div className="job-strategy-page">
+      <CoursesVideoPlayer 
+        isLock 
+        backgroundImage="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/public_bg/recuW8VeXQDVI2.jpg"
+      />
+      <LiveSummary showBtn />
+    </div>
+  );
+};
+
+export default JobStrategyPage;