<template>
  <div class="transaction">
    
         <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">￥30.00</div>
        </div>

         <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">提交账户出错</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">余额提现</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">储蓄卡    6217 **** 264</div>
        </div>
           
        <div class="btns">
           <div class="back">返回</div>
        <div class="back shensu">申诉</div>
        </div>
       
      </div>
      <NavBottom class="navbottom"></NavBottom>
    </div>
    
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import NavBottom from "@/components/NavBottom.vue";
import { useI18n } from '@/utils/i18n';
export default defineComponent({
  name: "Cashoutdetail",
  components: {
      NavBottom
  },
  setup() {
    const lan: any = useI18n();
    return {
		lan
    };
  },
});
</script>
<style lang="scss" scoped>
.transaction ::v-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;
      }
    }
    .btns{
      display: flex;
    }
    .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;
    }
    .shensu{
      background:#D22C2E;
    }
  }
  .navbottom{
      padding-top: 75px;
      padding-bottom: 30px;
  }
}
</style>