feat: 优化过期岗位卡片显示样式
- 过期岗位卡片整体背景变灰,透明度降低至0.8 - 过期岗位的文字颜色变淡,更容易识别状态 - '已过期'按钮改为白底红字带红色边框样式,更加醒目 - 截止时间显示为红色,提醒已过期状态 - 禁用过期岗位的hover效果 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user