首页 > 小程序教程 > 微信小程序红背景彩色图标个人中心样式模板制作设计下载

微信小程序红背景彩色图标个人中心样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下:
一、wxml页面代码如下:
<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-->
 
二、wxss样式文件代码如下:
.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;
}
三、js页面代码如下:
//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'
	    })
	}
})

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

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 28,433次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-01
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
自适应 微信公众平台 微信模板 响应式 微信素材 企业网站 html5 单页式简历模板 微信文章 微信图片
您可能会喜欢的其他模板