用vue写一个个人中心的界面
时间: 2023-12-03 12:05:14 浏览: 32
好的,以下是一个简单的个人中心界面示例:
```
<template>
<div class="personal-center">
<div class="user-info">
<div class="avatar">
<img :src="userInfo.avatar" alt="avatar">
</div>
<div class="user-name">{{userInfo.name}}</div>
<div class="user-email">{{userInfo.email}}</div>
</div>
<div class="user-action">
<router-link to="/edit-profile" class="edit-profile-btn">编辑个人资料</router-link>
<button class="logout-btn" @click="logout">退出登录</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
userInfo: {
name: 'John Doe',
email: 'johndoe@example.com',
avatar: 'https://via.placeholder.com/150'
}
}
},
methods: {
logout() {
// handle logout logic
}
}
}
</script>
<style scoped>
.personal-center {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.user-info {
display: flex;
flex-direction: column;
align-items: center;
}
.avatar img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
.user-name {
font-size: 24px;
font-weight: bold;
margin-top: 10px;
}
.user-email {
font-size: 16px;
margin-top: 10px;
}
.user-action {
margin-top: 20px;
display: flex;
justify-content: center;
}
.edit-profile-btn {
padding: 10px 20px;
background-color: #2ecc71;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
}
.logout-btn {
padding: 10px 20px;
background-color: #e74c3c;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
```
在这个示例中,我们使用了 Vue 的模板语法和样式作用域来实现一个简单的个人中心界面。其中,`userInfo` 对象存储了用户的基本信息,包括姓名、电子邮件和头像。`logout` 方法处理退出登录的逻辑。界面包括一个用户信息区域和一个用户操作区域,其中用户信息区域显示用户的头像、姓名和电子邮件,用户操作区域包括一个编辑个人资料按钮和一个退出登录按钮。这个示例可以根据实际需求进行修改和扩展。