Duguay/teach_sys_Demo
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 🎸 新增了一些页面

Browse Source
This commit is contained in:
前端人绝不为奴
2025-08-16 01:01:57 +08:00
parent 182abccc60
commit ee6e2da964
27 changed files with 747 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.jsx
View File

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

BIN
src/assets/images/Common/lock_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 KiB

BIN
src/assets/images/Common/title_dot_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

0
src/assets/images/CompanyJobsPage/company_jobs_page_icon.png → src/assets/images/Common/title_icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
src/assets/images/CoursesVideoPlayer/blank_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
src/assets/images/CoursesVideoPlayer/hat_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
src/assets/images/CoursesVideoPlayer/living_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

229
src/components/CoursesVideoPlayer/index.css Normal file
View File

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

79
src/components/CoursesVideoPlayer/index.jsx Normal file
View File

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

1
src/components/Layout/Sidebar.jsx
View File

@@ -15,6 +15,7 @@ const navigation = {
{
title: "课程区块",
items: [
{ name: "📺 公共课直播间", path: "/public-courses" },
{ name: "📺 课程直播间", path: "/live" },
{ name: "🌳 就业管家知识树", path: "/career-tree" },
{ name: "📝 课后作业", path: "/homework" },

1
src/components/Layout/index.css
View File

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

2
src/components/Layout/index.jsx
View File

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

143
src/components/LiveSummary/index.css Normal file
View File

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

49
src/components/LiveSummary/index.jsx Normal file
View File

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

36
src/components/TestEmotionalHooks.css
View File

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

4
src/normalize.css vendored
View File

@@ -20,7 +20,9 @@ p,
figure,
blockquote,
dl,
dd {
dd,
ul,
ol {
margin: 0;
}

92
src/pages/CompanyJobsPage/components/ResumeInfoModal/index.css
View File

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

24
src/pages/CompanyJobsPage/components/ResumeInfoModal/index.jsx
View File

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

6
src/pages/CompanyJobsPage/index.css
View File

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

5
src/pages/PersonalProfile/components/ProfileCard/index.css
View File

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

8
src/pages/PersonalProfile/components/StudyStudes/index.css
View File

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

4
src/pages/PersonalProfile/index.css
View File

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

13
src/pages/ProjectLibraryPage/components/ProjectCasesModal/index.css
View File

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

19
src/pages/PublicCourses/index.css Normal file
View File

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

14
src/pages/PublicCourses/index.jsx Normal file
View File

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

1
src/pages/ResumeInterviewPage/components/InterviewQuestionsModal/index.css
View File

@@ -30,6 +30,7 @@
color: #1d2129;
font-size: 20px;
font-weight: 600;
position: relative;
}
.interview-questions-modal-subtitle {

6
src/pages/ResumeInterviewPage/index.css
View File

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