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

2026-08-26 11:16:43 +00:00
parent 58f02f1262
commit a763598637
1 changed files with 80 additions and 0 deletions
@@ -364,4 +364,84 @@ onMounted(async () => {
 .hint-text { font-size: 12px; color: #909399; margin: 8px 0; line-height: 1.6; }
 .hint-text p { margin-bottom: 4px; }
 .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>