From b957d5b8623cba32b13bb488722e55deccde7055 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Wed, 26 Nov 2025 14:59:03 +0800
Subject: [PATCH] =?UTF-8?q?style(BD=E4=B8=AD=E5=BF=83=E3=80=81BDLeader?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83):=20=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/BDCenter/index.vue       | 124 ++++++++++++----
 src/views/BDLeaderCenter/index.vue | 228 ++++++++++++++++++++++-------
 2 files changed, 268 insertions(+), 84 deletions(-)

diff --git a/src/views/BDCenter/index.vue b/src/views/BDCenter/index.vue
index 33bfc5f..5c48729 100644
--- a/src/views/BDCenter/index.vue
+++ b/src/views/BDCenter/index.vue
@@ -37,15 +37,8 @@
 
         <!-- 用户信息 -->
         <div style="display: flex; align-items: center; gap: 4px">
-          <div
-            style="
-              width: 40px;
-              height: 40px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-            "
-          >
+          <!-- 头像 -->
+          <div style="width: 3.5em; display: flex; align-items: center; justify-content: center">
             <img
               :src="userInfo.userAvatar || ''"
               style="
@@ -58,29 +51,44 @@
               @error="defaultAvatarUrl"
             />
           </div>
-          <div style="flex: 1; min-width: 0">
-            <h3
+
+          <!-- 基本信息 -->
+          <div
+            style="
+              flex: 1;
+              min-width: 0;
+              align-self: stretch;
+
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+            "
+          >
+            <div
               style="
-                margin: 0 0 4px 0;
+                margin-bottom: 4px;
                 font-weight: 600;
                 color: #333;
+
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
               "
             >
               {{ userInfo.userNickname || userInfo.name }}
-            </h3>
-            <p style="margin: 0; font-size: 0.9em; color: #666">
+            </div>
+            <div style="margin: 0; font-size: 0.9em; color: #666">
               ID: {{ userInfo.id || userInfo.account }}
-            </p>
+            </div>
           </div>
+
+          <!-- 按钮 -->
           <div style="display: flex; align-items: center" @click="gotoPolicy">
             <img src="../../assets/icon/info.png" alt="" style="display: block; width: 20px" />
           </div>
         </div>
 
-        <!-- 可用收入 -->
+        <!-- 前往收入页面 -->
         <div
           style="
             display: flex;
@@ -148,7 +156,10 @@
           gap: 10px;
         "
       >
+        <!-- 标题 -->
         <div style="font-weight: 700">{{ t('bd') }}</div>
+
+        <!-- 日期 -->
         <div style="display: flex; justify-content: space-between; align-items: center">
           <div style="font-weight: 600">{{ BDData.billTitle }}</div>
           <img
@@ -158,10 +169,15 @@
             @click="showHistory = true"
           />
         </div>
+
+        <!-- 总体信息 -->
         <div style="display: flex; justify-content: space-between; align-items: center">
+          <!-- 总支出 -->
           <div style="font-size: 0.8em; font-weight: 600">
             {{ t('team_recharge') }}: ${{ BDData.totalRecharge }}
           </div>
+
+          <!-- 总收入 -->
           <div style="font-size: 0.8em; font-weight: 600">
             {{ t('total_team_salary') }}: ${{ BDData.totalSalary }}
           </div>
@@ -172,20 +188,20 @@
           v-for="BDInfo in BDData.memberBillList"
           style="
             background-color: white;
-            padding: 16px;
+            padding: 10px 16px;
             border-radius: 12px;
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
             display: flex;
             align-items: center;
             justify-content: space-between;
+
+            gap: 4px;
           "
         >
-          <!-- 用户信息 -->
+          <!-- 头像 -->
           <div
             style="
-              position: relative;
-
-              width: 2em;
+              width: 3.5em;
 
               display: flex;
               align-items: center;
@@ -205,7 +221,19 @@
               @error="defaultAvatarUrl"
             />
           </div>
-          <div style="width: calc(60% - 62px); display: flex; flex-direction: column; gap: 4px">
+
+          <!-- 基本信息 -->
+          <div
+            style="
+              flex: 1;
+              min-width: 0;
+              align-self: stretch;
+
+              display: flex;
+              flex-direction: column;
+              gap: 4px;
+            "
+          >
             <div
               style="
                 font-weight: 700;
@@ -221,8 +249,17 @@
               ID: {{ BDInfo.agentAccount }}
             </div>
           </div>
+
           <div
-            style="width: 40%; display: flex; flex-direction: column; justify-content: space-around"
+            style="
+              width: auto;
+              min-width: 0;
+              align-self: stretch;
+
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+            "
           >
             <div style="font-size: 0.8em; font-weight: 500">
               {{ t('salary') }}: ${{ BDInfo.teamSalaryAmount }}
@@ -256,6 +293,7 @@
           class="overflow-y-auto"
           @click.stop
         >
+          <!-- 标题 -->
           <div style="display: flex; justify-content: center; align-items: center">
             <div style="margin: 0; font-size: 18px; font-weight: 600; color: #333">
               {{ t('bd_salary') }}
@@ -385,34 +423,41 @@
           class="overflow-y-auto"
           @click.stop
         >
+          <!-- 日期 -->
           <div style="font-weight: 600">{{ BDSalaryMore.period }}</div>
+
+          <!-- 总体信息 -->
           <div style="display: flex; justify-content: space-between; align-items: center">
+            <!-- 总支出 -->
             <div style="font-size: 0.7em; font-weight: 600">
               {{ t('team_recharge') }}: ${{ BDSalaryMore.teamTotalRecharge }}
             </div>
+
+            <!-- 总收入 -->
             <div style="font-size: 0.7em; font-weight: 600">
               {{ t('total_team_salary') }}: ${{ BDSalaryMore.teamTotalSalary }}
             </div>
           </div>
 
+          <!-- 代理列表 -->
           <div
             v-for="member in BDSalaryMore.memberDetails"
             style="
               background-color: white;
-              padding: 16px;
+              padding: 10px 16px;
               border-radius: 12px;
               box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
               display: flex;
               align-items: center;
-              justify-content: space-between;
+              justify-content: space-around;
+
+              gap: 4px;
             "
           >
-            <!-- 用户信息 -->
+            <!-- 头像 -->
             <div
               style="
-                position: relative;
-
-                width: 2em;
+                width: 3.5em;
 
                 display: flex;
                 align-items: center;
@@ -432,7 +477,19 @@
                 @error="defaultAvatarUrl"
               />
             </div>
-            <div style="width: calc(60% - 62px); display: flex; flex-direction: column; gap: 4px">
+
+            <!-- 基本信息 -->
+            <div
+              style="
+                flex: 1;
+                min-width: 0;
+                align-self: stretch;
+
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+              "
+            >
               <div
                 style="
                   font-weight: 700;
@@ -448,9 +505,14 @@
                 ID: {{ member.account }}
               </div>
             </div>
+
+            <!-- 关键信息 -->
             <div
               style="
-                width: 40%;
+                width: auto;
+                min-width: 0;
+                align-self: stretch;
+
                 display: flex;
                 flex-direction: column;
                 justify-content: space-around;
diff --git a/src/views/BDLeaderCenter/index.vue b/src/views/BDLeaderCenter/index.vue
index c1b56c9..b7517c1 100644
--- a/src/views/BDLeaderCenter/index.vue
+++ b/src/views/BDLeaderCenter/index.vue
@@ -37,15 +37,8 @@
 
         <!-- 用户信息 -->
         <div style="display: flex; align-items: center; gap: 4px">
-          <div
-            style="
-              width: 40px;
-              height: 40px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-            "
-          >
+          <!-- 头像 -->
+          <div style="width: 3.5em; display: flex; align-items: center; justify-content: center">
             <img
               :src="userInfo.userAvatar || ''"
               style="
@@ -58,28 +51,44 @@
               @error="defaultAvatarUrl"
             />
           </div>
-          <div style="flex: 1; min-width: 0">
-            <h3
+
+          <!-- 基本信息 -->
+          <div
+            style="
+              flex: 1;
+              min-width: 0;
+              align-self: stretch;
+
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+            "
+          >
+            <div
               style="
-                margin: 0 0 4px 0;
+                margin-bottom: 4px;
                 font-weight: 600;
                 color: #333;
+
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
               "
             >
               {{ userInfo.userNickname || userInfo.name }}
-            </h3>
-            <p style="margin: 0; font-size: 0.9em; color: #666">
+            </div>
+            <div style="margin: 0; font-size: 0.9em; color: #666">
               ID: {{ userInfo.id || userInfo.account }}
-            </p>
+            </div>
           </div>
+
+          <!-- 按钮 -->
           <div style="display: flex; align-items: center" @click="gotoPolicy">
             <img src="../../assets/icon/info.png" alt="" style="display: block; width: 20px" />
           </div>
         </div>
 
+        <!-- 前往收入页面 -->
         <div
           style="
             display: flex;
@@ -188,6 +197,7 @@
 
         <!-- BD 标签内容 -->
         <div v-if="activeTab === 1">
+          <!-- 日期 -->
           <div style="display: flex; justify-content: space-between; align-items: center">
             <div style="font-weight: 600">{{ BDData.billTitle }}</div>
             <img
@@ -197,6 +207,8 @@
               @click="records('bd')"
             />
           </div>
+
+          <!-- 总体信息 -->
           <div
             style="
               display: flex;
@@ -205,9 +217,12 @@
               margin-bottom: 12px;
             "
           >
+            <!-- 总支出 -->
             <div style="font-size: 0.8em; font-weight: 600">
               {{ t('team_recharge') }}: ${{ BDData.totalRecharge || 0 }}
             </div>
+
+            <!-- 总收入 -->
             <div style="font-size: 0.8em; font-weight: 600">
               {{ t('total_team_salary') }}: ${{ BDData.totalSalary || 0 }}
             </div>
@@ -219,23 +234,19 @@
               v-for="BDInfo in BDData.memberBillList"
               style="
                 background-color: white;
-                padding: 16px;
+                padding: 10px 16px;
                 border-radius: 12px;
                 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                 display: flex;
                 align-items: center;
-                justify-content: space-between;
+                justify-content: space-around;
+
+                gap: 4px;
               "
             >
-              <!-- 用户信息 -->
+              <!-- 头像 -->
               <div
-                style="
-                  position: relative;
-                  width: 2em;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                "
+                style="width: 3.5em; display: flex; align-items: center; justify-content: center"
               >
                 <img
                   :src="BDInfo.agentAvatar || ''"
@@ -250,7 +261,19 @@
                   @error="defaultAvatarUrl"
                 />
               </div>
-              <div style="width: calc(60% - 62px); display: flex; flex-direction: column; gap: 4px">
+
+              <!-- 基本信息 -->
+              <div
+                style="
+                  flex: 1;
+                  min-width: 0;
+                  align-self: stretch;
+
+                  display: flex;
+                  flex-direction: column;
+                  gap: 4px;
+                "
+              >
                 <div
                   style="
                     font-weight: 700;
@@ -266,9 +289,14 @@
                   ID: {{ BDInfo.agentAccount }}
                 </div>
               </div>
+
+              <!-- 关键信息 -->
               <div
                 style="
-                  width: 40%;
+                  width: auto;
+                  min-width: 0;
+                  align-self: stretch;
+
                   display: flex;
                   flex-direction: column;
                   justify-content: space-around;
@@ -290,6 +318,7 @@
 
         <!-- BD Leader 标签内容 -->
         <div v-if="activeTab === 2 && BDLeaderData.billTitle">
+          <!-- 所处时期 -->
           <div style="display: flex; justify-content: space-between; align-items: center">
             <div style="font-weight: 600">{{ BDLeaderData.billTitle }}</div>
             <img
@@ -299,17 +328,16 @@
               @click="records('bdLeader')"
             />
           </div>
+
+          <!-- 总收益 -->
           <div
             style="
               display: flex;
-              justify-content: space-between;
+              justify-content: flex-end;
               align-items: center;
               margin-bottom: 8px;
             "
           >
-            <div style="font-size: 0.8em; font-weight: 600">
-              {{ t('team_recharge') }}: ${{ BDLeaderData.totalRecharge }}
-            </div>
             <div style="font-size: 0.8em; font-weight: 600">
               {{ t('total_team_salary') }}: ${{ BDLeaderData.totalSalary }}
             </div>
@@ -320,20 +348,26 @@
             <div
               v-for="BDInfo in BDLeaderData.memberBillList"
               style="
+                position: relative;
+
                 background-color: white;
                 padding: 16px;
                 border-radius: 12px;
                 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                 display: flex;
                 align-items: center;
-                justify-content: space-between;
+                justify-content: space-around;
+
+                gap: 4px;
               "
             >
-              <!-- 用户信息 -->
+              <!-- 头像 -->
               <div
                 style="
-                  position: relative;
-                  width: 2em;
+                  width: 3.5em;
+                  min-width: 0;
+                  align-self: stretch;
+
                   display: flex;
                   align-items: center;
                   justify-content: center;
@@ -352,7 +386,19 @@
                   @error="defaultAvatarUrl"
                 />
               </div>
-              <div style="width: calc(60% - 62px); display: flex; flex-direction: column; gap: 4px">
+
+              <!-- 基本信息 -->
+              <div
+                style="
+                  flex: 1;
+                  min-width: 0;
+                  align-self: stretch;
+
+                  display: flex;
+                  flex-direction: column;
+                  gap: 4px;
+                "
+              >
                 <div
                   style="
                     font-weight: 700;
@@ -368,9 +414,14 @@
                   ID: {{ BDInfo.agentAccount }}
                 </div>
               </div>
+
+              <!-- 关键信息 -->
               <div
                 style="
-                  width: 40%;
+                  width: auto;
+                  min-width: 0;
+                  align-self: stretch;
+
                   display: flex;
                   flex-direction: column;
                   justify-content: space-around;
@@ -383,6 +434,21 @@
                   {{ t('agencies') }}: {{ BDInfo.teamMemberCount }}
                 </div>
               </div>
+
+              <!-- 更多按钮 -->
+              <div
+                style="
+                  font-size: 0.7em;
+
+                  position: absolute;
+                  bottom: 4%;
+                  right: 4%;
+                  color: #ff4c4c;
+                  font-weight: 500;
+                "
+              >
+                Remove This BD >
+              </div>
             </div>
           </div>
         </div>
@@ -407,6 +473,7 @@
           class="overflow-y-auto"
           @click.stop
         >
+          <!-- 标题 -->
           <div style="display: flex; justify-content: center; align-items: center">
             <div style="margin: 0; font-size: 18px; font-weight: 600; color: #333">
               {{ currentHistoryType === 'bd' ? t('bd_salary') : t('bd_leader_history') }}
@@ -576,28 +643,42 @@
             class="overflow-y-auto"
             @click.stop
           >
+            <!-- 日期 -->
             <div style="font-weight: 600">{{ SalaryMore.period }}</div>
-            <div style="font-size: 0.7em; font-weight: 600">
-              {{ t('team_recharge') }}: ${{ SalaryMore.teamTotalRecharge }},
-              {{ t('total_team_salary') }}: ${{ SalaryMore.teamTotalSalary }}
+
+            <!-- 总体信息 -->
+            <div style="display: flex; justify-content: space-between; align-items: center">
+              <!-- 总支出 -->
+              <div style="font-size: 0.7em; font-weight: 600">
+                {{ t('team_recharge') }}: ${{ SalaryMore.teamTotalRecharge }}
+              </div>
+
+              <!-- 总收入 -->
+              <div style="font-size: 0.7em; font-weight: 600">
+                {{ t('total_team_salary') }}: ${{ SalaryMore.teamTotalSalary }}
+              </div>
             </div>
+
+            <!-- 代理列表 -->
             <div
               v-for="member in SalaryMore.memberDetails"
               style="
                 background-color: white;
-                padding: 16px;
+                padding: 10px 16px;
                 border-radius: 12px;
                 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
+
+                gap: 4px;
               "
             >
-              <!-- 用户信息 -->
+              <!-- 头像 -->
               <div
                 style="
-                  position: relative;
-                  width: 2em;
+                  width: 3.5em;
+
                   display: flex;
                   align-items: center;
                   justify-content: center;
@@ -616,11 +697,23 @@
                   @error="defaultAvatarUrl"
                 />
               </div>
-              <div style="width: calc(60% - 62px); display: flex; flex-direction: column; gap: 4px">
+
+              <!-- 基本信息 -->
+              <div
+                style="
+                  flex: 1;
+                  min-width: 0;
+                  align-self: stretch;
+
+                  display: flex;
+                  flex-direction: column;
+                  gap: 4px;
+                "
+              >
                 <div
                   style="
                     font-weight: 700;
-                    width: 100%;
+
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;
@@ -632,9 +725,14 @@
                   ID: {{ member.account }}
                 </div>
               </div>
+
+              <!-- 关键信息 -->
               <div
                 style="
-                  width: 40%;
+                  width: auto;
+                  min-width: 0;
+                  align-self: stretch;
+
                   display: flex;
                   flex-direction: column;
                   justify-content: space-around;
@@ -668,29 +766,36 @@
             class="overflow-y-auto"
             @click.stop
           >
+            <!-- 日期 -->
             <div style="font-weight: 600">{{ SalaryMore.period }}</div>
+
+            <!-- 总收入 -->
             <div style="font-size: 0.7em; font-weight: 600">
               {{ t('team_salary') }}: ${{ SalaryMore.teamSalary }}, {{ t('bd_number') }}:{{
                 SalaryMore.bdNumber
               }}
             </div>
+
+            <!-- BD列表 -->
             <div
               v-for="member in SalaryMore.memberDetails"
               style="
                 background-color: white;
-                padding: 16px;
+                padding: 10px 16px;
                 border-radius: 12px;
                 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
+
+                gap: 4px;
               "
             >
-              <!-- 用户信息 -->
+              <!-- 头像 -->
               <div
                 style="
-                  position: relative;
-                  width: 2em;
+                  width: 3.5em;
+
                   display: flex;
                   align-items: center;
                   justify-content: center;
@@ -709,7 +814,19 @@
                   @error="defaultAvatarUrl"
                 />
               </div>
-              <div style="width: calc(60% - 62px); display: flex; flex-direction: column; gap: 4px">
+
+              <!-- 基本信息 -->
+              <div
+                style="
+                  flex: 1;
+                  min-width: 0;
+                  align-self: stretch;
+
+                  display: flex;
+                  flex-direction: column;
+                  gap: 4px;
+                "
+              >
                 <div
                   style="
                     font-weight: 700;
@@ -725,9 +842,14 @@
                   ID: {{ member.account }}
                 </div>
               </div>
+
+              <!-- 关键信息 -->
               <div
                 style="
-                  width: 40%;
+                  width: auto;
+                  min-width: 0;
+                  align-self: stretch;
+
                   display: flex;
                   flex-direction: column;
                   justify-content: space-around;