diff --git a/src/App.jsx b/src/App.jsx index b58fe02..d3197f7 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -22,6 +22,7 @@ import InterviewSimulationPage from "./pages/InterviewSimulationPage"; import ExpertSupportPage from "./pages/ExpertSupportPage"; import InterviewLiveRoomPage from "./pages/InterviewLiveRoomPage"; import Portfolio from "./pages/Portfolio"; +import PublicCourses from "./pages/PublicCourses"; // 样式文件导入 import "./normalize.css"; @@ -45,6 +46,7 @@ function App() { } /> } /> } /> + } /> } diff --git a/src/assets/images/Common/lock_bg.png b/src/assets/images/Common/lock_bg.png new file mode 100644 index 0000000..d6c4e74 Binary files /dev/null and b/src/assets/images/Common/lock_bg.png differ diff --git a/src/assets/images/Common/title_dot_icon.png b/src/assets/images/Common/title_dot_icon.png new file mode 100644 index 0000000..2d20a8e Binary files /dev/null and b/src/assets/images/Common/title_dot_icon.png differ diff --git a/src/assets/images/CompanyJobsPage/company_jobs_page_icon.png b/src/assets/images/Common/title_icon.png similarity index 100% rename from src/assets/images/CompanyJobsPage/company_jobs_page_icon.png rename to src/assets/images/Common/title_icon.png diff --git a/src/assets/images/CoursesVideoPlayer/blank_icon.png b/src/assets/images/CoursesVideoPlayer/blank_icon.png new file mode 100644 index 0000000..f59fde4 Binary files /dev/null and b/src/assets/images/CoursesVideoPlayer/blank_icon.png differ diff --git a/src/assets/images/CoursesVideoPlayer/hat_icon.png b/src/assets/images/CoursesVideoPlayer/hat_icon.png new file mode 100644 index 0000000..66d94c4 Binary files /dev/null and b/src/assets/images/CoursesVideoPlayer/hat_icon.png differ diff --git a/src/assets/images/CoursesVideoPlayer/living_icon.png b/src/assets/images/CoursesVideoPlayer/living_icon.png new file mode 100644 index 0000000..9435b16 Binary files /dev/null and b/src/assets/images/CoursesVideoPlayer/living_icon.png differ diff --git a/src/components/CoursesVideoPlayer/index.css b/src/components/CoursesVideoPlayer/index.css new file mode 100644 index 0000000..8be187c --- /dev/null +++ b/src/components/CoursesVideoPlayer/index.css @@ -0,0 +1,229 @@ +.courses-video-player-wrapper { + width: 800px; + height: 798px; + position: relative; + + .lock { + position: absolute; + top: 110px; + left: 50%; + transform: translateX(-50%); + width: 433px; + height: 384px; + } + + .courses-video-player { + width: 800px; + height: 545px; + box-sizing: border-box; + padding: 16px; + border-radius: 8px; + background-color: #fff; + border: 1px solid #fff; + + .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; + } + + .courses-video-player-header-title { + cursor: default; + font-size: 12px; + color: #000; + } + } + + .courses-video-player-video { + width: 100%; + height: 478px; + border-radius: 8px; + overflow: hidden; + + video { + width: 100%; + height: 100%; + } + } + } + .courses-video-player-info { + margin-top: 20px; + width: 800px; + height: 234px; + border: 2px solid #fff; + border-radius: 8px; + box-sizing: border-box; + padding: 16px; + background-image: linear-gradient(180deg, #daecff, #ffffff); + display: flex; + justify-content: flex-start; + align-items: center; + + .courses-video-player-audience-info { + width: 272px; + height: 100%; + padding: 0 10px; + border-right: 1px solid #f2f3f5; + display: flex; + justify-content: flex-start; + align-items: center; + flex-direction: column; + + .teacher-avatar { + width: 64px; + height: 64px; + position: relative; + + &::after { + content: ""; + position: absolute; + left: 0; + bottom: -5px; + width: 62px; + height: 20px; + background-image: url("@/assets/images/CoursesVideoPlayer/living_icon.png"); + background-size: 100% 100%; + } + } + + .teacher-name { + margin-top: 10px; + font-size: 16px; + font-weight: 600; + color: #1d2129; + margin-bottom: 5px; + } + + .teacher-tag { + background-color: #f2f3f5; + box-sizing: border-box; + padding: 1px 8px; + border-radius: 2px; + color: #4e5969; + font-size: 14px; + font-weight: 400; + margin-bottom: 5px; + } + + .living-data { + width: 100%; + height: 47px; + display: flex; + justify-content: space-between; + align-items: center; + + .living-data-item { + width: 78px; + height: 100%; + text-align: center; + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + + > span:first-child { + color: #4e5969; + font-size: 14px; + font-weight: 400; + } + > span:last-child { + color: #1d2129; + font-size: 16px; + font-weight: 600; + } + } + } + } + + .courses-video-player-teacher-info { + width: 456px; + height: 100%; + margin-left: 20px; + + .title { + position: relative; + width: 100%; + height: 24px; + line-height: 20px; + font-size: 16px; + font-weight: 600; + color: #1d2129; + box-sizing: border-box; + padding-left: 25px; + text-align: left; + + &::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 20px; + height: 20px; + background-size: 100% 100%; + border-radius: 2px; + } + } + + .icon1 { + &::before { + background-image: url("@/assets/images/CoursesVideoPlayer/hat_icon.png"); + } + } + + .icon2 { + &::before { + background-image: url("@/assets/images/CoursesVideoPlayer/blank_icon.png"); + } + } + .teacher-introduce { + width: 100%; + height: 84px; + } + .courses-video-player-teacher-introduce { + width: 100%; + height: 100px; + margin-bottom: 20px; + } + .courses-video-player-teacher-tags { + width: 100%; + height: 50px; + + .teacher-tags { + width: 100%; + height: 24px; + display: flex; + justify-content: flex-start; + align-items: center; + flex-wrap: nowrap; + flex-direction: row; + overflow-x: auto; + margin-top: 5px; + + > li { + box-sizing: border-box; + padding: 0 10px; + background-color: #f2f3f5; + color: #1d2129; + font-size: 14px; + font-weight: 600; + margin-right: 10px; + border-radius: 2px; + flex-shrink: 0; + flex-wrap: nowrap; + } + } + } + } + } +} diff --git a/src/components/CoursesVideoPlayer/index.jsx b/src/components/CoursesVideoPlayer/index.jsx new file mode 100644 index 0000000..f3e1144 --- /dev/null +++ b/src/components/CoursesVideoPlayer/index.jsx @@ -0,0 +1,79 @@ +import { useState } from "react"; +import { Avatar } from "@arco-design/web-react"; +import LOCKICON from "@/assets/images/Common/lock_bg.png"; +import "./index.css"; + +export default ({ className = "" }) => { + const [isLock, setIsLock] = useState(false); + + return ( +
+ {/* 直播板块 */} +
+ {isLock ? ( + lock + ) : ( + <> +
+ < 上一集 + + 钢铁是怎样炼成的 + + 下一集 > +
+
+ +
+ + )} +
+ {/* 直播信息板块 */} +
+ {/* 直播观众信息 */} +
+ + avatar + + 赵老师 + 教育体系认知 +
+
+ 开始 + 9/1 10:00 +
+
+ 时长 + 60分钟 +
+
+ 观看 + 300000人 +
+
+
+ {/* 直播教师信息 */} +
+
+

导师介绍

+

+ 这是一段导师介绍这是一段导师介绍这是一段导师介绍这是一段导师介绍这是一段导师介绍这是 + 一段导师介绍这是一段导师介绍这是一段导师介绍这是一段导师介绍这是 + 一段导师介绍这是一段导师介绍这是一段导师介绍这是一段导师介绍 +

+
+
+

教师专长

+
    +
  • 一般般
    • +
  • 一般般
    • +
  • 一般般
    • +
+
+
+
+
+ ); +}; diff --git a/src/components/Layout/Sidebar.jsx b/src/components/Layout/Sidebar.jsx index 5cbc590..c684af1 100644 --- a/src/components/Layout/Sidebar.jsx +++ b/src/components/Layout/Sidebar.jsx @@ -15,6 +15,7 @@ const navigation = { { title: "课程区块", items: [ + { name: "📺 公共课直播间", path: "/public-courses" }, { name: "📺 课程直播间", path: "/live" }, { name: "🌳 就业管家知识树", path: "/career-tree" }, { name: "📝 课后作业", path: "/homework" }, diff --git a/src/components/Layout/index.css b/src/components/Layout/index.css index aeb481c..fb65b2a 100644 --- a/src/components/Layout/index.css +++ b/src/components/Layout/index.css @@ -264,6 +264,7 @@ transition: margin-left 0.3s ease; display: flex; flex-direction: column; + background-color: #f2f3f5; } /* 当侧边栏折叠时的主内容区域 */ diff --git a/src/components/Layout/index.jsx b/src/components/Layout/index.jsx index 385043c..7a701c3 100644 --- a/src/components/Layout/index.jsx +++ b/src/components/Layout/index.jsx @@ -1,7 +1,6 @@ import { useState, useEffect } from "react"; import Sidebar from "./Sidebar"; import "./index.css"; -// import ResumeInfoModal from "@/pages/CompanyJobsPage/components/ResumeInfoModal"; const Layout = ({ children }) => { const [isCollapsed, setIsCollapsed] = useState(() => { @@ -38,7 +37,6 @@ const Layout = ({ children }) => { > {children} - {/* */} ); }; diff --git a/src/components/LiveSummary/index.css b/src/components/LiveSummary/index.css new file mode 100644 index 0000000..a994a6b --- /dev/null +++ b/src/components/LiveSummary/index.css @@ -0,0 +1,143 @@ +.live-summary-wrapper { + width: 304px; + height: 798px; + border-radius: 8px; + background-color: #fff; + box-sizing: border-box; + padding: 20px 16px; + + .not-living { + &::after { + display: none; + } + } + .live-summary-title { + width: 100%; + height: 30px; + position: relative; + box-sizing: border-box; + font-size: 20px; + font-weight: 600; + line-height: 20px; + color: #1d2129; + padding-bottom: 10px; + border-bottom: 1px solid #e5e6eb; + margin-bottom: 20px; + + &::before { + content: ""; + position: absolute; + left: 20px; + bottom: 5px; + width: 31px; + height: 3px; + background-image: url("@/assets/images/Common/title_icon.png"); + background-size: 100% 100%; + } + + &::after { + content: ""; + position: absolute; + right: 0; + bottom: 10px; + width: 62px; + height: 20px; + background-image: url("@/assets/images/CoursesVideoPlayer/living_icon.png"); + background-size: 100% 100%; + } + } + .live-summary-list { + width: 100%; + max-height: 530px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + overflow-y: auto; + + .live-summary-item:last-child { + margin-bottom: 0; + } + + .live-summary-item { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + overflow-y: auto; + margin-bottom: 20px; + flex-shrink: 0; + + .live-summary-item-title { + width: 100%; + height: 22px; + text-align: left; + box-sizing: border-box; + padding-left: 25px; + position: relative; + line-height: 22px; + font-size: 14px; + font-weight: 600; + color: #2c7aff; + /* margin-bottom: 10px; */ + + &::before { + content: ""; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 20px; + height: 20px; + background-image: url("@/assets/images/Common/title_dot_icon.png"); + background-size: 100% 100%; + } + } + + .live-summary-item-content-list:last-child { + margin-bottom: 0; + } + + .live-summary-item-content-list { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + margin-top: 10px; + + .live-summary-item-content-item { + flex-shrink: 0; + width: 100%; + height: 46px; + box-sizing: border-box; + background-color: #f7f8fa; + border-radius: 8px; + padding: 0 10px; + line-height: 46px; + font-size: 14px; + font-weight: 400; + color: #1d2129; + text-align: left; + margin-bottom: 10px; + cursor: pointer; + flex-shrink: 0; + } + } + } + } + .job-search-strategy-btn { + width: 100%; + height: 36px; + border-radius: 2px; + background-color: #2c7aff; + font-size: 14px; + font-weight: 600; + color: #fff; + line-height: 36px; + text-align: center; + margin-top: 30px; + cursor: pointer; + } +} diff --git a/src/components/LiveSummary/index.jsx b/src/components/LiveSummary/index.jsx new file mode 100644 index 0000000..24f20f5 --- /dev/null +++ b/src/components/LiveSummary/index.jsx @@ -0,0 +1,49 @@ +import "./index.css"; + +const LiveSummary = ({ className = "", showBtn = false, isLiving = true }) => { + const handleClickBtn = () => {}; + + return ( +
+

+ 直播摘要 +

+
    +
  • +

    通用技巧

    +
      +
    • 1. 通用技巧1
      • +
    • 1. 通用技巧1
      • +
    • 1. 通用技巧1
      • +
    +
    • +
  • +

    通用技巧

    +
      +
    • 1. 通用技巧1
      • +
    • 1. 通用技巧1
      • +
    • 1. 通用技巧1
      • +
    +
    • +
  • +

    通用技巧

    +
      +
    • 1. 通用技巧1
      • +
    • 1. 通用技巧1
      • +
    • 1. 通用技巧1
      • +
    +
    • +
+ {showBtn && ( +
handleClickBtn()} + > + 查看求职策略 +
+ )} +
+ ); +}; + +export default LiveSummary; diff --git a/src/components/TestEmotionalHooks.css b/src/components/TestEmotionalHooks.css deleted file mode 100644 index 7f929e9..0000000 --- a/src/components/TestEmotionalHooks.css +++ /dev/null @@ -1,36 +0,0 @@ -/* 测试组件的样式 */ -.test-component { - padding: 20px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 12px; - color: white; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -} - -.test-component h2 { - margin-bottom: 20px; - font-size: 24px; - text-shadow: 2px 2px 4px rgba(0,0,0,0.2); -} - -.test-component button { - background: white; - color: #667eea; - border: none; - padding: 10px 20px; - border-radius: 6px; - cursor: pointer; - font-weight: bold; - transition: transform 0.2s ease; -} - -.test-component button:hover { - transform: scale(1.05); -} - -.data-display { - margin-top: 20px; - padding: 15px; - background: rgba(255,255,255,0.1); - border-radius: 8px; -} \ No newline at end of file diff --git a/src/normalize.css b/src/normalize.css index ffd348a..fdd95d3 100644 --- a/src/normalize.css +++ b/src/normalize.css @@ -5,7 +5,7 @@ *, *::before, *::after { - box-sizing: border-box; + box-sizing: border-box; } /* 2. 基础元素边距重置（仅针对易引发问题的元素） */ @@ -20,26 +20,28 @@ p, figure, blockquote, dl, -dd { - margin: 0; +dd, +ul, +ol { + margin: 0; } /* 3. 列表样式清除（保留语义化结构，仅去符号） */ ul, ol { - list-style: none; - padding-left: 0; - /* 部分浏览器默认有内边距 */ + list-style: none; + padding-left: 0; + /* 部分浏览器默认有内边距 */ } /* 4. 链接样式标准化 */ a { - color: inherit; - /* 继承父级颜色，避免默认蓝色 */ - text-decoration: none; - /* 清除下划线（可根据需求调整） */ - background-color: transparent; - /* 清除 IE 默认背景色 */ + color: inherit; + /* 继承父级颜色，避免默认蓝色 */ + text-decoration: none; + /* 清除下划线（可根据需求调整） */ + background-color: transparent; + /* 清除 IE 默认背景色 */ } /* 5. 表单元素标准化（覆盖主流浏览器差异） */ @@ -47,42 +49,42 @@ input, button, select, textarea { - margin: 0; - padding: 0; - border: 1px solid #ddd; - /* 统一边框 */ - border-radius: 0; - /* 清除 iOS 圆角 */ - font: inherit; - /* 继承字体样式 */ - color: inherit; - background-color: transparent; - outline: none; - /* 清除默认聚焦轮廓（需自行添加可访问性聚焦样式） */ + margin: 0; + padding: 0; + border: 1px solid #ddd; + /* 统一边框 */ + border-radius: 0; + /* 清除 iOS 圆角 */ + font: inherit; + /* 继承字体样式 */ + color: inherit; + background-color: transparent; + outline: none; + /* 清除默认聚焦轮廓（需自行添加可访问性聚焦样式） */ } /* 特殊处理：单选/复选框、文件上传 */ input[type="checkbox"], input[type="radio"] { - width: auto; - /* 避免被父级宽度压缩 */ + width: auto; + /* 避免被父级宽度压缩 */ } textarea { - resize: vertical; - /* 仅允许垂直调整大小 */ + resize: vertical; + /* 仅允许垂直调整大小 */ } /* 6. 媒体元素标准化 */ img, video, iframe { - max-width: 100%; - /* 防止溢出容器 */ - height: auto; - /* 保持宽高比 */ - border-style: none; - /* 清除 IE 默认边框 */ + max-width: 100%; + /* 防止溢出容器 */ + height: auto; + /* 保持宽高比 */ + border-style: none; + /* 清除 IE 默认边框 */ } /* 7. 标题层级标准化（避免浏览器默认大小差异） */ @@ -92,58 +94,58 @@ h3, h4, h5, h6 { - font-size: 1em; - /* 继承父级字体大小（可根据需求自定义层级） */ - font-weight: 500; - /* 统一字重（避免浏览器默认过粗） */ + font-size: 1em; + /* 继承父级字体大小（可根据需求自定义层级） */ + font-weight: 500; + /* 统一字重（避免浏览器默认过粗） */ } /* 8. 段落与行高优化 */ p { - line-height: 1.5; - /* 更舒适的阅读行高 */ + line-height: 1.5; + /* 更舒适的阅读行高 */ } /* 9. 引用与代码块标准化 */ blockquote { - margin: 1em 0; - /* 保留合理边距 */ - padding-left: 1em; - border-left: 4px solid #eee; - /* 左侧装饰线 */ + margin: 1em 0; + /* 保留合理边距 */ + padding-left: 1em; + border-left: 4px solid #eee; + /* 左侧装饰线 */ } code, kbd, pre, samp { - font-family: monospace, monospace; - /* 统一等宽字体 */ - font-size: 1em; - /* 避免浏览器默认放大 */ + font-family: monospace, monospace; + /* 统一等宽字体 */ + font-size: 1em; + /* 避免浏览器默认放大 */ } /* 10. 表格边框合并（避免双边框） */ table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } /* 11. 隐藏滚动条（可选，根据设计需求） */ ::-webkit-scrollbar { - display: none; + display: none; } html { - -ms-overflow-style: none; - /* IE/Edge */ - scrollbar-width: none; - /* Firefox */ + -ms-overflow-style: none; + /* IE/Edge */ + scrollbar-width: none; + /* Firefox */ } /* 12. 可访问性增强：保留聚焦状态 */ :focus-visible { - outline: 2px solid #4a90e2; - /* 自定义聚焦轮廓 */ - outline-offset: 2px; -} \ No newline at end of file + outline: 2px solid #4a90e2; + /* 自定义聚焦轮廓 */ + outline-offset: 2px; +} diff --git a/src/pages/CompanyJobsPage/components/ResumeInfoModal/index.css b/src/pages/CompanyJobsPage/components/ResumeInfoModal/index.css index 696df66..405824c 100644 --- a/src/pages/CompanyJobsPage/components/ResumeInfoModal/index.css +++ b/src/pages/CompanyJobsPage/components/ResumeInfoModal/index.css @@ -68,6 +68,19 @@ font-size: 20px; font-weight: 600; margin-bottom: 10px; + position: relative; + + &::after { + content: ""; + position: absolute; + left: 0; + bottom: 3px; + width: 79px; + height: 5px; + opacity: 0.1; + border-radius: 5px; + background-color: #0275f2; + } } .educational-experience-list { @@ -264,6 +277,85 @@ } } } + + .personal-summary-list { + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + + > li { + width: 100%; + height: 22px; + line-height: 22px; + font-size: 14px; + font-weight: 400; + color: #1d2129; + text-align: left; + } + } + .corresponding-course-units-list { + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + + .corresponding-course-units-list-item:last-child { + margin-bottom: 0; + } + + .corresponding-course-units-list-item { + width: 100%; + height: 72px; + box-sizing: border-box; + border: 1px solid #e5e6eb; + border-radius: 8px; + padding: 10px; + display: flex; + justify-content: flex-start; + align-items: flex-start; + flex-direction: column; + margin-bottom: 20px; + + .tag { + width: 47px; + height: 20px; + background-color: #e5e6eb; + border-radius: 2px; + text-align: center; + line-height: 20px; + color: #4e5969; + font-size: 12px; + font-weight: 600; + margin-bottom: 10px; + } + + .course-units-list { + width: 100%; + height: 20px; + display: flex; + justify-content: flex-start; + align-items: center; + overflow-x: auto; + flex-wrap: nowrap; + + .course-units-list-item { + flex-shrink: 0; + cursor: pointer; + height: 20px; + line-height: 22px; + font-size: 14px; + font-weight: 400; + color: #2c7aff; + text-align: left; + border-bottom: 1px solid #2c7aff; + margin-right: 20px; + } + } + } + } } } } diff --git a/src/pages/CompanyJobsPage/components/ResumeInfoModal/index.jsx b/src/pages/CompanyJobsPage/components/ResumeInfoModal/index.jsx index b7318cb..7e88dea 100644 --- a/src/pages/CompanyJobsPage/components/ResumeInfoModal/index.jsx +++ b/src/pages/CompanyJobsPage/components/ResumeInfoModal/index.jsx @@ -108,6 +108,30 @@ export default ({ visible, onClose, data }) => { + {/* 个人总结 */} +
  • +

    个人总结

    +
      +
    • 1. 负责室内平面设计项目的创意和实施
      • +
    • 2. 与团队合作，确保设计质量和项目进度
      • +
    • 3. 持续关注设计趋势，提升设计技能
      • +
    +
    • + {/* 对应课程单元 */} +
  • +

    对应课程单元

    +
      +
    • +
      方向1
      +
        +
      • 课程单元名称
        • +
      • 课程单元名称
        • +
      • 课程单元名称
        • +
      • 课程单元名称
        • +
      +
      • +
    +
    • diff --git a/src/pages/CompanyJobsPage/index.css b/src/pages/CompanyJobsPage/index.css index cbd82ea..8ab7e55 100644 --- a/src/pages/CompanyJobsPage/index.css +++ b/src/pages/CompanyJobsPage/index.css @@ -30,7 +30,7 @@ bottom: 10px; width: 32px; height: 3px; - background-image: url("@/assets/images/CompanyJobsPage/company_jobs_page_icon.png"); + background-image: url("@/assets/images/Common/title_icon.png"); background-size: 100% 100%; } } @@ -226,7 +226,7 @@ bottom: 10px; width: 32px; height: 3px; - background-image: url("@/assets/images/CompanyJobsPage/company_jobs_page_icon.png"); + background-image: url("@/assets/images/Common/title_icon.png"); background-size: 100% 100%; } } @@ -280,7 +280,7 @@ bottom: 40px; width: 32px; height: 3px; - background-image: url("@/assets/images/CompanyJobsPage/company_jobs_page_icon.png"); + background-image: url("@/assets/images/Common/title_icon.png"); background-size: 100% 100%; } } diff --git a/src/pages/PersonalProfile/components/ProfileCard/index.css b/src/pages/PersonalProfile/components/ProfileCard/index.css index aee8f30..4a403e4 100644 --- a/src/pages/PersonalProfile/components/ProfileCard/index.css +++ b/src/pages/PersonalProfile/components/ProfileCard/index.css @@ -10,6 +10,7 @@ flex-direction: column; box-sizing: border-box; padding: 16px; + flex-shrink: 0; .profile-card-user-info { width: 100%; @@ -64,7 +65,7 @@ display: flex; justify-content: space-around; align-items: center; - margin-bottom: 10px; + margin-bottom: 20px; .profile-card-achievement-info-item { width: 80px; @@ -111,7 +112,7 @@ position: relative; display: flex; align-items: center; - margin-bottom: 10px; + margin-bottom: 15px; .profile-card-class-info-item-icon { position: absolute; diff --git a/src/pages/PersonalProfile/components/StudyStudes/index.css b/src/pages/PersonalProfile/components/StudyStudes/index.css index 444f796..3a8a3c9 100644 --- a/src/pages/PersonalProfile/components/StudyStudes/index.css +++ b/src/pages/PersonalProfile/components/StudyStudes/index.css @@ -17,6 +17,7 @@ font-weight: 500; line-height: 30px; color: #262626; + margin-bottom: 20px; } .study-studes-card-list { @@ -34,11 +35,10 @@ position: relative; background-image: url("@/assets/images/PersonalProfile/study_study_bg.png"); background-size: 100% 100%; - margin-bottom: 37px; .study-studes-card-time-wrapper { position: absolute; - bottom: 10px; + bottom: 20px; left: 50%; transform: translateX(-50%); border-radius: 8px; @@ -150,8 +150,12 @@ .study-studes-card-curriculum-chart { width: 194px; height: 200px; + margin-bottom: 30px; } + .study-studes-card-curriculum-info:last-child { + margin-bottom: 0; + } .study-studes-card-curriculum-info { width: 194px; height: 69px; diff --git a/src/pages/PersonalProfile/index.css b/src/pages/PersonalProfile/index.css index 9349b2a..edc90a5 100644 --- a/src/pages/PersonalProfile/index.css +++ b/src/pages/PersonalProfile/index.css @@ -13,10 +13,8 @@ box-sizing: border-box; padding: 20px; width: 100%; - height: 781px; display: flex; justify-content: space-between; - align-items: center; .unified-profile-left { width: 360px; @@ -34,7 +32,7 @@ .unified-profile-right { width: 744px; - height: 100%; + height: 781px; border-radius: 8px; background-color: #fff; } diff --git a/src/pages/ProjectLibraryPage/components/ProjectCasesModal/index.css b/src/pages/ProjectLibraryPage/components/ProjectCasesModal/index.css index 5a6f266..8255e45 100644 --- a/src/pages/ProjectLibraryPage/components/ProjectCasesModal/index.css +++ b/src/pages/ProjectLibraryPage/components/ProjectCasesModal/index.css @@ -59,6 +59,19 @@ color: #0275f2; font-size: 20px; font-weight: 600; + position: relative; + + &::after { + content: ""; + position: absolute; + left: 0; + bottom: 3px; + width: 79px; + height: 5px; + opacity: 0.1; + border-radius: 5px; + background-color: #0275f2; + } } .project-cases-modal-item-text { width: 100%; diff --git a/src/pages/PublicCourses/index.css b/src/pages/PublicCourses/index.css new file mode 100644 index 0000000..aa77631 --- /dev/null +++ b/src/pages/PublicCourses/index.css @@ -0,0 +1,19 @@ +.public-courses-page { + width: 100%; + height: 100%; + box-sizing: border-box; + padding: 20px; + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + + .summary-wrapper { + width: 304px; + height: 798px; + border-radius: 8px; + background-color: #fff; + box-sizing: border-box; + padding: 20px; + } +} diff --git a/src/pages/PublicCourses/index.jsx b/src/pages/PublicCourses/index.jsx new file mode 100644 index 0000000..9a5e763 --- /dev/null +++ b/src/pages/PublicCourses/index.jsx @@ -0,0 +1,14 @@ +import CoursesVideoPlayer from "@/components/CoursesVideoPlayer"; +import LiveSummary from "@/components/LiveSummary"; +import "./index.css"; + +const PublicCourses = () => { + return ( +
    + + +
    + ); +}; + +export default PublicCourses; diff --git a/src/pages/ResumeInterviewPage/components/InterviewQuestionsModal/index.css b/src/pages/ResumeInterviewPage/components/InterviewQuestionsModal/index.css index 3877ed1..5daf0d8 100644 --- a/src/pages/ResumeInterviewPage/components/InterviewQuestionsModal/index.css +++ b/src/pages/ResumeInterviewPage/components/InterviewQuestionsModal/index.css @@ -30,6 +30,7 @@ color: #1d2129; font-size: 20px; font-weight: 600; + position: relative; } .interview-questions-modal-subtitle { diff --git a/src/pages/ResumeInterviewPage/index.css b/src/pages/ResumeInterviewPage/index.css index 982b37e..601aaa8 100644 --- a/src/pages/ResumeInterviewPage/index.css +++ b/src/pages/ResumeInterviewPage/index.css @@ -5,6 +5,8 @@ position: relative; .resume-interview-navigation { + position: fixed; + top: 0; width: 100%; height: 56px; background-color: #ffffff; @@ -14,6 +16,7 @@ overflow-x: auto; box-sizing: border-box; padding: 0 20px; + z-index: 10; .active { color: #2c7aff !important; @@ -38,7 +41,8 @@ .resume-interview-content-wrapper { width: 100%; box-sizing: border-box; - padding: 20px; + padding: 56px 20px 20px 20px; + overflow-y: auto; .resume-interview-content-item-wrapper:nth-child(2n) {