157 lines
3.7 KiB
Vue
157 lines
3.7 KiB
Vue
<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> |