From d664d74f026b09c7c919325c9cb16be7e43f9b7c Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Fri, 28 Nov 2025 16:43:46 +0800
Subject: [PATCH] =?UTF-8?q?style(=E6=8B=9B=E5=8B=9F=E9=87=91=E5=B8=81?=
 =?UTF-8?q?=E4=BB=A3=E7=90=86=E9=A1=B5=E9=9D=A2):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B0=E8=BF=87=E9=95=BF=E6=8C=A4=E5=8E=8B=E5=85=B6?=
 =?UTF-8?q?=E4=BB=96=E5=86=85=E5=AE=B9=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/RechargeAgency/Recruit.vue | 51 +++++++++++++++++++++++-----
 1 file changed, 43 insertions(+), 8 deletions(-)

diff --git a/src/views/RechargeAgency/Recruit.vue b/src/views/RechargeAgency/Recruit.vue
index 1f31048..6a76e94 100644
--- a/src/views/RechargeAgency/Recruit.vue
+++ b/src/views/RechargeAgency/Recruit.vue
@@ -23,10 +23,10 @@
     >
       <!-- 头部 -->
       <div style="display: flex; gap: 4px; align-items: flex-end; margin: 0 12px 12px">
-        <div style="font-size: 0.7em; font-weight: 700">Want To Become A Recharge Agency?</div>
+        <div style="font-size: 0.8em; font-weight: 700">Want To Become A Recharge Agency?</div>
         <div
           style="
-            font-size: 0.7em;
+            font-size: 0.9em;
             color: #ff3e13;
             font-weight: 700;
             border-bottom: 1px solid #ff3e13;
@@ -56,11 +56,20 @@
       >
         <!-- 基本信息 -->
         <div style="display: flex; gap: 4px">
-          <div style="width: 15%; display: flex; align-items: center">
+          <!-- 头像 -->
+          <div
+            style="
+              width: 15%;
+              min-width: 0;
+              align-self: stretch;
+
+              display: flex;
+              align-items: center;
+            "
+          >
             <img
               :src="FreightAgency.userBaseInfo.userAvatar"
               alt=""
-              @error="defaultAvatarUrl"
               style="
                 display: block;
                 width: 100%;
@@ -68,22 +77,44 @@
                 aspect-ratio: 1/1;
                 object-fit: cover;
               "
+              @error="defaultAvatarUrl"
             />
           </div>
+
+          <!-- 身份信息 -->
           <div
             style="
-              width: 80%;
+              flex: 1;
+              min-width: 0;
+              align-self: stretch;
+
               display: flex;
               flex-direction: column;
               justify-content: space-around;
               gap: 4px;
             "
           >
+            <!-- 基本信息 -->
             <div style="display: flex; align-items: center; gap: 4px">
+              <!-- 国家 -->
               <img :src="FreightAgency.ownNationalFlag" alt="" width="8%" style="display: block" />
-              <div style="font-weight: 700">{{ FreightAgency.userBaseInfo.userNickname }}</div>
+              <!-- 用户名 -->
+              <div
+                style="
+                  font-weight: 700;
+
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                "
+              >
+                {{ FreightAgency.userBaseInfo.userNickname }}
+              </div>
             </div>
+
+            <!-- 身份 -->
             <div style="display: flex; align-items: center; gap: 4px">
+              <!-- 账号 -->
               <div style="position: relative; width: 30%">
                 <img :src="images.idBg" alt="" width="100%" style="display: block" />
                 <div
@@ -126,6 +157,8 @@
                   />
                 </div>
               </div>
+
+              <!-- 身份标识 -->
               <img
                 src="../../assets/icon/identity/coinSeller.png"
                 alt=""
@@ -135,6 +168,7 @@
             </div>
           </div>
         </div>
+
         <!-- 代理信息 -->
         <div>
           <!-- 财力展示 -->
@@ -179,6 +213,7 @@
             {{ FreightAgency.contactInfo || '' }}
           </div>
         </div>
+
         <!-- 按钮 -->
         <div style="display: flex; justify-content: space-between">
           <!-- 关注按钮 -->
@@ -545,13 +580,13 @@ onMounted(() => {
 
 @media screen and (max-width: 360px) {
   * {
-    font-size: 12px;
+    font-size: 10px;
   }
 }
 
 @media screen and (min-width: 360px) {
   * {
-    font-size: 16px;
+    font-size: 12px;
   }
 }