持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第31天，点击查看活动详情
上一篇文章中我们完成面包屑中右侧的签到打卡功能，接下来我们将完成个人中心的样式，个人中心如下图所示：
- 首先我们需要准备两个el-card盒子用来放两边的信息，左边的盒子使用flex布局，让头像，身份，注册时间，修改头像的按钮都垂直居中对齐，然后使用到了element-plus中的 Divider 分割线组件来和下面的手机和邮箱分割开来，这个组件的链接如： element-plus.gitee.io/zh-CN/compo… ，左侧卡片的代码如下所示：
<el-card class="left" shadow="hover">
<div class="left-l">
<img class="img" src="../assets/user.png" alt="" />
<p class="name">超级管理员</p>
<p class="time">注册时间:2022-09-27</p>
<el-button type="primary">修改头像</el-button>
<el-divider>
<span>信息绑定</span>
</el-divider>
</div>
<div class="message">
<div class="phone">
<el-button class="button" type="success" style="width: 100px">
<span
><el-icon style="margin-right: 10px"><Iphone /></el-icon
>修改手机号</span
>
</el-button>
</div>
<div class="phone">
<el-button class="button" type="primary" style="width: 100px">
<span
><el-icon style="margin-right: 10px"><MessageBox /></el-icon
>绑定邮箱</span
>
</el-button>
</div>
- 这些标签的css布局还是比较简单的比如这个头像设置圆角为50%，即 border-radius: 50%;然后是手机以及修改手机这两个标签一样是使用display:flex；让这两个标签在一行展示，然后justify-content: space-between;左右均匀分布
- 然后是右侧的好友通讯录，这里用到了Tabs 标签页组件，然后和那个用户组件一样，发送请求，调用mock接口，获取到数据之后存放到空数组里通过v-for来渲染到表格表单里，这里就不过多赘述了
