From 3c3ce44c45488e5dafa000af526acc48ee8a9cc2 Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Sat, 22 Mar 2025 16:02:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=88=86=E4=BA=AB?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E7=9A=84=E5=B1=95=E7=A4=BA=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/APP/ShareQrCodeCard.vue | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/APP/ShareQrCodeCard.vue b/src/components/APP/ShareQrCodeCard.vue
index 9f375ad..faf73a8 100644
--- a/src/components/APP/ShareQrCodeCard.vue
+++ b/src/components/APP/ShareQrCodeCard.vue
@@ -6,12 +6,12 @@
           <!-- <n-text>扫描下方二维码访问不同设备上的应用</n-text>
           <n-divider /> -->
           <n-spin :show="loading">
-            <n-grid :cols="2" :x-gap="16" :y-gap="16">
-              <n-grid-item v-for="(item, index) in shareLinks" :key="index">
+            <div class="grid-container">
+              <div v-for="(item, index) in shareLinks" :key="index" class="grid-item">
                 <n-card embedded class="qrcode-card">
                   <template #header>
                     <div class="card-header bg-zinc-100 p-3 rounded-md">
-                      <n-text>{{ item.title }}</n-text>
+                      <n-text>{{ item.title.split('(')[0] }}</n-text>
                       <n-tooltip trigger="hover" placement="top">
                         <template #trigger>
                           <n-button quaternary circle size="small" @click="copyUrl(item.url)">
@@ -36,8 +36,8 @@
                     </div>
                   </template>
                 </n-card>
-              </n-grid-item>
-            </n-grid>
+              </div>
+            </div>
           </n-spin>
         </n-space>
       </n-scrollbar>
@@ -114,12 +114,18 @@ const openUrl = (url: string) => {
 
 <style scoped>
 .share-card {
-  min-width: 680px;
-  max-width: 800px;
+  min-width: 280px;
+  max-width: 90vw;
   max-height: 80vh;
   overflow-y: auto;
 }
 
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 8px;
+}
+
 .qrcode-card {
   text-align: center;
 }