From 8b586412b7c8ac66dc092744e9686d2f54053075 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 9 Oct 2025 14:50:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=87=91=E5=B8=81=E4=BB=A3=E7=90=86?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2):=20UI=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icon/add.png            | Bin 0 -> 1465 bytes
 src/views/CoinSellerSearchView.vue | 179 ++++++++++++++++-------------
 2 files changed, 99 insertions(+), 80 deletions(-)
 create mode 100644 src/assets/icon/add.png

diff --git a/src/assets/icon/add.png b/src/assets/icon/add.png
new file mode 100644
index 0000000000000000000000000000000000000000..36e77d3e8fedf436c024cce3eb8a1eeb6df5744e
GIT binary patch
literal 1465
zcmV;q1xEUbP)<h;3K|Lk000e1NJLTq002k;002k`1^@s6RqeA!00009a7bBm001F4
z001F40Y#QEU;qFB0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1x`ssK~#7F?VP`I
z6*m;dKN4n0Wp`;px}-@`B@K3$2J-;KRcQG00GNiM!R}}bG|*uD0EPxCpn-}%4Hbq5
zz&rq^qC?;8YHZ)xb9AIV+IugvznL@Om9JO(t#ouG9bI5#WMpJyWL`Oj;aLc_6ztbv
zf3~*J{(P8^!S;gf2YVOnRj}Rm=fN0CAPR5^jWA2-2ZeeP>?s-%t5RDaig5+~MUkLb
zo9(|<s3lNsVJ2Zqx{jt*x#BGl{m3m0C(I-}!EVB_>-`8n=wt2%`wi2B4u1uWBj1Gs
z9xaFtnBD1O#%K5dbhLa3zU}wHKI7;J#nyNd2P0h^`K)ZA>2|&7D-gwbh~@!O@Zs;F
zaj2zEmG|L`u!_YOZ~;BKTpxj0!3RiJGzzl?-xy{!*qY(~6z4w_ic~6)RU8h%-oi{m
zk**|uhvJ+rsYj_m&!BfJR)|g8#ZeltyfD_~EHXtZ8O1h&ol(j;)KZ*1499+Z-`^pR
zqCW@wDcB2SkSh@T{WYbWU1~kpR}2sD`KbN>vhX{92m2E2EsW#{6obG;p`7B}#Po?H
zq$bj17`s}IKpV<U8RB2X>_Cy?YQZEY+Uq+oV0F@rPPc`!;t`@UjL|rlNRFEhI~k8z
z1$wRA=oI|sJ`3%?UShMQJQK<&&RHb*0co_Tm43%VoEVXRXl)w@V)cPT`=(H4TAQ-8
zpohXAqA;i61D*fs#5MZ0^XLzSeuHkoldUM#g4l8-l|4tS)sAakOD1uu1K}QOOHB#1
zB3x(dF^vK}@aSR@ZMvhbLZk$eBIasKoR!d8(X#eIO`y2@(8U(!59y_<-AofmnvAl0
z4K)e%gaS$3O!Rk}KugMv=9MSHb#WD-qy^1m>xoEp7ng1{ffh4wG7m^WttilO$ea|e
z=dAP4`EBE1dpVa+iE@S-T$r~`P2LOF#ky&cv{boYV5ciW_Qo`)YM~GxgtE@(vdqOw
zVP$HILz2<(A+jgIH3j-EC=n><Z4D6;?4aUWlqQhm@fTr-v+-JUHj2U-f6nfy6z_;j
zHpdec=;9C9*MRspF1M!PF(6owMrQGOv=$`AJ30H~vxXG!e33p-B9LVtepZp{{!aQp
zi4W2?4QHL~`K2b1^dW5-WR_v;k=%ngebNNdhUs|}NLo332_;NO#X&EH>&zzeToN4u
z>7}Z9jVXbol|zb?lTntU_NF7JJW}`SC6Lz5JX=xMJv;-<HQ_pYh#J#b_U8Eqx+b06
z<7P&M$8_R3n)H-7471{w;gco8<SJ?8<vrBp8|&7yw0TIlFYmR8=DqdIZuMFyGi`iY
zC##!E*?stRwSD-B!#X`s%1v`Pt3X<2D&NuuW{=yD9W(u#DJwrGKZpX+7oF%RqwhF|
z+1c@+-#I6gv1`$3yC+cb57KG=E0ohm&4Nf2XH6+zM@AiUa}=4|$G-iKP)?ElLNh82
zou|lp-GCmSar^lWGAKy{wq)1$O5QGjb>U!<N&`NPOiGqq+10p<pgnvXUQ-F)eTnBp
zv{XA1^R}}Y;wS<u$6O-M$T*&0yohv&F_ohT5sJg6ZCONP1?e0)zbg$a>EoELVi5)?
z%&tF-*MYiqG;h>O6l=G&Jsf?*e0XjSaQ!=`^PWLoKuU+qmfI`v^gMBBJ$+Lf3K9>|
z^v3hVAzK2YQ@-VCty^=F`#&<zV`$Vm)XUsPPCtffO%#UR$vsFN;#fGl-7@M>O_<0~
zUo60uw9;B%u_#I$4XYo2nATTQ#6!A=zm}rwt105?<#_m4%QGAq85tQF89Bl?c&Q6&
T2#0vk00000NkvXXu0mjfGc&Nn

literal 0
HcmV?d00001

diff --git a/src/views/CoinSellerSearchView.vue b/src/views/CoinSellerSearchView.vue
index 04564eb..321bc13 100644
--- a/src/views/CoinSellerSearchView.vue
+++ b/src/views/CoinSellerSearchView.vue
@@ -4,32 +4,45 @@
 
     <div class="content">
       <!-- 搜索框 -->
-      <div class="search-section">
-        <div class="search-box">
-          <span class="search-icon">🔍</span>
+      <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px">
+        <div
+          style="
+            flex: 1;
+            border-radius: 32px;
+            border: 1px solid #fff;
+
+            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+            padding: 0 8px;
+
+            display: flex;
+            align-items: center;
+            height: max-content;
+          "
+        >
+          <img src="../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
           <input
             v-model="searchQuery"
             type="text"
-            placeholder="Please enter the host ID"
-            class="search-input"
-@keyup.enter="handleEnterPress"
+            name=""
+            id=""
+            placeholder="Please enter the host lD"
+            @keyup.enter="handleEnterPress"
             @input="handleInputChange"
+            style="
+              width: 100%;
+              color: rgba(0, 0, 0, 0.4);
+              font-weight: 600;
+              font-size: 14px;
+              outline: none;
+              border: none;
+              background-color: transparent;
+              padding: 10px 8px;
+            "
           />
-          <button
-            v-if="searchQuery"
-            @click="clearSearch"
-            class="clear-btn"
-          >
-            ×
-          </button>
-          <button
-            class="action-btn"
-            :class="{ 'confirm': hasValidSelection }"
-            @click="handleActionButton"
-            :disabled="isSearching"
-          >
-            {{ getActionButtonText() }}
-          </button>
+          <button v-if="searchQuery" @click="clearSearch" class="clear-btn">×</button>
+        </div>
+        <div style="font-weight: 600" @click="handleActionButton" :disabled="isSearching">
+          {{ getActionButtonText() }}
         </div>
       </div>
 
@@ -39,7 +52,7 @@
           v-for="user in searchResults"
           :key="user.id"
           class="user-item"
-          :class="{ 'selected': selectedUser?.id === user.id }"
+          :class="{ selected: selectedUser?.id === user.id }"
           @click="toggleUserSelection(user)"
         >
           <div class="user-info">
@@ -49,17 +62,21 @@
                 :src="user.userAvatar"
                 :alt="user.name"
                 class="avatar-image"
-                @error="(e) => e.target.style.display = 'none'"
+                @error="(e) => (e.target.style.display = 'none')"
               />
               <span v-if="!user.userAvatar" class="avatar-text">{{ user.name.charAt(0) }}</span>
             </div>
             <div class="user-details">
-              <h4>{{ user.name }}</h4>
-              <p>ID: {{ user.id }}</p>
+              <div style="margin-bottom: 4px; font-size: 16px; font-weight: 700">
+                {{ user.name }}
+              </div>
+              <div style="font-size: 14px; color: rgba(0, 0, 0, 0.4); font-weight: 500">
+                ID: {{ user.account }}
+              </div>
             </div>
           </div>
-          <div class="add-icon">
-            <span>➕</span>
+          <div style="display: flex; justify-content: center; align-items: center">
+            <img src="../assets/icon/add.png" alt="" width="32px" />
           </div>
         </div>
       </div>
@@ -69,20 +86,6 @@
         <div class="loading-spinner"></div>
         <p>Searching...</p>
       </div>
-
-      <!-- 空状态 -->
-      <div v-else-if="searchQuery && !isSearching && searchResults.length === 0" class="empty-state">
-        <div class="empty-icon">🔍</div>
-        <p>No users found</p>
-        <span>Try searching with a different ID</span>
-      </div>
-
-      <!-- 搜索提示 -->
-      <div v-else-if="!searchQuery" class="search-hint">
-        <div class="hint-icon">👤</div>
-        <p>Search for users</p>
-        <span>Enter host ID to find users</span>
-      </div>
     </div>
   </div>
 </template>
@@ -155,13 +158,15 @@ const performSearch = async () => {
 
     if (response && response.status && response.body && response.body.userProfile) {
       const profile = response.body.userProfile
-      searchResults.value = [{
-        id: profile.id,
-        name: profile.userNickname || 'User',
-        userNickname: profile.userNickname,
-        account: profile.account,
-        userAvatar: profile.userAvatar
-      }]
+      searchResults.value = [
+        {
+          id: profile.id,
+          name: profile.userNickname || 'User',
+          userNickname: profile.userNickname,
+          account: profile.account,
+          userAvatar: profile.userAvatar,
+        },
+      ]
     } else {
       searchResults.value = []
     }
@@ -207,7 +212,7 @@ const confirmSelection = () => {
       name: selectedUser.value.name,
       userNickname: selectedUser.value.userNickname,
       account: selectedUser.value.account,
-      userAvatar: selectedUser.value.userAvatar
+      userAvatar: selectedUser.value.userAvatar,
     })
 
     // Go back to previous page
@@ -217,6 +222,16 @@ const confirmSelection = () => {
 </script>
 
 <style scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
+input::placeholder {
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.4);
+}
+
 .coin-seller-search {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
 }
@@ -239,7 +254,7 @@ const confirmSelection = () => {
   border: 1px solid #e5e7eb;
   border-radius: 8px;
   padding: 8px 12px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .search-icon {
@@ -272,7 +287,7 @@ const confirmSelection = () => {
 .action-btn {
   background: none;
   border: none;
-  color: #8B5CF6;
+  color: #8b5cf6;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -281,11 +296,11 @@ const confirmSelection = () => {
 }
 
 .action-btn:active {
-  color: #7C3AED;
+  color: #7c3aed;
 }
 
 .action-btn.confirm {
-  background-color: #8B5CF6;
+  background-color: #8b5cf6;
   color: white;
   border-radius: 6px;
   padding: 6px 12px;
@@ -307,7 +322,7 @@ const confirmSelection = () => {
   background-color: white;
   padding: 16px;
   border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
   cursor: pointer;
   transition: all 0.2s;
   display: flex;
@@ -320,12 +335,12 @@ const confirmSelection = () => {
 }
 
 .user-item.selected {
-  border: 2px solid #8B5CF6;
-  background-color: #F3F4F6;
+  border: 2px solid #8b5cf6;
+  background-color: #f3f4f6;
 }
 
-.user-item.selected .add-icon {
-  color: #8B5CF6;
+.user-item.selected {
+  color: #8b5cf6;
   font-weight: bold;
 }
 
@@ -339,7 +354,7 @@ const confirmSelection = () => {
   width: 50px;
   height: 50px;
   border-radius: 25px;
-  background-color: #F59E0B;
+  background-color: #f59e0b;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -364,24 +379,6 @@ const confirmSelection = () => {
   font-weight: 600;
 }
 
-.user-details h4 {
-  margin: 0 0 4px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.user-details p {
-  margin: 0;
-  font-size: 14px;
-  color: #666;
-}
-
-.add-icon {
-  color: #10B981;
-  font-size: 20px;
-}
-
 /* 加载状态 */
 .loading-state {
   display: flex;
@@ -396,15 +393,19 @@ const confirmSelection = () => {
   width: 32px;
   height: 32px;
   border: 3px solid #f3f3f3;
-  border-top: 3px solid #F59E0B;
+  border-top: 3px solid #f59e0b;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-bottom: 16px;
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .loading-state p {
@@ -465,4 +466,22 @@ const confirmSelection = () => {
   font-size: 14px;
   color: #9ca3af;
 }
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
 </style>