From c2f563677e344690dd227e149e99f96831c743c5 Mon Sep 17 00:00:00 2001
From: sijinhui <sijinhui@qq.com>
Date: Tue, 14 May 2024 17:56:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/ui-lib.module.scss | 14 ++++++++++++++
 app/components/ui-lib.tsx         | 25 ++++++++++++++-----------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss
index 83c02f92a..d114882eb 100644
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -312,3 +312,17 @@
     }
   }
 }
+
+
+.modal-mask {
+  z-index: 999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: var(--full-height);
+  width: 100vw;
+  background-color: rgba(0, 0, 0, .5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index 838b15344..c9e43b036 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -501,18 +501,21 @@ export function ModalSelector<T>(props: {
   console.log("-----", props);
 
   return (
-    <div className={styles["selector"]}>
+    <div className={styles["modal-mask"]}>
       <Modal title="test" onClose={() => props.onClose?.()}>
-        <AntList grid={{ gutter: 16, column: 4 }}>
-          <Col span={8}>
-            <AntList.Item>
-              <AntCard title="你好">Card</AntCard>
-            </AntList.Item>
-          </Col>
-
-          <AntList.Item>
-            <AntCard title="你好">Card</AntCard>
-          </AntList.Item>
+        <AntList grid={{ gutter: 16, column: 3 }}>
+          <Row gutter={[16, 16]}>
+            <Col span={8}>
+              <AntList.Item>
+                <AntCard title="你好">Card</AntCard>
+              </AntList.Item>
+            </Col>
+            <Col span={8}>
+              <AntList.Item>
+                <AntCard title="你好">Card</AntCard>
+              </AntList.Item>
+            </Col>
+          </Row>
         </AntList>
       </Modal>
     </div>