<!-- 可用组件:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ --> <view class="user"> <!--user-info--> <view class="user-info"> <image class="user-avatural" src="{{ userInfo.avatarUrl }}"></image> <text class="user-name">{{ userInfo.nickName }}</text> </view> <!--user-score--> <view class="user-score"> <navigator url="{{ item.title == '优惠券' ? '../useroperation/useroperation?operation=coupon' : item.title == '正在排队' ? '../useroperation/useroperation?operation=number' : '' }}" hover-class="none" class="u-s-content" wx:for="{{ userDetail }}" wx:key="unique"> <text>{{ item.title }}</text> <text>{{ item.number }}</text> </navigator> </view> <!--user-list--> <view class="user-list"> <navigator url="../useroperation/useroperation?operation={{ item.id }}" hover-class="none" class="triangle {{ item.icon }}" wx:for="{{ userList }}" wx:key="unique"> {{ item.title }}</navigator> </view> </view> |
page { background: #fbfbfb; } .user-info { display: flex; flex-direction: column; justify-content: space-around; align-items: center; background-color: #ed4d30; height: 354rpx; padding: 50rpx 0; box-sizing: border-box; } .user-info .user-avatural { width: 169rpx; height: 169rpx; border-radius: 50%; } .user-info .user-name { font-size: 24rpx; color: #fff; } .user-score { border-top: 1rpx solid #fff; display: flex; padding: 30rpx; height: 143rpx; box-sizing: border-box; background-color: #ed4d30; justify-content: space-around; } .user-score .u-s-content { display: flex; flex-direction: column; align-items: center; justify-content: space-around; position: relative; width: 33%; border-right: 1rpx solid #f6a698; } .user-score .u-s-content text:nth-child(1) { font-size: 24rpx; } .user-score .u-s-content text:nth-child(2) { color: #fff; font-size: 36rpx; } .user-score .u-s-content:nth-child(3) { border-right: none; } .user-list navigator { padding: 0 20rpx; background: #fff; margin-top: 6rpx; font-size: 24rpx; } .user-list navigator:nth-child(1) { margin-top: 20rpx; } .user-list .iconfont::before { font-size: 40rpx; line-height: 80rpx; } .user-list .triangle::after { right: 20rpx; } |
'use strict'; // 获取全局应用程序实例对象 var app = getApp(); // 创建页面实例对象 Page({ /** * 页面的初始数据 */ data: { title: 'user', userInfo: null, userDetail: [{ title: '正在排队', number: 1 }, { title: '优惠券', number: 4 }, { title: '积分', number: 20 }], userList: [{ icon: 'iconfont icon-xiaoxi', title: '我的排单号', id: 'number' }, { icon: 'iconfont icon-lingdang', title: '消息', id: 'message' }, { icon: 'iconfont icon-fapiao', title: '积分兑换', id: 'integral' }, { icon: 'iconfont icon-dingdan', title: '我的订单', id: 'order' }, { icon: 'iconfont icon-iconfontruzhu-copy', title: '商家入驻', id: 'merchant' }] }, /** * 生命周期函数--监听页面加载 */ onLoad: function onLoad() { this.setData({ userInfo: app.data.userInfo }); // TODO: onLoad }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function onReady() { // TODO: onReady }, /** * 生命周期函数--监听页面显示 */ onShow: function onShow() { // TODO: onShow }, /** * 生命周期函数--监听页面隐藏 */ onHide: function onHide() { // TODO: onHide }, /** * 生命周期函数--监听页面卸载 */ onUnload: function onUnload() { // TODO: onUnload }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function onPullDownRefresh() { // TODO: onPullDownRefresh } }); //# sourceMappingURL=user.js.map |
模板简介:该模板名称为【微信小程序餐饮类我的橙色个人中心页面样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。