style(招募金币代理页面): 修复名称过长挤压其他内容的bug

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;
   }
 }