<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>
        <table class="table">
          <thead>
            <tr class="head">
              <th>日期</th>
              <th>类型</th>
              <th>金额</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>2020-08-13 13:54</td>
              <td>直播收入</td>
              <td class="moneyadd">+￥320</td>
              <td>查看详情</td>
            </tr>
            <tr>
              <td>2020-08-13 13:54</td>
              <td>直播收入</td>
              <td class="moneyreverse">+￥320</td>
              <td>查看详情</td>
            </tr>

            <tr>
              <td>2020-08-13 13:54</td>
              <td>直播收入</td>
              <td class="moneyadd">+￥320</td>
              <td>查看详情</td>
            </tr>
            <tr>
              <td >2020-08-13 13:54</td>
              <td>直播收入</td>
              <td class="moneyadd">+￥320</td>
              <td>查看详情</td>
            </tr>
            <tr>
              <td>2020-08-13 13:54</td>
              <td>直播收入</td>
              <td class="moneyadd">+￥320</td>
              <td>查看详情</td>
            </tr>
            <tr>
              <td>2020-08-13 13:54</td>
              <td>直播收入</td>
              <td class="moneyadd">+￥320</td>
              <td>查看详情</td>
            </tr>
            <tr>
              <td>2020-08-13 13:54</td>
              <td>直播收入</td>
              <td class="moneyadd">+￥320</td>
              <td>查看详情</td>
            </tr>
            <tr>
              <td>2020-08-13 13:54</td>
              <td>直播收入</td>
              <td class="moneyadd">+￥320</td>
              <td>查看详情</td>
            </tr>
          </tbody>
        </table>
      </div>
      <NavBottom class="navbottom"></NavBottom>
    </div>
    
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import NavBottom from "@/components/NavBottom.vue";
export default defineComponent({
  name: "Transaction",
  components: {
      NavBottom
  },
  setup() {
 
    return {
 
    };
  },
});
</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;
    }
  }
  .table {
    width: 1150px;
    height: 365px;
    text-align: center;
    color: #343434;
    font-size: 12px;
    margin-top: 13px;
    tr {
      width: 1150px;
      height: 40px;
      // border-bottom: 1px solid red;
    }
    tr:nth-child(even) {
      //偶数行
      background: #f7fcfc;
    }
    .head {
      width: 1150px;
      height: 43px;
      color: white;
      background: #08ae98;
    }
    .moneyadd {
      color: #08ae98;
    }
    .moneyreverse {
      color: #d22d2e;
    }
  }
  .navbottom{
      padding-top: 75px;
      padding-bottom: 30px;
  }
}
</style>