130 lines
3.2 KiB
Vue
130 lines
3.2 KiB
Vue
<template>
|
|
<div class="host-setting gradient-background-circles">
|
|
<!-- 使用与HostCenterView相同的头部组件 -->
|
|
<GeneralHeader
|
|
:showLanguageList="true"
|
|
:title="t('my_agency')"
|
|
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">{{ t('my_agency') }}</div>
|
|
<img
|
|
src="/src/assets/icon/identity/agency.png"
|
|
alt=""
|
|
height="25px"
|
|
style="display: block; margin-left: 10px"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
style="
|
|
background-color: white;
|
|
padding: 16px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
"
|
|
>
|
|
<!-- 用户信息 -->
|
|
<div style="display: flex; align-items: center">
|
|
<img
|
|
:src="userInfo.userAvatar || ''"
|
|
alt=""
|
|
width="50px"
|
|
style="aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
|
|
@error="handleAvatarImageError"
|
|
/>
|
|
<div style="flex: 1; margin-left: 12px">
|
|
<div style="margin-bottom: 4px; font-weight: 600">
|
|
{{ userInfo.userNickname || userInfo.name }}
|
|
</div>
|
|
<div style="font-size: 0.9em; color: rgba(0, 0, 0, 0.4)">
|
|
{{ t('user_id_prefix') }} {{ userInfo.id }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { setDocumentDirection } from '@/locales/i18n'
|
|
import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
|
|
import { handleAvatarImageError } from '@/utils/imageHandler.js'
|
|
|
|
import GeneralHeader from '@/components/GeneralHeader.vue'
|
|
|
|
const { t, locale } = useI18n()
|
|
|
|
// 监听语言变化并设置文档方向
|
|
locale.value && setDocumentDirection(locale.value)
|
|
|
|
const { userInfo } = usePageInitializationWithConfig('AGENCY_CENTER')
|
|
</script>
|
|
|
|
<style scoped>
|
|
* {
|
|
color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.host-setting {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
background-color: #ffffff;
|
|
background-image: url(../assets/images/secondBg.png);
|
|
}
|
|
|
|
.leave-btn {
|
|
background-color: #fff;
|
|
border: 1px solid #e6e6e6;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.9em;
|
|
font-weight: 500;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.leave-btn:active {
|
|
background-color: #00000010;
|
|
}
|
|
|
|
@media screen and (max-width: 360px) {
|
|
* {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 360px) {
|
|
* {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
* {
|
|
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>
|