【更新】个人中心布局优化

pull/286/head
chen 2025-09-24 18:03:03 +08:00
parent b3f7a1ab07
commit 5d7111629d
1 changed files with 65 additions and 58 deletions

View File

@ -1,64 +1,71 @@
<template> <template>
<a-row :gutter="10"> <div class="h-dvh mb-3">
<a-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7" class="mb-3"> <a-row :gutter="10" class="h-full">
<a-card :bordered="false"> <a-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
<div class="account-center-avatarHolder"> <a-card :bordered="false" class="h-full">
<div class="avatar"> <div class="account-center-avatarHolder">
<a-spin size="small" :spinning="avatarLoading"> <div class="avatar">
<img :src="userInfo.avatar" /> <a-spin size="small" :spinning="avatarLoading">
</a-spin> <img :src="userInfo.avatar" />
<a @click="uploadLogo"> </a-spin>
<div v-if="userInfo" :class="userInfo.avatar ? 'mask' : 'mask-notImg'"><upload-outlined /></div> <a @click="uploadLogo">
</a> <div v-if="userInfo" :class="userInfo.avatar ? 'mask' : 'mask-notImg'"><upload-outlined /></div>
</a>
</div>
<div class="username">{{ userInfo.name }}</div>
<div class="bio">{{ userInfo.nickname }}</div>
</div> </div>
<div class="username">{{ userInfo.name }}</div> <div class="account-center-detail">
<div class="bio">{{ userInfo.nickname }}</div> <p><i class="title"></i>{{ userInfo.positionName }}</p>
</div> <p><i class="group"></i>{{ userInfo.orgName }}</p>
<div class="account-center-detail"> <p>
<p><i class="title"></i>{{ userInfo.positionName }}</p> <i class="address"></i>
<p><i class="group"></i>{{ userInfo.orgName }}</p> <span>{{ userInfo.homeAddress ? userInfo.homeAddress : '暂无地址' }}</span>
<p> </p>
<i class="address"></i> </div>
<span>{{ userInfo.homeAddress ? userInfo.homeAddress : '暂无地址' }}</span> <a-divider />
<div class="account-center-team">
<div class="mb-2 xn-wd" v-if="userInfo.signature">
<a-image :src="userInfo.signature" width="100%" class="xn-bdr236 xn-ht120" />
</div>
<a-button @click="xnSignNameRef.show()"></a-button>
<XnSignName ref="xnSignNameRef" :image="userInfo.signature" @successful="signSuccess" />
</div>
</a-card>
</a-col>
<a-col :xs="24" :sm="24" :md="17" :lg="17" :xl="17">
<a-card
:bordered="false"
class="xn-wd h-full"
:tab-list="tabList"
:active-tab-key="noTitleKey"
@tabChange="(key) => onTabChange(key, 'key')"
>
<p v-if="noTitleKey === 'accountBasic'">
<accountBasic />
</p> </p>
</div> <p v-if="noTitleKey === 'organizationChart'">
<a-divider /> <organizationChart />
<div class="account-center-team"> </p>
<div class="mb-2 xn-wd" v-if="userInfo.signature"> <p v-if="noTitleKey === 'accountBind'">
<a-image :src="userInfo.signature" width="100%" class="xn-bdr236 xn-ht120" /> <accountBind />
</div> </p>
<a-button @click="xnSignNameRef.show()"></a-button> <p v-if="noTitleKey === 'shortcutSetting'">
<XnSignName ref="xnSignNameRef" :image="userInfo.signature" @successful="signSuccess" /> <shortcutSetting />
</div> </p>
</a-card> <p v-if="noTitleKey === 'userMessage'">
</a-col> <userMessage />
<a-col :xs="24" :sm="24" :md="17" :lg="17" :xl="17"> </p>
<a-card </a-card>
:bordered="false" </a-col>
class="xn-wd" </a-row>
:tab-list="tabList" <CropUpload
:active-tab-key="noTitleKey" ref="cropUploadRef"
@tabChange="(key) => onTabChange(key, 'key')" :img-src="userInfo ? userInfo.avatar : undefined"
> @successful="cropUploadSuccess"
<p v-if="noTitleKey === 'accountBasic'"> :z-index="2000"
<accountBasic /> />
</p> </div>
<p v-if="noTitleKey === 'organizationChart'">
<organizationChart />
</p>
<p v-if="noTitleKey === 'accountBind'">
<accountBind />
</p>
<p v-if="noTitleKey === 'shortcutSetting'">
<shortcutSetting />
</p>
<p v-if="noTitleKey === 'userMessage'">
<userMessage />
</p>
</a-card>
</a-col>
</a-row>
<CropUpload ref="cropUploadRef" :img-src="userInfo ? userInfo.avatar : undefined" @successful="cropUploadSuccess" :z-index="2000" />
</template> </template>
<script setup name="userCenter"> <script setup name="userCenter">