vue协同element-ui带样式的个人信息页面,包含用户名,邮箱,性别,账号,生日,头像字段,头像为圆框
时间: 2023-09-20 20:09:15 浏览: 43
下面是一个使用Vue和Element UI的带样式的个人信息页面示例,包含了用户名、邮箱、性别、账号、生日和头像字段,并将头像显示为圆框:
```html
<template>
<div class="profile">
<h1>个人信息</h1>
<div class="avatar">
<el-avatar :src="user.avatar" :size="120" shape="circle"></el-avatar>
</div>
<div class="info">
<el-row>
<el-col :span="4"><strong>用户名:</strong></el-col>
<el-col :span="20">{{ user.name }}</el-col>
</el-row>
<el-row>
<el-col :span="4"><strong>邮箱:</strong></el-col>
<el-col :span="20">{{ user.email }}</el-col>
</el-row>
<el-row>
<el-col :span="4"><strong>性别:</strong></el-col>
<el-col :span="20">{{ user.gender }}</el-col>
</el-row>
<el-row>
<el-col :span="4"><strong>账号:</strong></el-col>
<el-col :span="20">{{ user.account }}</el-col>
</el-row>
<el-row>
<el-col :span="4"><strong>生日:</strong></el-col>
<el-col :span="20">{{ user.birthday }}</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: 'John Doe',
email: 'john@example.com',
gender: '男',
account: 'johndoe123',
birthday: '1990-01-01',
avatar: 'path/to/avatar.jpg'
}
};
}
};
</script>
<style>
.profile {
display: flex;
flex-direction: column;
align-items: center;
}
.avatar {
margin-top: 20px;
}
.info {
margin-top: 20px;
}
.info el-row {
margin-bottom: 10px;
}
.info strong {
font-weight: bold;
}
</style>
```
在这个示例中,我使用了Element UI的`el-avatar`组件来显示用户的头像,设置了大小为120,形状为圆形。个人信息的字段使用了`el-row`和`el-col`布局,通过设置不同的列宽来实现字段和内容的对齐。你可以根据自己的需求进一步调整样式和布局。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)