缩小表单尺寸

klp-ui/src/assets/styles/element-ui.scss

@@ -1,6 +1,5 @@
 /* 基础变量定义 - 工业风浅色配色 */
 :root {
-  --primary-color: #3c6382; /* 深蓝色作为主色调，体现工业感 */
   --secondary-color: #78909c; /* 辅助色 */
   --accent-color: #e67e22; /* 强调色，用于突出按钮和重要操作 */
   --background-color: #f5f7fa; /* 浅色背景 */
@@ -11,6 +10,9 @@
   --spacing-sm: 4px;
   --spacing-md: 8px;
   --spacing-lg: 16px;
+  --spacing-base: 8px;   /* 基础间距，表单、表格统一用这个值做倍数调整 */
+  --form-item-margin: var(--spacing-base); /* 表单项底部间距 */
+  --btn-height: 20px;   /* 按钮统一高度 */
 }
 
 /* 全局样式调整 */
@@ -45,16 +47,6 @@ body {
   transition: all 0.2s ease;
 }
 
-.el-button--primary {
-  background-color: var(--primary-color);
-  border-color: var(--primary-color);
-}
-
-.el-button--primary:hover {
-  background-color: #2c3e50;
-  border-color: #2c3e50;
-}
-
 .el-button--success {
   background-color: #2ecc71;
   border-color: #2ecc71;
@@ -66,7 +58,7 @@ body {
 }
 
 .el-button--mini {
-  padding: 3px 8px;
+  padding: 2px 4px;
   font-size: 12px;
 }
 
@@ -92,11 +84,12 @@ body {
 .el-table {
   border: 1px solid var(--border-color);
   border-radius: 2px;
+  margin-top: 0 !important;
 }
 
 .el-table th,
 .el-table td {
-  padding: 8px 10px;
+  padding: 2px 4px;
   font-size: 13px;
 }
 
@@ -241,13 +234,16 @@ body {
   .cell {
     padding: 0 10px;
     text-align: center;
-
-    .el-tag {
-      margin-right: 0px;
-    }
   }
 }
 
+.el-tag {
+  margin-right: 0px;
+  padding: 1px !important;
+  height: auto !important;
+  border-radius: 0 !important;
+}
+
 .cell {
   .el-tag {
     margin-right: 0px;
@@ -277,6 +273,88 @@ body {
   line-height: 30px;
 }
 
-.pagination-container {
+div.pagination-container {
   background-color: transparent !important;
+  padding: 0 !important;
+
+  .el-pagination {
+    padding: 0 !important;
+    margin: 0 !important;
+  }
 }
+
+.el-table--medium .el-table__cell {
+  padding: 0 !important;
+}
+
+.el-table--mini .el-table__cell {
+  padding: 0 !important;
+}
+
+.el-table .el-table__header-wrapper th, 
+.el-table .el-table__fixed-header-wrapper th {
+  height: auto;
+  padding: 0 !important;
+}
+
+/* 【优化】表单项整体布局：压缩间距、对齐标签 */
+.el-form-item {
+  margin-bottom: var(--form-item-margin) !important; 
+  /* 让标签和表格列头对齐，可根据实际需求微调 */
+  label-align: right;  
+}
+
+/* 【优化】表单标签：缩小文字大小，匹配表格列头 */
+.el-form-item__label {
+  font-size: 13px; 
+  padding-right: var(--spacing-base); 
+}
+
+/* 【优化】表单输入框：统一高度、压缩内边距 */
+.el-input__inner,
+.el-textarea__inner,
+.el-select .el-input__inner {
+  height: var(--btn-height);  
+  padding: 0 var(--spacing-base); 
+  font-size: 13px; 
+}
+
+/* 【优化】表格与表单的间距：避免表单和表格贴太近 */
+.el-table {
+  margin-top: calc(var(--form-item-margin) * 2); 
+}
+
+/* 【补充】搜索按钮组：如果是 inline 布局，强制对齐 */
+.search-form .el-form-item {
+  display: inline-block;
+  margin-right: var(--spacing-base);
+  vertical-align: middle;
+}
+
+/* 【补充】适配原有工具类，让紧凑度更统一 */
+.small-padding .cell {
+  padding-left: calc(var(--spacing-base)/2);
+  padding-right: calc(var(--spacing-base)/2);
+}
+
+.el-input {
+  height: var(--btn-height);
+}
+
+
+
+.el-input--small .el-input__inner,
+.el-input--medium .el-input__inner {
+  height: var(--btn-height);
+  line-height: var(--btn-height);
+}
+
+// .el-input-number--medium .el-input-number__increase, 
+// .el-input-number--medium .el-input-number__decrease {
+//   height: calc(var(--btn-height) - 2px);
+//   line-height: calc(var(--btn-height) - 2px);
+// }
+
+.el-input--medium .el-input__icon {
+  line-height: var(--btn-height);
+}