微信小程序之个人中心静态页面

知识点： flex布局 position定位过滤

<!-- 个人信息 -->
<view class="user_info_wrap"><view class="user_img_wrap"><image class="user_bg" src="{{userInfo.authUrl}}"></image><view class="user_info"><image class="user_icon" src="{{userInfo.authUrl}}"></image><view class="user_nickname">{{userInfo.nickName}}</view></view></view>
</view>
<!-- 历史 -->
<view class="his_info_wrap"><view class="his_info"><!-- 收藏等 --><view class="his_content"><navigator><view class="his_num">0</view><view class="his_name">收藏的店铺</view></navigator><navigator><view class="his_num">0</view><view class="his_name">收藏的店铺</view></navigator><navigator><view class="his_num">0</view><view class="his_name">收藏的店铺</view></navigator><navigator><view class="his_num">0</view><view class="his_name">收藏的店铺</view></navigator></view><!-- 订单 --><view class="order_content"><view class="my_order">我的订单</view><view class="order_navig"><navigator><icon class="icon-box-img" type="success"></icon><view>全部订单</view></navigator><navigator><icon class="icon-box-img" type="success"></icon><view>待付款</view></navigator><navigator><icon class="icon-box-img" type="success"></icon><view>待收货</view></navigator><navigator><icon class="icon-box-img" type="success"></icon><view>退款/退货</view></navigator></view></view><!-- 地址 --><view class="address_content">收货地址管理</view><!-- 应用 --><view class="app_content"><view class="contact"><text>联系客服</text><text>400-418-4000</text></view><view class="idea">意见反馈</view><view class="about">关于我们</view></view><!-- 推荐 --><view class="recommend_content">把应用推荐给其他人</view></view>
</view>

/* 个人信息 */
page {background-color: #eaeaea;color: #999;font-size: 26rpx;
}
.user_info_wrap {height: 40vh;/* position: relative; */background-color: rgb(181, 189, 71);
}
.user_img_wrap {position: relative;
}
.user_img_wrap .user_bg {width: 100%;height: 41vh;filter: blur(10rpx);
}
.user_img_wrap .user_info {position: absolute;top: 20%;left: 50%;transform: translate(-50%);text-align: center;
}
.user_img_wrap .user_info .user_icon {width: 150rpx;height: 150rpx;border-radius: 50%;
}
.user_img_wrap .user_info .user_nickname {margin-top: 40rpx;color: #fff;
}
/* 历史 */
.his_info_wrap {position: relative;
}
.his_info {padding-bottom: 20rpx;width: 95%;position: absolute;left: 50%;top: -20px;transform: translate(-50%);
}
.his_content {background-color: #fff;padding: 10rpx;display: flex;text-align: center;
}
.his_content navigator {flex: 1;
}
.his_num {color: rgb(227, 230, 71);
}
/* 订单 */
.order_content {background-color: #fff;margin-top: 40rpx;padding: 10rpx 10rpx 0 10rpx;
}
.my_order {padding: 10rpx;border-bottom: 1px solid #ccc;
}
.order_navig {display: flex;/* justify-content: center;align-items: center; */text-align: center;
}
.order_navig navigator {flex: 1;padding: 10rpx 0;
}
/* 地址 */
.address_content, .recommend_content {margin-top: 40rpx;padding: 20rpx 10rpx;background-color: #fff;
}
/* 应用 */
.app_content {margin-top: 40rpx;/* padding: 10rpx; *//* background-color: #fff; */
}
.app_content .contact {display: flex;justify-content: space-between;
}
.contact, .idea, .about {/* margin-top: 2rpx; */background-color: #fff;padding: 20rpx 10rpx;border-bottom: 1px solid #ccc;
}

// pages/my/index.js
Page({/*** 页面的初始数据*/data: {userInfo: {authUrl: '放入自己的图片即可',nickName: '一只烛'}},
})

微信小程序之个人中心静态页面相关推荐

微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案
微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案参考文章: (1)微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案 (2)https://www. ...
微信小程序 - 自定义组件中类似页面 onShow 的页面显示就触发的生命周期钩子函数（页面回退时更新数据常用, 例如回退页面更新子组件数据, 回退更新子组件中 data 内容）
前言在微信小程序中,用户回退页面触发更新数据的操作,一般都是在页面 onShow() 中写上执行更新的函数即可. 但如果咱们把数据和方法都写在了自定义子组件中,那么用户回退页面时, 更新数据就成了 ...
uniApp和微信小程序好看的我的页面（有源码）
uniApp和微信小程序好看的我的页面(有源码) 1.先睹为快未登录状态以登录 uniapp源码 <template><view class="content" ...
微信小程序中使用全局变量解决页面的传值问题
微信小程序中使用全局变量解决页面的传值问题由于项目需要,最近便在做一个类似于美团的餐饮平台的的微信微信小程序 ,项目有十几个页面,那么页面间的传值被经常用到.在小程序中页面间的传值主要有使用全局变 ...
关于微信小程序“南安明朗教育”活动页面错误问题记录
关于微信小程序"南安明朗教育"活动页面错误问题记录关于微信小程序"南安明朗教育"活动页面错误问题记录你好! 这是一遍关于南安明朗教育的微信小程序问题解决的日 ...
微信小程序云开发如何将页面生成为pdf?
项目场景: 最近有小伙伴问了一个问题,那就是微信小程序云开发如何将页面生成为pdf?但是在没有后端工程师的协助下,我们要怎么办了? 解决方案: 于是便逛了一下微信社区,但很遗憾腾讯baba没有给出相应 ...
自学微信小程序开发第五天- 页面切换相关
自学微信小程序开发第五天- 页面切换相关创建多个页面页面间跳转页面间传值另一个页面跳转的方式(重定向) 点击跳转元素时的样式导航API 研究过页面样式设计后,就是多页面的呈现了,这就需要研究 ...
微信小程序客服会话发送页面卡片
微信小程序客服会话发送页面卡片,这个腾讯在按钮里面已经封装好了,我们直接拿过来用就行了. 首先设置open-type="contact" 我们看下官方文档官方文档.png 常用的 ...
小程序跳到h5页面_微信小程序跳转到H5页面实战篇
有些场景需要从微信小程序跳转到H5页面,通常网上的教程会告诉你使用web-view组件就可以了,但实际开发中还有很多需要注意的地方,尤其是很多概念往往会把初学者弄糊涂了,下面就让我们从概念开始吧!微信 ...

微信小程序之个人中心静态页面

微信小程序之个人中心静态页面相关推荐

最新文章

热门文章