fix: 修复发布任务页面按钮溢出问题,优化任务类型列表布局
This commit is contained in:
parent
50ec7acc56
commit
42299bbe30
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user