UI优化更新:面试模拟、简历面试、项目库、求职策略等多个页面改进
主要更新: - 面试模拟页:移除上滑查看评价,添加渐进式评分(72→81→89) - 简历面试页:添加岗位头像、标签背景、面试题加粗等视觉优化 - 项目库页:添加"我完成的项目库"板块,增加hover效果 - 求职策略详情页:优化圆柱体和矩形对齐,添加CSV岗位数据,调整批次文字位置 - 企业岗位列表页:添加返回按钮功能 - 全局:统一岗位级别术语(普通岗/技术骨干岗/储备干部岗) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,8 +1,61 @@
|
||||
.company-jobs-list-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
/* 返回按钮样式 */
|
||||
.back-button-wrapper {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px; /* 与岗位卡片左对齐 */
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e5e6eb;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #4e5969;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:hover {
|
||||
background-color: #f7f8fa;
|
||||
border-color: #2c7aff;
|
||||
color: #2c7aff;
|
||||
transform: translateX(-2px);
|
||||
box-shadow: 0 4px 8px rgba(44, 122, 255, 0.15);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98) translateX(-2px);
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.back-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.company-jobs-list-page-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
padding-top: 60px;
|
||||
|
||||
.jobs-list-margin {
|
||||
> li {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState, useCallback } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import JobList from "@/pages/CompanyJobsPage/components/JobList";
|
||||
import InfiniteScroll from "@/components/InfiniteScroll";
|
||||
import { getJobsList } from "@/services";
|
||||
@@ -8,10 +9,16 @@ import "./index.css";
|
||||
const PAGE_SIZE = 20;
|
||||
|
||||
const CompanyJobsListPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const [jobs, setJobs] = useState([]);
|
||||
const [listPage, setListPage] = useState(1);
|
||||
const [listHasMore, setListHasMore] = useState(true);
|
||||
|
||||
// 返回到企业内推岗位页面
|
||||
const handleBack = () => {
|
||||
navigate("/company-jobs");
|
||||
};
|
||||
|
||||
const fetchJobs = useCallback(async () => {
|
||||
const res = await getJobsList({
|
||||
page: listPage,
|
||||
@@ -33,14 +40,24 @@ const CompanyJobsListPage = () => {
|
||||
}, [listPage]);
|
||||
|
||||
return (
|
||||
<InfiniteScroll
|
||||
loadMore={fetchJobs}
|
||||
hasMore={listHasMore}
|
||||
empty={jobs.length === 0}
|
||||
className="company-jobs-list-page-wrapper"
|
||||
>
|
||||
<JobList data={jobs} className="jobs-list-margin" />
|
||||
</InfiniteScroll>
|
||||
<div className="company-jobs-list-page">
|
||||
{/* 返回按钮 */}
|
||||
<div className="back-button-wrapper">
|
||||
<button className="back-button" onClick={handleBack}>
|
||||
<span className="back-icon">←</span>
|
||||
<span className="back-text">返回</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<InfiniteScroll
|
||||
loadMore={fetchJobs}
|
||||
hasMore={listHasMore}
|
||||
empty={jobs.length === 0}
|
||||
className="company-jobs-list-page-wrapper"
|
||||
>
|
||||
<JobList data={jobs} className="jobs-list-margin" />
|
||||
</InfiniteScroll>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user