You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
158 lines
4.1 KiB
Vue
158 lines
4.1 KiB
Vue
<template>
|
|
<div>
|
|
<el-table
|
|
:data="tableData"
|
|
style="width: 100%"
|
|
:cell-style="{ background: '#f8f8f9' }"
|
|
>
|
|
<el-table-column prop="ranking" label="时间" width="150" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="class" label="交易品种" width="140" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="StudentID" label="订单号" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="profit" label="类型" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
v-if="scope.row.profit"
|
|
style="color: #fc3d64; border: none; background-color: #faeff0"
|
|
size="small"
|
|
>买方
|
|
</el-button>
|
|
<el-button
|
|
v-else
|
|
style="color: #3c9cf5; border: none; background-color: #eaf5ff"
|
|
size="small"
|
|
>卖方
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="income" label="交易量" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="income" label="交易价位" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="number" label="止损" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="Simulation" label="止盈" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="experiment" label="平仓时间" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="address" label="平仓价位" align="center">
|
|
</el-table-column>
|
|
<el-table-column prop="address" label="盈利" align="center">
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination :total="10" />
|
|
<div class="transaction-footer">
|
|
<span>累计盈亏: <i>+8999.22</i> </span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tableData: [
|
|
{
|
|
ranking: "2023-06-13 22:22:21",
|
|
class: "eurusd",
|
|
name: 1,
|
|
StudentID: "2003001",
|
|
profit: "+20000",
|
|
income: "50%",
|
|
number: "8",
|
|
Simulation: "80",
|
|
experiment: "70",
|
|
},
|
|
{
|
|
ranking: "2023-06-13 22:22:21",
|
|
class: "eurusd",
|
|
name: 0,
|
|
StudentID: "2003001",
|
|
profit: "+20000",
|
|
income: "20%",
|
|
number: "8",
|
|
Simulation: "80",
|
|
experiment: "70",
|
|
},
|
|
{
|
|
ranking: "2023-06-13 22:22:21",
|
|
class: "eurusd",
|
|
name: 0,
|
|
StudentID: "2003001",
|
|
profit: "+20000",
|
|
income: "20%",
|
|
number: "8",
|
|
Simulation: "80",
|
|
experiment: "70",
|
|
},
|
|
{
|
|
ranking: "2023-06-13 22:22:21",
|
|
class: "eurusd",
|
|
name: 1,
|
|
StudentID: "2003001",
|
|
profit: "+20000",
|
|
income: "20%",
|
|
number: "8",
|
|
Simulation: "80",
|
|
experiment: "70",
|
|
},
|
|
{
|
|
ranking: "2023-06-13 22:22:21",
|
|
class: "eurusd",
|
|
name: 0,
|
|
StudentID: "2003001",
|
|
profit: "+20000",
|
|
income: "20%",
|
|
number: "8",
|
|
Simulation: "80",
|
|
experiment: "70",
|
|
},
|
|
{
|
|
ranking: "2023-06-13 22:22:21",
|
|
class: "eurusd",
|
|
name: 1,
|
|
StudentID: "2003001",
|
|
profit: "+20000",
|
|
income: "20%",
|
|
number: "8",
|
|
Simulation: "80",
|
|
experiment: "70",
|
|
},
|
|
|
|
{
|
|
ranking: "2023-06-13 22:22:21",
|
|
class: "eurusd",
|
|
name: 0,
|
|
StudentID: "2003001",
|
|
profit: "-20000",
|
|
income: "40%",
|
|
number: "8",
|
|
Simulation: "80",
|
|
experiment: "70",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.transaction-footer {
|
|
height: 25px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 16px;
|
|
& span {
|
|
margin-right: 51px;
|
|
& i {
|
|
color: pink;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
}
|
|
.pagination-container {
|
|
background: #f5f6f6 !important;
|
|
}
|
|
</style> |