feat: 🎸 优化了播放器

src/components/CoursesVideoPlayer/index.css

@@ -20,21 +20,20 @@
 
     .courses-video-player-header {
       width: 100%;
-      height: 18px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding-bottom: 20px;
       border-bottom: 1px solid #e5e6eb;
-      margin-bottom: 20px;
 
       > span {
         color: #2c7aff;
         font-size: 10px;
         font-weight: 600;
         cursor: pointer;
+        /* 添加以下样式来防止点击时背景变色 */
+        -webkit-tap-highlight-color: transparent;
       }
-
       .courses-video-player-header-title {
         cursor: default;
         font-size: 12px;

src/components/CoursesVideoPlayer/index.jsx

@@ -3,6 +3,10 @@ import Locked from "@/components/Locked";
 import "./index.css";
 
 export default ({ className = "", isLock = false }) => {
+  const handleClickBtn = (item) => {
+    console.log(item);
+  };
+
   return (
     <div className={`${className} courses-video-player-wrapper`}>
       {/* 直播板块 */}
@@ -16,14 +20,14 @@ export default ({ className = "", isLock = false }) => {
         ) : (
           <>
             <div className="courses-video-player-header">
-              <span>&lt; 上一集</span>
+              <span onClick={() => handleClickBtn(1)}>&lt; 上一集</span>
               <span className="courses-video-player-header-title">
                 钢铁是怎样炼成的
               </span>
-              <span>下一集 &gt;</span>
+              <span onClick={() => handleClickBtn(2)}>下一集 &gt;</span>
             </div>
             <div className="courses-video-player-video">
-              <video src="" controls></video>
+              <video src="/live.mp4" autoPlay controls></video>
             </div>
           </>
         )}

src/pages/CareerTreePage/index.css

@@ -1,6 +1,8 @@
 /* 就业管家知识树页面样式 */
 .career-tree-page {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  width: 1160px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, sans-serif;
   position: relative;
   min-height: 100vh;
   overflow-x: hidden;
@@ -56,8 +58,6 @@
   position: relative;
 }
 
-
-
 .top-content-wrapper {
   background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
   background-size: cover;
@@ -142,7 +142,7 @@
 }
 
 .menu-item.selected::after {
-  content: '';
+  content: "";
   position: absolute;
   bottom: -2px;
   left: 50%;
@@ -451,8 +451,6 @@
   margin-bottom: 0;
 }
 
-
-
 /* SVG 连接线样式 */
 .connection-canvas {
   position: absolute;
@@ -469,8 +467,6 @@
   fill: none;
 }
 
-
-
 /* 所有屏幕尺寸确保布局稳定性 */
 @media (min-width: 1201px) {
   .section-content {
@@ -481,7 +477,7 @@
     flex-wrap: nowrap !important;
     justify-content: flex-start !important;
   }
-  
+
   .center-item {
     /* 确保item的布局稳定 */
     display: block !important;
@@ -501,7 +497,7 @@
     align-items: stretch !important;
     flex-wrap: nowrap !important;
   }
-  
+
   .center-item {
     /* 在超大屏幕上确保item的布局稳定 */
     display: block !important;
@@ -515,32 +511,32 @@
   .canvas-container {
     width: 1200px;
   }
-  
+
   .left-panel {
     width: 220px;
     min-width: 220px;
     left: 20px;
   }
-  
+
   .right-panel {
     width: 220px;
     min-width: 220px;
     right: 20px;
   }
-  
+
   .top-menu-container {
     padding: 12px 20px;
   }
-  
+
   .menu-panel {
     gap: 6px;
   }
-  
+
   .menu-item {
     padding: 8px 16px;
     font-size: 13px;
   }
-  
+
   .center-panel {
     width: 320px;
     padding: 24px 16px;
@@ -551,28 +547,28 @@
   .canvas-container {
     width: 1000px;
   }
-  
+
   .tree-layout {
     gap: 10px;
   }
-  
+
   .center-panel {
     width: 300px;
     padding: 24px 16px;
   }
-  
+
   .left-panel {
     width: 200px;
     min-width: 200px;
     left: 10px;
   }
-  
+
   .right-panel {
     width: 200px;
     min-width: 200px;
     right: 10px;
   }
-  
+
   .menu-item {
     font-size: 12px;
     padding: 6px 12px;
@@ -583,32 +579,32 @@
   .top-menu-container {
     padding: 10px;
   }
-  
+
   .menu-panel {
     overflow-x: auto;
     gap: 4px;
     padding: 6px;
     scrollbar-width: thin;
   }
-  
+
   .menu-item {
     font-size: 11px;
     padding: 6px 10px;
   }
-  
+
   .tree-layout {
     flex-direction: column;
     align-items: center;
     gap: 30px;
   }
-  
+
   .left-column,
   .center-column,
   .right-column {
     width: 100%;
     max-width: 500px;
   }
-  
+
   .left-panel,
   .right-panel {
     position: relative;
@@ -617,11 +613,11 @@
     left: auto;
     right: auto;
   }
-  
+
   .connection-canvas {
     display: none;
   }
-  
+
   /* 确保小屏幕下也保持垂直布局 */
   .section-content {
     display: flex !important;
@@ -629,7 +625,7 @@
     align-items: stretch !important;
     flex-wrap: nowrap !important;
   }
-  
+
   .center-item {
     display: block !important;
     width: 100% !important;
@@ -641,28 +637,28 @@
   .top-menu-container {
     padding: 8px;
   }
-  
+
   .menu-panel {
     flex-wrap: wrap;
     gap: 4px;
     padding: 4px;
   }
-  
+
   .menu-item {
     font-size: 10px;
     padding: 5px 8px;
     flex: 0 0 calc(33.333% - 4px);
   }
-  
+
   .top-content {
     padding: 20px 10px;
   }
-  
+
   .center-panel {
     width: 100%;
     padding: 24px 16px;
   }
-  
+
   /* 确保移动端也保持垂直布局 */
   .section-content {
     display: flex !important;
@@ -670,10 +666,10 @@
     align-items: stretch !important;
     flex-wrap: nowrap !important;
   }
-  
+
   .center-item {
     display: block !important;
     width: 100% !important;
     margin-bottom: 0 !important;
   }
-} 
+}