本文给大家带来的是微信小程序停车个人消费记录中信页面样式设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/user/user.wxml-->
<view class="panel">
<image class="panel-pic" src="/images/bg.jpg" mode="aspectFill">
</image>
<image class="avatar-icon" src="{{avatarUrl}}"></image>
<view class="nickName">{{userInfo.nickName}}</view>
</view>
<view class="menu-list-container center">
<view class="menu-list-item">
<image src="/images/icon/day_view.png" class="menu-list-icon"></image>
<view class="menu-list-text">我的车牌</view>
<view class="menu-comment">云A·897H3</view>
<image class="menu-arrow-right" src="/images/arrowright.png"></image>
</view>
<view class="menu-list-item">
<image src="/images/icon/money_bag.png" class="menu-list-icon"></image>
<view class="menu-list-text">消费记录</view>
<view class="menu-comment">查看消费记录</view>
<image class="menu-arrow-right" src="/images/arrowright.png"></image>
</view>
</view>
<view class="menu-annotation">已登录手机号:18314592352</view>
<view class="menu-list-container center">
<view class="menu-list-item center">
<view class="text-center" style="color:red;font-size:16px;">退出登录</view>
</view>
</view>
|
二、wxss样式文件代码如下：
/* pages/user/user.wxss */
page{
width: 100%;
height: 100%;
}
.avatar-icon{
position: absolute;
height: 150rpx;
width: 150rpx;
border-radius: 50%;
background-color: white;
left: 50%;
transform: translate(-50%, 0%);
bottom: 50%;
border: 5rpx solid whitesmoke ;
}
.nickName{
position: absolute;
text-align: center;
font-size: 18px;
color: white;
transform: translate(-50%, 0%);
bottom: 80rpx;
left: 50%;
width:100%;
}
.panel{
position: relative;
height: 400rpx;
width: 100%;
}
.panel-pic{
position: absolute;
width: 100%;
height: 100%;
/*filter: blur(20px);*/
}
|
三、js页面代码如下：
// pages/user/user.js
var app=getApp();
Page({
data:{
userInfo:{},
avatarUrl:""
},
onLoad:function(options){
var that=this;
app.getUserInfo(function(info){
console.log(info)
that.setData({
userInfo:info,
avatarUrl:info.avatarUrl
})
})
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
|
.jpg)
.jpg)
