欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序单页面模板之投资金融融资会员个人中心页面制作设计

    2018-05-17 09:42 来源/作者:懒人模板 分类:小程序教程  « »
    今天给大家带来微信小程序单页面模板之投资金融融资会员个人中心页面制作设计教程,主要适合投资、金融、融资财金类个人会员中心页面,制作完毕效果图如下:


    一、wxml页面代码如下:
    <!--pages/centrality/centrality.wxml-->
    <view class='container'>
      <view class='user-info' catchtap='toMyInfo'>
      <view class='vip'>V</view>
      <view class='no-vip'>
        <image src='../images/huang.png' class='huang'></image>
        <view>成为会员</view>
      </view>
        <image src='../images/user_img.png' class='userHead'></image>
        <view style='margin-left: 37rpx'>
          <view class='userName'>
            <text style='font-size:36rpx;font-weight: bold;margin-right:20rpx'>徐小平</text>总经理</view>
          <view class='company'>联想创投有限公司</view>
        </view>
      </view>
    
      <view class='mySetting'>
        <view class='mySetting-in'>
          <view class='mine' catchtap='toMyData'>
            <view class='mine-in'>
              <image src='../images/ziliao.png' class='tubiao'></image>
              <view>完善资料</view>
            </view>
            <view class='mine-in'>
              <view style="color:#999">未认证</view>
              <image src='../images/question.png' class='question'></image>
              <image src='../images/arrow.png' class='arrow'></image>
            </view>
          </view>
          <view class='mine' catchtap='toMyMessage'>
            <view class='mine-in'>
              <image src='../images/xiaoxi.png' class='tubiao'></image>
              <view>我的消息</view>
            </view>
            <view class='mine-in'>
              <image src='../images/arrow.png' class='arrow'></image>
            </view>
          </view>
          <view class='mine' catchtap='toMyConsume'>
            <view class='mine-in'>
              <image src='../images/xiaofei.png' class='tubiao'></image>
              <view>我的消费</view>
            </view>
            <view class='mine-in'>
              <image src='../images/arrow.png' class='arrow'></image>
            </view>
          </view>
        </view>
      </view>
    
      <view class='line'></view>
    
      <view class='system'>
        <view class='system-in'>
          <view class='mine' catchtap='tel'>
            <view class='mine-in'>
              <image src='../images/kefu.png' class='tubiao'></image>
              <view>联系客服</view>
            </view>
            <view class='mine-in'>
              <image src='../images/tel.png' class='tel'></image>
            </view>
          </view>
          <view class='mine' catchtap='toMySetting'>
            <view class='mine-in'>
              <image src='../images/shezhi.png' class='tubiao'></image>
              <view>系统设置</view>
            </view>
            <view class='mine-in'>
              <image src='../images/arrow.png' class='arrow'></image>
            </view>
          </view>
        </view>
      </view>
    
    
    
    </view>
    
    
    
    
    
    
    
    
    
    
    <!--tab切换  -->
    <import src="/pages/template/template.wxml" />
    <template is="enterprise-tab" data="{{userInfo}}" />

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议