提交

web-admin/src/components/business/system-view-dialog/index.vue

@@ -120,7 +120,7 @@
       /** 弹窗宽度，默认 720px */
       width?: string
       /** 字段栅格列数，默认 2 */
-      gridColumns?: 2 | 3
+      gridColumns?: 2 | 3 | 4
       /** 挂到 body，用于嵌套在其它弹窗内时叠层展示 */
       appendToBody?: boolean
       /** 遮罩类名（可配合全局样式提高 z-index） */
@@ -240,6 +240,10 @@
     &--cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
+
+    &--cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
   }
 
   .view-kv {
@@ -301,15 +305,23 @@
     margin-top: 12px;
   }
 
+  @media (max-width: 1100px) {
+    .view-kv-grid--cols-4 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
   @media (max-width: 900px) {
-    .view-kv-grid--cols-3 {
+    .view-kv-grid--cols-3,
+    .view-kv-grid--cols-4 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
 
   @media (max-width: 640px) {
     .view-kv-grid,
-    .view-kv-grid--cols-3 {
+    .view-kv-grid--cols-3,
+    .view-kv-grid--cols-4 {
       grid-template-columns: 1fr;
     }