feat: 优化过期岗位卡片显示样式

- 过期岗位卡片整体背景变灰,透明度降低至0.8
- 过期岗位的文字颜色变淡,更容易识别状态
- '已过期'按钮改为白底红字带红色边框样式,更加醒目
- 截止时间显示为红色,提醒已过期状态
- 禁用过期岗位的hover效果

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
KQL
2025-09-08 05:00:03 +08:00
parent d1da0a5232
commit b907586435
2 changed files with 48 additions and 5 deletions

View File

@@ -33,6 +33,47 @@
background-color: #d9e9ff;
}
&.expired {
background-color: #f7f8fa;
background-image: none;
border-color: #e5e6eb;
opacity: 0.8;
&:hover {
border-color: #c9cdd4;
box-shadow: none;
transform: none;
background-color: #f2f3f5;
}
.company-jobs-info-position {
color: #86909c;
}
.company-jobs-info-tags {
opacity: 0.6;
}
.company-jobs-info-position-count {
color: #c9cdd4;
}
.company-jobs-info-position-salary {
color: #c9cdd4;
}
.company-jobs-info-deadline {
color: #ff4d4f;
font-weight: 600;
}
.company-jobs-info-category-tag {
opacity: 0.7;
background-color: #f2f3f5;
color: #86909c;
}
}
.icon {
position: absolute;
left: 0;
@@ -171,19 +212,21 @@
}
&.disabled {
background-color: #f2f3f5;
color: #c9cdd4;
background-color: #fff;
color: #ff4d4f;
border: 1px solid #ffccc7;
cursor: not-allowed;
pointer-events: none;
font-weight: 600;
&:hover {
background-color: #f2f3f5;
background-color: #fff;
box-shadow: none;
transform: none;
}
> i {
opacity: 0.5;
display: none;
}
}
}

View File

@@ -117,7 +117,7 @@ export default ({ className = "", data = [], backgroundColor }) => {
return (
<li
key={item.id}
className="company-jobs-page-left-list-item"
className={`company-jobs-page-left-list-item ${(item.isExpired || item.status === 'expired') ? 'expired' : ''}`}
style={{ backgroundColor }}
onClick={(e) => handleJobClick(e, item)}
>