<template>
|
<div class="trade_new">
|
<tab-head></tab-head>
|
|
<van-row class="list_head">
|
<van-col span="8" class="flex-start head_item">
|
{{ $t("hj313") }}/{{ $t("Worth") }}
|
</van-col>
|
<van-col span="8" class="flex-start head_item">
|
{{ $t("sl") }}/{{ $t("Profit") }}
|
</van-col>
|
<van-col span="8" class="flex-end head_item">
|
{{ $t("Cost") }}/{{ $t("Current") }}
|
</van-col>
|
</van-row>
|
|
<van-row class="list_item" v-for="item in 10" :key="item">
|
<van-col span="8" class="item_n">
|
<div class="flex-start">
|
<span class="i_icon">US</span>
|
<span class="i_hint">WINVU</span>
|
</div>
|
<div class="i_name">124.1</div>
|
</van-col>
|
<van-col span="8" class="item_n">
|
<p class="flex-start">18</p>
|
<p class="flex-start i_name">24.1 (24.1%)</p>
|
</van-col>
|
<van-col span="8" class="item_n">
|
<div class="flex-end" style="margin-bottom: .15em;">
|
<span>10</span>
|
</div>
|
<div class="flex-end">
|
<span>12.41</span>
|
</div>
|
</van-col>
|
<van-col span="24" class="flex-start transaction_type">
|
<span>AI交易</span>
|
</van-col>
|
<van-col span="24" class="flex-between item_card">
|
<div class="card_label">
|
<p>建仓成本</p>
|
<p>100</p>
|
</div>
|
<div class="card_label">
|
<p>平仓金额</p>
|
<p>90</p>
|
</div>
|
<div class="card_label">
|
<p>预期收益</p>
|
<p>-10</p>
|
</div>
|
</van-col>
|
</van-row>
|
</div>
|
</template>
|
|
<script>
|
import tabHead from "@/components/tabHead.vue";
|
|
export default {
|
components: {
|
tabHead
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@green2: #f0f0f0;
|
@dark_green: #07c160;
|
@red: #ee0a24;
|
@brown: #ff976a;
|
|
.trade_new {
|
width: 100%;
|
height: 100%;
|
background: #fff;
|
font-size: 10vw;
|
|
.list_head {
|
background-color: @green2;
|
margin-top: 0.25em;
|
height: 1em;
|
padding: 0 0.25em;
|
|
.head_item {
|
font-size: 0.35em;
|
height: 100%;
|
font-weight: 500;
|
}
|
}
|
|
.list_item {
|
padding: 0.4em 0.25em 0.25em;
|
border-bottom: #f5f5f5 solid 0.01em;
|
position: relative;
|
|
.item_card {
|
background-color: @green2;
|
margin-top: 0.2em;
|
border-radius: 0.2em;
|
padding: 0.25em;
|
|
.card_label {
|
width: 33.33%;
|
text-align: start;
|
color: #999;
|
font-size: 0.35em;
|
|
& > p:last-child {
|
color: #333;
|
margin-top: 0.15em;
|
}
|
}
|
}
|
|
.transaction_type {
|
color: #fff;
|
padding-top: 0.08em;
|
span {
|
font-size: 0.3em;
|
background: @brown;
|
padding: 0.2em 0.3em 0.15em;
|
border-radius: 0.2em;
|
font-weight: 300;
|
}
|
}
|
|
p,
|
span {
|
font-size: 0.9em;
|
}
|
|
.item_n {
|
font-size: 0.4em;
|
min-height: 2em;
|
font-weight: 500;
|
|
.i_icon {
|
border-radius: 0 26em 26em 0;
|
background: @dark_green;
|
color: #fff;
|
padding: 0.1em 0.5em 0.1em 0.4em;
|
margin-right: 0.3em;
|
font-size: 0.8em;
|
}
|
|
.i_name {
|
margin-top: 0.2em;
|
// color: #777777;
|
font-size: 0.9em;
|
}
|
}
|
|
.edit {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
background: linear-gradient(
|
to right,
|
rgba(0, 0, 0, 0),
|
rgba(0, 0, 0, 0.8)
|
);
|
text-align: end;
|
color: @red;
|
padding-right: 0.25em;
|
|
span {
|
font-size: 0.55em;
|
}
|
}
|
}
|
}
|
</style>
|
