<template>
  <div class="transaction">
      <a-breadcrumb separator=">">
      <a-breadcrumb-item>Home</a-breadcrumb-item>
      <a-breadcrumb-item href=""> Application Center </a-breadcrumb-item>
      <a-breadcrumb-item href=""> Application List </a-breadcrumb-item>
      <a-breadcrumb-item>An Application</a-breadcrumb-item>
    </a-breadcrumb>
         <div class="mingxilist">
      <div class="tabs">
        <div class="beforetab">交易明细详情</div>
      </div>
      <div class="detail">
        <div class="infoitem">
          <div class="left">金额</div>
          <div class="right">￥30.00</div>
        </div>

        <div class="infoitem">
          <div class="left">类型</div>
          <div class="right">收入</div>
        </div>

        <div class="infoitem">
          <div class="left">流水号</div>
          <div class="right">126545654561656515616256565646556</div>
        </div>

        <div class="infoitem">
          <div class="left">日期</div>
          <div class="right">2020-08-17  14:23:20</div>
        </div>

        <div class="infoitem">
          <div class="left">来源</div>
          <div class="right">直播收益—英语三级A1教学</div>
        </div>
      
        <div class="back">返回</div>
      </div>
      <NavBottom class="navbottom"></NavBottom>
    </div>
    
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import NavBottom from "@/components/NavBottom.vue";
export default defineComponent({
  name: "Transactiondetail",
  components: {
      NavBottom
  },
  setup() {
 
    return {
 
    };
  },
});
</script>
<style lang="scss" scoped>
.transaction /deep/ .ant-breadcrumb > span:last-child {
  color: #08ae98;
}
.transaction{
      .mingxilist {
    width: 1150px;
    // height: 533px;
    background: white;
    border-radius: 18px;
    margin-top: 18px;
    .tabs {
      display: flex;
      flex-wrap: nowrap;
      padding-top: 35px;
      padding-left: 40px;
    }
    .beforetab {
      color: #121212;
      font-size: 13px;
      line-height: 35px;
      font-weight: bold;
      margin-right: 57px;
    }
  }
  .detail{
    margin-top: 34px;
    .infoitem{
      width: 310px;
      display: flex;
      justify-content: space-between;
      color: #404040;
      font-size: 12px;
      margin-bottom: 40px;
      margin-left: 63px;
      .left{
        color: #808080;
      }
      .right{
        width: 225px;
      }
    }
    .back{
      width: 63px;
      height:23px;
      background: #08AE98;
      font-size: 10px;
      color: white;
      text-align:center;
      line-height: 23px;
      border-radius: 3px;
      margin-top: 57px;
      margin-left: 63px;
    }
  }
  .navbottom{
      padding-top: 75px;
      padding-bottom: 30px;
  }
}
</style>