interest-purchase/src/pageSubs/other/billDetail.vue

<!--
 * @Descripttion: 账单详情
 * @version: 1.0.0
 * @Author: dream
 * @Date: 2021-03-26 16:25:14
 * @LastEditors: dream
 * @LastEditTime: 2021-04-12 12:11:32
-->
<template>
	<view class="bill-detail-main iph-bg-fff">
    <view class="detail-header u-border-bottom">
      <view class="order-icon iph-icon-order"></view>
      <view class="u-m-t-32 u-font-32 u-line-44">订货</view>
      <view class="detail-price">26.00</view>
    </view>
    <view class="detail-body">
      <view class="u-flex u-m-b-24">
        <view class="detail-label">交易时间</view>
        <view class="u-m-l-32">03-09 13:32</view>
      </view>
      <view class="u-flex u-m-b-24">
        <view class="detail-label">交易单号</view>
        <view class="u-m-l-32">33M32332324544</view>
      </view>
      <view class="u-flex u-m-b-24">
        <view class="detail-label">支付时间</view>
        <view class="u-m-l-32">03-09 13:32</view>
      </view>
      <view class="u-flex u-m-b-24">
        <view class="detail-label">支付方式</view>
        <view class="u-m-l-32">微信支付</view>
      </view>
      <view class="u-flex">
        <view class="detail-label">备注</view>
        <view class="u-m-l-32">订货4284892953994343</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'billDetail',
  data () {
    return {

    }
  },
  onLoad () {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.bill-detail-main {
  padding: 44px 48px 0;
  .order-icon {
    width: 84px;
    height: 84px;
  }
  .detail-header {
    padding-bottom: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .detail-price {
      margin-top: 8px;
      line-height: 80px;
      font-size: 56px;
      font-weight: 500;
    }
  }
  .detail-body {
    padding: 40px 0;
    .detail-label {
      width: 104px;
      color: $iph-desc-text;
    }
  }
}
</style>