<view class="container"> <!--顶部头像--> <view class="top"> <navigator url="../login/login" hover-class="navigator-hover" class="photo"> <image src="http://ojhq3mgil.bkt.clouddn.com/478/20161227/201612271616015049.jpg"></image> </navigator> <view class="phone_num">13166292893</view> </view> <!--/顶部头像end--> <!--个人中心列表项--> <view class="item_list"> <!-- <navigator url="../login/login" hover-class="navigator-hover">点击登录</navigator> --> <view bindtap="toOrder" class="item_list_msg"> <view class="list_icon"><image src="../../images/icon_wddd.png"></image></view> <text>我的订单</text> </view> <view class="line_x"></view> <view bindtap="toAddress" class="item_list_msg"> <view class="list_icon"><image src="../../images/icon_shdz.png"></image></view> <text>收货地址</text> </view> <view class="line_x"></view> <view bindtap="toclllectProduct" class="item_list_msg"> <view class="list_icon"><image src="../../images/icon_wdsc.png"></image></view> <text>收藏的商品</text> </view> <view class="line_x"></view> <view bindtap="tocollectStore" class="item_list_msg"> <view class="list_icon"><image src="../../images/icon_SCdianpu.png"></image></view> <text>收藏的店铺</text> </view> <view class="line_x"></view> <view bindtap="toBuyerOrder" class="item_list_msg"> <view class="list_icon"><image src="../../images/icon_spdd.png"></image></view> <text>商铺订单管理</text> </view> </view> <!--/个人中心列表项end--> </view> <!--/container end--> |
.top{ text-align: center; background: #ff6662; max-width: 768px; width: 100%; margin: 0 auto; color: #fff; padding: 24rpx 0; } .photo{ width: 360rpx; height:360rpx; margin: 0 auto; padding: 10px; border: 1px solid #ff7981; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .photo image{ border-radius: 50%; width: 100%; height: 100%; } /*项目列表*/ .item_list{ background-color: white; font-size: 32rpx; } .item_list_msg{ position: relative; padding: 28rpx; } .list_icon{ float: left; width: 28px; height: 28px; margin-right: 15rpx; margin-top: -10rpx; background-repeat: no-repeat; } .list_icon image{ width: 100%; height: 100%; } .item_list_msg::after{ content: ' '; position: absolute; right: 15px; top: 20px; border: #999999 solid; border-width: 1px 0 0 1px; width: 8px; height: 8px; -webkit-transform: rotate(135deg); } .line_x{ width: 100%; height: 2rpx; background-color: #f3f3f3; } |
//userhome.js Page({ toOrder:function() { wx.navigateTo({ url: 'seller_order/seller_order' }) }, toAddress:function (){ wx.navigateTo({ url: 'address/address' }) }, tocollectStore:function (){ wx.navigateTo({ url: 'collect_store/collect_store' }) }, toclllectProduct:function (){ wx.navigateTo({ url: 'collect_product/collect_product' }) }, toBuyerOrder:function (){ wx.navigateTo({ url: 'buyer_order/buyer_order' }) } }) |
模板简介:该模板名称为【微信小程序红背景彩色图标个人中心样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。