chenhaodong
109 lines
1.9 KiB
Vue
109 lines
1.9 KiB
Vue
<!--
|
||
@description 用户信息卡片组件，展示头像、昵称等个人资料摘要 效果不好 暂时删除
|
||
@author D吕贺034244311
|
||
@date 20260620
|
||
-->
|
||
<template>
|
||
<el-card style="margin-bottom:20px;">
|
||
<template #header>
|
||
<div class="clearfix">
|
||
<span>个人资料</span>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="user-profile">
|
||
<div class="box-center">
|
||
<!-- <pan-thumb :image="user.avatar" :height="'100px'" :width="'100px'" :hoverable="false">-->
|
||
<!-- <div>欢迎</div>-->
|
||
<!-- {{ user.role }}-->
|
||
<!-- </pan-thumb>-->
|
||
</div>
|
||
<div class="box-center">
|
||
<div class="user-name text-center">{{ user.name }}</div>
|
||
<div class="user-role text-center text-muted">{{ $filters.uppercaseFirst(user.role) }}</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
|
||
<script>
|
||
import PanThumb from '@/components/PanThumb/index.vue'
|
||
|
||
export default {
|
||
components: { PanThumb },
|
||
props: {
|
||
user: {
|
||
type: Object,
|
||
default: () => {
|
||
return {
|
||
name: '',
|
||
email: '',
|
||
avatar: '',
|
||
roles: ''
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.box-center {
|
||
margin: 0 auto;
|
||
display: table;
|
||
}
|
||
|
||
.text-muted {
|
||
color: #777;
|
||
}
|
||
|
||
.user-profile {
|
||
.user-name {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.box-center {
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.user-role {
|
||
padding-top: 10px;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.box-social {
|
||
padding-top: 30px;
|
||
|
||
.el-table {
|
||
border-top: 1px solid #dfe6ec;
|
||
}
|
||
}
|
||
|
||
.user-follow {
|
||
padding-top: 20px;
|
||
}
|
||
}
|
||
|
||
.user-bio {
|
||
margin-top: 20px;
|
||
color: #606266;
|
||
|
||
span {
|
||
padding-left: 4px;
|
||
}
|
||
|
||
.user-bio-section {
|
||
font-size: 14px;
|
||
padding: 15px 0;
|
||
|
||
.user-bio-section-header {
|
||
border-bottom: 1px solid #dfe6ec;
|
||
padding-bottom: 10px;
|
||
margin-bottom: 10px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
</style>
|