123 lines
2.7 KiB
Vue
123 lines
2.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 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> |