<view class="container">
<view class="header">
<view class="header-top">
<view class="setbtn" bindtap="setTap">
<image src="{{img_url}}mine/set.png" class="pic"></image>
</view>
</view>
<view class="userinfo">
<image src="{{img_url}}mine/user.jpg" class="img"></image>
</view>
<view class="nickname">
<text class="name">汇汇</text>
<view class="level"></view>
</view>
<view class="account-info">
<view class="list">
<view class="info" bindtap="voucherTap">
<text class="num">1</text>
<text class="type">代金券(张)</text>
</view>
<view class="info" bindtap="WalletTap">
<text class="num">9.80</text>
<text class="type">汇汇钱包(元)</text>
</view>
<view class="info" bindtap="hWalletTap">
<text class="num">88</text>
<text class="type">汇币(个)</text>
</view>
</view>
</view>
</view>
<view class="nav">
<view class="nav-ul">
<view class="right-before bottom-after" bindtap="prizeTap">
<view class="nav-li">
<image class="label" src="{{img_url}}mine/icon1.png" />
<text class="label-name">我的奖品</text>
</view>
</view>
<view class="right-before bottom-after" bindtap="collectionTap">
<view class="nav-li">
<image class="label" src="{{img_url}}mine/icon2.png" />
<text class="label-name">我的收藏</text>
</view>
</view>
<view class="bottom-after" bindtap="contactTap">
<view class="nav-li">
<image class="label" src="{{img_url}}mine/icon3.png" />
<text class="label-name">联系客服</text>
</view>
</view>
</view>
</view>
</view>
|
page {
height: 100%;
background-color: #f2f2f2;
}
.container {
height: 100%;
}
.header {
width: 100%;
background: #df2b2a;
}
.header-top {
position: relative;
width: 100%;
height: 96rpx;
}
.title {
position: absolute;
left: 0px;
width: 100%;
padding: 0;
margin: 0;
line-height: 96rpx;
text-align: center;
font-size: 30rpx;
font-weight: normal;
color: #fff;
z-index: 1;
}
.setbtn {
top: 20rpx;
right: 30rpx;
background-size: auto 40rpx;
background-position: -140px 0;
display: block;
position: absolute;
width: 50rpx;
height: 50rpx;
z-index: 9;
}
.pic {
width: 50rpx;
height: 50rpx;
}
.userinfo {
width: 252rpx;
padding: 12rpx;
margin: 0 auto;
background: rgba(255, 255, 255, 0.4) !important;
background: #fff;
border-radius: 50%;
overflow: hidden;
text-decoration: none;
}
.img {
display: block;
width: 240rpx;
height: 240rpx;
border: #fff solid 6rpx;
border-radius: 50%;
}
.nickname {
margin: 30rpx auto;
text-align: center;
}
.name {
display: inline-block;
max-width: 76%;
padding-right: 4rpx;
font-size: 30rpx;
line-height: 40rpx;
color: #fff;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.level {
position:absolute;
background-position: 0 1px;
display: inline-block;
margin-top: 4rpx;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
background: url(http://appuat.huihuishenghuo.com/img/mine/vip-icon.png) no-repeat 0 0 / 40rpx auto;
}
.account-info {
width: 100%;
overflow: hidden;
}
.list {
width: 100%;
padding: 24rpx 0;
margin: 0;
list-style: none;
overflow: hidden;
}
.info {
float: left;
width: 33.333%;
display: block;
line-height: 48rpx;
text-align: center;
color: #fff;
}
.num {
display: block;
font-size: 36rpx;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.type {
padding-top: 4rpx;
display: block;
font-size: 32rpx;
font-family: Courier New, Courier, monospace;
}
.nav {
width: 100%;
margin-top: 20rpx;
background: #fff;
overflow: hidden;
}
.nav-ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
overflow: hidden;
}
.left-before, .right-before, .top-after, .bottom-after {
float: left;
padding: 32rpx 0;
width: 33.333%;
position: relative;
}
.right-before:before {
right: 0;
border-right: #dedede solid 1rpx;
}
.bottom-after:after {
bottom: 0;
border-bottom: #dedede solid 1rpx;
}
.left-before:before, .right-before:before {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
content: '';
overflow: hidden;
}
.top-after:after, .bottom-after:after {
position: absolute;
left: 0px;
right: 0px;
width: 100%;
height: 1rpx;
content: '';
overflow: hidden;
}
.nav-li {
display: block;
}
.label {
display: block;
width: 100rpx;
height: 100rpx;
margin: 0 auto;
border: 0;
}
.label-name {
display: block;
margin-top: 10rpx;
text-align: center;
line-height: 38rpx;
font-size: 30rpx;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333;
}
|
var app = getApp();
var server = require('../../utils/server');
Page({
data: {
img_url: 'http://appuat.huihuishenghuo.com/img/'
},
onLoad: function () {
},
onShow: function () {
this.setData({
userInfo: app.globalData.userInfo
});
},
setTap: function () {
wx.navigateTo({
url: 'account',
success: function (res) {
// success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
voucherTap: function () {
wx.navigateTo({
url: 'voucher',
success: function (res) {
// success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
WalletTap: function () {
wx.navigateTo({
url: 'wallet?type=1',
success: function (res) {
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
hWalletTap: function () {
wx.navigateTo({
url: 'wallet?type=2',
success: function (res) {
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
collectionTap: function () {
wx.navigateTo({
url: 'collection',
success: function (res) {
// success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
prizeTap: function () {
wx.navigateTo({
url: 'prize',
success: function (res) {
// success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
contactTap: function () {
wx.makePhoneCall({
phoneNumber: '13553835046'
})
}
});
|
模板简介：该模板名称为【微信小程序我的奖品红色纯文字页面样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
