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

fix(主播中心等页面): 修改名称过长挤压头像的问题

Browse Source
This commit is contained in:
hzj 2025-11-11 11:57:30 +08:00
parent dfa79df531
commit a1afeba9df
3 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/router/index.js
View File

@ -19,7 +19,7 @@ const router = createRouter({
{
path: '/host-center',
name: 'host-center',
component: () => import('../views/HostCenterView.vue'),
component: () => import('../views/Host/HostCenterView.vue'),
meta: { requiresAuth: true },
},
{
@ -73,7 +73,7 @@ const router = createRouter({
{
path: '/host-setting',
name: 'host-setting',
component: () => import('../views/HostSettingView.vue'),
component: () => import('../views/Host/HostSettingView.vue'),
meta: { requiresAuth: true },
},
{

17
src/views/HostCenterView.vue → src/views/Host/HostCenterView.vue
View File

@ -15,7 +15,7 @@
<!-- 身份 -->
<div class="section-title">
{{ t('my_account') }}
<img src="../assets/icon/host.png" alt="" class="title-icon" />
<img src="../../assets/icon/host.png" alt="" class="title-icon" />
</div>
<!-- 用户信息卡片 -->
@ -32,11 +32,13 @@
<span v-else class="avatar-placeholder">{{ getAvatarPlaceholder() }}</span>
</div>
<div class="user-info">
<div class="user-name">{{ userInfo.userNickname || userInfo.name }}</div>
<div class="user-name">
{{ userInfo.userNickname || userInfo.name }}111111111111111111111111
</div>
<div class="user-id">ID: {{ userInfo.id }}</div>
</div>
<button class="edit-btn" @click="goToNotification">
<img src="../assets/icon/edit.png" alt="" class="edit-icon" />
<img src="../../assets/icon/edit.png" alt="" class="edit-icon" />
</button>
</div>
<!-- 我的薪资 -->
@ -120,7 +122,7 @@ import { isInApp } from '@/utils/appBridge.js'
import { getTeamMemberWork } from '@/api/teamBill.js'
import { getUserId } from '@/utils/userStore.js'
import { getUserIdentity } from '@/api/wallet.js'
import { clearSelectedPayee } from '../utils/payeeStore.js'
import { clearSelectedPayee } from '@/utils/payeeStore.js'
import workReportBox from '@/components/HostCenter/workReportBox.vue'
import { setDocumentDirection } from '@/locales/i18n'
@ -271,7 +273,7 @@ onMounted(() => {
width: 100vw;
min-height: 100vh;
background-color: #ffffff;
background-image: url(../assets/images/secondBg.png);
background-image: url(../../assets/images/secondBg.png);
}
.content {
@ -343,6 +345,7 @@ onMounted(() => {
.user-info {
flex: 1;
min-width: 0;
}
.user-name {
@ -350,6 +353,10 @@ onMounted(() => {
font-size: 16px;
font-weight: 600;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.user-id {

17
src/views/HostSettingView.vue → src/views/Host/HostSettingView.vue
View File

@ -18,7 +18,7 @@
src="/src/assets/icon/agency.png"
alt=""
height="25px"
style="display: block; margin-left: 8px"
style="display: block; flex-shrink: 0; margin-left: 8px"
/>
</div>
@ -30,10 +30,11 @@
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
display: flex;
justify-content: space-between;
gap: 4px;
"
>
<!-- 用户信息 -->
<div style="display: flex; align-items: center">
<div style="display: flex; align-items: center; min-width: 0">
<img
:src="userInfo.userAvatar || ''"
alt=""
@ -41,8 +42,16 @@
style="aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
@error="defaultAvatarUrl"
/>
<div style="flex: 1; margin-left: 12px">
<div style="margin-bottom: 4px; font-weight: 600">
<div style="flex: 1; min-width: 0; margin-left: 12px">
<div
style="
margin-bottom: 4px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
{{ userInfo.userNickname || '' }}
</div>
<div style="font-size: 0.9em; color: rgba(0, 0, 0, 0.4)">