微信小程序个人中心模板

wxml
<view>
<view class="top">
<view class="center">
<view class="center_top">
<view class="center_img" bindtap="toBaseInfo">
<!-- <image src="../../static/info_img.jpg"></image> -->
<open-data type="userAvatarUrl" className="user_head"></open-data>
</view>
<view class="center_info" bindtap="toBaseInfo">
<view class="center_name">{{trueName}}</view>
<!-- <view class="center_phone">phone:{{phone}}</view> -->
<view class="center_phone">基本信息</view>
</view>
</view>
<view class="center_down">
<view class="center_rank" bindtap="toNone">
<image class="rank_icon" src="../../static/rank.png"></image>
<text class="rank_text">我的排名</text>
</view>
<view class="center_score" bindtap="toNone">
<image class="rank_icon" src="../../static/points.png"></image>
<text class="rank_text">我的积分</text>
</view>
</view>
</view>
<image src='../../image/bg_wave.gif' mode='scaleToFill' class='gif-wave'></image>
</view>
</view>
wxss
.top {
width: 100%;
height: 180px;
background: #23EBB9;
padding-top: 15px;
position: relative;
}

.center {
width: 95%;
height: 150px;
background: white;
display: flex;
flex-direction: column;
margin: 0 auto;
border-radius: 5px;
}

.center_top {
display: flex;
flex-direction: row;
width: 80%;
height: 80px;
margin: 0 auto;
margin-top: 20rpx;
border-bottom: 1px solid #EEEEEE;
}

.center_img {
width: 66px;
height: 66px;
border-radius: 50%;
overflow: hidden;
}

.center_img image {
width: 100%;
height: 100%;
border-radius: 50%;
}

.center_img .user_head {
width: 100%;
height: 100%;
}

.center_info {
display: flex;
flex-direction: column;
margin-top: 10rpx;
margin-left: 30px;
}

.center_name {
font-size: 20px;
}

.center_phone {
color: #BEBEBE;
}

.center_down {
display: flex;
flex-direction: row;
width: 80%;
height: 35px;
margin: 0 auto;
margin-top: 20rpx;
}

.center_rank {
width: 50%;
height: 35px;
display: flex;
flex-direction: row;
}

.rank_text {
height: 35px;
line-height: 35px;
margin-left: 10rpx;
color: #AAAAAA;
}

.center_rank image {
width: 35px;
height: 35px;
}

.center_score {
width: 50%;
height: 35px;
display: flex;
flex-direction: row;
}

.center_score image {
width: 35px;
height: 35px;
}

.gif-wave {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
z-index: 99;
mix-blend-mode: screen;
height: 100rpx;
}