From 52572dfdeb2ed5eb03789011b9019ae26510322a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=89=8D=E7=AB=AF=E4=BA=BA=E7=BB=9D=E4=B8=8D=E4=B8=BA?= =?UTF-8?q?=E5=A5=B4?= Date: Thu, 21 Aug 2025 10:53:59 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E4=BA=86=E6=92=AD=E6=94=BE=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CoursesVideoPlayer/index.css | 5 +- src/components/CoursesVideoPlayer/index.jsx | 10 ++- src/pages/CareerTreePage/index.css | 68 ++++++++++----------- 3 files changed, 41 insertions(+), 42 deletions(-) diff --git a/src/components/CoursesVideoPlayer/index.css b/src/components/CoursesVideoPlayer/index.css index 8d69286..ad7f9e8 100644 --- a/src/components/CoursesVideoPlayer/index.css +++ b/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; diff --git a/src/components/CoursesVideoPlayer/index.jsx b/src/components/CoursesVideoPlayer/index.jsx index 4a07e55..3efbd77 100644 --- a/src/components/CoursesVideoPlayer/index.jsx +++ b/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 (
{/* 直播板块 */} @@ -16,14 +20,14 @@ export default ({ className = "", isLock = false }) => { ) : ( <>
- < 上一集 + handleClickBtn(1)}>< 上一集 钢铁是怎样炼成的 - 下一集 > + handleClickBtn(2)}>下一集 >
- +
)} diff --git a/src/pages/CareerTreePage/index.css b/src/pages/CareerTreePage/index.css index eb77c51..2bd88c6 100644 --- a/src/pages/CareerTreePage/index.css +++ b/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; } -} \ No newline at end of file +}