一、页面效果

先看一下页面设计出来的效果：

二、实现代码

（一）myindex.wxml：

<!--pages/myindex/myindex.wxml-->
<view class='amountBg'>
  <view class='img'>
    <image src="../../images/userinfo.jpg" style='width:86px;height:86px;'></image>
  </view>
  <view class='account'>
    <view class="name">Plute.</view>
    <view class='manage_text'>普通用户</view>
  </view>
  <view class='set'><image src='/images/icon/set.png'></image></view>
</view>
<view class='contain'>
  <view class='order'>
    <view class='order_text'>我的订单</view>
    <view class='cut'></view>
    <view class='order_list'>
    <view class='cut'></view>
      <view class='desc'>
        <view class="desc_img"><image src='../../images/icon/pay.png'></image></view>
            <view>已付款</view>
        </view>
    <view class='desc'>
      <view class='desc_img'><image src='../../images/icon/car.png'></image></view>
          <view>已取货</view>
      </view>
        <view class='desc'>
      <view class='desc_img'><image src='../../images/icon/complate.png'></image></view>
          <view>已完成</view>
      </view>
    </view>
  </view>
  <view class='clear'></view>
  <view class='item'>
    <view class='icon'><image src='../../images/icon/address.png'></image></view>
    <view class='itemname'>
      <view>收货地址</view>
    </view>
  </view>
    <view class='hr'></view>
   <view class='item' >
    <view class='icon'><image src='../../images/icon/star.png'></image></view>
    <view class='itemname'>
      <view>我的收藏</view>
    </view>
  </view>
  <view class='hr'></view>
  <view class='item'>
    <view class='icon'><image src='../../images/icon/aggrement.png'></image></view>
    <view class='itemname'>
      <view>问题反馈</view>
    </view>
  </view>
  <view class='hr'></view>
  <view class='item'>
    <view class='icon'><image src='../../images/icon/fankui.png'></image></view>
    <view class='itemname'>
      <view>协议说明</view>
    </view>
  </view>
</view>

（二）myindex.wxss

Page{
  background-color: #f4f4f4;
}
.amountBg{
  height: 330rpx;
  background:linear-gradient(to top,#de4e30,#910327);
  display: flex;
  flex-direction: row;
}
.img{
  margin-left:60rpx; 
  margin-top:50rpx;
}
.account{
  color: #ffffff;
  margin-left: 30rpx;
  margin-top: 68rpx;
}
.name{
  font-size: 50rpx;
}
.manage_text{
  font-size: 30rpx;
  color: white;
  margin-top: 10rpx;
  border:2rpx solid #9b9b9b;
  border-radius: 40rpx;
  text-align: center;
}
.set{
  margin-top: 80rpx;
  margin-left: 280rpx;
}
.set image{
  width: 46rpx;
  height: 46rpx;
}
.order{
  width:92%;
  height: 260rpx;
  margin:0 auto;
  background-color: #ffffff;
  border-radius: 20rpx;
  text-align: center;
  margin-bottom: 40rpx;
  margin-top: -80rpx;
  display: flex;
  flex-direction: column;
  box-shadow:0rpx  8rpx  8rpx 3rpx rgb(221, 220, 220);
}
.order_text{
  font-size: 44rpx;
  color: gray;
  margin-top: 20rpx;
  text-align: left;
  height:60rpx;
  margin-left: 30rpx;
}
.cut{
  opacity: 0.2;
  height: 2rpx;
  margin-top: 20rpx;
  background-color: #000000;
}
.order_list{
  display: flex;
  flex-direction:row;
}
.desc{
  color: gray;
  width: 33%;
  font-size: 30rpx;
}
.item{
  background-color: #ffffff;
  display: flex;
  margin:0 auto;
  flex-direction: row;
  height: 100rpx;
  align-items: center;
  width: 92%;
  margin-top: 20rpx;
  border-radius: 20rpx;
  box-shadow:0rpx  8rpx  8rpx 3rpx rgb(221, 220, 220);
}
.icon{
  width: 100rpx;
  text-align: center;
  margin-top: 16rpx;
}
.itemname{
  color: gray;
  width: 40%;
  font-size: 34rpx;
}
.hr{
  height: 2rpx;
  background-color: #000000;
  width: 90%;
  margin: 0 auto;
  opacity: 0.2;
}
.remark{
  font-weight: normal;
  margin-top:10rpx; 
}
.right{
  color: #707075;
  width: 40%;
  text-align: right;
}
.desc_img image{
  margin-top: 16rpx;
  width: 90rpx;
  height: 90rpx;
}
.icon image{
  height: 62rpx;
  width: 62rpx
}

实现的页面为静态页面，没有添加点击效果，可以自己添加相应的bindtap事件响应。