style: 💄 修改了一系列样式

src/components/CoursesVideoPlayer/index.css

@@ -1,5 +1,5 @@
 .courses-video-player-wrapper {
-  width: 800px;
+  width: 836px;
   height: 798px;
   position: relative;
 
@@ -10,7 +10,7 @@
   }
 
   .courses-video-player {
-    width: 800px;
+    width: 100%;
     height: 545px;
     box-sizing: border-box;
     padding: 16px;
@@ -55,7 +55,7 @@
   }
   .courses-video-player-info {
     margin-top: 20px;
-    width: 800px;
+    width: 100%;
     height: 234px;
     border: 2px solid #fff;
     border-radius: 8px;
@@ -67,7 +67,7 @@
     align-items: center;
 
     .courses-video-player-audience-info {
-      width: 272px;
+      width: 308px;
       height: 100%;
       padding: 0 10px;
       border-right: 1px solid #f2f3f5;

src/components/Rank/index.css

@@ -1,7 +1,7 @@
 .module-class-rank {
   width: 360px;
   height: 413px;
-  background-color: #fff;
+  background-color: #fff7f1;
   border-radius: 16px;
   margin-right: 20px;
   border: 1px solid #fff;
@@ -13,6 +13,18 @@
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
+  position: relative;
+
+  &::after {
+    content: "";
+    width: 180px;
+    height: 110px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-image: url("@/assets/images/Rank/bg.png");
+    background-size: 100% 100%;
+  }
 
   .module-class-rank-title {
     height: 30px;
@@ -21,6 +33,21 @@
     font-weight: 500;
     line-height: 30px;
     color: #262626;
+    position: relative;
+    box-sizing: border-box;
+    padding-left: 30px;
+
+    &::before {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 24px;
+      height: 24px;
+      content: "";
+      background-image: url("@/assets/images/Rank/title_icon.png");
+      background-size: 100% 100%;
+    }
   }
 
   .module-class-rank-spin,
@@ -159,7 +186,7 @@
       justify-content: flex-start;
       align-items: center;
       flex-shrink: 0;
-      background-color: #fafafa;
+      background-color: #fff;
       border-radius: 8px;
       box-sizing: border-box;
       padding: 0 10px;

src/components/Sidebar/index.css

@@ -1,5 +1,5 @@
 .sidebar-expand-wrapper {
-  width: 280px;
+  width: 240px;
   box-sizing: border-box;
   position: relative;
   display: flex;
@@ -15,41 +15,77 @@
     width: 100%;
     height: 80px;
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
+    box-sizing: border-box;
+    padding: 20px;
 
     > img {
-      width: 48px;
+      width: 143px;
       height: 48px;
       margin-right: 10px;
       transition: margin 0.3s ease;
     }
-    > p {
-      color: #262626;
-      font-size: 20px;
-      font-weight: 400;
-      opacity: 1;
-      transform: translateX(0);
-      transition: opacity 0.3s ease, transform 0.3s ease;
-      white-space: nowrap;
-    }
   }
-  .user-info {
-    width: 100%;
-    height: 80px;
+  .user-info-wrapper {
+    width: 208px;
+    height: 56px;
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
+    border-radius: 8px;
+    background-color: #f4f7f9;
+    box-sizing: border-box;
+    padding: 0 10px;
+
     .user-avatar {
-      width: 64px;
-      height: 64px;
-      border-radius: 12px;
+      width: 40px;
+      height: 40px;
+      border-radius: 6px;
+      margin-right: 10px;
+    }
+
+    .user-info {
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      flex-direction: column;
+
+      > span {
+        font-weight: 400;
+      }
+
+      .user-name {
+        font-size: 16px;
+        color: #1d2129;
+      }
+      .user-id {
+        font-size: 12px;
+        color: #86909c;
+      }
     }
   }
   .visitor-count {
-    width: 100%;
-    height: 41px;
-    text-align: center;
+    width: 208px;
+    height: 44px;
+    border-radius: 8px;
+    background-color: #e5f1ff;
+    position: relative;
+    margin-top: 10px;
+    box-sizing: border-box;
+    padding: 0 10px;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-image: url("@/assets/images/Sidebar/visitor_count_bg.png");
+      background-size: 100% 100%;
+    }
 
     .arco-statistic-value {
       font-size: 12px;
@@ -70,25 +106,31 @@
 
     .sidebar-menu-item-wrapper {
       width: 100%;
+      border-bottom: 1px solid #e4ecf2;
+
+      &:last-child {
+        border-bottom: none;
+      }
 
       .sidebar-menu-title {
         width: 100%;
-        height: 36px;
+        height: 42px;
         text-align: left;
-        line-height: 36px;
-        color: #bfbfbf;
-        font-size: 14px;
-        font-weight: 400;
+        line-height: 42px;
+        color: #4e5969;
+        font-size: 16px;
+        font-weight: 500;
       }
 
       .sidebar-menu-item-active {
-        background-color: #e8f3ff;
+        background-image: url("@/assets/images/Sidebar/sidebar_menu_item_active_bg .png");
+        background-size: 100% 100%;
 
         .sidebar-menu-icon {
-          color: #0275f2 !important;
+          color: #fff !important;
         }
         .sidebar-menu-text {
-          color: #0275f2 !important;
+          color: #fff !important;
         }
       }
 
@@ -124,26 +166,18 @@
     left: 50%;
     transform: translateX(-50%);
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     cursor: pointer;
     background-color: #fff;
+    border-top: 1px solid #e4ecf2;
+    box-sizing: border-box;
+    padding-left: 20px;
 
     > img {
       width: 22px;
       height: 22px;
     }
-
-    .sidebar-btn-text {
-      margin-left: 10px;
-      color: #616065;
-      font-size: 16px;
-      font-weight: 400;
-      opacity: 1;
-      transform: translateX(0);
-      transition: opacity 0.3s ease, transform 0.3s ease;
-      white-space: nowrap;
-    }
   }
 }
 
@@ -195,12 +229,7 @@
 
   .sidebar-btn {
     width: 80px;
-    .sidebar-btn-text {
-      opacity: 0;
-      transform: translateX(-10px);
-      pointer-events: none;
-      transition: opacity 0.3s ease, transform 0.3s ease;
-      width: 0;
-    }
+    justify-content: center;
+    padding: 0;
   }
 }

src/components/Sidebar/index.jsx

@@ -2,7 +2,7 @@ import { useNavigate, useLocation } from "react-router-dom";
 import { Statistic } from "@arco-design/web-react";
 import { useSelector } from "react-redux";
 import IconFont from "@/components/IconFont";
-import Logo from "@/assets/images/Sidebar/logo.png";
+import ICON from "@/assets/images/Sidebar/sidebar_icon.png";
 import BTNICON from "@/assets/images/Sidebar/btn_icon.png";
 import routes from "@/routes";
 import "./index.css";
@@ -11,7 +11,7 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
   const navigate = useNavigate();
   const location = useLocation();
   const studentInfo = useSelector((state) => state.student.studentInfo);
-
+  console.log(studentInfo);
   const handleNavClick = (path) => {
     navigate(path);
   };
@@ -30,15 +30,18 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
       }`}
     >
       <div className="sidebar-title">
-        <img src={Logo} alt="logo" />
-        <p>多多畅职教育系统</p>
+        <img src={ICON} alt="icon" />
       </div>
-      <div className="user-info">
+      <div className="user-info-wrapper">
         <img
           alt="avatar"
           className="user-avatar"
           src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
         />
+        <div className="user-info">
+          <span className="user-name">{studentInfo?.realName}</span>
+          <span className="user-id">学号：{studentInfo?.id}</span>
+        </div>
       </div>
       <Statistic
         className="visitor-count"
@@ -73,7 +76,6 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
       </ul>
       <div className="sidebar-btn" onClick={toggleSidebar}>
         <img src={BTNICON} alt="btn" className="sidebar-btn-icon" />
-        <span className="sidebar-btn-text">展开/收起</span>
       </div>
     </div>
   );

src/components/StageProgress/index.css

@@ -1,5 +1,5 @@
 .stage-progress-wrapper {
-  width: 100%;
+  width: 1200px;
   height: 96px;
   display: flex;
   box-sizing: border-box;
@@ -8,98 +8,129 @@
   align-items: center;
   background-color: #fff;
 
-  .stage-progress-item {
-    height: 72px;
+  .stage-progress-item1 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    width: 257px;
+    height: 64px;
     background-size: 100% 100%;
     margin-right: -10px;
+    background-color: #f4f7f9;
+    background-image: url("@/assets/images/StageProgress/step1_active.png");
+    background-size: 100%;
+    color: #ffffff;
+    font-size: 16px;
+    font-weight: 400;
   }
 
-  .stage-progress-item1 {
-    width: 204px;
-    background-image: url("@/assets/images/StageProgress/step1.png");
+  .stage-progress-item4 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    width: 257px;
+    height: 64px;
+    background-image: url("@/assets/images/StageProgress/step4_default.png");
+    background-size: 100% 100%;
+    color: #86909c;
+    font-size: 16px;
+    font-weight: 400;
   }
 
-  .stage-progress-item2 {
-    width: 228px;
-    background-image: url("@/assets/images/StageProgress/step2.png");
+  .stage-progress-item4-active {
+    color: #ffffff;
+    font-size: 16px;
+    font-weight: 400;
+    background-image: url("@/assets/images/StageProgress/step4_active.png");
   }
 
-  .stage-progress-star {
-    position: relative;
+  .stage-progress-item {
+    flex-shrink: 0;
+    width: 257px;
+    height: 64px;
+    background-image: url("@/assets/images/StageProgress/step_default.png");
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #86909c;
+    font-size: 16px;
+    font-weight: 400;
+  }
+
+  .stage-progress-item-active {
+    color: #ffffff;
+    background-image: url("@/assets/images/StageProgress/step_active.png");
+  }
+
+  .stage-progress-item-step {
+    width: 45px;
+    height: 22px;
+    box-sizing: border-box;
+    border-radius: 6px;
+    background-color: #c9cdd4;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 900;
+    text-align: center;
+    font-family: "Unitext";
+  }
+
+  .stage-progress-item-step-active {
+    background-color: #fff !important;
+    color: #0077ff !important;
+  }
+
+  .stage-progress-item-text,
+  .stage-progress-item-icon {
+    font-size: 16px;
+    font-weight: 500;
+    color: #86909c;
+    margin: 0 5px;
+  }
+
+  .stage-progress-item-text-active,
+  .stage-progress-item-icon-active {
+    color: #fff !important;
+  }
+
+  .stage-progress-text {
     cursor: pointer;
-    width: 108px;
+    width: 150px;
     height: 40px;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    margin-right: -10px;
-    margin-left: 30px;
-    margin-top: 20px;
 
     > span {
       font-size: 12px;
-      color: #bfbfbf;
-    }
-    .star {
-      font-size: 20px;
-      color: #88b4ff;
+      color: #86909c;
       position: relative;
 
       &::before {
         content: "";
+        width: 24px;
+        height: 0px;
         position: absolute;
         top: 50%;
-        left: 50%;
-        transform: translate(50%, -50%);
-        width: 40px;
-        height: 0px;
-        border: 1px dashed #bfbfbf;
+        left: -20px;
+        transform: translateX(-50%);
+        border: 1px dashed #86909c;
       }
+
       &::after {
         content: "";
+        width: 24px;
+        height: 0px;
         position: absolute;
         top: 50%;
-        right: 50%;
-        transform: translate(-50%, -50%);
-        width: 40px;
-        height: 0px;
-        border: 1px dashed #bfbfbf;
+        right: -45px;
+        transform: translateX(-50%);
+        border: 1px dashed #86909c;
       }
     }
   }
-
-  .stage-progress-item3 {
-    width: 294px;
-    background-image: url("@/assets/images/StageProgress/step3.png");
-  }
-
-  .stage-progress-item4 {
-    width: 284px;
-    background-image: url("@/assets/images/StageProgress/step4.png");
-  }
-
-  .stage-progress-item1-active {
-    width: 204px;
-    background-image: url("@/assets/images/StageProgress/step1_active.png");
-  }
-
-  .stage-progress-item2-active {
-    width: 228px;
-    background-image: url("@/assets/images/StageProgress/step2_active.png");
-  }
-
-  .stage-progress-star-active {
-    background-image: url("@/assets/images/StageProgress/star_active.png");
-  }
-
-  .stage-progress-item3-active {
-    width: 294px;
-    background-image: url("@/assets/images/StageProgress/step3_active.png");
-  }
-
-  .stage-progress-item4-active {
-    width: 284px;
-    background-image: url("@/assets/images/StageProgress/step4_active.png");
-  }
 }

src/components/StageProgress/index.jsx

@@ -11,16 +11,40 @@ const StageProgress = () => {
 
   return (
     <ul className="stage-progress-wrapper">
-      <li className="stage-progress-item stage-progress-item1-active" />
-      <li className="stage-progress-item  stage-progress-item2" />
-      <li className="stage-progress-star" onClick={handleClickStar}>
-        <div className="star">
-          <IconFont name="icon-star" />
-        </div>
+      <li className="stage-progress-item1">
+        <span className="stage-progress-item-step stage-progress-item-step-active ">
+          step1
+        </span>
+        <span className="stage-progress-item-text stage-progress-item-text-active">
+          生涯起航
+        </span>
+        <IconFont
+          name="icon-zuoye"
+          className="stage-progress-item-icon stage-progress-item-icon-active"
+        />
+      </li>
+      <li className="stage-progress-item">
+        <span className="stage-progress-item-step">step2</span>
+        <span className="stage-progress-item-text">能力跃升</span>
+        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
+      </li>
+      <li className="stage-progress-text" onClick={handleClickStar}>
         <span>垂直方向选择</span>
       </li>
-      <li className="stage-progress-item  stage-progress-item3" />
-      <li className="stage-progress-item  stage-progress-item4" />
+      <li className="stage-progress-item">
+        <span className="stage-progress-item-step">step3</span>
+        <span className="stage-progress-item-text">垂直精进</span>
+        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
+        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
+        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
+      </li>
+      <li className="stage-progress-item4 ">
+        <span className="stage-progress-item-step">step4</span>
+        <span className="stage-progress-item-text">决胜求职</span>
+        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
+        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
+        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
+      </li>
     </ul>
   );
 };

src/global.css

@@ -1,3 +1,38 @@
+/* ==============================
+   自定义字体定义
+   ============================== */
+
+/* 定义自定义字体 */
+@font-face {
+  font-family: "Unitext";
+  src: url("./assets/font/Unitext-BlackItalic.TTF") format("truetype");
+  font-style: italic;
+  font-display: swap; /* 优化字体加载性能 */
+}
+
+/* 如果需要添加更多字体文件，可以继续定义 */
+/* 
+@font-face {
+  font-family: 'CustomFont';
+  src: url('./assets/font/CustomFont-Regular.woff2') format('woff2'),
+       url('./assets/font/CustomFont-Regular.woff') format('woff'),
+       url('./assets/font/CustomFont-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'CustomFont';
+  src: url('./assets/font/CustomFont-Bold.woff2') format('woff2'),
+       url('./assets/font/CustomFont-Bold.woff') format('woff'),
+       url('./assets/font/CustomFont-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+*/
+
 /* ==============================
    现代 CSS 重置核心样式
    ============================== */
@@ -161,3 +196,41 @@ html {
   fill: currentcolor;
   overflow: hidden;
 }
+
+/* ==============================
+   自定义字体使用示例
+   ============================== */
+
+/* 全局字体设置 - 可以设置为默认字体 */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
+    sans-serif;
+}
+
+/* 使用自定义字体的工具类 */
+.font-unitext {
+  font-family: "Unitext", sans-serif;
+}
+
+.font-custom {
+  font-family: "CustomFont", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+}
+
+/* 特定场景的字体应用 */
+.title-custom {
+  font-family: "Unitext", serif;
+  font-weight: 900;
+  font-style: italic;
+}
+
+.text-custom {
+  font-family: "CustomFont", sans-serif;
+  font-weight: 400;
+}
+
+.text-custom-bold {
+  font-family: "CustomFont", sans-serif;
+  font-weight: 700;
+}

src/pages/CompanyJobsListPage/index.css

@@ -3,4 +3,14 @@
   height: 100%;
   box-sizing: border-box;
   padding: 20px;
+
+  .jobs-list-margin {
+    > li {
+      width: 556px;
+      margin-right: 20px;
+      .company-jobs-info {
+        width: 430px;
+      }
+    }
+  }
 }

src/pages/CompanyJobsListPage/index.jsx

@@ -39,7 +39,7 @@ const CompanyJobsListPage = () => {
       empty={jobs.length === 0}
       className="company-jobs-list-page-wrapper"
     >
-      <JobList data={jobs} />
+      <JobList data={jobs} className="jobs-list-margin" />
     </InfiniteScroll>
   );
 };

src/pages/CompanyJobsPage/components/JobInfoModal/index.css

@@ -1,5 +1,5 @@
 .job-info-modal-content {
-  max-height: 648px;
+  max-height: 720px;
   width: 844px;
   position: relative;
   display: flex;

src/pages/CompanyJobsPage/components/JobList/index.css

@@ -9,7 +9,7 @@
   padding: 5px 0;
 
   .company-jobs-page-left-list-item {
-    width: 496px;
+    width: 528px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -18,10 +18,12 @@
     border-radius: 8px;
     cursor: pointer;
     margin-bottom: 20px;
-    margin-right: 20px;
     flex-shrink: 0;
     position: relative;
     border: 1px solid #e5e6eb;
+    background-color: #e5f1ff;
+    background-image: url("@/assets/images/CompanyJobsPage/jobs_page_left_list_item_bg.png");
+    background-size: 100% 100%;
 
     .icon {
       position: absolute;
@@ -40,7 +42,7 @@
     }
 
     .company-jobs-info {
-      width: 300px;
+      width: 400px;
       height: 100%;
       display: flex;
       justify-content: flex-start;
@@ -64,11 +66,11 @@
         margin-top: 5px;
 
         .company-jobs-info-tag {
-          background-color: #e5e6eb;
+          background-color: #fff;
           box-sizing: border-box;
           margin-bottom: 5px;
           padding: 1px 8px;
-          color: #1d2129;
+          color: #4e5969;
           font-size: 12px;
           font-weight: 600;
           border-radius: 2px;
@@ -78,14 +80,14 @@
       .company-jobs-info-position-count {
         width: 100%;
         text-align: left;
-        color: #ff7d00;
+        color: #ff3f43;
         margin-top: 5px;
         font-size: 14px;
         font-weight: 400;
       }
     }
     .company-jobs-btn-wrapper {
-      width: 120px;
+      flex: 1;
       height: 60px;
       display: flex;
       justify-content: center;
@@ -95,21 +97,21 @@
       .company-jobs-info-position-salary {
         width: 100%;
         text-align: center;
-        color: #ff7d00;
-        font-size: 14px;
-        font-weight: 600;
+        color: #ff9a2d;
+        font-size: 16px;
+        font-weight: 700;
       }
 
       .company-jobs-btn {
         cursor: pointer;
         width: 64px;
         height: 28px;
-        border-radius: 2px;
+        border-radius: 4px;
         text-align: center;
-        color: #2c7aff;
+        color: #fff;
         font-size: 12px;
         font-weight: 600;
-        border: 1px solid #2c7aff;
+        background-color: #0077ff;
         display: flex;
         justify-content: center;
         align-items: center;

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

@@ -5,7 +5,7 @@ import { getJobsDetail } from "@/services";
 import { mapJob } from "@/utils/dataMapper";
 import "./index.css";
 
-export default ({ className = "", data = [], backgroundColor = "#FFFFFF" }) => {
+export default ({ className = "", data = [], backgroundColor }) => {
   const [jobInfoData, setJobInfoData] = useState(undefined);
   const [jobInfoModalVisible, setJobInfoModalVisible] = useState(false);
 
@@ -40,7 +40,10 @@ export default ({ className = "", data = [], backgroundColor = "#FFFFFF" }) => {
               <p className="company-jobs-info-position">{item?.position}</p>
               <ul className="company-jobs-info-tags">
                 {item?.tags?.map((tag, index) => (
-                  <li key={`${item.id}-tag-${index}`} className="company-jobs-info-tag">
+                  <li
+                    key={`${item.id}-tag-${index}`}
+                    className="company-jobs-info-tag"
+                  >
                     {tag}
                   </li>
                 ))}

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

@@ -1,6 +1,6 @@
 .resume-info-modal {
   width: 758px;
-  height: 700px;
+  height: 720px;
   border-radius: 8px;
   position: relative;
   background-color: #f2f3f5;

src/pages/CompanyJobsPage/index.css

@@ -40,7 +40,7 @@
     }
 
     .company-jobs-page-left {
-      width: 528px;
+      width: 570px;
       height: 860px;
       border-radius: 8px;
       background-color: #fff;
@@ -53,7 +53,7 @@
       overflow: hidden;
 
       .company-jobs-page-left-list-wrapper {
-        width: 496px;
+        width: 100%;
         height: 760px;
         overflow: auto;
       }
@@ -97,12 +97,14 @@
             flex-shrink: 0;
             width: 100%;
             border-radius: 8px;
-            background-color: #f7f8fa;
             border: 1px solid #e5e6eb;
             margin-bottom: 20px;
             box-sizing: border-box;
             padding: 20px;
             list-style: none;
+            background-color: #e5f1ff;
+            background-image: url("@/assets/images/CompanyJobsPage/jobs_page_left_list_item_bg.png");
+            background-size: 100% 100%;
 
             .company-jobs-page-interview-item-info {
               width: 100%;
@@ -128,11 +130,11 @@
                 margin-bottom: 5px;
 
                 .company-jobs-page-interview-item-info-tag {
-                  background-color: #e5e6eb;
+                  background-color: #ffffff;
                   box-sizing: border-box;
                   margin-bottom: 5px;
                   padding: 1px 8px;
-                  color: #1d2129;
+                  color: #4e5969;
                   font-size: 12px;
                   font-weight: 600;
                   border-radius: 2px;
@@ -192,49 +194,14 @@
       z-index: 10;
       bottom: 20px;
       right: 0;
-      width: 169px;
-      height: 68px;
-      background-color: #fff;
-      border: 1px solid #e5e6eb;
-      border-radius: 8px;
-      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-      box-sizing: border-box;
-      padding: 10px;
+      width: 96px;
+      height: 66px;
+      background-image: url("@/assets/images/CompanyJobsPage/process_wrapper_close_bg.png");
+      background-size: 100% 100%;
+      cursor: pointer;
 
       .company-jobs-page-process-wrapper-title {
-        width: 100%;
-        height: 42px;
-        font-size: 20px;
-        font-weight: 600;
-        line-height: 30px;
-        margin-bottom: 20px;
-        color: #1d2129;
-        flex-shrink: 0;
-        position: relative;
-        border-bottom: 1px solid #e5e6eb;
-
-        &::before {
-          content: "";
-          position: absolute;
-          right: 0;
-          top: 4px;
-          width: 24px;
-          height: 24px;
-          background-image: url("@/assets/images/CompanyJobsPage/close_icon.png");
-          background-size: 100% 100%;
-          cursor: pointer;
-        }
-
-        &::after {
-          content: "";
-          position: absolute;
-          left: 20px;
-          bottom: 10px;
-          width: 32px;
-          height: 3px;
-          background-image: url("@/assets/images/Common/title_icon.png");
-          background-size: 100% 100%;
-        }
+        display: none;
       }
 
       .company-jobs-page-process-content {
@@ -249,7 +216,7 @@
       right: 0;
       width: 572px;
       height: 340px;
-      background-color: #fff;
+      background-image: linear-gradient(270deg, #e6f2ff, #ffffff);
       border: 1px solid #e5e6eb;
       border-radius: 8px;
       box-sizing: border-box;

src/pages/CompanyJobsPage/index.jsx

@@ -184,7 +184,7 @@ const CompanyJobsPage = () => {
                 hasMore={jobsListHasMore}
                 className="company-jobs-page-left-list-wrapper"
               >
-                <JobList data={jobs} backgroundColor="#F7F8FA" />
+                <JobList data={jobs} />
               </InfiniteScroll>
             </div>
             <div className="company-jobs-page-interview-wrapper">
@@ -244,16 +244,14 @@ const CompanyJobsPage = () => {
               </div>
             </div>
             <div
+              onClick={() => setIsExpand(!isExpand)}
               className={
                 isExpand
                   ? "company-jobs-page-process-wrapper-expand"
                   : "company-jobs-page-process-wrapper-close"
               }
             >
-              <div
-                className="company-jobs-page-process-wrapper-title"
-                onClick={() => setIsExpand(!isExpand)}
-              >
+              <div className="company-jobs-page-process-wrapper-title">
                 岗位陪跑流程
               </div>
               <div className="company-jobs-page-process-content">

src/pages/Dashboard/components/StartClass/index.css

@@ -5,11 +5,22 @@
   border-radius: 16px;
   border: 1px solid #fff;
   flex-shrink: 0;
-  background-image: url("@/assets/images/Dashboard/StartClass/start_class_bg.png");
-  background-size: 150% 120%;
   background-position: 50% 30%;
   box-sizing: border-box;
   padding: 20px;
+  background-color: #e2edff;
+  position: relative;
+
+  &::after {
+    content: "";
+    width: 242px;
+    height: 100px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-image: url("@/assets/images/Dashboard/StartClass/start_class_bg.png");
+    background-size: 100% 100%;
+  }
 
   .start-class-title {
     height: 30px;
@@ -19,6 +30,21 @@
     line-height: 30px;
     color: #262626;
     margin-bottom: 20px;
+    position: relative;
+    box-sizing: border-box;
+    padding-left: 30px;
+
+    &::before {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 24px;
+      height: 24px;
+      content: "";
+      background-image: url("@/assets/images/Dashboard/StartClass/start_class_title_icon.png");
+      background-size: 100% 100%;
+    }
   }
 
   .start-class-content {
@@ -41,6 +67,7 @@
       background-color: #fff;
       box-sizing: border-box;
       padding: 15px;
+      z-index: 1;
 
       .start-class-item-title {
         width: 100%;

src/pages/Dashboard/components/StudyStatus/index.css

@@ -9,12 +9,24 @@
   background-position: 50% 30%;
   box-sizing: border-box;
   padding: 20px;
-  background-color: #fff;
+  background-color: #e8f6ff;
   margin-top: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
+  position: relative;
+
+  &::after {
+    content: "";
+    width: 180px;
+    height: 110px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-image: url("@/assets/images/Dashboard/StudyStatus/study-status_bg.png");
+    background-size: 100% 100%;
+  }
 
   .module-study-status-title {
     height: 30px;
@@ -24,6 +36,21 @@
     line-height: 30px;
     color: #262626;
     margin-bottom: 20px;
+    position: relative;
+    box-sizing: border-box;
+    padding-left: 30px;
+
+    &::before {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 24px;
+      height: 24px;
+      content: "";
+      background-image: url("@/assets/images/Dashboard/StudyStatus/study-status_title_icon.png");
+      background-size: 100% 100%;
+    }
   }
 
   .module-study-status-progress {

src/pages/InterviewSimulationPage/components/InterviewRating/index.css

@@ -1,5 +1,5 @@
 .interview-rating-wrapper {
-  width: 800px;
+  width: 836px;
   height: 860px;
   display: flex;
   justify-content: flex-start;
@@ -33,7 +33,7 @@
     position: relative;
 
     .interview-rating-video {
-      width: 768px;
+      width: 100%;
       height: 670px;
       border-radius: 8px;
       overflow: hidden;

src/pages/ProjectLibraryPage/components/ProjectCasesModal/index.css

@@ -1,6 +1,6 @@
 .project-cases-modal {
   width: 758px;
-  height: 700px;
+  height: 720px;
   border-radius: 8px;
   position: relative;
   background-color: #f2f3f5;

src/pages/ResumeInterviewPage/components/InterviewQuestionsModal/index.css

@@ -1,6 +1,6 @@
 .interview-questions-modal {
   width: 758px;
-  height: 700px;
+  height: 720px;
   border-radius: 8px;
   position: relative;
   background-color: #f2f3f5;

src/pages/ResumeInterviewPage/components/ResumeModal/index.css

@@ -1,421 +0,0 @@
-.resume-modal {
-  width: 900px;
-  max-width: 95vw;
-  max-height: 90vh;
-  overflow: hidden;
-  background: #fff;
-  border-radius: 12px;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-.resume-modal .close-icon {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center;
-  background-size: contain;
-  transition: opacity 0.3s;
-  z-index: 10;
-}
-
-.resume-modal .close-icon:hover {
-  opacity: 0.7;
-}
-
-.resume-header {
-  padding: 30px;
-  border-bottom: 1px solid #e5e5e5;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-}
-
-.resume-title {
-  font-size: 24px;
-  font-weight: 600;
-  margin-bottom: 8px;
-}
-
-.resume-subtitle {
-  font-size: 14px;
-  opacity: 0.9;
-  margin: 0;
-}
-
-.tabs-container {
-  border-bottom: 1px solid #e5e5e5;
-  background: #f8f9fa;
-}
-
-.tabs {
-  display: flex;
-  padding: 0 30px;
-}
-
-.tab {
-  padding: 16px 24px;
-  cursor: pointer;
-  border-bottom: 3px solid transparent;
-  font-weight: 500;
-  color: #666;
-  transition: all 0.3s;
-  position: relative;
-}
-
-.tab:hover {
-  color: #1890ff;
-  background: rgba(24, 144, 255, 0.05);
-}
-
-.tab.active {
-  color: #1890ff;
-  border-bottom-color: #1890ff;
-  background: #fff;
-}
-
-.tab-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 30px;
-}
-
-.tab-header {
-  margin-bottom: 25px;
-  padding-bottom: 15px;
-  border-bottom: 1px solid #e5e5e5;
-}
-
-.tab-header h3 {
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 8px;
-}
-
-.tab-header p {
-  color: #666;
-  font-size: 14px;
-  margin: 0;
-}
-
-.header-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.edit-toggle {
-  padding: 8px 16px;
-  background: #1890ff;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.edit-toggle:hover {
-  background: #40a9ff;
-}
-
-.edit-toggle.editing {
-  background: #52c41a;
-}
-
-.resume-content {
-  max-height: 500px;
-  overflow-y: auto;
-}
-
-.personal-info {
-  margin-bottom: 25px;
-}
-
-.personal-info h3 {
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 15px;
-  padding-left: 12px;
-  position: relative;
-}
-
-.personal-info h3::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 3px;
-  height: 16px;
-  background: #1890ff;
-  border-radius: 2px;
-}
-
-.info-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 15px;
-}
-
-.info-item {
-  display: flex;
-  font-size: 14px;
-}
-
-.info-item label {
-  font-weight: 500;
-  color: #333;
-  width: 60px;
-  flex-shrink: 0;
-}
-
-.info-item span {
-  color: #666;
-}
-
-.section {
-  margin-bottom: 25px;
-}
-
-.section h3 {
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 15px;
-  padding-left: 12px;
-  position: relative;
-}
-
-.section h3::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 3px;
-  height: 16px;
-  background: #1890ff;
-  border-radius: 2px;
-}
-
-.section p {
-  font-size: 14px;
-  line-height: 1.6;
-  color: #666;
-  margin-bottom: 10px;
-}
-
-.education-item,
-.experience-item,
-.project-item {
-  margin-bottom: 20px;
-  padding: 15px;
-  background: #f8f9fa;
-  border-radius: 8px;
-}
-
-.education-header,
-.experience-header,
-.project-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-}
-
-.education-header strong,
-.experience-header strong,
-.project-header strong {
-  font-weight: 600;
-  color: #333;
-}
-
-.date,
-.role {
-  font-size: 12px;
-  color: #999;
-  background: #fff;
-  padding: 2px 8px;
-  border-radius: 4px;
-}
-
-.education-details {
-  font-size: 14px;
-  color: #666;
-}
-
-.skills-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.skill-tag {
-  display: inline-block;
-  padding: 4px 12px;
-  background: #e6f7ff;
-  color: #1890ff;
-  border-radius: 16px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.project-link {
-  display: inline-block;
-  margin-top: 8px;
-  padding: 4px 12px;
-  background: #1890ff;
-  color: white;
-  text-decoration: none;
-  border-radius: 4px;
-  font-size: 12px;
-  transition: all 0.3s;
-}
-
-.project-link:hover {
-  background: #40a9ff;
-}
-
-.awards-list {
-  margin: 0;
-  padding-left: 20px;
-}
-
-.awards-list li {
-  font-size: 14px;
-  line-height: 1.6;
-  color: #666;
-  margin-bottom: 5px;
-}
-
-.no-content {
-  text-align: center;
-  padding: 40px;
-  color: #999;
-  font-size: 16px;
-}
-
-.no-personal-resume {
-  text-align: center;
-  padding: 60px 40px;
-  color: #666;
-}
-
-.no-personal-resume p {
-  font-size: 16px;
-  margin-bottom: 20px;
-}
-
-.create-btn {
-  padding: 12px 24px;
-  background: #1890ff;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  font-size: 16px;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.create-btn:hover {
-  background: #40a9ff;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
-}
-
-.resume-edit {
-  display: flex;
-  flex-direction: column;
-  height: 500px;
-}
-
-.edit-notice {
-  background: #fff7e6;
-  border: 1px solid #ffd591;
-  border-radius: 6px;
-  padding: 12px;
-  margin-bottom: 15px;
-}
-
-.edit-notice p {
-  color: #d48806;
-  margin: 0;
-  font-size: 14px;
-}
-
-.content-editor {
-  flex: 1;
-  width: 100%;
-  padding: 15px;
-  border: 1px solid #d9d9d9;
-  border-radius: 6px;
-  font-family: 'Consolas', 'Monaco', monospace;
-  font-size: 12px;
-  line-height: 1.5;
-  resize: none;
-  background: #fafafa;
-}
-
-.content-editor:focus {
-  outline: none;
-  border-color: #1890ff;
-  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-}
-
-.edit-buttons {
-  display: flex;
-  gap: 10px;
-  margin-top: 15px;
-  justify-content: flex-end;
-}
-
-.save-btn,
-.cancel-btn {
-  padding: 8px 16px;
-  border: none;
-  border-radius: 6px;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.save-btn {
-  background: #52c41a;
-  color: white;
-}
-
-.save-btn:hover {
-  background: #73d13d;
-}
-
-.cancel-btn {
-  background: #f5f5f5;
-  color: #666;
-}
-
-.cancel-btn:hover {
-  background: #e6e6e6;
-}
-
-.development-notice {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 300px;
-}
-
-.notice-content {
-  text-align: center;
-  color: #86909c;
-}
-
-.notice-content h4 {
-  font-size: 18px;
-  margin: 0;
-}

src/pages/ResumeInterviewPage/components/ResumeModal/index.jsx

@@ -1,259 +0,0 @@
-import { useState, useEffect } from "react";
-import Modal from "@/components/Modal";
-import "./index.css";
-
-const ResumeModal = ({ visible, onClose, data }) => {
-  const [activeTab, setActiveTab] = useState("original");
-  const [editMode, setEditMode] = useState(false);
-  const [editContent, setEditContent] = useState(null);
-
-  useEffect(() => {
-    if (data && data.selectedTemplate) {
-      setEditContent(data.selectedTemplate.content);
-    }
-  }, [data]);
-
-  const handleCloseModal = () => {
-    setActiveTab("original");
-    setEditMode(false);
-    setEditContent(null);
-    onClose();
-  };
-
-  if (!data) return null;
-
-  const { selectedTemplate, studentResume } = data;
-
-  const handleSaveResume = async () => {
-    // TODO: 调用API保存简历
-    console.log("保存简历:", editContent);
-    setEditMode(false);
-    // 这里应该调用后端API保存简历
-  };
-
-  const handleEditToggle = () => {
-    if (editMode) {
-      // 退出编辑模式，询问是否保存
-      if (JSON.stringify(editContent) !== JSON.stringify(selectedTemplate.content)) {
-        if (confirm("是否保存修改？")) {
-          handleSaveResume();
-        } else {
-          setEditContent(selectedTemplate.content);
-        }
-      }
-    }
-    setEditMode(!editMode);
-  };
-
-  const renderResumeContent = (content) => {
-    if (!content) return <div className="no-content">暂无简历内容</div>;
-
-    return (
-      <div className="resume-content">
-        <div className="personal-info">
-          <h3>个人信息</h3>
-          <div className="info-grid">
-            <div className="info-item">
-              <label>姓名：</label>
-              <span>{content.personalInfo?.name || '未填写'}</span>
-            </div>
-            <div className="info-item">
-              <label>电话：</label>
-              <span>{content.personalInfo?.phone || '未填写'}</span>
-            </div>
-            <div className="info-item">
-              <label>邮箱：</label>
-              <span>{content.personalInfo?.email || '未填写'}</span>
-            </div>
-            <div className="info-item">
-              <label>学校：</label>
-              <span>{content.personalInfo?.school || '未填写'}</span>
-            </div>
-          </div>
-        </div>
-
-        <div className="section">
-          <h3>求职意向</h3>
-          <p>{content.objective || '未填写'}</p>
-        </div>
-
-        <div className="section">
-          <h3>教育背景</h3>
-          {content.education && content.education.length > 0 ? (
-            content.education.map((edu, index) => (
-              <div key={index} className="education-item">
-                <div className="education-header">
-                  <strong>{edu.school}</strong>
-                  <span className="date">{edu.startDate} - {edu.endDate}</span>
-                </div>
-                <div className="education-details">
-                  <span>{edu.major} | {edu.degree}</span>
-                  {edu.description && <p>{edu.description}</p>}
-                </div>
-              </div>
-            ))
-          ) : (
-            <p>暂无教育背景</p>
-          )}
-        </div>
-
-        <div className="section">
-          <h3>工作经历</h3>
-          {content.experience && content.experience.length > 0 ? (
-            content.experience.map((exp, index) => (
-              <div key={index} className="experience-item">
-                <div className="experience-header">
-                  <strong>{exp.company} - {exp.position}</strong>
-                  <span className="date">{exp.startDate} - {exp.endDate}</span>
-                </div>
-                <p>{exp.description}</p>
-              </div>
-            ))
-          ) : (
-            <p>暂无工作经历</p>
-          )}
-        </div>
-
-        <div className="section">
-          <h3>专业技能</h3>
-          {content.skills && content.skills.length > 0 ? (
-            <div className="skills-list">
-              {content.skills.map((skill, index) => (
-                <span key={index} className="skill-tag">{skill}</span>
-              ))}
-            </div>
-          ) : (
-            <p>暂无专业技能</p>
-          )}
-        </div>
-
-        <div className="section">
-          <h3>项目经历</h3>
-          {content.projects && content.projects.length > 0 ? (
-            content.projects.map((project, index) => (
-              <div key={index} className="project-item">
-                <div className="project-header">
-                  <strong>{project.name}</strong>
-                  <span className="role">担任：{project.role}</span>
-                </div>
-                <p>{project.description}</p>
-                {project.link && (
-                  <a href={project.link} target="_blank" rel="noopener noreferrer" className="project-link">
-                    项目链接
-                  </a>
-                )}
-              </div>
-            ))
-          ) : (
-            <p>暂无项目经历</p>
-          )}
-        </div>
-
-        {content.awards && content.awards.length > 0 && (
-          <div className="section">
-            <h3>获奖情况</h3>
-            <ul className="awards-list">
-              {content.awards.map((award, index) => (
-                <li key={index}>{award}</li>
-              ))}
-            </ul>
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  const renderEditableContent = (content) => {
-    // 简化的编辑界面，实际项目中可能需要更复杂的表单
-    return (
-      <div className="resume-edit">
-        <div className="edit-notice">
-          <p>📝 编辑模式：您可以基于系统模板修改个人信息</p>
-        </div>
-        <textarea
-          className="content-editor"
-          value={JSON.stringify(editContent, null, 2)}
-          onChange={(e) => {
-            try {
-              const newContent = JSON.parse(e.target.value);
-              setEditContent(newContent);
-            } catch (error) {
-              // 忽略JSON解析错误，保持当前内容
-            }
-          }}
-          placeholder="请输入JSON格式的简历内容"
-        />
-        <div className="edit-buttons">
-          <button className="save-btn" onClick={handleSaveResume}>
-            保存修改
-          </button>
-          <button className="cancel-btn" onClick={() => setEditMode(false)}>
-            取消编辑
-          </button>
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <Modal visible={visible} onClose={handleCloseModal}>
-      <div className="resume-modal">
-        <i className="close-icon" onClick={handleCloseModal} />
-        
-        <div className="resume-header">
-          <h2 className="resume-title">
-            {selectedTemplate?.name || '简历模板'}
-          </h2>
-          <p className="resume-subtitle">
-            {selectedTemplate?.description || '基于系统模板的简历展示'}
-          </p>
-        </div>
-
-        <div className="tabs-container">
-          <div className="tabs">
-            <div 
-              className={`tab ${activeTab === 'original' ? 'active' : ''}`}
-              onClick={() => setActiveTab('original')}
-            >
-              原始版
-            </div>
-            <div 
-              className={`tab ${activeTab === 'personal' ? 'active' : ''}`}
-              onClick={() => {
-                alert('个人修改版功能开发中，敬请期待！');
-              }}
-            >
-              个人修改版
-            </div>
-          </div>
-        </div>
-
-        <div className="tab-content">
-          {activeTab === 'original' && (
-            <div className="original-tab">
-              <div className="tab-header">
-                <h3>原始版</h3>
-              </div>
-              {renderResumeContent(selectedTemplate?.content)}
-            </div>
-          )}
-
-          {activeTab === 'personal' && (
-            <div className="personal-tab">
-              <div className="tab-header">
-                <h3>个人修改版</h3>
-              </div>
-              <div className="development-notice">
-                <div className="notice-content">
-                  <h4>开发中</h4>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </Modal>
-  );
-};
-
-export default ResumeModal;