小程序--我的

<import src="../../template/baseNavigationBar.wxml"/>
<template is="navigationBar" data="{{...item}}"></template>
<!--pages/myself/myself.wxml -->
<scroll-view scroll-y style="height:{{wh}}px;margin-top: 140rpx" bindscrolltolower="onBottom">
  <view class='myself'>
    <view class='myself_header'>
      <image class='bg_img' src='../../images/44.png' mode='widthFix' />
      <view class='header'>
        <view class='header_content' bindtap='goToLogin'>
          <view class='hd_img'>
            <image src='../../images/44.png' open-type="getUserInfo" bindgetuserinfo="getUserInfo"></image>
          </view>
          <view class='name'>李振</view>
        </view>
      </view>
    </view>
  </view>
  <view class='login_iphone'>
    <view>登录手机号，同步全渠道订单和优惠券 </view>
    <view class='login'>登录</view>
  </view>
</scroll-view>
<!-- 我的订单  -->
<view class='wx_myself_order' bindtap='bindlook'>
  <text class='myorder'>我的订单</text>
  <view>
    <text class='wx_see'>查看全部订单</text>
    <text class='iconfont icon-arrowright'></text>
  </view>
</view>

<view class='order_list'>
  <view class='order_item'>
    <text class='iconfont icon-qianbao_refund'></text>
    <view>待付款</view>
  </view>
  <view class='order_item'>
    <text class='iconfont icon-daifahuo_refund1'></text>
    <view>待发货</view>
  </view>
  <view class='order_item'>
    <text class='iconfont icon-yishouhuo_refund'></text>
    <view>待收货</view>
  </view>
  <view class='order_item'>
    <text class='iconfont icon-pinglun2'></text>
    <view>待评价</view>
  </view>
  <view class='order_item'>
    <text class='iconfont icon-refund'></text>
    <view>退款维权</view>
  </view>
</view>

<view class='shop_car'>
  <view class='car'>
    <view>
      <text class='iconfont icon-toolbar_cart_normal'></text>
      <text>购物车</text>
    </view>
    <view>
      <text class='iconfont icon-arrowright'></text>
    </view>
  </view>
</view>

<view class='shop_car'>
  <view class='car'>
    <view>
      <text class='iconfont icon-map_line-'></text>
      <text>收货地址</text>
    </view>
    <view>
      <text class='iconfont icon-arrowright'></text>
    </view>
  </view>
</view>

<view class='shop_car'>
  <view class='car'>
    <view>
      <text class='iconfont icon-person_line'></text>
      <text>个人设置</text>
    </view>
    <view>
      <text class='iconfont icon-arrowright'></text>
    </view>
  </view>
</view>

<view class='shop_car'>
  <view class='car'>
    <view>
      <text class='iconfont icon-shezhi'></text>
      <text>账号设置</text>
    </view>
    <view>
      <text class='iconfont icon-arrowright'></text>
    </view>
  </view>
</view>

@import "../../lib/style/iconfont.wxss";
@import "../../lib/style/base.wxss";
@import "../../lib/style/baseNavigationBar.wxss";

page {
  background-color: #f3f3f3;
}

.myself_header {
  position: relative;
  width: 100%;
  height: 325rpx;
  overflow: hidden;
}

.bg_img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
}

.header {
  position: absolute;
  width: 100%;
  top: 120rpx;
}

.header_content {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.hd_img {
  width: 120rpx;
  height: 120rpx;
  margin-right: 24rpx;
  border: solid 2rpx white;
  border-radius: 50%;
}

.hd_img button {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

.hd_img image {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

.wx_header_right {
  flex: 1;
  text-align: right;
}

.wx_myself_order {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 20rpx;
  background: white;
  border-bottom: solid 2rpx #eee;
  align-items: center;
}

.myorder {
  font-size: 30rpx;
}

.wx_see {
  font-size: 28rpx;
  color: #555;
  margin-right: 10rpx;
}

.icon-shezhi {
  font-size: 28rpx;
  color: #555;
  margin-right: 20rpx;
}

.icon-person_line {
  font-size: 28rpx;
  color: #555;
  margin-right: 20rpx;
}

.icon-map_line- {
  font-size: 28rpx;
  color: #555;
  margin-right: 20rpx;
}

.icon-toolbar_cart_normal {
  font-size: 28rpx;
  color: #555;
  margin-right: 20rpx;
}

.header_content .name {
  color: #303030;
}

.login_iphone {
  display: flex;
  padding: 20rpx 30rpx;
  font-size: 24rpx;
  background: white;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.login {
  padding: 10rpx 20rpx;
  color: white;
  background: #f44;
}

.order_list {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  background: white;
  margin-bottom: 10rpx;
}

.order_item {
  width: 20%;
  text-align: center;
  font-size: 24rpx;
}

.shop_car {
  padding: 20rpx 0 0 20rpx;
  background: white;
  font-size: 26rpx;
}

.shop_car:nth-child(2n +1) {
  margin-bottom: 20rpx;
}

.car {
  align-items: center;
  justify-content: space-between;
  display: flex;
  margin-left: 20rpx;
  border-bottom: 2rpx solid #f3f3f3;
  padding-bottom: 20rpx;
  padding-right: 20rpx;
}

.car:nth-child(2n) {
  border-bottom: none;
}