style(邀请页面): 修复名称过长挤压其他内容的问题

src/views/Invitation/inviteAgency.vue

@@ -26,7 +26,12 @@
             height: max-content;
           "
         >
-          <img src="../../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
+          <img
+            v-smart-img
+            src="../../assets/icon/search.png"
+            alt=""
+            style="display: block; width: 2em; aspect-ratio: 1/1; opacity: 0.6"
+          />
           <input
             v-model="searchQuery"
             type="text"
@@ -39,24 +44,16 @@
               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;
+              padding: 8px;
             "
           />
           <button
             v-if="searchQuery"
             @click="clearSearch"
-            style="
+            style="background: none; border: none; color: #9ca3af; cursor: pointer; padding: 0 8px"
-              background: none;
-              border: none;
-              font-size: 18px;
-              color: #9ca3af;
-              cursor: pointer;
-              padding: 0 8px;
-            "
           >
             ×
           </button>
@@ -126,39 +123,47 @@
               {{ t('success') }}
             </div>
           </div>
-          <!-- 用户信息 -->
+          <!-- 标题 -->
           <div style="font-weight: 600">{{ t('information') }}:</div>
-          <div style="display: flex; align-items: center; justify-content: space-between">
+          <!-- 用户信息 -->
-            <div style="display: flex; align-items: center; flex: 1; min-width: 0">
+          <div style="display: flex; align-items: center; justify-content: space-between; gap: 4px">
+            <!-- 用户信息 -->
+            <div
+              style="
+                flex: 1;
+                min-width: 0;
+                align-self: stretch;
+
+                display: flex;
+                align-items: center;
+                gap: 4px;
+              "
+            >
+              <!-- 头像 -->
               <div
                 style="
-                  width: 50px;
+                  width: 3em;
-                  aspect-ratio: 1/1;
+
                   display: flex;
                   align-items: center;
                   justify-content: center;
-                  margin-right: 12px;
                 "
               >
                 <img
                   :src="user.userProfile.userAvatar || ''"
-                  :alt="user.userProfile.userNickname"
+                  style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%"
-                  style="
+                  alt=""
-                    display: block;
-                    object-fit: cover;
-                    width: 100%;
-                    aspect-ratio: 1/1;
-                    border-radius: 50%;
-                  "
                   @error="defaultAvatarUrl"
                 />
               </div>
-              <div style="min-width: 0; flex: 1">
+
+              <!-- 基本信息 -->
+              <div style="flex: 1; min-width: 0; align-self: stretch">
                 <div
                   style="
                     margin-bottom: 4px;
                     font-weight: 700;
-                    color: #333;
+
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;
@@ -171,7 +176,19 @@
                 </div>
               </div>
             </div>
-            <div style="display: flex; justify-content: center; align-items: center">
+
+            <!-- 取消邀请按钮 -->
+            <div
+              style="
+                width: auto;
+                min-width: 0;
+                align-self: stretch;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              "
+            >
               <div
                 v-if="user.status == 0"
                 style="
@@ -356,7 +373,6 @@ onMounted(() => {
 
 input::placeholder {
   font-weight: bold;
-  font-size: 0.7em;
   color: rgba(0, 0, 0, 0.4);
 }
 
@@ -366,7 +382,6 @@ input::placeholder {
   background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
   color: white;
   border: none;
-  font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
@@ -409,6 +424,12 @@ input::placeholder {
   }
 }
 
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+
 /* RTL支持 */
 [dir='rtl'] .avatar {
   margin-right: 0;

src/views/Invitation/inviteBD.vue

@@ -26,7 +26,12 @@
             height: max-content;
           "
         >
-          <img src="../../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
+          <img
+            v-smart-img
+            src="../../assets/icon/search.png"
+            alt=""
+            style="display: block; width: 2em; aspect-ratio: 1/1; opacity: 0.6"
+          />
           <input
             v-model="searchQuery"
             type="text"
@@ -39,24 +44,16 @@
               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;
+              padding: 8px;
             "
           />
           <button
             v-if="searchQuery"
             @click="clearSearch"
-            style="
+            style="background: none; border: none; color: #9ca3af; cursor: pointer; padding: 0 8px"
-              background: none;
-              border: none;
-              font-size: 18px;
-              color: #9ca3af;
-              cursor: pointer;
-              padding: 0 8px;
-            "
           >
             ×
           </button>
@@ -126,50 +123,72 @@
               {{ t('success') }}
             </div>
           </div>
-          <!-- 用户信息 -->
+          <!-- 标题 -->
           <div style="font-weight: 600">{{ t('information') }}:</div>
-          <div style="display: flex; align-items: center; justify-content: space-between">
+          <!-- 用户信息 -->
-            <div style="display: flex; align-items: center; flex: 1">
+          <div style="display: flex; align-items: center; justify-content: space-between; gap: 4px">
+            <!-- 用户信息 -->
+            <div
+              style="
+                flex: 1;
+                min-width: 0;
+                align-self: stretch;
+
+                display: flex;
+                align-items: center;
+                gap: 4px;
+              "
+            >
+              <!-- 头像 -->
               <div
                 style="
-                  width: 50px;
+                  width: 3em;
-                  aspect-ratio: 1/1;
+
-                  border-radius: 25px;
-                  background-color: #f59e0b;
                   display: flex;
                   align-items: center;
                   justify-content: center;
-                  color: white;
-                  font-size: 18px;
-                  font-weight: 600;
-                  margin-right: 12px;
-                  overflow: hidden;
-                  position: relative;
                 "
               >
                 <img
-                  v-if="user.userProfile.userAvatar"
+                  :src="user.userProfile.userAvatar || ''"
-                  :src="user.userProfile.userAvatar"
+                  style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%"
-                  :alt="user.userProfile.userNickname"
+                  alt=""
-                  style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 25px"
+                  @error="defaultAvatarUrl"
-                  @error="(e) => (e.target.style.display = 'none')"
                 />
-                <span
-                  v-if="!user.userProfile.userAvatar"
-                  style="color: white; font-size: 18px; font-weight: 600"
-                  >{{ user.userProfile.userNickname.charAt(0) }}</span
-                >
               </div>
-              <div>
+
-                <div style="margin-bottom: 4px; font-size: 16px; font-weight: 700">
+              <!-- 基本信息 -->
+              <div style="flex: 1; min-width: 0; align-self: stretch">
+                <div
+                  style="
+                    margin-bottom: 4px;
+                    font-weight: 700;
+
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  "
+                >
                   {{ user.userProfile.userNickname }}
                 </div>
-                <div style="font-size: 14px; color: rgba(0, 0, 0, 0.4); font-weight: 500">
+                <div style="font-size: 0.9em; color: rgba(0, 0, 0, 0.4); font-weight: 500">
                   ID: {{ user.userProfile.account }}
                 </div>
               </div>
             </div>
-            <div style="display: flex; justify-content: center; align-items: center">
+
+            <!-- 取消邀请按钮 -->
+            <div
+              style="
+                width: auto;
+                min-width: 0;
+                align-self: stretch;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              "
+            >
               <div
                 v-if="user.status == 0"
                 style="
@@ -177,7 +196,6 @@
                   border-radius: 32px;
                   background-color: red;
                   color: white;
-                  font-size: 16px;
                   font-weight: 600;
                   z-index: 5;
                 "
@@ -231,6 +249,12 @@ const showUserList = computed(() => {
   }
 })
 
+const defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.onerror = null //防止循环
+  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
+}
+
 // 清空关键词
 const clearSearch = () => {
   searchQuery.value = ''
@@ -336,7 +360,6 @@ onMounted(() => {
 
 input::placeholder {
   font-weight: bold;
-  font-size: 0.7em;
   color: rgba(0, 0, 0, 0.4);
 }
 
@@ -356,7 +379,6 @@ input::placeholder {
   background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
   color: white;
   border: none;
-  font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
@@ -399,6 +421,12 @@ input::placeholder {
   }
 }
 
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+
 /* RTL支持 */
 [dir='rtl'] .avatar {
   margin-right: 0;

src/views/Invitation/inviteBDLeader.vue

@@ -26,7 +26,12 @@
             height: max-content;
           "
         >
-          <img src="../../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
+          <img
+            v-smart-img
+            src="../../assets/icon/search.png"
+            alt=""
+            style="display: block; width: 2em; aspect-ratio: 1/1; opacity: 0.6"
+          />
           <input
             v-model="searchQuery"
             type="text"
@@ -39,24 +44,16 @@
               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;
+              padding: 8px;
             "
           />
           <button
             v-if="searchQuery"
             @click="clearSearch"
-            style="
+            style="background: none; border: none; color: #9ca3af; cursor: pointer; padding: 0 8px"
-              background: none;
-              border: none;
-              font-size: 18px;
-              color: #9ca3af;
-              cursor: pointer;
-              padding: 0 8px;
-            "
           >
             ×
           </button>
@@ -126,50 +123,71 @@
               {{ t('success') }}
             </div>
           </div>
-          <!-- 用户信息 -->
+          <!-- 标题 -->
           <div style="font-weight: 600">{{ t('information') }}:</div>
+          <!-- 用户信息 -->
           <div style="display: flex; align-items: center; justify-content: space-between">
-            <div style="display: flex; align-items: center; flex: 1">
+            <!-- 基本信息 -->
+            <div
+              style="
+                flex: 1;
+                min-width: 0;
+                align-self: stretch;
+
+                display: flex;
+                align-items: center;
+                gap: 4px;
+              "
+            >
               <div
                 style="
-                  width: 50px;
+                  width: 3em;
-                  aspect-ratio: 1/1;
+
-                  border-radius: 25px;
-                  background-color: #f59e0b;
                   display: flex;
                   align-items: center;
                   justify-content: center;
-                  color: white;
-                  font-size: 18px;
-                  font-weight: 600;
-                  margin-right: 12px;
-                  overflow: hidden;
-                  position: relative;
                 "
               >
                 <img
-                  v-if="user.userProfile.userAvatar"
+                  :src="user.userProfile.userAvatar || ''"
-                  :src="user.userProfile.userAvatar"
+                  style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%"
-                  :alt="user.userProfile.userNickname"
+                  alt=""
-                  style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 25px"
+                  @error="defaultAvatarUrl"
-                  @error="(e) => (e.target.style.display = 'none')"
                 />
-                <span
-                  v-if="!user.userProfile.userAvatar"
-                  style="color: white; font-size: 18px; font-weight: 600"
-                  >{{ user.userProfile.userNickname.charAt(0) }}</span
-                >
               </div>
-              <div>
+
-                <div style="margin-bottom: 4px; font-size: 16px; font-weight: 700">
+              <!-- 基本信息 -->
+              <div style="flex: 1; min-width: 0; align-self: stretch">
+                <div
+                  style="
+                    margin-bottom: 4px;
+                    font-weight: 700;
+
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  "
+                >
                   {{ user.userProfile.userNickname }}
                 </div>
-                <div style="font-size: 14px; color: rgba(0, 0, 0, 0.4); font-weight: 500">
+                <div style="font-size: 0.9em; color: rgba(0, 0, 0, 0.4); font-weight: 500">
                   ID: {{ user.userProfile.account }}
                 </div>
               </div>
             </div>
-            <div style="display: flex; justify-content: center; align-items: center">
+
+            <!-- 取消邀请按钮 -->
+            <div
+              style="
+                width: auto;
+                min-width: 0;
+                align-self: stretch;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              "
+            >
               <div
                 v-if="user.status == 0"
                 style="
@@ -233,6 +251,12 @@ const showUserList = computed(() => {
   }
 })
 
+const defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.onerror = null //防止循环
+  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
+}
+
 // 清空关键词
 const clearSearch = () => {
   searchQuery.value = ''
@@ -338,7 +362,6 @@ onMounted(() => {
 
 input::placeholder {
   font-weight: bold;
-  font-size: 0.7em;
   color: rgba(0, 0, 0, 0.4);
 }
 
@@ -358,7 +381,6 @@ input::placeholder {
   background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
   color: white;
   border: none;
-  font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
@@ -401,6 +423,12 @@ input::placeholder {
   }
 }
 
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+
 /* RTL支持 */
 [dir='rtl'] .avatar {
   margin-right: 0;