Просмотр исходного кода

fix: editor space + mobile responsive layout

yangyi 2 дней назад
Родитель
Сommit
6534e8efa6
1 измененных файлов с 31 добавлено и 5 удалено
  1. 31 5
      src/view/PostEditorView.vue

+ 31 - 5
src/view/PostEditorView.vue

@@ -138,12 +138,38 @@ onMounted(() => loadPost())
   font-weight: 600;
 }
 .editor-form {
-  max-width: 800px;
+  max-width: 900px;
 }
-.quill-editor {
-  --qt-height: 300px;
+.quill-editor :deep(.ql-container) {
+  min-height: 400px;
 }
-.quill-editor :deep(.ql-editor) {
-  min-height: 250px;
+
+@media (max-width: 768px) {
+  .post-editor {
+    padding: 8px;
+  }
+  .editor-form {
+    max-width: 100%;
+  }
+  .editor-form :deep(.el-form-item__label) {
+    float: none;
+    display: block;
+    text-align: left;
+    padding: 0 0 4px;
+  }
+  .editor-form :deep(.el-form-item__content) {
+    margin-left: 0 !important;
+  }
+  .quill-editor :deep(.ql-container) {
+    min-height: 300px;
+  }
+  .card-header {
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-start;
+  }
+  .card-header .el-button {
+    width: 100%;
+  }
 }
 </style>