标准样式调整

vue-fastapi-frontend/src/views/datastd/main/components/AddEditForm.vue

@@ -1,5 +1,6 @@
 <template>
 <el-dialog 
+  class="std-form-dialog"
   width="900px" 
   append-to-body 
   :title="isShow ? '查看数据标准' : isEdit ? '修改数据标准' : '新增数据标准'" 
@@ -7,6 +8,7 @@
   @close="handleClose"
 >
   <el-form 
+    class="std-form"
     :model="formData" 
     ref="formRef" 
     label-width="120px" 
@@ -269,20 +271,22 @@
     </el-row>
 
     <!-- 其余字段也按三列布局排布即可 -->
-    <el-row justify="center" style="margin-top: 20px;" v-if="!isShow">
+    <el-row class="action-row" justify="center" v-if="!isShow">
-      <el-col :span="4" style="padding-right: 10px;">
+      <el-col :span="4" class="action-col action-col-left">
-        <el-button @click="handleClose" style="width: 100%" plain>取消</el-button>
+        <el-button @click="handleClose" class="action-btn" plain>取消</el-button>
       </el-col>
-      <el-col :span="4" style="padding-left: 10px;">
+      <el-col :span="4" class="action-col action-col-right">
-        <el-button type="primary" @click="handleSubmit" style="width: 100%">保存</el-button>
+        <el-button type="primary" @click="handleSubmit" class="action-btn">保存</el-button>
       </el-col>
     </el-row>
   </el-form>
-  <el-dialog title="选择代码" v-model="codeVisible" width="1000px" append-to-body>
+  <el-dialog class="code-select-dialog" title="选择代码" v-model="codeVisible" width="1000px" append-to-body>
     <code-components ref="showCodeDialog" v-if="codeVisible" />
     <template #footer>
-      <el-button @click="codeVisible = false">取消</el-button>
+      <div class="code-dialog-footer">
-      <el-button type="primary" @click="handleCodeSelect">确定</el-button>
+        <el-button @click="codeVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleCodeSelect">确定</el-button>
+      </div>
     </template>
   </el-dialog>
 </el-dialog>
@@ -458,4 +462,86 @@ const handleClose = () => {
 
 // 初始化
 initData()
-</script>
+</script>
+
+<style lang="scss" scoped>
+.std-form-dialog {
+  :deep(.el-dialog__body) {
+    padding: 18px 22px 16px;
+    max-height: 72vh;
+    overflow-y: auto;
+  }
+}
+
+.std-form {
+  :deep(.el-form-item) {
+    margin-bottom: 18px;
+  }
+
+  :deep(.el-select),
+  :deep(.el-input),
+  :deep(.el-tree-select) {
+    width: 100%;
+  }
+}
+
+.action-row {
+  margin-top: 6px;
+}
+
+.action-col {
+  max-width: 140px;
+}
+
+.action-col-left {
+  padding-right: 10px;
+}
+
+.action-col-right {
+  padding-left: 10px;
+}
+
+.action-btn {
+  width: 100%;
+}
+
+.code-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+@media (max-width: 992px) {
+  .action-col {
+    max-width: 180px;
+  }
+}
+
+@media (max-width: 768px) {
+  .std-form :deep(.el-row) {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+
+  .std-form :deep(.el-col) {
+    width: 100%;
+    max-width: 100%;
+    flex: 0 0 100%;
+  }
+
+  .action-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+  }
+
+  .action-col,
+  .action-col-left,
+  .action-col-right {
+    max-width: 100%;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+</style>