feat: 🎸 优化了播放器

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;
   }
-} 
+}