帮我写一个简单好看的微信小程序个人中心的界面
时间: 2023-06-19 17:10:36 浏览: 49
好的,以下是简单的个人中心界面设计,你可以根据自己的需求进行修改和完善:
```
<view class="container">
<view class="user-info">
<view class="avatar"></view>
<text class="username">{{username}}</text>
</view>
<view class="menu-list">
<view class="menu-item">
<image class="menu-icon" src="/images/icon/address.png"></image>
<text class="menu-text">收货地址</text>
<image class="arrow" src="/images/icon/arrow-right.png"></image>
</view>
<view class="menu-item">
<image class="menu-icon" src="/images/icon/coupon.png"></image>
<text class="menu-text">优惠券</text>
<image class="arrow" src="/images/icon/arrow-right.png"></image>
</view>
<view class="menu-item">
<image class="menu-icon" src="/images/icon/order.png"></image>
<text class="menu-text">我的订单</text>
<image class="arrow" src="/images/icon/arrow-right.png"></image>
</view>
<view class="menu-item">
<image class="menu-icon" src="/images/icon/service.png"></image>
<text class="menu-text">联系客服</text>
<image class="arrow" src="/images/icon/arrow-right.png"></image>
</view>
</view>
</view>
```
CSS 样式如下:
```
.container {
padding: 20rpx;
}
.user-info {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.avatar {
width: 80rpx;
height: 80rpx;
background-color: #ddd;
border-radius: 50%;
margin-right: 20rpx;
}
.username {
font-size: 28rpx;
color: #333;
}
.menu-list {
background-color: #fff;
border-radius: 10rpx;
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
padding: 20rpx;
}
.menu-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
}
.menu-icon {
width: 40rpx;
height: 40rpx;
}
.menu-text {
font-size: 28rpx;
color: #333;
}
.arrow {
width: 30rpx;
height: 30rpx;
}
```
这个界面包含了用户头像、用户名和几个常用的功能菜单,你可以根据自己的需求添加或删除菜单。