searchPayee 搜索按钮样式优化

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>