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.
146 lines
3.1 KiB
Vue
146 lines
3.1 KiB
Vue
<template>
|
|
<div class="training-overview">
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<div class="grid-content bg-purple">
|
|
<span>期初资金:<i>10000</i><em>美元</em> </span>
|
|
<span>已用保证金:<i>20.16</i> <em>美元</em> </span>
|
|
<span
|
|
>持仓盈亏:
|
|
<template>
|
|
<i style="color: #2cb7b0">-24.91</i>
|
|
</template>
|
|
<em>美元</em>
|
|
</span>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8"
|
|
><div class="grid-content bg-purple">
|
|
<span>总资产:<i>10006.21</i><em>美元</em> </span>
|
|
<span>可用资金:<i>9961.72</i><em>美元</em> </span>
|
|
<span
|
|
>累计盈亏:
|
|
<template>
|
|
<i style="color: #ec6c01">6.21</i>
|
|
</template>
|
|
<em>美元</em>
|
|
</span>
|
|
</div></el-col
|
|
>
|
|
<el-col :span="6"
|
|
><div class="grid-content bg-purp">
|
|
<span>净值:<i>9982.40</i><em>美元</em> </span>
|
|
<span>保证金水平:<i>48433.12%</i><em>美元</em> </span>
|
|
</div></el-col
|
|
>
|
|
</el-row>
|
|
|
|
<el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane
|
|
v-for="(item, index) in tabsArr"
|
|
:key="index"
|
|
:label="item.label"
|
|
:name="item.name"
|
|
>
|
|
<components
|
|
:is="item.name"
|
|
:id="id"
|
|
v-if="item.name == nowName"
|
|
></components>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import tabs1 from "./components/current.vue";
|
|
import tabs2 from "./components/deals.vue";
|
|
export default {
|
|
name: "",
|
|
components: {
|
|
tabs1,
|
|
tabs2,
|
|
},
|
|
data() {
|
|
return {
|
|
activeName: "tabs1",
|
|
nowName: "tabs1",
|
|
tabsArr: [
|
|
{
|
|
label: "当前持仓",
|
|
name: "tabs1",
|
|
},
|
|
{
|
|
label: "历史成交",
|
|
name: "tabs2",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
created() {},
|
|
computed: {},
|
|
methods: {
|
|
handleClick(tab) {
|
|
tab.name == "tabs1"
|
|
? (this.nowName = tab.name)
|
|
: (this.nowName = tab.name);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
.training-overview {
|
|
position: relative;
|
|
}
|
|
.el-row {
|
|
margin-bottom: 20px;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.grid-content {
|
|
border-radius: 4px;
|
|
min-height: 36px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-right: 1px #eaeaea solid;
|
|
span {
|
|
margin-bottom: 20px;
|
|
color: #999999;
|
|
i {
|
|
color: black;
|
|
font-size: 18px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
margin-right: 5px;
|
|
}
|
|
em {
|
|
font-size: 14px;
|
|
color: black;
|
|
}
|
|
}
|
|
&.bg-purp {
|
|
border-right: none;
|
|
}
|
|
}
|
|
.row-bg {
|
|
padding: 10px 0;
|
|
background-color: #f9fafc;
|
|
}
|
|
::v-deep .tabs {
|
|
background: #F5F6F6;
|
|
padding: 19px;
|
|
border-radius: 5px;
|
|
.el-tabs__nav-wrap::after {
|
|
background: transparent;
|
|
}
|
|
.el-tabs__item {
|
|
background: #F5F6F6 !important;
|
|
margin-right: 0px !important;
|
|
&.is-active {
|
|
background-color: #3c9cf5;
|
|
color: #3c9cf5 !important;
|
|
}
|
|
}
|
|
}
|
|
</style> |