From 68b5b730bd7e8587a2c4a847c3a1d5300b674d65 Mon Sep 17 00:00:00 2001
From: Cat Tom <linweijie2015@gmail.com>
Date: Wed, 26 Mar 2025 03:18:08 +0800
Subject: [PATCH] feat: enhance WechatModal component functionality

---
 src/components/WechatModal.vue | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/WechatModal.vue b/src/components/WechatModal.vue
index 67c989f..181f8a6 100644
--- a/src/components/WechatModal.vue
+++ b/src/components/WechatModal.vue
@@ -216,7 +216,7 @@ onUnmounted(() => {
 }
 
 .wechat-modal-container {
-  width: min(320px, 90vw);
+  width: min(420px, 90vw);
   background-color: var(--v-theme-surface);
   border-radius: 12px;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
@@ -269,13 +269,13 @@ onUnmounted(() => {
   display: inline-block;
   margin-bottom: 16px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-  min-width: 200px;
-  min-height: 200px;
+  min-width: 240px;
+  min-height: 240px;
 }
 
 .qr-code-image {
-  width: 200px;
-  height: 200px;
+  width: 240px;
+  height: 240px;
   object-fit: contain;
   display: block;
   transition: opacity 0.3s ease;
@@ -378,6 +378,22 @@ onUnmounted(() => {
   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
 }
 
+/* 响应式布局 */
+@media (min-width: 360px) {
+  .wechat-modal-container {
+    width: min(420px, 90vw);
+  }
+  .qr-code-wrapper {
+    min-width: 280px;
+    min-height: 280px;
+  }
+  .qr-code-image {
+    width: 100%;
+    height: auto;
+    max-width: 280px;
+  }
+}
+
 /* 减少运动偏好设置 */
 @media (prefers-reduced-motion: reduce) {
   .wechat-modal-container,