init

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

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

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

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