diff --git a/ry-vue3/src/views/manager/PlanEdit.vue b/ry-vue3/src/views/manager/PlanEdit.vue index 364bb42..ef935bc 100644 --- a/ry-vue3/src/views/manager/PlanEdit.vue +++ b/ry-vue3/src/views/manager/PlanEdit.vue @@ -208,4 +208,58 @@ onMounted(() => { display: flex; gap: 12px; } + +/* ======================================== + 移动端适配 (≤768px) + - 卡片 padding 收窄 + - 两列改单列堆叠 + - label 上方对齐 + - 底部按钮垂直堆叠 + 全宽 + ======================================== */ +@media (max-width: 768px) { + .manager-plan-edit { padding: 12px !important; border-radius: 4px !important; } + .breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; } + + /* el-form label 上方对齐 */ + .plan-form :deep(.el-form-item) { + display: block !important; + margin-bottom: 12px !important; + } + .plan-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; + line-height: 1.5 !important; + } + .plan-form :deep(.el-form-item__content) { + margin-left: 0 !important; + line-height: 1.6 !important; + } + .plan-form :deep(.el-row) { margin: 0 !important; } + .plan-form :deep(.el-col) { padding: 0 !important; margin-bottom: 0 !important; } + /* 强制单列 (覆盖 span="12") */ + .plan-form :deep(.el-col) { max-width: 100% !important; flex: 0 0 100% !important; } + + /* el-input / el-select / el-textarea 全宽 */ + .plan-form :deep(.el-input), + .plan-form :deep(.el-select), + .plan-form :deep(.el-textarea) { width: 100% !important; } + + /* el-textarea 移动端默认行高 */ + .plan-form :deep(.el-textarea__inner) { font-size: 14px !important; min-height: 80px !important; } + + /* 底部按钮: 垂直堆叠 + 全宽 */ + .form-actions { + margin-top: 16px !important; + padding-top: 16px !important; + } + .form-actions :deep(.el-form-item__content) { + flex-direction: column !important; + gap: 8px !important; + } + .form-actions :deep(.el-button) { width: 100% !important; } +}