feat(代理设置页): 使用新的头部组件,对接语言切换功能并调整布局
This commit is contained in:
parent
6fc0540e65
commit
1c9bec1543
@ -1,13 +1,24 @@
|
||||
<template>
|
||||
<div class="host-setting gradient-background-circles">
|
||||
<MobileHeader title="Agency Setting" />
|
||||
<!-- 使用与HostCenterView相同的头部组件 -->
|
||||
<GeneralHeader
|
||||
:title="t('my_agency')"
|
||||
:showLanguageList="true"
|
||||
color="black"
|
||||
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
|
||||
/>
|
||||
|
||||
<div style="padding: 16px; position: relative; z-index: 2">
|
||||
<!-- My Agency 部分 -->
|
||||
<div style="margin-bottom: 20px">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 12px">
|
||||
<div style="font-size: 1.4em; font-weight: 600">My Agency</div>
|
||||
<img src="/src/assets/icon/agency.png" alt="" height="25px" style="display: block" />
|
||||
<div style="font-size: 1.4em; font-weight: 600">{{ t('my_agency') }}</div>
|
||||
<img
|
||||
src="/src/assets/icon/agency.png"
|
||||
alt=""
|
||||
height="25px"
|
||||
style="display: block; margin-left: 10px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@ -29,7 +40,7 @@
|
||||
style="aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
|
||||
@error="defaultAvatarUrl"
|
||||
/>
|
||||
<div style="flex: 1">
|
||||
<div style="flex: 1; margin-left: 12px">
|
||||
<div style="margin-bottom: 4px; font-weight: 600">
|
||||
{{ userInfo.userNickname || userInfo.name }}
|
||||
</div>
|
||||
@ -46,12 +57,15 @@
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import MobileHeader from '../../components/MobileHeader.vue'
|
||||
import { showError } from '@/utils/toast.js'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||
import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
|
||||
const router = useRouter()
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
// 监听语言变化并设置文档方向
|
||||
locale.value && setDocumentDirection(locale.value)
|
||||
|
||||
const defaultAvatarUrl = (e) => {
|
||||
console.log('头像资源出错')
|
||||
@ -70,6 +84,10 @@ const { userInfo } = usePageInitializationWithConfig('AGENCY_CENTER')
|
||||
|
||||
.host-setting {
|
||||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
background-color: #ffffff;
|
||||
background-image: url(../assets/images/secondBg.png);
|
||||
}
|
||||
|
||||
.leave-btn {
|
||||
@ -103,4 +121,15 @@ const { userInfo } = usePageInitializationWithConfig('AGENCY_CENTER')
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* RTL支持 */
|
||||
[dir='rtl'] .agency-info {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
[dir='rtl'] .user-info {
|
||||
margin-left: 0;
|
||||
margin-right: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user