<template>
|
<div class="buy_page">
|
<div class="content">
|
<div class="top_cny">
|
<div class="top_back">
|
<div class="left_back" @click="handleBack()">
|
<img src="../../assets/img/zuojiantou.png" alt />
|
</div>
|
<div class="right_title">
|
<div class="t_t">
|
<span>{{ '人民币' }}</span>
|
</div>
|
<div class="b_t">
|
<span>{{ 'CNY' }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="bottom_buy_price">
|
<div class="cot">
|
<div class="lefts">
|
<div class="top_new">
|
<span>{{ '1.34609' }}</span>
|
</div>
|
<div class="bottom_es">
|
<span>{{ '买入价' }}</span>
|
</div>
|
</div>
|
<div class="rights">
|
<div class="ese">
|
<div class="mr"
|
v-for="(item, index) in tradingArr"
|
:key="index"
|
@click="handleTradingClick(index)"
|
:class="tabsCurrentIndex === index ? 'active' : ''"
|
>
|
<span>{{ item }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="price_tabs">
|
<div class="tabs">
|
<div class="tab_item"
|
v-for="(item, index) in priceTabs"
|
:key="index"
|
@click="handleTabsClick(item, index)"
|
:class="priceTabsCurrentIndex === index ? 'active' : ''"
|
>
|
<span>{{ item }}</span>
|
</div>
|
</div>
|
<div class="tabs_content">
|
<div class="num">
|
<span>{{ '交易数量(手)' }}</span>
|
</div>
|
<div class="tr_es">
|
<div class="top_input">
|
<input type="text" v-model="num">
|
</div>
|
</div>
|
<div class="tr_rs gg">
|
<div class="top_bzz">
|
<span>{{ '杠杆' }}</span>
|
<span>{{ '200X' }}</span>
|
</div>
|
<div class="bottom_bzz">
|
<span>{{ }}</span>
|
<span>{{ }}</span>
|
</div>
|
</div>
|
<div class="tr_rs">
|
<div class="top_bzz">
|
<span>{{ '需付保证金(¥)' }}</span>
|
<span>{{ '可用余额(¥)' }}</span>
|
</div>
|
<div class="bottom_bzz">
|
<span>{{ '5.00' }}</span>
|
<span>{{ '49,698.61' }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="switchs">
|
<div class="zy"
|
v-for="(item, index) in profitArr"
|
:key="index"
|
>
|
<div class="left_zy">
|
<span>{{ item.name }}</span>
|
</div>
|
<div class="right_sw">
|
<van-switch v-model="item.checked" />
|
</div>
|
</div>
|
</div>
|
<div class="btn_buy">
|
<div>
|
<span>{{ '买入' }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'trBuy',
|
data() {
|
return {
|
tradingArr: ['卖出', '买入'],
|
tabsCurrentIndex: 0,
|
priceTabs: ['市单价', '挂单'],
|
priceTabsCurrentIndex: 0,
|
num: 0.01,
|
profit: false,
|
profitArr: [
|
{
|
name: '止盈',
|
checked: false
|
},
|
{
|
name: '止损',
|
checked: false
|
},
|
{
|
name: '追踪止损',
|
checked: false
|
}
|
]
|
}
|
},
|
methods: {
|
handleBack() {
|
this.$router.go(-1);
|
},
|
handleTradingClick(index) {
|
this.tabsCurrentIndex = index;
|
},
|
handleTabsClick(item, index) {
|
this.priceTabsCurrentIndex = index;
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="less">
|
.buy_page {
|
width: 100%;
|
height: calc(100% - 1.7rem);
|
> .content {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
}
|
.top_cny {
|
width: 100%;
|
height: 3.5385rem;
|
.top_back {
|
width: 100%;
|
height: 1.2rem;
|
display: flex;
|
align-items: center;
|
padding: 0 .1rem;
|
.left_back {
|
width: 0.8rem;
|
height: 80%;
|
display: flex;
|
align-items: center;
|
> img {
|
margin-top: 0.2rem;
|
width: 0.6rem;
|
height: 0.6rem;
|
}
|
}
|
.right_title {
|
width: 3rem;
|
height: 80%;
|
.t_t {
|
width: 100%;
|
height: 70%;
|
display: flex;
|
align-items: center;
|
font-size: 0.4615rem;
|
span {
|
font-weight: 600;
|
}
|
}
|
.b_t {
|
width: 100%;
|
height: 30%;
|
font-size: 0.3615rem;
|
display: flex;
|
align-items: flex-start;
|
color: #8c8c8c;
|
}
|
}
|
}
|
.bottom_buy_price {
|
width: 100%;
|
height: 2rem;
|
display: flex;
|
align-items: center;
|
padding: 0 .8rem;
|
margin-top: .3rem;
|
.cot {
|
width: 100%;
|
height: 1.2rem;
|
display: flex;
|
.lefts {
|
width: 40%;
|
height: 100%;
|
.top_new {
|
width: 100%;
|
height: 60%;
|
font-size: .5615rem;
|
color: rgb(232,55,70);
|
span {
|
font-weight: 600;
|
}
|
}
|
.bottom_es {
|
width: 100%;
|
height: 40%;
|
color: rgb(173, 173, 173);
|
}
|
}
|
.rights {
|
width: 60%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
>div {
|
width: 65%;
|
height: 80%;
|
display: flex;
|
justify-content: space-between;
|
> div {
|
width: 45%;
|
height: 70%;
|
background: rgb(236, 236, 236);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: .1rem;
|
color: rgb(173, 173, 173);
|
}
|
.active {
|
background: #fff;
|
color: rgb(110,169,118);
|
span {
|
font-weight: 600;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
.price_tabs {
|
width: 100%;
|
height: 7rem;
|
padding: .2rem .8rem;
|
background: #fff;
|
margin-top: .1rem;
|
.tabs {
|
width: 100%;
|
height: .8205rem;
|
background: rgb(247,247,247);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: .15rem;
|
> div {
|
width: 49%;
|
height: 80%;
|
border-radius: .15rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.active {
|
background: #fff;
|
span {
|
font-weight: 600;
|
}
|
}
|
}
|
.tabs_content {
|
width: 100%;
|
margin-top: .3rem;
|
.num {
|
width: 100%;
|
height: .5rem;
|
}
|
.tr_es {
|
width: 100%;
|
height: 1.3rem;
|
margin-top: .3rem;
|
border-bottom: 0.05rem solid rgb(236, 236, 236);
|
.top_input {
|
width: 100%;
|
height: 70%;
|
font-size: .6615rem;
|
input {
|
font-weight: 600;
|
}
|
}
|
}
|
.tr_rs {
|
width: 100%;
|
height: 1.3rem;
|
margin-top: .4rem;
|
> div {
|
width: 100%;
|
height: 50%;
|
color: rgb(160, 160, 160);
|
display: flex;
|
justify-content: space-between;
|
span {
|
font-weight: 600;
|
}
|
}
|
.bottom_bzz {
|
color: #000;
|
font-size: .3846rem;
|
span {
|
font-weight: 600;
|
}
|
}
|
.top_bzz {
|
align-items: center;
|
}
|
}
|
.gg {
|
font-size: .3803rem;
|
border-bottom: 0.05rem solid rgb(236, 236, 236);
|
> div {
|
color: #000;
|
}
|
}
|
}
|
}
|
.switchs{
|
width: 100%;
|
height: 6rem;
|
padding: 0 .8rem;
|
background: #fff;
|
margin-top: .3rem;
|
.zy {
|
width: 100%;
|
height: 1.8rem;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-bottom: 0.05rem solid rgb(236, 236, 236);
|
>div {
|
width: 20%;
|
height: 50%;
|
display: flex;
|
align-items: center;
|
font-size: .3346rem;
|
}
|
.right_sw {
|
justify-content: flex-end;
|
}
|
}
|
}
|
.btn_buy{
|
width: 100%;
|
height: 4.8rem;
|
background: #fff;
|
padding: .2rem .8rem;
|
display: flex;
|
align-items: flex-end;
|
> div {
|
width: 100%;
|
height: 1.2821rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background: rgb(68,155,84);
|
color: #fff;
|
font-size: .3846rem;
|
border-radius: .15rem;
|
}
|
}
|
</style>
|
