feat: ManagerProjectDetail 移动端适配 (单列堆叠/表格横滚/按钮全宽)

This commit is contained in:
guoju0808
2026-08-26 11:16:43 +00:00
parent 58f02f1262
commit a763598637
@@ -364,4 +364,84 @@ onMounted(async () => {
.hint-text { font-size: 12px; color: #909399; margin: 8px 0; line-height: 1.6; } .hint-text { font-size: 12px; color: #909399; margin: 8px 0; line-height: 1.6; }
.hint-text p { margin-bottom: 4px; } .hint-text p { margin-bottom: 4px; }
.hint-text p:last-child { margin-bottom: 0; } .hint-text p:last-child { margin-bottom: 0; }
/* ========================================
移动端适配 (≤768px)
- 卡片 padding 收窄
- 两列 12 跨度 → 单列 24
- label 上方对齐
- 服务公司表格 + 角色劳务表 横向滚动
- 底部按钮全宽
======================================== */
@media (max-width: 768px) {
.page-card { padding: 12px !important; border-radius: 4px !important; }
/* 面包屑 */
.breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; }
/* 章节标题 */
.new-card-title { font-size: 13px !important; margin: 12px 0 10px !important; padding-left: 6px !important; }
/* 项目信息表: 两列改单列, label 上方对齐 */
.info-form { padding-top: 0 !important; }
.info-form :deep(.el-form-item) {
display: block !important;
margin-bottom: 10px !important;
}
.info-form :deep(.el-form-item__label) {
float: none !important;
width: auto !important;
text-align: left !important;
padding: 0 0 4px !important;
font-size: 13px !important;
color: var(--el-text-color-secondary) !important;
}
.info-form :deep(.el-form-item__content) {
margin-left: 0 !important;
line-height: 1.6 !important;
}
.info-value { font-size: 14px !important; }
.info-form :deep(.el-row) { margin: 0 !important; }
.info-form :deep(.el-col) { padding: 0 !important; margin-bottom: 0 !important; }
/* 服务公司表格: 横向滚动容器 + 字号缩小 */
.assign-table-el {
max-width: 100% !important;
width: 100% !important;
font-size: 12px !important;
}
.assign-table-el :deep(.el-table__body-wrapper) { overflow-x: auto !important; }
/* 角色劳务表 */
.role-labor-table { width: 100% !important; font-size: 13px !important; }
.role-labor-table th,
.role-labor-table td { padding: 8px 10px !important; font-size: 13px !important; }
/* 监督员 */
.monitor-row { padding: 6px 10px !important; }
.monitor-name { font-size: 13px !important; }
/* 公告文件: label 固定宽度自适应 */
.notice-row {
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
padding: 8px 0 !important;
border-bottom: 1px dashed var(--brand-slate-100);
}
.notice-label { width: auto !important; font-size: 12px !important; color: var(--el-text-color-secondary) !important; }
.notice-file { width: 100% !important; }
.file-name { font-size: 13px !important; }
/* 底部按钮: 全宽 */
.form-actions {
margin-top: 16px !important;
flex-direction: column !important;
gap: 8px !important;
}
.form-actions .el-button { width: 100% !important; }
/* 提示 */
.hint-text { font-size: 11px !important; }
}
</style> </style>