1、wxml
<view>
<!-- 顶部图片 -->
<view>
<image class="indeximage" src="/images/person.jpg" mode="widthFix"></image>
</view>
<!-- 用户登录 -->
<view>
<block>
<!-- 未登录 -->
<view wx:if="{{!isLogined}}" class="no-login-title">
<text>您尚未登录,</text>
<text class="btn-login">点我登录</text>
</view>
<!-- 已登录 -->
<view wx:else class="no-login-title">
<button type="primary" class="btn-exit">退出登录</button>
</view>
</block>
</view>
<!-- 用户背景 -->
<view class="user-info">
<!-- 未登录 -->
<view wx:if="{{!isLogined}}" class="user-info-bg">
<view class="user-info-wrap">
<image src="/images/nologin.jpg"></image>
<view class="user-nickname">匿名用户</view>
</view>
</view>
<!-- 已登录 -->
<view class="user-info-bg">
<view class="user-info-wrap">
<image src="{{userInfo.avatarUrl}}"></image>
<view class="user-nickname">{{userInfo.nickName}}</view>
</view>
</view>
</view>
<!-- 操作信息 -->
<view>
</view>
</view>
2、wxss
page{
background-color: #f6f6f6;
}
/* 顶部图片 */
.indeximage{
width: 100%;
height: 100%;
}
/* 登录样式 */
.no-login-title{
text-align: center;
font-weight: 600;
margin: 10rpx 0;
font-size: 16px;
}
.no-login-title .btn-login{
color: darkorange;
}
/* 用户背景 */
.user-info{
width: 100%;
display: flex;
}
.user-info .user-info-bg{
position: relative;
height: 34vh;
}
.user-info .user-info-bg .user-info-wrap{
position: relative;
top:30%;
text-align: center;
margin-left: 120px;
}
.user-info .user-info-bg .user-info-wrap image{
width: 150rpx;
height: 150rpx;
border-radius: 50%;
margin-top: -70rpx;
}
.user-info .user-info-bg .user-info-wrap .user-nickname{
color: red;
font-weight: 600;
font-size: 36rpx;
}
3、js
// pages/personal/personal.js
Page({
/**
* 页面的初始数据
*/
data: {
isLogined:false,//登录标志,默认未登录
userInfo:{},//用户信息
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
4、效果