使用uniapp写个个人中心的界面,
时间: 2023-09-14 19:11:42 浏览: 63
好的,以下是一个简单的个人中心界面的示例代码:
```html
<template>
<view class="container">
<view class="header">
<image class="avatar" src="https://picsum.photos/200" mode="aspectFill"></image>
<view class="info">
<text class="name">Jane Doe</text>
<text class="email">janedoe@example.com</text>
</view>
</view>
<view class="menu">
<view class="menu-item" @click="navigateTo('orders')">
<text class="menu-item-text">My orders</text>
<text class="menu-item-icon">></text>
</view>
<view class="menu-item" @click="navigateTo('settings')">
<text class="menu-item-text">Settings</text>
<text class="menu-item-icon">></text>
</view>
<view class="menu-item" @click="logout">
<text class="menu-item-text logout">Logout</text>
</view>
</view>
</view>
</template>
<script>
export default {
methods: {
navigateTo(page) {
uni.navigateTo({ url: `/pages/${page}/${page}` });
},
logout() {
// TODO: Implement logout functionality
}
}
};
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: #f5f5f5;
}
.header {
display: flex;
align-items: center;
padding: 40rpx 20rpx;
background-color: #ffffff;
}
.avatar {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.info {
display: flex;
flex-direction: column;
margin-left: 20rpx;
}
.name {
font-size: 36rpx;
font-weight: bold;
}
.email {
font-size: 28rpx;
color: #666666;
}
.menu {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 40rpx 20rpx;
}
.menu-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40rpx;
padding-right: 20rpx;
background-color: #ffffff;
border-radius: 10rpx;
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}
.menu-item-text {
font-size: 32rpx;
color: #333333;
}
.menu-item-icon {
font-size: 40rpx;
color: #999999;
}
.logout {
color: #ff0000;
}
</style>
```
这个界面包含一个头部和一个菜单列表。头部包含一个圆形头像和用户信息,菜单列表包含几个选项。你可以根据自己的需求和样式进行修改。