fix: 修复面试状态下拉栏显示问题
- 将下拉栏定位从absolute改为fixed - 修复位置计算,使用像素单位(px) - 下拉栏居中显示在按钮下方 - 添加最大高度限制防止内容过长 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user