<include src="/components/header.wxml" /> <view class="container" wx:if="{{isFound}}"> <view class="user"> <view class="avatar"> <image src="https:{{avatarPath}}"></image> <text>ONLINE</text> </view> <view class="intro"> <view>{{userName}}</view> <text>V2EX 第 {{id}} 号会员,加入于 {{created}}</text> </view> </view> <view class="collection"> <view> <view>0</view> <text>节点收藏</text> </view> <view> <view>0</view> <text>主题收藏</text> </view> <view> <view>0</view> <text>特别关注</text> </view> </view> <view class="topic"> <image src="{{avatarPath}}"></image> <picker-view class="pickerview"> <picker-view-column> <view>{{userName}} 的所有主题</view> <view>123</view> <view>abc</view> </picker-view-column> </picker-view> </view> <view class="reply"> <view>{{userName}} 最近回复了</view> <navigator url="/pages/gravatar/gravatar" open-type="redirect">» {{userName}} 创建的更多回复</navigator> </view> </view> <view class="container" wx:if="{{!isFound}}"> <include src="/components/crumbs.wxml" /> <view class="not-found">未找到用户</view> </view> <include src="/components/footer.wxml" /> |
/*********容器**********/ .container { display: flex; flex-direction: column; width: 95%; margin: 0 auto; } .container > view { margin-bottom: 15rpx; border-radius: 10rpx; background-color: #fefefe; box-shadow: 2px 2px 3px #00343f; } /*********容器**********/ /*********user**********/ .user { background-color: #fff; height: 180rpx; display: flex; justify-content: space-between; } .user .avatar { box-sizing: border-box; padding: 10rpx 0 30rpx; width: 150rpx; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .user .avatar image { width: 75rpx; height: 75rpx; border-radius: 10rpx; } .user .avatar text { display: block; width: 104rpx; height: 28rpx; line-height: 28rpx; border-radius: 20rpx; background-color: #4aa210; font-size: 22rpx; color: #fff; text-align: center; } .user .intro { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-around; } .user .intro view { font-weight: bolder; font-size: 40rpx; } .user .intro text { font-size: 25rpx; color: #999; } /*********user**********/ /*********collection**********/ .collection { height: 100rpx; display: flex; justify-content: space-around; align-items: center; } .collection > view { flex: 1; height: 80rpx; border-right: 1px solid #eee; text-align: center; } .collection > view:last-of-type { border: 0; } .collection text { color: #999; font-size: 28rpx; } /*********collection**********/ /*********topic**********/ .topic { padding: 0 30rpx; height: 84rpx; display: flex; align-items: center; justify-content: space-between; } .topic image { width: 48rpx; height: 48rpx; border-radius: 50%; } .pickerview { width: 40%; height: 100%; } .pickerview view{ display: flex; align-items: center; justify-content: center; } /*********topic**********/ /*********reply**********/ .reply{ font-size: 26rpx; } .reply > view{ padding-left: 10rpx; height: 45rpx; line-height: 45rpx; border-bottom: 1px solid #eee; color: #999; } .reply > navigator{ padding-left: 10rpx; height: 65rpx; line-height: 65rpx; align-items: center; color: #777; } /*********reply**********/ /*********not found 样式**********/ .not-found { text-align: center; color: #999; font-size: 30rpx; height: 50rpx; line-height: 50rpx; } /*********not found 样式**********/ |
import format from '../../utils/format.js' Page({ onLoad() { this.initData() this.renderCrumbs() }, renderCrumbs() { let pages = getCurrentPages(), routes = {} for (let page of pages) { let path = page.route, pageName = page.route.split('/')[1] routes[pageName] = path } this.setData({ routes }) }, initData() { let data = getApp().globalData.userInfo, isFound = data.status === 'found', id = data.id, avatarPath = data.avatar_mini, userName = data.username, created = format(data.created) this.setData({ isFound, id, avatarPath, userName, created }) } }) |
模板简介:该模板名称为【微信小程序V2EX社区用户查找未找到用户页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。