diff --git a/src/views/Wallet/Transfer/SearchPayee.vue b/src/views/Wallet/Transfer/SearchPayee.vue index 051a777..26ec82b 100644 --- a/src/views/Wallet/Transfer/SearchPayee.vue +++ b/src/views/Wallet/Transfer/SearchPayee.vue @@ -26,7 +26,7 @@ padding: 4px 12px; " > - + @@ -87,11 +85,13 @@ " >
+
-
-

{{ user.name }}

-
-

ID

-

:

-

{{ user.account || user.id }}

+
+
+ {{ user.name }} +
+
+ {{ t('user_id_prefix') }} {{ user.account || user.id }}
- + + +
-
+ + +
{}) font-family: 'SF Pro Text'; } -.search-payee { - font-family: -apple-system, BlinkMacSystemFont, sans-serif; -} - .content { padding: 16px; position: relative; z-index: 2; } -/* 用户类型选择器 */ -.user-type-selector { - margin-bottom: 12px; -} - -.user-type-selector label { - display: block; - font-size: 14px; - font-weight: 600; - color: #333; - margin-bottom: 8px; -} - -.type-buttons { - display: flex; - gap: 8px; - flex-wrap: wrap; -} - -.type-btn { - padding: 6px 12px; - border: 1px solid #ddd; - border-radius: 16px; - background-color: white; - color: #666; - font-size: 12px; - font-weight: 500; - cursor: pointer; - transition: all 0.2s; -} - -.type-btn.active { - background-color: #8b5cf6; - color: white; - border-color: #8b5cf6; -} - -.type-btn:active { - transform: scale(0.98); -} - -.search-input { - font-size: 16px; -} - .search-input::placeholder { color: #999; } -.search-btn { - font-size: 16px; -} - -.user-details h4 { - font-size: 16px; - font-weight: 700; - margin-bottom: 4px; - - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.user-details p { - font-size: 14px; - font-weight: 500; - color: rgba(0, 0, 0, 0.4); -} - -.add-btn { - background-color: transparent; - color: rgba(0, 0, 0, 0.4); - border: 1px solid #e6e6e6; - border-radius: 12px; - - font-size: 14px; - font-weight: 500; - padding: 2px 8px; - cursor: pointer; -} - -/* 空状态和提示 */ -.empty-state, -.search-hint { - text-align: center; - padding: 40px 20px; - color: #666; -} - -.empty-icon, -.hint-icon { - font-size: 48px; - margin-bottom: 16px; -} - -.empty-state p, -.search-hint p { - font-size: 18px; - font-weight: 600; - margin: 0 0 8px 0; - color: #333; -} - -.empty-state span, -.search-hint span { - font-size: 14px; - color: #666; -} - /* 加载状态 */ .loading-state { text-align: center; @@ -484,44 +414,24 @@ onMounted(() => {}) .loading-state p { margin: 0; color: #666; - font-size: 14px; + font-size: 0.9em; } -/* 响应式设计 */ -@media (max-width: 480px) { - .search-input { - font-size: 14px; - } - - .search-btn { - font-size: 13px; - } - - .type-btn { - padding: 5px 10px; - font-size: 11px; - } - - .user-details h4 { - font-size: 15px; - } - - .user-details p { - font-size: 13px; - } - - .add-btn { - font-size: 13px; +@media screen and (max-width: 360px) { + * { + font-size: 10px; } } -/* RTL支持 */ -[dir='rtl'] .user-details { - text-align: right; +@media screen and (min-width: 360px) { + * { + font-size: 12px; + } } -[dir='rtl'] .add-btn { - margin-left: 0; - margin-right: 12px; +@media screen and (min-width: 768px) { + * { + font-size: 24px; + } }