fix: 修复面试状态下拉栏显示问题

- 将下拉栏定位从absolute改为fixed
- 修复位置计算,使用像素单位(px)
- 下拉栏居中显示在按钮下方
- 添加最大高度限制防止内容过长

🤖 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:29:30 +08:00
parent 24df19fe9d
commit 481999f963
3 changed files with 10 additions and 3 deletions

View File

@@ -9,7 +9,7 @@
}
.interview-status-dropdown {
position: absolute;
position: fixed;
background: white;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
@@ -17,6 +17,7 @@
z-index: 1000;
animation: slideDown 0.3s ease-out;
overflow: hidden;
max-height: 500px;
}
@keyframes slideDown {

View File

@@ -63,7 +63,7 @@ export default ({ status, statusText, isOpen, onClose, position }) => {
return (
<>
<div className="interview-status-dropdown-overlay" onClick={onClose} />
<div className="interview-status-dropdown" style={{ top: position?.top, left: position?.left }}>
<div className="interview-status-dropdown" style={{ top: `${position?.top || 0}px`, left: `${position?.left || 0}px` }}>
<div className="interview-status-dropdown-header">
<h3>{statusText}</h3>
<button className="close-btn" onClick={onClose}>×</button>

View File

@@ -128,9 +128,15 @@ const CompanyJobsPage = () => {
const handleStatusClick = (e, item) => {
e.stopPropagation();
const rect = e.currentTarget.getBoundingClientRect();
// 计算下拉栏位置,让它在按钮下方居中
const dropdownWidth = 360;
const buttonCenter = rect.left + rect.width / 2;
const left = Math.max(10, buttonCenter - dropdownWidth / 2);
setDropdownPosition({
top: rect.bottom + 5,
left: rect.left
left: left
});
setSelectedInterview(item);
setDropdownOpen(true);