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

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

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

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

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