feat: 🎸 新增了一些页面

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() {
           <Route path="/job-strategy" element={<JobStrategyPage />} />
           <Route path="/resume-interview" element={<ResumeInterviewPage />} />
           <Route path="/portfolio" element={<Portfolio />} />
+          <Route path="/public-courses" element={<PublicCourses />} />
           <Route
             path="/resume/:industry/:position"
             element={<ResumeDetailPage />}

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

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 (
+    <div className={`${className} courses-video-player-wrapper`}>
+      {/* 直播板块 */}
+      <div className="courses-video-player">
+        {isLock ? (
+          <img className="lock" src={LOCKICON} alt="lock" />
+        ) : (
+          <>
+            <div className="courses-video-player-header">
+              <span>&lt; 上一集</span>
+              <span className="courses-video-player-header-title">
+                钢铁是怎样炼成的
+              </span>
+              <span>下一集 &gt;</span>
+            </div>
+            <div className="courses-video-player-video">
+              <video src="" controls></video>
+            </div>
+          </>
+        )}
+      </div>
+      {/* 直播信息板块 */}
+      <div className="courses-video-player-info">
+        {/* 直播观众信息 */}
+        <div className="courses-video-player-audience-info">
+          <Avatar className="teacher-avatar">
+            <img
+              alt="avatar"
+              src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
+            />
+          </Avatar>
+          <span className="teacher-name">赵老师</span>
+          <span className="teacher-tag">教育体系认知</span>
+          <div className="living-data">
+            <div className="living-data-item">
+              <span>开始</span>
+              <span>9/1 10:00</span>
+            </div>
+            <div className="living-data-item">
+              <span>时长</span>
+              <span>60分钟</span>
+            </div>
+            <div className="living-data-item">
+              <span>观看</span>
+              <span>300000人</span>
+            </div>
+          </div>
+        </div>
+        {/* 直播教师信息 */}
+        <div className="courses-video-player-teacher-info">
+          <div className="courses-video-player-teacher-introduce">
+            <p className="title icon1">导师介绍</p>
+            <p className="teacher-introduce">
+              这是一段导师介绍这是一段导师介绍这是一段导师介绍这是一段导师介绍这是一段导师介绍这是
+              一段导师介绍这是一段导师介绍这是一段导师介绍这是一段导师介绍这是
+              一段导师介绍这是一段导师介绍这是一段导师介绍这是一段导师介绍
+            </p>
+          </div>
+          <div className="courses-video-player-teacher-tags">
+            <p className="title icon2">教师专长</p>
+            <ul className="teacher-tags">
+              <li>一般般</li>
+              <li>一般般</li>
+              <li>一般般</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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" },

src/components/Layout/index.css

@@ -264,6 +264,7 @@
   transition: margin-left 0.3s ease;
   display: flex;
   flex-direction: column;
+  background-color: #f2f3f5;
 }
 
 /* 当侧边栏折叠时的主内容区域 */

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}
       </main>
-      {/* <ResumeInfoModal visible={true} /> */}
     </div>
   );
 };

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

src/components/LiveSummary/index.jsx

@@ -0,0 +1,49 @@
+import "./index.css";
+
+const LiveSummary = ({ className = "", showBtn = false, isLiving = true }) => {
+  const handleClickBtn = () => {};
+
+  return (
+    <div className={`${className} live-summary-wrapper`}>
+      <p className={`live-summary-title ${!isLiving && "not-living"}`}>
+        直播摘要
+      </p>
+      <ul className="live-summary-list">
+        <li className="live-summary-item">
+          <p className="live-summary-item-title">通用技巧</p>
+          <ul className="live-summary-item-content-list">
+            <li className="live-summary-item-content-item">1. 通用技巧1</li>
+            <li className="live-summary-item-content-item">1. 通用技巧1</li>
+            <li className="live-summary-item-content-item">1. 通用技巧1</li>
+          </ul>
+        </li>
+        <li className="live-summary-item">
+          <p className="live-summary-item-title">通用技巧</p>
+          <ul className="live-summary-item-content-list">
+            <li className="live-summary-item-content-item">1. 通用技巧1</li>
+            <li className="live-summary-item-content-item">1. 通用技巧1</li>
+            <li className="live-summary-item-content-item">1. 通用技巧1</li>
+          </ul>
+        </li>
+        <li className="live-summary-item">
+          <p className="live-summary-item-title">通用技巧</p>
+          <ul className="live-summary-item-content-list">
+            <li className="live-summary-item-content-item">1. 通用技巧1</li>
+            <li className="live-summary-item-content-item">1. 通用技巧1</li>
+            <li className="live-summary-item-content-item">1. 通用技巧1</li>
+          </ul>
+        </li>
+      </ul>
+      {showBtn && (
+        <div
+          className="job-search-strategy-btn"
+          onClick={() => handleClickBtn()}
+        >
+          查看求职策略
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LiveSummary;

src/components/TestEmotionalHooks.css

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

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 {
+dd,
-    margin: 0;
+ul,
+ol {
+  margin: 0;
 }
 
 /* 3. 列表样式清除（保留语义化结构，仅去符号） */
 ul,
 ol {
-    list-style: none;
+  list-style: none;
-    padding-left: 0;
+  padding-left: 0;
-    /* 部分浏览器默认有内边距 */
+  /* 部分浏览器默认有内边距 */
 }
 
 /* 4. 链接样式标准化 */
 a {
-    color: inherit;
+  color: inherit;
-    /* 继承父级颜色，避免默认蓝色 */
+  /* 继承父级颜色，避免默认蓝色 */
-    text-decoration: none;
+  text-decoration: none;
-    /* 清除下划线（可根据需求调整） */
+  /* 清除下划线（可根据需求调整） */
-    background-color: transparent;
+  background-color: transparent;
-    /* 清除 IE 默认背景色 */
+  /* 清除 IE 默认背景色 */
 }
 
 /* 5. 表单元素标准化（覆盖主流浏览器差异） */
@@ -47,42 +49,42 @@ input,
 button,
 select,
 textarea {
-    margin: 0;
+  margin: 0;
-    padding: 0;
+  padding: 0;
-    border: 1px solid #ddd;
+  border: 1px solid #ddd;
-    /* 统一边框 */
+  /* 统一边框 */
-    border-radius: 0;
+  border-radius: 0;
-    /* 清除 iOS 圆角 */
+  /* 清除 iOS 圆角 */
-    font: inherit;
+  font: inherit;
-    /* 继承字体样式 */
+  /* 继承字体样式 */
-    color: inherit;
+  color: inherit;
-    background-color: transparent;
+  background-color: transparent;
-    outline: none;
+  outline: none;
-    /* 清除默认聚焦轮廓（需自行添加可访问性聚焦样式） */
+  /* 清除默认聚焦轮廓（需自行添加可访问性聚焦样式） */
 }
 
 /* 特殊处理：单选/复选框、文件上传 */
 input[type="checkbox"],
 input[type="radio"] {
-    width: auto;
+  width: auto;
-    /* 避免被父级宽度压缩 */
+  /* 避免被父级宽度压缩 */
 }
 
 textarea {
-    resize: vertical;
+  resize: vertical;
-    /* 仅允许垂直调整大小 */
+  /* 仅允许垂直调整大小 */
 }
 
 /* 6. 媒体元素标准化 */
 img,
 video,
 iframe {
-    max-width: 100%;
+  max-width: 100%;
-    /* 防止溢出容器 */
+  /* 防止溢出容器 */
-    height: auto;
+  height: auto;
-    /* 保持宽高比 */
+  /* 保持宽高比 */
-    border-style: none;
+  border-style: none;
-    /* 清除 IE 默认边框 */
+  /* 清除 IE 默认边框 */
 }
 
 /* 7. 标题层级标准化（避免浏览器默认大小差异） */
@@ -92,58 +94,58 @@ h3,
 h4,
 h5,
 h6 {
-    font-size: 1em;
+  font-size: 1em;
-    /* 继承父级字体大小（可根据需求自定义层级） */
+  /* 继承父级字体大小（可根据需求自定义层级） */
-    font-weight: 500;
+  font-weight: 500;
-    /* 统一字重（避免浏览器默认过粗） */
+  /* 统一字重（避免浏览器默认过粗） */
 }
 
 /* 8. 段落与行高优化 */
 p {
-    line-height: 1.5;
+  line-height: 1.5;
-    /* 更舒适的阅读行高 */
+  /* 更舒适的阅读行高 */
 }
 
 /* 9. 引用与代码块标准化 */
 blockquote {
-    margin: 1em 0;
+  margin: 1em 0;
-    /* 保留合理边距 */
+  /* 保留合理边距 */
-    padding-left: 1em;
+  padding-left: 1em;
-    border-left: 4px solid #eee;
+  border-left: 4px solid #eee;
-    /* 左侧装饰线 */
+  /* 左侧装饰线 */
 }
 
 code,
 kbd,
 pre,
 samp {
-    font-family: monospace, monospace;
+  font-family: monospace, monospace;
-    /* 统一等宽字体 */
+  /* 统一等宽字体 */
-    font-size: 1em;
+  font-size: 1em;
-    /* 避免浏览器默认放大 */
+  /* 避免浏览器默认放大 */
 }
 
 /* 10. 表格边框合并（避免双边框） */
 table {
-    border-collapse: collapse;
+  border-collapse: collapse;
-    border-spacing: 0;
+  border-spacing: 0;
 }
 
 /* 11. 隐藏滚动条（可选，根据设计需求） */
 ::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 html {
-    -ms-overflow-style: none;
+  -ms-overflow-style: none;
-    /* IE/Edge */
+  /* IE/Edge */
-    scrollbar-width: none;
+  scrollbar-width: none;
-    /* Firefox */
+  /* Firefox */
 }
 
 /* 12. 可访问性增强：保留聚焦状态 */
 :focus-visible {
-    outline: 2px solid #4a90e2;
+  outline: 2px solid #4a90e2;
-    /* 自定义聚焦轮廓 */
+  /* 自定义聚焦轮廓 */
-    outline-offset: 2px;
+  outline-offset: 2px;
-}
+}

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

src/pages/CompanyJobsPage/components/ResumeInfoModal/index.jsx

@@ -108,6 +108,30 @@ export default ({ visible, onClose, data }) => {
               </li>
             </ul>
           </li>
+          {/* 个人总结 */}
+          <li className="resume-info-moda-item">
+            <p className="resume-info-moda-item-title">个人总结</p>
+            <ul className="personal-summary-list">
+              <li>1. 负责室内平面设计项目的创意和实施</li>
+              <li>2. 与团队合作，确保设计质量和项目进度</li>
+              <li>3. 持续关注设计趋势，提升设计技能</li>
+            </ul>
+          </li>
+          {/* 对应课程单元 */}
+          <li className="resume-info-moda-item">
+            <p className="resume-info-moda-item-title">对应课程单元</p>
+            <ul className="corresponding-course-units-list">
+              <li className="corresponding-course-units-list-item">
+                <div className="tag">方向1</div>
+                <ul className="course-units-list">
+                  <li className="course-units-list-item">课程单元名称</li>
+                  <li className="course-units-list-item">课程单元名称</li>
+                  <li className="course-units-list-item">课程单元名称</li>
+                  <li className="course-units-list-item">课程单元名称</li>
+                </ul>
+              </li>
+            </ul>
+          </li>
         </ul>
       </div>
     </Modal>

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

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;

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;

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

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%;

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

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 (
+    <div className="public-courses-page">
+      <CoursesVideoPlayer />
+      <LiveSummary />
+    </div>
+  );
+};
+
+export default PublicCourses;

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 {

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) {