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

---
 src/views/Invitation/inviteAgency.vue   |  81 ++++++++++-------
 src/views/Invitation/inviteBD.vue       | 110 +++++++++++++++---------
 src/views/Invitation/inviteBDLeader.vue | 106 ++++++++++++++---------
 3 files changed, 187 insertions(+), 110 deletions(-)

diff --git a/src/views/Invitation/inviteAgency.vue b/src/views/Invitation/inviteAgency.vue
index 735efbc..b4313c8 100644
--- a/src/views/Invitation/inviteAgency.vue
+++ b/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="
-              background: none;
-              border: none;
-              font-size: 18px;
-              color: #9ca3af;
-              cursor: pointer;
-              padding: 0 8px;
-            "
+            style="background: none; border: none; 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;
-                  aspect-ratio: 1/1;
+                  width: 3em;
+
                   display: flex;
                   align-items: center;
                   justify-content: center;
-                  margin-right: 12px;
                 "
               >
                 <img
                   :src="user.userProfile.userAvatar || ''"
-                  :alt="user.userProfile.userNickname"
-                  style="
-                    display: block;
-                    object-fit: cover;
-                    width: 100%;
-                    aspect-ratio: 1/1;
-                    border-radius: 50%;
-                  "
+                  style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%"
+                  alt=""
                   @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;
diff --git a/src/views/Invitation/inviteBD.vue b/src/views/Invitation/inviteBD.vue
index 3bcc99d..4d0ca55 100644
--- a/src/views/Invitation/inviteBD.vue
+++ b/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="
-              background: none;
-              border: none;
-              font-size: 18px;
-              color: #9ca3af;
-              cursor: pointer;
-              padding: 0 8px;
-            "
+            style="background: none; border: none; 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;
-                  aspect-ratio: 1/1;
-                  border-radius: 25px;
-                  background-color: #f59e0b;
+                  width: 3em;
+
                   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"
-                  :alt="user.userProfile.userNickname"
-                  style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 25px"
-                  @error="(e) => (e.target.style.display = 'none')"
+                  :src="user.userProfile.userAvatar || ''"
+                  style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%"
+                  alt=""
+                  @error="defaultAvatarUrl"
                 />
-                <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;
diff --git a/src/views/Invitation/inviteBDLeader.vue b/src/views/Invitation/inviteBDLeader.vue
index e181f43..4913202 100644
--- a/src/views/Invitation/inviteBDLeader.vue
+++ b/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="
-              background: none;
-              border: none;
-              font-size: 18px;
-              color: #9ca3af;
-              cursor: pointer;
-              padding: 0 8px;
-            "
+            style="background: none; border: none; 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;
-                  aspect-ratio: 1/1;
-                  border-radius: 25px;
-                  background-color: #f59e0b;
+                  width: 3em;
+
                   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"
-                  :alt="user.userProfile.userNickname"
-                  style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 25px"
-                  @error="(e) => (e.target.style.display = 'none')"
+                  :src="user.userProfile.userAvatar || ''"
+                  style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%"
+                  alt=""
+                  @error="defaultAvatarUrl"
                 />
-                <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;