|
|
@@ -1,14 +1,61 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div class="fl-left left-mg-xs">
|
|
|
- <el-avatar :size="120" :src="userInfo.headerImg" shape="square" @click.native="openChooseImg"></el-avatar>
|
|
|
- </div>
|
|
|
- <div class="fl-left left-mg-lg">
|
|
|
- <div>用户ID：{{userInfo.uuid}}</div>
|
|
|
- <div>用户昵称：{{userInfo.nickName}}</div>
|
|
|
- <div>用户组：{{userInfo.authority&&userInfo.authority.authorityName}}</div>
|
|
|
- </div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="fl-left avatar-box">
|
|
|
+ <div class="user-card">
|
|
|
+ <el-avatar :size="160" :src="userInfo.headerImg" shape="square" @click.native="openChooseImg"></el-avatar>
|
|
|
+ <div class="user-personality">
|
|
|
+ <p class="nickname">{{userInfo.nickName}}</p>
|
|
|
+ <p>我是个性签名</p>
|
|
|
+ </div>
|
|
|
+ <div class="user-information">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <i class="el-icon-user"></i>资深前端工程师
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="el-icon-data-analysis"></i>北京反转极光科技有限公司-技术部-前端事业群
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="el-icon-video-camera-solid"></i>中国·北京市·朝阳区
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="el-icon-medal-1"></i>goLang/JavaScript/Vue/Gorm
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="18">
|
|
|
+ <div class="user-addcount">
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="账号绑定" name="second">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <p class="title">密保手机</p>
|
|
|
+ <p class="desc">已绑定手机:1245678910 <a href="#">立即修改</a></p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p class="title">密保邮箱</p>
|
|
|
+ <p class="desc">已绑定邮箱：[email protected]<a href="#">立即修改</a></p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p class="title">密保问题</p>
|
|
|
+ <p class="desc">未设置密保问题 <a href="#">去设置</a></p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
<ChooseImg ref="chooseImg" @enter-img="enterImg"/>
|
|
|
+ <!-- <div>用户ID：{{userInfo.uuid}}</div>-->
|
|
|
+ <!-- <div>用户昵称：{{userInfo.nickName}}</div>-->
|
|
|
+ <!-- <div>用户组：{{userInfo.authority&&userInfo.authority.authorityName}}</div>-->
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -20,7 +67,9 @@ export default {
|
|
|
name: 'Person',
|
|
|
data(){
|
|
|
return {
|
|
|
- path:path
|
|
|
+ path:path,
|
|
|
+ activeName: 'second',
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
@@ -45,6 +94,9 @@ export default {
|
|
|
)
|
|
|
}
|
|
|
},
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log(tab, event);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -72,4 +124,67 @@ export default {
|
|
|
height: 178px;
|
|
|
display: block;
|
|
|
}
|
|
|
+ .avatar-box{
|
|
|
+ box-shadow: -2px 0 20px -16px;
|
|
|
+ width: 80%;
|
|
|
+ height: 100%;
|
|
|
+ .user-card{
|
|
|
+ min-height: calc(90vh - 200px);
|
|
|
+ padding: 30px 20px;
|
|
|
+ text-align: center;
|
|
|
+ .el-avatar{
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .user-personality{
|
|
|
+ padding: 24px 0;
|
|
|
+ text-align: center;
|
|
|
+ p{
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .nickname{
|
|
|
+ font-size: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .user-information{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ text-align: left;
|
|
|
+ ul{
|
|
|
+ display: inline-block;
|
|
|
+ height: 100%;
|
|
|
+ li{
|
|
|
+ i{
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ padding: 20px 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .user-addcount{
|
|
|
+ ul{
|
|
|
+ li{
|
|
|
+ .title{
|
|
|
+ padding: 10px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #696969;
|
|
|
+ }
|
|
|
+ .desc{
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 0 10px 20px 10px ;
|
|
|
+ color: #A9A9A9;
|
|
|
+ a{
|
|
|
+ color: rgb(64, 158, 255);
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ border-bottom: 2px solid #f0f2f5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
SliverHorn