小程序----个人中心页面

页面效果

 

代码实现：

center.wxml页面

 

<view class="header-container" bindtap="bindcenter">
<image class='header-bg' src = '../../images/image/background@2x.png'></image>
<view class='userContent'>
<image bindtap='changePhotoImg' class="header-avatar" src="{{teachers.headimg}}" ></image>
<view class="txt">
<text class="header-nickname">{{teachers.name}}</text>
<text class="header-nicktel">{{teachers.mphone}}</text>
</view>
<view class='header-userInfo' bindcenter="personcenter">
<!--进入个人中心开始-->
<image src="../../images/image/you@2x.png"></image>
<!--进入个人中心结束-->
</view>
</view>
</view>

<!--下边分条目-->

<view class="themes">
<view class="li" bindtap="bindcard">
<view class="icon"><image src="../../images/image/mingpian@2x.png"></image></view>
<view class="right">
<view class="txt">
<view class="tit">我的名片</view>
<view class="xx">用于编辑您的个人信息</view>
</view>
<view class="link"><image src="../../images/image/you@2x.png"></image></view>
</view>
</view>
<view class="li" bindtap="bindstudent">
<view class="icon"><image src="../../images/image/xueyuan@2x.png"></image></view>
<view class="right">
<view class="txt">
<view class="tit">我的学员</view>
<view class="xx">全面掌握您的学员状态</view>
</view>
<view class="link"><image src="../../images/image/you@2x.png"></image></view>
</view>
</view>
<view class="li" bindtap="bindmoney">
<view class="icon"><image src="../../images/image/shouru@2x.png"></image></view>
<view class="right">
<view class="txt">
<view class="tit">我的收入</view>
<view class="xx">实时查看你的收入情况</view>
</view>
<view class="link"><image src="../../images/image/you@2x.png"></image></view>
</view>
</view>
<view class="li" bindtap="bindday">
<view class="icon"><image src="../../images/image/qingjia@2x.png"></image></view>
<view class="right">
<view class="txt">
<view class="tit">我的请假</view>
<view class="xx">专业的客服解答您的问题</view>
</view>
<view class="link"><image src="../../images/image/you@2x.png"></image></view>
</view>
</view>
<view class="li" bindtap="bindmessage">
<view class="icon"><image src="../../images/image/xiaoxi@2x.png"></image></view>
<view class="right">
<view class="txt">
<view class="tit">消息通知</view>
<view class="xx">专业的客服解答您的问题</view>
</view>
<view class="link"><image src="../../images/image/you@2x.png"></image></view>
</view>
</view>
<view class="li" bindtap="bindidea">
<view class="icon"><image src="../../images/image/wenti@2x.png"></image></view>
<view class="right">
<view class="txt">
<view class="tit">意见反馈</view>
<view class="xx">有任何问题请及时反馈</view>
</view>
<view class="link"><image src="../../images/image/you@2x.png"></image></view>
</view>
</view>
</view>

 

center.wxss

/* 头部 */
page { background: #F7F7F7;}

.header-container {
display: flex;
height: 264rpx;
background-color: #fff;
align-items: center;
position: relative;
}

.header-bg{
width: 100%;
height: 100%;
}

/* 名称和头像 */
.userContent{
position: absolute;
z-index: 1;
display: flex;
align-items: center;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 34rpx 0 0 42rpx;
}
.userContent .txt { padding: 0 0 0 60rpx; width: 434rpx; color: #333; line-height: 50rpx;}
.userContent .txt text { display: block;}
.header-avatar {
background-color: #fff;
width: 114rpx;
height: 114rpx;
border-radius: 50%;
overflow: hidden;
}
.mycard-sign{
width: 34px;
height: 34px;
margin-left:20rpx;
margin-top:32rpx;

}

.header-nickname {
font-size: 30rpx;
font-weight: bold;
}
.header-nicktel { color: #888; font-size: 24rpx;}

/* 帐号管理和信息 */
.header-userInfo{
display: flex;
height: 230rpx;
width: 100rpx;
justify-content: center;
align-items: center;
}

.header-userInfo image{
width:20rpx;
height:34rpx;

}

.mycard-sign-nickname{
color: #fff;
font-size: 50rpx;
}

.themes .li { background: #FFF; padding: 32rpx 40rpx; display: flex; justify-content: space-between; margin-bottom: 30rpx;}
.themes .icon { width: 40rpx; height: 40rpx;}
.themes .icon image { display: block; width: 100%; height: 100%;}
.themes .right { width: 600rpx; display: flex; justify-content: space-between; align-items: center;}
.themes .tit { font-size: 30rpx; color: #666; font-weight: bold; line-height: 30rpx; margin-bottom: 20rpx;}
.themes .xx { font-size: 24rpx; color: #888; line-height: 24rpx;}
.themes .link { width: 20rpx; height: 34rpx; }
.themes .link image { display: block; width: 100%; height: 100%;}