init

src/pages/CompanyJobsPage/index.jsx

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { mockData } from "@/data/mockData";
+import JobList from "./components/JobList";
+
+import "./index.css";
+
+const CompanyJobsPage = () => {
+  const { companyJobs } = mockData;
+  const [isExpand, setIsExpand] = useState(false); // 是否展开
+
+  const navigate = useNavigate();
+
+  const handleJobWrapperClick = () => {
+    navigate("/company-jobs-list");
+  };
+
+  return (
+    <div className="company-jobs-page-wrapper">
+      <div className="company-jobs-page">
+        <div className="company-jobs-page-left" onClick={handleJobWrapperClick}>
+          <p className="company-jobs-page-title">企业内推岗位库</p>
+          <div className="company-jobs-page-left-list-wrapper">
+            <JobList
+              data={companyJobs?.companyPositions}
+              backgroundColor="#F7F8FA"
+            />
+          </div>
+        </div>
+        <div className="company-jobs-page-interview-wrapper">
+          <div
+            className={`${
+              isExpand
+                ? "company-jobs-page-interview"
+                : "company-jobs-page-interview company-jobs-page-interview-expand"
+            }`}
+          >
+            <p className="company-jobs-page-title">内推岗位面试</p>
+            <ul className="company-jobs-page-interview-list">
+              {companyJobs?.internalPositions?.map((item) => (
+                <li className="company-jobs-page-interview-item" key={item.id}>
+                  <div className="company-jobs-page-interview-item-info">
+                    <p className="company-jobs-page-interview-item-info-position">
+                      {item.position}
+                    </p>
+                    {item?.tags?.length > 0 ? (
+                      <ul className="company-jobs-page-interview-item-info-tags">
+                        {item?.tags.map((tag) => (
+                          <li
+                            className="company-jobs-page-interview-item-info-tag"
+                            key={tag}
+                          >
+                            {tag}
+                          </li>
+                        ))}
+                      </ul>
+                    ) : null}
+                    <span className="company-jobs-page-interview-item-info-salary">
+                      {item.salary}
+                    </span>
+                  </div>
+                  <div className="company-jobs-page-interview-item-btn-wrapper">
+                    <span>{item.interviewTime}</span>
+                    <div
+                      className={`company-jobs-page-interview-item-btn ${
+                        item.status !== "completed" &&
+                        "company-jobs-page-interview-item-btn-active"
+                      }`}
+                    >
+                      {item.statusText}
+                    </div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+        <div
+          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>
+          <div className="company-jobs-page-process-content">
+            <div className="company-jobs-page-process-item-icon icon1">
+              <p>内推岗位简历投递</p>
+            </div>
+            <div className="company-jobs-page-process-item-round-dot icon2" />
+            <div className="company-jobs-page-process-item-icon icon3">
+              <p>岗位简历接收</p>
+            </div>
+            <div className="company-jobs-page-process-item-icon icon4">
+              <p>面试时间地点确定</p>
+            </div>
+            <div className="company-jobs-page-process-item-icon icon5">
+              <p>参与企业面试</p>
+            </div>
+            <div className="company-jobs-page-process-item-round-dot icon6" />
+            <div className="company-jobs-page-process-item-icon icon7">
+              <p>企业offer发送</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CompanyJobsPage;