From 5200af892d83c723338a29139d0316b7c1371beb Mon Sep 17 00:00:00 2001
From: tianfeng <769204422@qq.com>
Date: Tue, 26 Aug 2025 10:20:42 +0000
Subject: [PATCH] =?UTF-8?q?searchPayee=20=E6=90=9C=E7=B4=A2=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/SearchPayeeView.vue | 63 +++++++++++++++++++++++++++++++++--
 1 file changed, 61 insertions(+), 2 deletions(-)

diff --git a/src/views/SearchPayeeView.vue b/src/views/SearchPayeeView.vue
index 6fd81b0..fc8cd00 100644
--- a/src/views/SearchPayeeView.vue
+++ b/src/views/SearchPayeeView.vue
@@ -401,6 +401,10 @@ onMounted(() => {
   border-radius: 12px;
   padding: 4px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  gap: 4px; /* 添加元素间距 */
 }
 
 .search-input {
@@ -410,6 +414,7 @@ onMounted(() => {
   font-size: 16px;
   background: transparent;
   outline: none;
+  min-width: 0; /* 防止flex item超出容器 */
 }
 
 .search-input::placeholder {
@@ -423,18 +428,20 @@ onMounted(() => {
   color: #999;
   font-size: 18px;
   cursor: pointer;
-  margin-right: 4px;
+  flex-shrink: 0;
 }
 
 .search-btn {
   background-color: #8B5CF6;
   color: white;
   border: none;
-  padding: 10px 20px;
+  padding: 10px 16px;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
+  flex-shrink: 0; /* 防止按钮被压缩 */
+  white-space: nowrap; /* 防止文本换行 */
 }
 
 .search-btn:active {
@@ -601,4 +608,56 @@ onMounted(() => {
   color: #666;
   font-size: 14px;
 }
+
+/* 响应式设计 */
+@media (max-width: 480px) {
+  .search-box {
+    padding: 3px;
+    gap: 4px;
+  }
+
+  .search-input {
+    padding: 10px 12px;
+    font-size: 14px;
+  }
+
+  .search-btn {
+    padding: 10px 12px;
+    font-size: 13px;
+    min-width: 60px;
+  }
+
+  .clear-btn {
+    padding: 6px;
+    font-size: 16px;
+  }
+
+  .type-btn {
+    padding: 5px 10px;
+    font-size: 11px;
+  }
+
+  .user-item {
+    padding: 12px;
+  }
+
+  .user-avatar {
+    width: 44px;
+    height: 44px;
+    font-size: 16px;
+  }
+
+  .user-details h4 {
+    font-size: 15px;
+  }
+
+  .user-details p {
+    font-size: 13px;
+  }
+
+  .add-btn {
+    padding: 6px 12px;
+    font-size: 13px;
+  }
+}
 </style>