From 1febaf2c9b7c7cb7f208624c4c2e9d972cf8b265 Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Wed, 29 Apr 2026 10:10:43 +0800
Subject: [PATCH] 1
---
src/components/Transform/perpetual-open/index.vue | 730 +++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 542 insertions(+), 188 deletions(-)
diff --git a/src/components/Transform/perpetual-open/index.vue b/src/components/Transform/perpetual-open/index.vue
index 8959a8d..aa76ecb 100644
--- a/src/components/Transform/perpetual-open/index.vue
+++ b/src/components/Transform/perpetual-open/index.vue
@@ -2,51 +2,160 @@
<!-- 永续合约开仓页 -->
<div id="cryptos">
<div class="perpetual-open">
- <div class="flex pt-34 ">
-
- <div class="w-180 h-60 lh-60 rounded tabBackground textColor" v-if="selectIndex / 1 === 1">
- <div @click="locationShow = !locationShow" style="height:100%; box-sizing: border-box"
- class="relative word-30 pl-28 pr-10 w-180 h-60 tabBackground select-wrap flex justify-between items-center">
- {{ locationTitle }}
- <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11" />
- <div v-if="locationShow" class="options tabBackground w-180 absolute top-97 left-0 z-10">
- <div class="w-full" @click.stop="locationSelect(item)"
- :class="{ 'option-active': form.lever_rate === item.lever_rate }" :value="item.lever_rate"
- v-for="item in locationList" :key="item.type">
- {{ item.title }}
- </div>
- </div>
- </div>
+ <div class="trade-top-selectors" v-if="selectIndex / 1 === 1">
+ <div class="trade-selector trade-selector--buy relative" @click="openLeverPopup">
+ <span class="trade-selector-tag trade-selector-tag--green">{{ $t('买入') }}</span>
+ <span class="trade-selector-text">{{ leverDisplayMode }} {{ form.lever_rate }}X</span>
+ <van-icon name="arrow-down" class="trade-selector-arrow" />
</div>
-
- <div class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor" v-if="selectIndex / 1 === 1">
- <div @click="showOptions = !showOptions" style="height:100%; box-sizing: border-box"
- class="relative word-30 pl-28 pr-10 w-140 h-60 tabBackground select-wrap flex justify-between items-center">
- {{ form.lever_rate }}x <img src="../../../assets/image/public/grey-select.png" alt="select-icon"
- class="w-22 h-11" />
- <div v-if="showOptions" class="options tabBackground w-140 absolute top-97 left-0 z-10">
- <div class="w-full" @click.stop="handleChoose(item)"
- :class="{ 'option-active': form.lever_rate === item.lever_rate }" :value="item.lever_rate"
- v-for="item in initData.lever" :key="item.id">
- {{ item.lever_rate }}x
- </div>
- </div>
- </div>
+ <div class="trade-selector trade-selector--sell relative" @click="openLeverPopup">
+ <span class="trade-selector-tag trade-selector-tag--red">{{ $t('卖出') }}</span>
+ <span class="trade-selector-text">{{ leverDisplayMode }} {{ form.lever_rate }}X</span>
+ <van-icon name="arrow-down" class="trade-selector-arrow" />
</div>
</div>
<div class="pt-30 pb-20">
<div class="flex">
- <div class="w-440 flex flex-col">
+ <div class="mr-30">
+ <div class="w-290 flex justify-between text-grey font-22">
+ <div>
+ <div>{{ $t("价格") }}{{ queryType === 'cryptos' ? '(USDT)' : '(USD)' }}</div>
+ </div>
+ <div class="text-right items-end justify-end">
+ <div class="">{{ $t("数量") }}{{ queryType === 'cryptos' ?
+ `(${symbol_data.toUpperCase() || "--"})` : '(USD)' }}</div>
+ </div>
+ </div>
+ <div class="deep-div">
+ <!-- <div v-if="showType == 0 || showType == 2" class="w-290 flex justify-between pt-1 font-26"
+ v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
+ background:
+ `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
+ } 0%` +
+ (1 - item.amount / greenData[greenData.length - 1].amount) *
+ 100 +
+ '%,rgba(246,70,93,.1) ' +
+ (1 - item.amount / greenData[greenData.length - 1].amount) *
+ 100 +
+ '%,rgba(246,70,93,.1) 100%)',
+ }"> -->
+
+ <div v-show="(showType == 0 || showType == 2)" class="w-290 flex justify-between p-2 font-26"
+ v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
+ background:
+ `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
+ } 0%` +
+ (1 - item.amount / greenData[greenData.length - 1].amount) *
+ 100 +
+ '%,rgba(246,70,93,.1) ' +
+ (1 - item.amount / greenData[greenData.length - 1].amount) *
+ 100 +
+ '%,rgba(246,70,93,.1) 100%)'
+ }">
+ <div class="text-red">{{ item.price }}</div>
+ <div class="text-right textColor" v-if="symbol == 'shib'">
+ {{ fixDate(item.amount, $i18n) || "--" }}
+ </div>
+ <div class="text-right textColor" style="padding-right: 5px;" v-else>
+ {{ item.amount || "--" }}
+ </div>
+ </div>
+ </div>
+ <div class="depth-mark-price">
+ {{ price || '--' }} {{ $t('标记价格') }}
+ </div>
+ <div class="w-290 text-red pt-5 font-34 font-700 trade-price-hidden">
+ {{ price || '--' }}
+ </div>
+ <!-- <div class="pb-5 font-20 text-center">
+ ≈ {{ ((price *
+ currency.rate).toFixed(price.toString().split('.')[1] ?
+ price.toString().split('.')[1].length : 2)) || '--' }}
+ </div> -->
+ <div class="deep-div">
+ <!-- <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-1 font-26"
+ v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
+ background:
+ `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
+ } 0%` +
+ (1 - item.amount / greenData[greenData.length - 1].amount) *
+ 100 +
+ '%,rgba(94,186,137,.1) ' +
+ (1 - item.amount / greenData[greenData.length - 1].amount) *
+ 100 +
+ '%,rgba(94,186,137,.1) 100%)',
+ }"> -->
+
+ <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between p-2 font-26"
+ v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
+ background:
+ `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
+ } 0%` +
+ (1 - item.amount / greenData[greenData.length - 1].amount) *
+ 100 +
+ '%,rgba(94,186,137,.1) ' +
+ (1 - item.amount / greenData[greenData.length - 1].amount) *
+ 100 +
+ '%,rgba(94,186,137,.1) 100%)',
+ }">
+ <div class="text-green">{{ item.price }}</div>
+ <div class="text-right textColor" v-if="symbol_data == 'shib'">
+ {{ fixDate(item.amount, $i18n) || "--" }}
+ </div>
+ <div class="text-right textColor" v-else style="padding-right: 5px;">
+ {{ item.amount || "--" }}
+ </div>
+
+ </div>
+ </div>
+ <!-- <div class="flex k-select-box">
+ <div class="mt-22 mb-22 select-box pl-5 pr-5" style="position: relative">
+ <div class="flex justify-between items-center w-full h-70" @click="selectArryBtn">
+ <div class="pl-16 font-28 textColor" style="width: 80%">
+ {{ dataArrTitle }}
+ </div>
+ <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-10" />
+ </div>
+ <div class="option-box" v-show="arryIsShow">
+ <div class="font-28" v-for="(item, index) in selectDataArry" :key="index"
+ @click="selectItemArry(item)">
+ {{ item.name }}
+ </div>
+ </div>
+ </div>
+ <div @click="isSelectShow = true">
+ <img src="../../../assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30 ml-10" />
+ </div>
+ </div> -->
+ </div>
+ <div class="w-440 flex flex-col perpetual-open-form">
<template v-if="selectIndex == 1">
- <div class="flex items-center h-66 rounded-lg text-grey">
- <p class="font-28 flex-1 flex items-center justify-center h-66 "
- :class="currentType == 'long' ? 'long' : ''" @click="changeTab('long')">
- {{ $t("开多") }}
- </p>
- <p class="font-28 flex-1 flex items-center justify-center h-66"
- :class="currentType == 'short' ? 'short' : ''" @click="changeTab('short')">
- {{ $t("开空") }}
- </p>
+ <!-- <div class="order-area_tabs">
+ <div class="order-tabs-buttons">
+ <p class="order-tab order-tab--left font-28 flex items-center justify-center"
+ :class="currentType == 'long' ? 'order-tab--buy' : 'order-tab-buy'" @click="changeTab('long')">
+ {{ $t("开仓") }}
+ </p>
+ <p class="order-tab order-tab--right font-28 flex items-center justify-center"
+ :class="currentType == 'short' ? 'order-tab--sell' : 'order-tab-sell'" @click="changeTab('short')">
+ {{ $t("平仓") }}
+ </p>
+ </div>
+ <div class="order-tabs-bg">
+ <img src="@/assets/imgs/new/contract-slash.png" alt="" class="order-tabs-bg-img" />
+ </div>
+ </div> -->
+ <div class="trade-futures-bonus flex flex-col mt-20 mb-20">
+ <div class="flex items-center justify-between font-26 textColor">
+ <div class="flex items-center">
+ <van-icon name="success" color="#5e2bc8" size="18" class="mr-10" />
+ {{ $t('永续') }}: {{ (initFutrue.amount || 0) }} USDT
+ </div>
+ <img src="@/assets/image/asset-function3.png" alt="" class="trade-futures-transfer-icon w-60 h-60" @click="$router.push('/my/transfer')" />
+ </div>
+ <div class="flex items-center font-26 text-grey mt-12 pl-50">
+ {{ $t('Bonus') }}: {{initFutrue.capitaltAmount || 0}} USDT
+ </div>
</div>
<div class="mt-22 mb-30" style="position:relative;">
<div class="greyBg flex justify-between items-center w-full h-76 rounded-lg textColor"
@@ -121,42 +230,40 @@
<span class="flex-1 text-right">100%</span>
</div> -->
<!-- 张数输入 -->
- <!-- <amount-slider ref="sliderRef" :maxAmount="maxUSDT" @getAmount="getAmount"
- :propsAmount="form.amount"></amount-slider> -->
- <div class="btns_box">
+ <amount-slider ref="sliderRef" :maxAmount="maxUSDT" @getAmount="getAmount"
+ :propsAmount="form.amount"></amount-slider>
+ <!-- <div class="btns_box">
<div :class="bfbindex == index ? 'btns_box_boxs' : 'btns_box_box'" @click="bfbclick(item, index)"
v-for="(item, index) in bfblist" :key="index">{{ item.name }}%</div>
- </div>
+ </div> -->
</template>
<template v-if="selectIndex == 1 && userInfo.token">
- <div class="flex justify-between mt-30">
+ <!-- <div class="flex justify-between mt-30">
<div class="text-grey">{{ $t('合约金额') }}</div>
<div class="textColor">
- <!-- {{ initData.amount * (form.amount / 1) * form.lever_rate }} -->
{{ form.lever_rate * form.amount }}
- <!-- <span>{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</span> -->
<span>{{ 'USDT' }}</span>
</div>
- </div>
+ </div> -->
<!-- <div class="flex justify-between mt-30">
<div class="text-grey">{{ $t("保证金") }}</div>
<div class="textColor">
{{ form.lever_rate * form.amount }} {{ 'USDT' }}
</div>
</div> -->
- <div class="flex justify-between mt-30">
+ <!-- <div class="flex justify-between mt-30">
<div class="text-grey">{{ $t("建仓手续费") }}</div>
<div class="textColor">{{ reserve(userInfo.perpetual_contracts_status === '1' ?
initData.fee * (form.amount / 1) : initData.fee * (form.amount / 1) * form.lever_rate, 6) }}
{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}
</div>
- </div>
+ </div> -->
</template>
- <div class="flex font-24 text-grey justify-between mt-32">
+ <!-- <div class="flex font-24 text-grey justify-between mt-32">
<div>{{ $t("可用USDT") }}</div>
<div class="textColor">{{ initFutrue.amount }} USDT</div>
- </div>
+ </div> -->
<div class="flex font-24 text-grey justify-between mt-20"
v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'">
<div>{{ $t("手续费") }}</div>
@@ -175,29 +282,29 @@
<template v-if="userInfo.token">
<template v-if="selectIndex == 1">
- <div class="w-full h-80 lh-80 bg-green flex text-white rounded-ban mt-70" v-if="currentType == 'long'"
- @click="order('long')">
- <div class="font-34 relative text-center" style="flex-grow:1;" v-if="selectIndex == 1">
- {{ $t('开多') }}
- <!-- <span class="right-word font-22 text-center">{{
- $t("看涨")
- }}</span> -->
- </div>
- <div class="font-34 relative text-center" style="flex-grow:1;" v-else>
- {{ $t('做多买入') }}
- </div>
+ <div class="trade-long-margin flex justify-between mt-30 font-26 text-grey">
+ <span class="textColor">{{ $t('buy') }}</span>
+ <span>≈{{ (form.amount * form.lever_rate || 0) }}USDT</span>
</div>
- <div class="w-full h-80 lh-80 bg-red flex text-white rounded-ban mt-70" v-if="currentType == 'short'"
+ <div class="trade-long-margin flex justify-between font-26 text-grey">
+ <span class="textColor">{{ $t("保证金") }}</span>
+ <span>≈{{ (form.amount * form.lever_rate || 0) }}USDT</span>
+ </div>
+ <div class="w-full h-80 lh-80 bg-green flex text-white rounded-ban mt-20 trade-btn-buy"
+ @click="order('long')">
+ <div class="font-34 relative text-center" style="flex-grow:1;">{{ $t('开多') }}</div>
+ </div>
+ <div class="trade-long-margin flex justify-between mt-30 font-26 text-grey">
+ <span class="textColor">{{ $t('sell') }}</span>
+ <span>≈{{ (form.amount * form.lever_rate || 0) }}USDT</span>
+ </div>
+ <div class="trade-long-margin flex justify-between font-26 text-grey">
+ <span class="textColor">{{ $t("保证金") }}</span>
+ <span>≈{{ (form.amount * form.lever_rate || 0) }}USDT</span>
+ </div>
+ <div class="w-full h-80 lh-80 bg-red flex text-white rounded-ban mt-20 trade-btn-sell"
@click="order('short')">
- <div class="relative font-34 text-center" style="flex-grow:1;" v-if="selectIndex == 1">
- {{ $t('开空') }}
- <!-- <span class="right-word font-22 text-center">{{
- $t("看跌")
- }}</span> -->
- </div>
- <div class="relative font-34 text-center" style="flex-grow:1;" v-else>
- {{ $t('做空买入') }}
- </div>
+ <div class="relative font-34 text-center" style="flex-grow:1;">{{ $t('开空') }}</div>
</div>
</template>
<template v-if="selectIndex == 2">
@@ -232,118 +339,7 @@
{{ $t('logIn') }}</div>
</div>
</div>
- <div class="ml-30">
- <div class="w-290 flex justify-between text-grey font-22">
- <div>
- <div>{{ $t("价格") }}</div>
- <div class="mt-4">{{ queryType === 'cryptos' ? '(USDT)' : '(USD)' }}</div>
- </div>
- <div class="text-right items-end justify-end">
- <div class="">{{ $t("数量") }}</div>
- <div class="mt-4">{{ queryType === 'cryptos' ?
- `(${symbol_data.toUpperCase() || "--"})` : '(USD)' }}</div>
- </div>
- </div>
- <div class="deep-div">
- <!-- <div v-if="showType == 0 || showType == 2" class="w-290 flex justify-between pt-1 font-26"
- v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
- background:
- `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
- } 0%` +
- (1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
- '%,rgba(246,70,93,.1) ' +
- (1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
- '%,rgba(246,70,93,.1) 100%)',
- }"> -->
-
- <div v-show="(showType == 0 || showType == 2)" class="w-290 flex justify-between pt-1 font-26"
- v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
- background:
- `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
- } 0%` +
- (1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
- '%,rgba(246,70,93,.1) ' +
- (1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
- '%,rgba(246,70,93,.1) 100%)'
- }">
- <div class="text-red">{{ item.price }}</div>
- <div class="text-right textColor" v-if="symbol == 'shib'">
- {{ fixDate(item.amount, $i18n) || "--" }}
- </div>
- <div class="text-right textColor" v-else>
- {{ item.amount || "--" }}
- </div>
- </div>
- </div>
- <div class="w-290 text-red pt-5 font-34 font-700 text-center">
- {{ price || '--' }}
- </div>
- <div class="pb-5 font-20 text-center">
- ≈ {{ ((price *
- currency.rate).toFixed(price.toString().split('.')[1] ?
- price.toString().split('.')[1].length : 2)) || '--' }}
- </div>
- <div class="deep-div">
- <!-- <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-1 font-26"
- v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
- background:
- `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
- } 0%` +
- (1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
- '%,rgba(94,186,137,.1) ' +
- (1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
- '%,rgba(94,186,137,.1) 100%)',
- }"> -->
-
- <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-1 font-26"
- v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
- background:
- `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
- } 0%` +
- (1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
- '%,rgba(94,186,137,.1) ' +
- (1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
- '%,rgba(94,186,137,.1) 100%)',
- }">
- <div class="text-green">{{ item.price }}</div>
- <div class="text-right textColor" v-if="symbol_data == 'shib'">
- {{ fixDate(item.amount, $i18n) || "--" }}
- </div>
- <div class="text-right textColor" v-else>
- {{ item.amount || "--" }}
- </div>
-
- </div>
- </div>
- <div class="flex k-select-box">
- <div class="mt-22 mb-22 select-box pl-5 pr-5" style="position: relative">
- <div class="flex justify-between items-center w-full h-70" @click="selectArryBtn">
- <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
- <div class="pl-16 font-28 textColor" style="width: 80%">
- {{ dataArrTitle }}
- </div>
- <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-10" />
- </div>
- <div class="option-box" v-show="arryIsShow">
- <div class="font-28" v-for="(item, index) in selectDataArry" :key="index"
- @click="selectItemArry(item)">
- {{ item.name }}
- </div>
- </div>
- </div>
- <div @click="isSelectShow = true">
- <img src="../../../assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30 ml-10" />
- </div>
- </div>
- </div>
+
</div>
</div>
<van-popup v-model:show="show" class="rounded-2xl">
@@ -353,6 +349,38 @@
<van-action-sheet v-model:show="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
close-on-click-action @cancel="onCancel">
</van-action-sheet>
+
+ <!-- 杠杆倍数弹框 Multi multiple 一比一样式 -->
+ <van-popup v-model:show="showLeverPopup" position="bottom" round class="lever-popup-wrap"
+ :style="{ overflow: 'visible' }" @closed="onLeverPopupClosed">
+ <div class="lever-popup">
+ <div class="lever-popup-header">
+ <span class="lever-popup-title">Multi multiple</span>
+ <span class="lever-popup-close" @click="showLeverPopup = false">×</span>
+ </div>
+ <div class="lever-popup-segment">
+ <div class="lever-popup-seg-item lever-popup-seg-left" :class="{ 'lever-popup-seg-active': leverPopupMargin === 1 }"
+ @click="leverPopupMargin = 1">Cross</div>
+ <div class="lever-popup-seg-item lever-popup-seg-right" :class="{ 'lever-popup-seg-active': leverPopupMargin === 0 }"
+ @click="leverPopupMargin = 0">Part</div>
+ </div>
+ <div class="lever-popup-row">
+ <div class="lever-popup-btn lever-popup-btn-minus" @click="leverPopupValue = Math.max(1, (leverPopupValue || 1) - 1)">−</div>
+ <input v-model.number="leverPopupValue" type="number" class="lever-popup-input" min="1" :max="maxLever"
+ @input="onLeverInput" />
+ <div class="lever-popup-btn lever-popup-btn-plus" @click="leverPopupValue = Math.min(maxLever, (leverPopupValue || 1) + 1)">+</div>
+ </div>
+ <div class="lever-popup-slider-wrap">
+ <span class="lever-popup-slider-label">1X</span>
+ <div class="lever-popup-slider-inner">
+ <van-slider v-model="leverPopupValue" :min="1" :max="maxLever" :step="1" class="lever-popup-slider"
+ bar-height="6px" active-color="#7c3aed" />
+ </div>
+ <span class="lever-popup-slider-label">{{ maxLever }}X</span>
+ </div>
+ <div class="lever-popup-confirm" @click="confirmLeverPopup">Confirm</div>
+ </div>
+ </van-popup>
</div>
</div>
</template>
@@ -514,8 +542,8 @@
if (this.selectIndex / 1 === 1) {
obj = this.initOpen
- if (!obj.lever || !obj.lever.length) { // 倍数
- obj.lever = [{ id: 1, lever_rate: 1 }]
+ if (!obj.lever || !obj.lever.length) { // 倍数，默认100倍
+ obj.lever = [{ id: 1, lever_rate: 100 }]
}
return obj
}
@@ -536,7 +564,13 @@
// console.log("dddddd", max, this.form.lever_rate, (1 / this.form.lever_rate + this.initData.fee));
return max
- }
+ },
+ maxLever() {
+ return 100 // 杠杆倍率固定 1～100，不从接口获取
+ },
+ leverDisplayMode() {
+ return this.locationVal === 1 ? 'Cross' : 'Part'
+ },
},
data() {
return {
@@ -570,7 +604,7 @@
session_token: '',
direction: 'buy', // 买or卖
price_type: 'opponent', // 市价or限价
- lever_rate: 1, // 杠杆
+ lever_rate: 100, // 杠杆，默认100倍
price: '',
amount: '', // 数量
para_id: '' // 交割周琦id
@@ -601,6 +635,9 @@
locationShow: false,
locationTitle: this.$t('全仓'),
locationVal: 1,
+ showLeverPopup: false,
+ leverPopupValue: 100,
+ leverPopupMargin: 1, // 1=全仓 Cross, 0=逐仓 Part
}
},
created() {
@@ -834,6 +871,31 @@
this.locationTitle = item.title;
this.locationVal = item.type;
this.locationShow = false;
+ },
+ openLeverPopup() {
+ this.leverPopupValue = this.form.lever_rate || 1;
+ this.leverPopupMargin = this.locationVal !== undefined ? this.locationVal : 1;
+ this.showLeverPopup = true;
+ },
+ onLeverInput() {
+ let v = parseInt(this.leverPopupValue, 10);
+ if (isNaN(v) || v < 1) this.leverPopupValue = 1;
+ else if (v > this.maxLever) this.leverPopupValue = this.maxLever;
+ else this.leverPopupValue = v;
+ },
+ onLeverPopupClosed() {
+ this.leverPopupValue = this.form.lever_rate || 1;
+ this.leverPopupMargin = this.locationVal !== undefined ? this.locationVal : 1;
+ },
+ confirmLeverPopup() {
+ let val = parseInt(this.leverPopupValue, 10);
+ if (isNaN(val) || val < 1) val = 1;
+ if (val > this.maxLever) val = this.maxLever;
+ this.form.lever_rate = val;
+ this.locationVal = this.leverPopupMargin;
+ this.locationTitle = this.leverPopupMargin === 1 ? this.$t('全仓') : this.$t('逐仓');
+ this.showLeverPopup = false;
+ this.handleInitSliderOption();
},
//选择开仓类型
changeTab(type) {
@@ -1191,7 +1253,299 @@
}
}
+/* trade-top-selectors 按参考图：浅灰容器、白底细边框、Buy绿/Sell红标签、深色文案、灰箭头 */
+.trade-top-selectors {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ padding: 14px 18px;
+ border-radius: 12px;
+}
+.trade-top-selectors .trade-selector {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ background: #fff;
+ border-radius: 10px;
+ cursor: pointer;
+ min-height: 72px;
+}
+.trade-top-selectors .trade-selector-tag {
+ padding: 8px 20px;
+ border-radius: 6px;
+ font-size: 26px;
+ font-weight: 700;
+ color: #fff;
+ margin-right: 16px;
+ flex-shrink: 0;
+}
+.trade-top-selectors .trade-selector-tag--green {
+ background: #0ecb81;
+}
+.trade-top-selectors .trade-selector-tag--red {
+ background: #f6465d;
+}
+.trade-top-selectors .trade-selector-text {
+ flex: 1;
+ font-size: 28px;
+ font-weight: 500;
+ color: #1e1e1e;
+ min-width: 0;
+}
+.trade-top-selectors .trade-selector-arrow {
+ font-size: 28px;
+ color: #999;
+ flex-shrink: 0;
+ margin-left: 8px;
+}
+
+.perpetual-open-form > div,
+.perpetual-open-form > .order-area_tabs,
+.perpetual-open-form > .trade-futures-bonus,
+.perpetual-open-form .trade-long-margin {
+ margin-bottom: 10px !important;
+}
+.perpetual-open-form .mt-20,
+.perpetual-open-form .mb-20,
+.perpetual-open-form .mb-30,
+.perpetual-open-form .mt-30,
+.perpetual-open-form .mt-40 {
+ margin-top: 0 !important;
+ margin-bottom: 10px !important;
+}
+/* perpetual-open-form 下圆角统一 10px */
+.perpetual-open-form .rounded-lg,
+.perpetual-open-form .rounded-ban,
+.perpetual-open-form .option-box {
+ border-radius: 10px !important;
+}
+.perpetual-open-form .order-area_tabs {
+ border-radius: 10px 10px 0 0 !important;
+}
+.perpetual-open-form .order-area_tabs .order-tab--left {
+ border-radius: 10px 0 0 0 !important;
+}
+.perpetual-open-form .order-area_tabs .order-tab--right {
+ border-radius: 0 10px 0 0 !important;
+}
+
.deep-div {
min-height: 370px;
}
+
+.depth-mark-price {
+ padding: 8px 0;
+ font-size: 18px;
+ color: #999;
+ border-top: 1px solid #eee;
+ border-bottom: 1px solid #eee;
+}
+
+.trade-price-hidden {
+ display: none;
+}
+
+/* 与 /cryptos/trade/btcusdt order-area_tabs 样式一致 */
+.order-area_tabs {
+ position: relative;
+ height: 66px;
+ border-radius: 8px 8px 0 0;
+ overflow: hidden;
+}
+.order-area_tabs .order-tabs-buttons {
+ display: flex;
+ justify-content: space-between;
+ align-items: stretch;
+ width: 100%;
+ height: 100%;
+ position: relative;
+ z-index: 0;
+}
+.order-area_tabs .order-tab {
+ flex: 0 0 calc(50%);
+ width: calc(50%);
+ font-weight: 500;
+ transition: background 0.2s, color 0.2s;
+ cursor: pointer;
+}
+.order-area_tabs .order-tab--left {
+ border-radius: 8px 0 0 0;
+}
+.order-area_tabs .order-tab--right {
+ border-radius: 0 8px 0 0;
+}
+.order-area_tabs .order-tab--buy {
+ background: #38c172;
+ color: #fff;
+}
+.order-area_tabs .order-tab-buy {
+ background: #e8e8e8;
+ color: #000;
+}
+.order-area_tabs .order-tab--sell {
+ background: #f4374b;
+ color: #fff;
+}
+.order-area_tabs .order-tab-sell {
+ background: #e8e8e8;
+ color: #000;
+}
+.order-area_tabs .order-tabs-bg {
+ position: absolute;
+ left: 49.3%;
+ transform: translateX(-50%);
+ width: 90px;
+ height: 130%;
+ top: -5px;
+ bottom: 0;
+ z-index: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.order-area_tabs .order-tabs-bg-img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+/* 杠杆弹框 Multi multiple（弹框内字体大一倍） */
+.lever-popup-wrap.van-popup {
+ background: transparent;
+}
+.lever-popup {
+ background: #fff;
+ border-radius: 24px 24px 0 0;
+ padding: 30px 36px 12px;
+ box-shadow: 0 -2px 30px rgba(0,0,0,0.08);
+}
+.lever-popup-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 30px;
+}
+.lever-popup-title {
+ font-size: 34px;
+ font-weight: 600;
+ color: #1e1e1e;
+}
+.lever-popup-close {
+ font-size: 47px;
+ color: #666;
+ line-height: 1;
+ cursor: pointer;
+ padding: 6px;
+}
+.lever-popup-segment {
+ display: flex;
+ align-items: stretch;
+ background: #f7f7f7;
+ border-radius: 15px;
+ overflow: hidden;
+}
+.lever-popup-seg-item {
+ flex: 1;
+ padding: 18px 24px;
+ text-align: center;
+ font-size: 27px;
+ color: #868e9a;
+ transition: background 0.2s, color 0.2s, font-weight 0.2s;
+}
+.lever-popup-seg-left { border-radius: 15px 0 0 15px; }
+.lever-popup-seg-right { border-radius: 0 15px 15px 0; }
+.lever-popup-seg-item.lever-popup-seg-active {
+ background: #fff;
+ color: #1e1e1e;
+ font-weight: 600;
+ box-shadow: 0 1px 6px rgba(0,0,0,0.06);
+}
+.lever-popup-row {
+ display: flex;
+ align-items: stretch;
+ margin-top: 30px;
+ border-radius: 15px;
+ overflow: hidden;
+ border: 1px solid #eee;
+}
+.lever-popup-btn {
+ width: 78px;
+ min-width: 78px;
+ background: #f7f7f7;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 43px;
+ color: #333;
+ cursor: pointer;
+ font-weight: 400;
+}
+.lever-popup-btn-minus { border-radius: 15px 0 0 15px; }
+.lever-popup-btn-plus { border-radius: 0 15px 15px 0; }
+.lever-popup-input {
+ flex: 1;
+ min-width: 0;
+ text-align: center;
+ border: none;
+ font-size: 35px;
+ font-weight: 600;
+ color: #1e1e1e;
+ background: #fff;
+ padding: 21px 12px;
+}
+.lever-popup-input:focus { outline: none; }
+.lever-popup-slider-wrap {
+ margin-top: 36px;
+ display: flex;
+ align-items: center;
+ gap: 18px;
+}
+.lever-popup-slider-label {
+ font-size: 23px;
+ color: #868e9a;
+ flex-shrink: 0;
+}
+.lever-popup-slider-inner {
+ flex: 1;
+ min-width: 0;
+}
+.lever-popup-slider :deep(.van-slider__bar) {
+ height: 6px;
+ background: linear-gradient(90deg, #7c3aed 0%, #5b21b6 100%) !important;
+ border-radius: 3px;
+}
+.lever-popup-slider :deep(.van-slider__button) {
+ width: 30px;
+ height: 30px;
+ background: #666;
+ border: none;
+ box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+}
+.lever-popup-confirm {
+ margin-top: 42px;
+ width: 100%;
+ padding: 24px 36px;
+ background: linear-gradient(90deg, #7c3aed 0%, #5b21b6 100%);
+ color: #fff;
+ font-weight: 600;
+ font-size: 31px;
+ border-radius: 15px;
+ text-align: center;
+ cursor: pointer;
+}
+
+.trade-futures-bonus {
+ .mr-10 { margin-right: 10px; }
+ .trade-futures-transfer-icon {
+ flex-shrink: 0;
+ padding: 8px;
+ margin: -8px -8px -8px 0;
+ border-radius: 50%;
+ }
+}
+
+.trade-long-margin {
+ margin-top: 8px;
+}
</style>
--
Gitblit v1.9.3