微信小程序简单的用户页面模板

<view class='index-contier'>
  <view class="index-center">
    <view class="logo">
      <open-data type="userAvatarUrl" class="userinfo" id="userinfo1"></open-data>
    </view>
    <view id="userinfo2">
      <open-data type="userNickName" class="userinfo"></open-data>
    </view>
  </view>
</view>
<view class='inform'>
  <view class="item-box">
    <view class="items">
      <view class="item">
        <view class="inner txt">
          <image class="item-icon" mode="widthFix" src="/img/manger.png"></image>
          <i> 工号</i>
          <span class="item-data">
            <i class="rankpace"> {{user.empNo}}</i>
          </span>
        </view>
      </view>
      <view class="item">
        <view class="inner txt">
          <image class="item-icon" mode="widthFix" src="/img/name.png"></image>
          <i> 姓名</i>
          <span class="item-data">
            <i class="rankpace">{{user.name}}</i>
          </span>
        </view>
      </view>
      <view class="item">
        <view class="inner txt">
          <image class="item-icon" mode="widthFix" src="/img/sex.png"></image>
          <i> 性别</i>
          <span class="item-data">
            <i wx:if="{{user.sex == '1'}}">男</i>
            <i wx:if="{{user.sex == '0'}}">女</i>
          </span>
        </view>
      </view>
      <view class="item">
        <view class="inner txt">
          <image class="item-icon" mode="widthFix" src="/img/phone.png"></image>
          <i> 手机</i>
          <span class="item-data">
            <i class="rankpace"> {{user.phone}}</i>
          </span>
        </view>
      </view>
    </view>
  </view>
</view>

var app = getApp()
Page({
  data: {
    user: {},
  },
  onShow: function (options) {
    console.log()
    var that = this;
    wx.request({
      url: app.globalData.root + "wx/" + app.globalData.openid + ".do",
      method: 'GET',
      header: {
        'Content-type': 'application/json'
      },
      success: function (res) {
        that.setData({ user: res.data });
      }
    });
  }
})

.img {
  width: 60rpx;
  height: 60rpx;
  margin-top: 18rpx;
}
.index-contier {
  color: #fff;
  font-size: 12px;
  width: 100%;
  height: 570rpx;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("图片路径");
}
.index-left {
  float: left;
  width: 30%;
  text-align: center;
  margin-top: 477rpx;
  color: #000;
}
.index-center {
  float: left;
  width: 40%;
  text-align: center;
  margin-top: 240rpx;
  color: #000;
}
.logo {
  margin: 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 40px;
}
.index-right {
  float: left;
  width: 30%;
  text-align: center;
  margin-top: 477rpx;
  color: #000;
}
.index-right image {
  height: 100%;
  width: 100%;
}
.inform {
  padding: 0 6px;
  font-size: 30rpx;
}
#userinfo1 {
  width: 185rpx;
  height: 185rpx;
  /* margin:20rpx; */
  border-radius: 50%;
  display: flex;
  overflow: hidden;
  text-align: center;
}
#userinfo2 {
  font-family: "微软雅黑";
  font-size: 15px;
  margin-top: 75rpx;
  color:#ffffff;
}
/* pages/leftSwiperDel/index.wxss */
view {
  box-sizing: border-box;
}
.item-box {
  width: 700rpx;
  margin: 0 auto;
}
.items {
  width: 100%;
}
.item {
  position: relative;
  border-top: 2rpx solid #eee;
  height: 110rpx;
  line-height: 120rpx;
  overflow: hidden;
}
.item:last-child {
  border-bottom: 2rpx solid #eee;
}
.inner {
  position: absolute;
  top: 0;
}
.inner.txt {
  background-color: #fff;
  width: 100%;
  z-index: 5;
  padding: 0 10rpx;
  transition: left 0.2s ease-in-out;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inner.del {
  background-color: #e64340;
  width: 180rpx;
  text-align: center;
  z-index: 4;
  right: 0;
  color: #fff;
}
.item-icon {
  width: 60rpx;
  height: 60rpx;
  vertical-align: middle;
  margin-right: 16rpx;
  margin-left: 6px;
  border-radius: 50%;
}
.item-data {
  margin-left: 15%;
}