fix: 修复发布任务页面按钮溢出问题,优化任务类型列表布局

This commit is contained in:
Your Name 2026-01-16 13:58:14 +08:00
parent 50ec7acc56
commit 42299bbe30

View File

@ -2411,6 +2411,8 @@ onUnmounted(() => {
border-radius: 8px;
transition: all 0.2s ease;
cursor: grab;
overflow: hidden; // 防止内容溢出
width: 100%;
&:last-child {
margin-bottom: $space-lg;
@ -2462,19 +2464,34 @@ onUnmounted(() => {
display: flex;
gap: $space-md;
align-items: flex-start;
flex-wrap: wrap; // 允许换行
width: 100%;
min-width: 0; // 允许 flex 子元素收缩
}
.task-type-select {
flex: 2;
min-width: 200px; // 设置最小宽度,确保在小屏幕上也能正常显示
max-width: 100%; // 防止超出父容器
overflow: hidden; // 防止内容溢出
}
.task-type-cascader {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0; // 允许收缩
overflow: hidden; // 防止溢出
:deep(.ant-cascader) {
width: 100%;
min-width: 0; // 允许收缩
.ant-input {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.task-type-score-tip {
@ -2499,17 +2516,27 @@ onUnmounted(() => {
}
.task-type-quantity {
flex: 1;
min-width: 150px;
max-width: 200px;
flex: 0 0 auto; // 不缩放,保持原始大小
min-width: 120px; // 减少最小宽度
max-width: 150px; // 限制最大宽度
flex-shrink: 0; // 防止被压缩
}
.task-type-dept {
flex-shrink: 0;
min-width: 160px; // 固定最小宽度
width: 160px; // 固定宽度
}
.task-type-actions {
flex-shrink: 0; // 防止删除按钮被压缩
min-width: 90px;
width: 90px; // 固定宽度
}
.task-type-receiver {
flex-shrink: 0; // 防止设计师选择器被压缩
min-width: 200px;
}
.add-task-type-btn {