
<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'
})
}
})
|
模板简介:该模板名称为【微信小程序红背景彩色图标个人中心样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。