hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(BD中心、BDLeader中心): 样式调整

Browse Source
This commit is contained in:
hzj 2025-11-26 14:59:03 +08:00
parent ecd4402479
commit b957d5b862
2 changed files with 268 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/views/BDCenter/index.vue
View File

@ -37,15 +37,8 @@
<!-- 用户信息 --> <!-- 用户信息 -->
<div style="display: flex; align-items: center; gap: 4px"> <div style="display: flex; align-items: center; gap: 4px">
<div <!-- 头像 -->
style=" <div style="width: 3.5em; display: flex; align-items: center; justify-content: center">
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
"
>
<img <img
:src="userInfo.userAvatar || ''" :src="userInfo.userAvatar || ''"
style=" style="
@ -58,29 +51,44 @@
@error="defaultAvatarUrl" @error="defaultAvatarUrl"
/> />
</div> </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=" style="
margin: 0 0 4px 0; margin-bottom: 4px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
" "
> >
{{ userInfo.userNickname || userInfo.name }} {{ userInfo.userNickname || userInfo.name }}
</h3> </div>
<p style="margin: 0; font-size: 0.9em; color: #666"> <div style="margin: 0; font-size: 0.9em; color: #666">
ID: {{ userInfo.id || userInfo.account }} ID: {{ userInfo.id || userInfo.account }}
</p> </div>
</div> </div>
<!-- 按钮 -->
<div style="display: flex; align-items: center" @click="gotoPolicy"> <div style="display: flex; align-items: center" @click="gotoPolicy">
<img src="../../assets/icon/info.png" alt="" style="display: block; width: 20px" /> <img src="../../assets/icon/info.png" alt="" style="display: block; width: 20px" />
</div> </div>
</div> </div>
<!-- 可用收入 --> <!-- 前往收入页面 -->
<div <div
style=" style="
display: flex; display: flex;
@ -148,7 +156,10 @@
gap: 10px; gap: 10px;
" "
> >
<!-- 标题 -->
<div style="font-weight: 700">{{ t('bd') }}</div> <div style="font-weight: 700">{{ t('bd') }}</div>
<!-- 日期 -->
<div style="display: flex; justify-content: space-between; align-items: center"> <div style="display: flex; justify-content: space-between; align-items: center">
<div style="font-weight: 600">{{ BDData.billTitle }}</div> <div style="font-weight: 600">{{ BDData.billTitle }}</div>
<img <img
@ -158,10 +169,15 @@
@click="showHistory = true" @click="showHistory = true"
/> />
</div> </div>
<!-- 总体信息 -->
<div style="display: flex; justify-content: space-between; align-items: center"> <div style="display: flex; justify-content: space-between; align-items: center">
<!-- 总支出 -->
<div style="font-size: 0.8em; font-weight: 600"> <div style="font-size: 0.8em; font-weight: 600">
{{ t('team_recharge') }}: ${{ BDData.totalRecharge }} {{ t('team_recharge') }}: ${{ BDData.totalRecharge }}
</div> </div>
<!-- 总收入 -->
<div style="font-size: 0.8em; font-weight: 600"> <div style="font-size: 0.8em; font-weight: 600">
{{ t('total_team_salary') }}: ${{ BDData.totalSalary }} {{ t('total_team_salary') }}: ${{ BDData.totalSalary }}
</div> </div>
@ -172,20 +188,20 @@
v-for="BDInfo in BDData.memberBillList" v-for="BDInfo in BDData.memberBillList"
style=" style="
background-color: white; background-color: white;
padding: 16px; padding: 10px 16px;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 4px;
" "
> >
<!-- 用户信息 --> <!-- 头像 -->
<div <div
style=" style="
position: relative; width: 3.5em;
width: 2em;
display: flex; display: flex;
align-items: center; align-items: center;
@ -205,7 +221,19 @@
@error="defaultAvatarUrl" @error="defaultAvatarUrl"
/> />
</div> </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 <div
style=" style="
font-weight: 700; font-weight: 700;
@ -221,8 +249,17 @@
ID: {{ BDInfo.agentAccount }} ID: {{ BDInfo.agentAccount }}
</div> </div>
</div> </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"> <div style="font-size: 0.8em; font-weight: 500">
{{ t('salary') }}: ${{ BDInfo.teamSalaryAmount }} {{ t('salary') }}: ${{ BDInfo.teamSalaryAmount }}
@ -256,6 +293,7 @@
class="overflow-y-auto" class="overflow-y-auto"
@click.stop @click.stop
> >
<!-- 标题 -->
<div style="display: flex; justify-content: center; align-items: center"> <div style="display: flex; justify-content: center; align-items: center">
<div style="margin: 0; font-size: 18px; font-weight: 600; color: #333"> <div style="margin: 0; font-size: 18px; font-weight: 600; color: #333">
{{ t('bd_salary') }} {{ t('bd_salary') }}
@ -385,34 +423,41 @@
class="overflow-y-auto" class="overflow-y-auto"
@click.stop @click.stop
> >
<!-- 日期 -->
<div style="font-weight: 600">{{ BDSalaryMore.period }}</div> <div style="font-weight: 600">{{ BDSalaryMore.period }}</div>
<!-- 总体信息 -->
<div style="display: flex; justify-content: space-between; align-items: center"> <div style="display: flex; justify-content: space-between; align-items: center">
<!-- 总支出 -->
<div style="font-size: 0.7em; font-weight: 600"> <div style="font-size: 0.7em; font-weight: 600">
{{ t('team_recharge') }}: ${{ BDSalaryMore.teamTotalRecharge }} {{ t('team_recharge') }}: ${{ BDSalaryMore.teamTotalRecharge }}
</div> </div>
<!-- 总收入 -->
<div style="font-size: 0.7em; font-weight: 600"> <div style="font-size: 0.7em; font-weight: 600">
{{ t('total_team_salary') }}: ${{ BDSalaryMore.teamTotalSalary }} {{ t('total_team_salary') }}: ${{ BDSalaryMore.teamTotalSalary }}
</div> </div>
</div> </div>
<!-- 代理列表 -->
<div <div
v-for="member in BDSalaryMore.memberDetails" v-for="member in BDSalaryMore.memberDetails"
style=" style="
background-color: white; background-color: white;
padding: 16px; padding: 10px 16px;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-around;
gap: 4px;
" "
> >
<!-- 用户信息 --> <!-- 头像 -->
<div <div
style=" style="
position: relative; width: 3.5em;
width: 2em;
display: flex; display: flex;
align-items: center; align-items: center;
@ -432,7 +477,19 @@
@error="defaultAvatarUrl" @error="defaultAvatarUrl"
/> />
</div> </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 <div
style=" style="
font-weight: 700; font-weight: 700;
@ -448,9 +505,14 @@
ID: {{ member.account }} ID: {{ member.account }}
</div> </div>
</div> </div>
<!-- 关键信息 -->
<div <div
style=" style="
width: 40%; width: auto;
min-width: 0;
align-self: stretch;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;

228
src/views/BDLeaderCenter/index.vue
View File

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