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

init

Browse Source
This commit is contained in:
前端人绝不为奴
2025-08-15 16:16:41 +08:00
commit 182abccc60
171 changed files with 26833 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
src/pages/CompanyJobsPage/components/JobInfoModal/index.css Normal file
View File

@@ -0,0 +1,228 @@
.job-info-modal-content {
max-height: 648px;
width: 844px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background-color: #f2f3f5;
border-radius: 8px;
box-sizing: border-box;
overflow: auto;
padding: 20px;
.job-info-modal-search {
width: 319px;
height: 36px;
border: 1px solid #2c7aff;
span {
background-color: #fff;
}
input {
background-color: #fff;
}
}
.job-info-modal-user-resumes-list {
width: 100%;
margin-top: 16px;
display: grid;
grid-template-columns: repeat(2, 1fr); /* 每行两列 */
gap: 20px; /* 网格间距 */
justify-items: start; /* 项目左对齐 */
overflow-y: auto;
.list-item {
width: 390px;
height: 100px;
background-color: #fff;
border-radius: 8px;
position: relative;
box-sizing: border-box;
padding: 16px 12px;
display: flex;
justify-content: space-between;
align-items: center;
.list-item-info {
height: 68px;
width: 300px;
display: flex;
justify-content: flex-start;
align-items: center;
.file-icon {
width: 68px;
height: 68px;
}
.file-info {
width: 220px;
height: 68px;
> p {
text-align: left;
}
.file-info-targetPosition {
width: 100%;
height: 28px;
color: #09090b;
line-height: 28px;
font-size: 18px;
font-weight: 600;
}
.file-info-skills {
margin-top: 5px;
width: 100%;
height: 21px;
color: #788089;
line-height: 21px;
font-size: 15px;
font-weight: 400;
overflow: hidden; /* 超出隐藏 */
white-space: nowrap; /* 禁止换行 */
text-overflow: ellipsis; /* 文本溢出显示省略号 */
}
}
}
.info-btn {
width: 64px;
height: 28px;
line-height: 28px;
text-align: center;
border-radius: 2px;
border: 1px solid #2c7aff;
color: #2c7aff;
font-size: 12px;
cursor: pointer;
}
}
}
.job-info-modal-content-position-info {
width: 100%;
height: 30px;
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
.job-info-modal-content-position-info-position {
font-size: 20px;
font-weight: 600;
line-height: 30px;
color: #1d2129;
margin-right: 10px;
}
.job-info-modal-content-position-info-num {
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: #ff7d00;
}
.job-info-modal-content-position-info-salary {
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #ff7d00;
position: absolute;
right: 0;
}
}
.job-info-modal-info-tags {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin-top: 10px;
.job-info-modal-info-tag {
background-color: #e5e6eb;
box-sizing: border-box;
margin-bottom: 5px;
padding: 1px 8px;
color: #1d2129;
font-size: 12px;
font-weight: 600;
border-radius: 2px;
margin-right: 10px;
}
}
.job-info-modal-content-position-info-description,
.job-info-modal-content-position-info-requirements,
.job-info-modal-content-position-info-companyInfo {
width: 100%;
box-sizing: border-box;
padding: 16px;
border-radius: 8px;
background-color: #fff;
margin: 10px 0;
> p {
width: 100%;
text-align: left;
}
.description-title,
.requirements-title,
.companyInfo-title {
font-size: 20px;
font-weight: 600;
line-height: 30px;
color: #000;
margin-bottom: 10px;
}
.description-content,
.companyInfo-content {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #4e5969;
}
.requirements-content {
width: 100%;
.requirements-item {
text-align: left;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #4e5969;
}
}
}
.job-info-modal-btn {
width: 120px;
height: 36px;
line-height: 36px;
color: #fff;
background-color: #2c7aff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 2px;
cursor: pointer;
> i {
width: 12px;
height: 12px;
margin-right: 5px;
background-image: url("@/assets/images/CompanyJobsPage/btn_icon_2.png");
background-size: 100% 100%;
}
> span {
font-size: 12px;
font-weight: 600;
color: #fff;
}
}
}

141
src/pages/CompanyJobsPage/components/JobInfoModal/index.jsx Normal file
View File

@@ -0,0 +1,141 @@
import { useState } from "react";
import { Input } from "@arco-design/web-react";
import Modal from "@/components/Modal";
import { mockData } from "@/data/mockData";
import FILEICON from "@/assets/images/CompanyJobsPage/file_icon.png";
import "./index.css";
const InputSearch = Input.Search;
const { userResumes } = mockData;
export default ({ visible, onClose, data }) => {
const [resumeModalShow, setResumeModalShow] = useState(false);
const handleCloseModal = () => {
setResumeModalShow(false);
onClose();
};
// 点击立即投递
const handleClickDeliverBtn = () => {
console.log(data);
setResumeModalShow(true);
};
const onSearch = (value) => {
console.log(value);
};
// 选择简历投递
const userResumesClick = (item) => {
console.log(item);
};
// 点击简历详情
const userResumesBtnClick = (e, item) => {
e.stopPropagation();
console.log(item);
};
return (
<Modal visible={visible} onClose={handleCloseModal}>
<div className="job-info-modal-content">
{resumeModalShow ? (
<>
<InputSearch
className="job-info-modal-search"
onSearch={onSearch}
searchButton
placeholder="搜索简历"
/>
<ul className="job-info-modal-user-resumes-list">
{userResumes.map((item) => (
<li
key={item.id}
className="list-item"
onClick={() => userResumesClick(item)}
>
<div className="list-item-info">
<img src={FILEICON} className="file-icon" />
<div className="file-info">
<p className="file-info-targetPosition">
{item.targetPosition}
</p>
{item?.skills?.length > 0 && (
<p className="file-info-skills">
{item?.skills?.join("/")}
</p>
)}
</div>
</div>
<div
className="info-btn"
onClick={(e) => userResumesBtnClick(e, item)}
>
简历详情
</div>
</li>
))}
</ul>
</>
) : (
<>
<div className="job-info-modal-content-position-info">
<span className="job-info-modal-content-position-info-position">
{data?.position}
</span>
<span className="job-info-modal-content-position-info-num">
该岗位仅剩9人
</span>
<span className="job-info-modal-content-position-info-salary">
{data?.salary}
</span>
</div>
{data?.tags?.length > 0 && (
<ul className="job-info-modal-info-tags">
{data?.tags?.map((tag, index) => (
<li key={index} className="job-info-modal-info-tag">
{tag}
</li>
))}
</ul>
)}
{data?.details?.description && (
<div className="job-info-modal-content-position-info-description">
<p className="description-title">岗位描述</p>
<p className="description-content">
{data?.details?.description}
</p>
</div>
)}
{data?.details?.requirements?.length > 0 && (
<div className="job-info-modal-content-position-info-requirements">
<p className="requirements-title">岗位要求</p>
<ul className="requirements-content">
{data?.details?.requirements?.map((item, index) => (
<li key={index} className="requirements-item">
{index + 1}.{item}
</li>
))}
</ul>
</div>
)}
{data?.details?.companyInfo && (
<div className="job-info-modal-content-position-info-companyInfo">
<p className="companyInfo-title">公司介绍</p>
<p className="companyInfo-content">
{data?.details?.companyInfo}
</p>
</div>
)}
<div className="job-info-modal-btn" onClick={handleClickDeliverBtn}>
<i />
<span>立即投递</span>
</div>
</>
)}
</div>
</Modal>
);
};

128
src/pages/CompanyJobsPage/components/JobList/index.css Normal file
View File

@@ -0,0 +1,128 @@
.company-jobs-page-left-list {
width: 100%;
height: 100%;
overflow-y: auto;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
box-sizing: border-box;
padding: 5px 0;
.company-jobs-page-left-list-item {
width: 496px;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 20px;
border-radius: 8px;
cursor: pointer;
margin-bottom: 20px;
margin-right: 20px;
flex-shrink: 0;
position: relative;
border: 1px solid #e5e6eb;
.icon {
position: absolute;
left: 0;
top: -6px;
width: 54px;
height: 24px;
background-size: 100% 100%;
z-index: 1;
}
.icon-fulltime {
background-image: url("@/assets/images/CompanyJobsPage/fulltime_icon.png");
}
.icon-internship {
background-image: url("@/assets/images/CompanyJobsPage/internship_icon.png");
}
.company-jobs-info {
width: 300px;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
.company-jobs-info-position {
width: 100%;
font-size: 16px;
font-weight: 600;
color: #1d2129;
text-align: left;
}
.company-jobs-info-tags {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin-top: 5px;
.company-jobs-info-tag {
background-color: #e5e6eb;
box-sizing: border-box;
margin-bottom: 5px;
padding: 1px 8px;
color: #1d2129;
font-size: 12px;
font-weight: 600;
border-radius: 2px;
margin-right: 10px;
}
}
.company-jobs-info-position-count {
width: 100%;
text-align: left;
color: #ff7d00;
margin-top: 5px;
font-size: 14px;
font-weight: 400;
}
}
.company-jobs-btn-wrapper {
width: 120px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
.company-jobs-info-position-salary {
width: 100%;
text-align: center;
color: #ff7d00;
font-size: 14px;
font-weight: 600;
}
.company-jobs-btn {
cursor: pointer;
width: 64px;
height: 28px;
border-radius: 2px;
text-align: center;
color: #2c7aff;
font-size: 12px;
font-weight: 600;
border: 1px solid #2c7aff;
display: flex;
justify-content: center;
align-items: center;
> i {
width: 12px;
height: 12px;
background-image: url("@/assets/images/CompanyJobsPage/btn_icon.png");
background-size: 100% 100%;
margin-right: 5px;
}
}
}
}
}

65
src/pages/CompanyJobsPage/components/JobList/index.jsx Normal file
View File

@@ -0,0 +1,65 @@
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import JobInfoModal from "../JobInfoModal";
import "./index.css";
export default ({ className = "", data = [], backgroundColor = "#FFFFFF" }) => {
const navigate = useNavigate();
const [jobInfoData, setJobInfoData] = useState(undefined);
const [jobInfoModalVisible, setJobInfoModalVisible] = useState(false);
const handleJobClick = (e, item) => {
e.stopPropagation();
setJobInfoModalVisible(true);
setJobInfoData(item);
};
const onClickJobInfoModalClose = () => {
setJobInfoData(undefined);
setJobInfoModalVisible(false);
};
return (
<>
<ul className={`company-jobs-page-left-list ${className}`}>
{data?.map((item) => (
<li
key={item.id}
className="company-jobs-page-left-list-item"
style={{ backgroundColor }}
onClick={(e) => handleJobClick(e, item)}
>
<i className={`icon icon-${item?.jobType}`}></i>
<div className="company-jobs-info">
<p className="company-jobs-info-position">{item?.position}</p>
<ul className="company-jobs-info-tags">
{item?.tags?.map((tag) => (
<li key={tag} className="company-jobs-info-tag">
{tag}
</li>
))}
</ul>
<p className="company-jobs-info-position-count">
岗位招聘数量仅剩9名
</p>
</div>
<div className="company-jobs-btn-wrapper">
<p className="company-jobs-info-position-salary">
{item?.salary}
</p>
<button className="company-jobs-btn">
<i />
<span>投递</span>
</button>
</div>
</li>
))}
</ul>
<JobInfoModal
data={jobInfoData}
visible={jobInfoModalVisible}
onClose={onClickJobInfoModalClose}
/>
</>
);
};

269
src/pages/CompanyJobsPage/components/ResumeInfoModal/index.css Normal file
View File

@@ -0,0 +1,269 @@
.resume-info-modal {
width: 758px;
height: 700px;
border-radius: 8px;
position: relative;
background-color: #f2f3f5;
overflow: hidden;
box-sizing: border-box;
padding: 20px;
background-image: url("@/assets/images/Common/modal_bg.png");
background-size: 100% 100%;
.close-icon {
position: absolute;
right: 20px;
top: 20px;
width: 16px;
height: 16px;
background-image: url("@/assets/images/Common/close.png");
background-size: 100% 100%;
z-index: 10;
cursor: pointer;
}
.resume-info-modal-radio-group {
height: 30px;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 10px;
}
.resume-info-modal-title {
width: 100%;
height: 30px;
line-height: 30px;
text-align: left;
color: #1d2129;
font-size: 20px;
font-weight: 600;
}
.resume-info-moda-list {
width: 100%;
max-height: 600px;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-top: 10px;
box-sizing: border-box;
.resume-info-moda-item {
width: 100%;
margin-bottom: 20px;
border-radius: 8px;
box-sizing: border-box;
padding: 16px;
background-color: #fff;
.resume-info-moda-item-title {
width: 100%;
text-align: left;
line-height: 30px;
width: 100%;
height: 30px;
color: #0275f2;
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.educational-experience-list {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.educational-experience-list-item:last-child {
margin-bottom: 0;
}
.educational-experience-list-item {
width: 100%;
height: 24px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
> p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.school-name {
width: 70%;
height: 100%;
line-height: 24px;
text-align: left;
color: #4e5969;
font-size: 16px;
font-weight: 600;
}
.study-time {
width: 30%;
height: 100%;
line-height: 24px;
text-align: right;
color: #86909c;
font-size: 14px;
font-weight: 400;
}
}
}
.project-experience-list {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.project-experience-list-item {
width: 100%;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-bottom: 10px;
.project-info-wrapper {
width: 100%;
height: 46px;
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
.project-info {
width: 80%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
> p {
text-align: left;
}
.project-name {
height: 24px;
line-height: 24px;
font-size: 16px;
font-weight: 600;
color: #4e5969;
}
.project-company {
height: 22px;
line-height: 22px;
font-size: 14px;
font-weight: 400;
color: #86909c;
}
}
.project-time {
text-align: right;
width: 30%;
height: 22px;
line-height: 22px;
font-size: 14px;
font-weight: 400;
color: #86909c;
}
}
.project-desc {
color: #1d2129;
font-size: 14px;
font-weight: 400;
text-align: left;
margin-bottom: 10px;
}
.job-responsibilities-list {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
> p {
width: 100%;
height: 24px;
line-height: 24px;
font-size: 16px;
font-weight: 600;
color: #4e5969;
text-align: left;
}
> li {
width: 100%;
height: 22px;
line-height: 22px;
font-size: 14px;
font-weight: 400;
color: #1d2129;
text-align: left;
}
}
}
}
.professional-skills-list {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.professional-skills-list-item:last-child {
margin-bottom: 0;
}
.professional-skills-list-item {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-bottom: 5px;
.skill-name {
width: 100%;
height: 24px;
line-height: 24px;
font-size: 16px;
font-weight: 600;
color: #4e5969;
text-align: left;
}
.core-capabilities-list {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-bottom: 10px;
.core-capabilities-list-item {
width: 100%;
height: 22px;
line-height: 22px;
font-size: 14px;
font-weight: 400;
color: #1d2129;
text-align: left;
}
}
}
}
}
}
}

115
src/pages/CompanyJobsPage/components/ResumeInfoModal/index.jsx Normal file
View File

@@ -0,0 +1,115 @@
import { useState } from "react";
import { Radio } from "@arco-design/web-react";
import Modal from "@/components/Modal";
import "./index.css";
export default ({ visible, onClose, data }) => {
const [position, setPosition] = useState("1");
const onRadioChange = (value) => {
setPosition(value);
};
const handleCloseModal = () => {
onClose();
};
return (
<Modal visible={visible} onClose={handleCloseModal}>
<div className="resume-info-modal">
<i className="close-icon" onClick={handleCloseModal} />
<Radio.Group
type="button"
name="position"
className="resume-info-modal-radio-group"
value={position}
onChange={onRadioChange}
>
<Radio value="1">原始版</Radio>
<Radio value="2">个人修改版</Radio>
<Radio value="3">个人修改版</Radio>
</Radio.Group>
<p className="resume-info-modal-title">非标自动化工程师</p>
<ul className="resume-info-moda-list">
{/* 教育经历 */}
<li className="resume-info-moda-item">
<p className="resume-info-moda-item-title">教育经历</p>
<ul className="educational-experience-list">
<li className="educational-experience-list-item">
<p className="school-name">北京理工大学</p>
<p className="study-time">2018.09 - 2022.07</p>
</li>
<li className="educational-experience-list-item">
<p className="school-name">北京理工大学</p>
<p className="study-time">2018.09 - 2022.07</p>
</li>
</ul>
</li>
{/* 项目经历 */}
<li className="resume-info-moda-item">
<p className="resume-info-moda-item-title">项目经历</p>
<ul className="project-experience-list">
<li className="project-experience-list-item">
<div className="project-info-wrapper">
<div className="project-info">
<p className="project-name">项目名称</p>
<p className="project-company">单位：xxxxxx</p>
</div>
<p className="project-time">2022.09 - 2023.07</p>
</div>
<p className="project-desc">
1. 负责室内平面设计项目的创意和实施2.
与团队合作，确保设计质量和项目进度 3.
持续关注设计趋势，提升设计技能 1.
具备出色的沟通能力和团队协作精神 2.
能够高效完成任务，对工作细节有高度关注 3.
具有不断学习和适应新挑战的能力
加分项：有以下行业经验：建筑设计
</p>
<ul className="job-responsibilities-list">
<p>岗位职责</p>
<li>1.负责室内平面设计项目的创意和实施</li>
<li>2.与团队合作，确保设计质量和项目进度</li>
<li>3.持续关注设计趋势，提升设计技能</li>
</ul>
</li>
</ul>
</li>
{/* 专业技能 */}
<li className="resume-info-moda-item">
<p className="resume-info-moda-item-title">专业技能</p>
<ul className="professional-skills-list">
<li className="professional-skills-list-item">
<p className="skill-name">核心能力</p>
<div className="core-capabilities-list">
<p className="core-capabilities-list-item">
1. 负责室内平面设计项目的创意和实施
</p>
<p className="core-capabilities-list-item">
2. 与团队合作，确保设计质量和项目进度
</p>
<p className="core-capabilities-list-item">
3. 持续关注设计趋势，提升设计技能
</p>
</div>
</li>
<li className="professional-skills-list-item">
<p className="skill-name">复核能力</p>
<div className="core-capabilities-list">
<p className="core-capabilities-list-item">
1. 负责室内平面设计项目的创意和实施
</p>
<p className="core-capabilities-list-item">
2. 与团队合作，确保设计质量和项目进度
</p>
<p className="core-capabilities-list-item">
3. 持续关注设计趋势，提升设计技能
</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
</Modal>
);
};