From fcb00a66b4053550b473a29d7299c7a4737eea75 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Wed, 16 Jul 2025 14:41:04 +0800
Subject: [PATCH] 翻译
---
src/components/perpetual-open/index.vue | 380 ++++++++++++++---------------------------------------
1 files changed, 103 insertions(+), 277 deletions(-)
diff --git a/src/components/perpetual-open/index.vue b/src/components/perpetual-open/index.vue
index 17c6575..f46d0b0 100644
--- a/src/components/perpetual-open/index.vue
+++ b/src/components/perpetual-open/index.vue
@@ -3,41 +3,19 @@
<div class="perpetual-open">
<div class="flex header-open">
<div class="flex flex-1 pt-34">
- <div
- class="w-180 h-60 lh-60 text-center rounded inputBackground textColor"
- >
+ <div class="w-180 h-60 lh-60 text-center rounded inputBackground textColor">
{{ $t("全仓") }}
</div>
<!-- <div class="w-80 h-60 lh-60 ml-29 rounded tabBackground textColor" style="text-align:center">1x</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 select-wrap flex justify-between items-center"
- >
+ <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 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 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"
- >
+ <img src="../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11" />
+ <div v-if="showOptions" class="options 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>
@@ -45,12 +23,7 @@
</div>
</div>
<div>
- <img
- src="../../assets/image/public/k-line.png"
- alt="line-img"
- class="w-38 h-35"
- @click="jump"
- />
+ <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35" @click="jump" />
</div>
</div>
<div class="pt-30 pb-20">
@@ -58,67 +31,34 @@
<div class="w-440 flex flex-col">
<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')"
- >
+ <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')"
- >
+ <p class="font-28 flex-1 flex items-center justify-center h-66"
+ :class="currentType == 'short' ? 'short' : ''" @click="changeTab('short')">
{{ $t("开空") }}
</p>
</div>
<div class="mt-30 mb-30" style="position: relative">
- <div
- class="inputBackground flex justify-between items-center w-full h-76 rounded-lg textColor"
- @click="selectBtn"
- >
- <img
- src="../../assets/image/public/warn.png"
- alt="warn-icon"
- class="w-25 h-25 pl-20"
- />
+ <div class="inputBackground flex justify-between items-center w-full h-76 rounded-lg textColor"
+ @click="selectBtn">
+ <img src="../../assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20" />
<div class="text-center" style="width: 80%">{{ title }}</div>
- <img
- src="../../assets/image/public/grey-select.png"
- alt="select-icon"
- class="w-22 h-11 pr-20"
- />
+ <img src="../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
</div>
<div class="option-box" v-show="isShow">
- <div
- class="font-30"
- v-for="item in selectData"
- :key="item.type"
- @click="selectItem(item)"
- >
+ <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">
{{ item.title }}
</div>
</div>
</div>
</template>
- <contract-futrue
- v-if="selectIndex == 2"
- class="mb-20"
- :initFutrue="initFutrue"
- @paraId="onParaId"
- />
- <div
- class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
- v-if="selectIndex == 1"
- >
- <input
- placeholder=""
- class="inputBackground w-full pl-20 h-76 border-none text-left rounded-lg"
- :disabled="type / 1 === 1"
- @focus="focus = true"
- v-model="form.price"
- />
+ <contract-futrue v-if="selectIndex == 2" class="mb-20" :initFutrue="initFutrue" @paraId="onParaId" />
+ <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
+ v-if="selectIndex == 1">
+ <input placeholder="" class="inputBackground w-full pl-20 h-76 border-none text-left rounded-lg"
+ :disabled="type / 1 === 1" @focus="focus = true" v-model="form.price" />
<span class="ml-20">USDT</span>
</div>
<!-- <div
@@ -143,46 +83,21 @@
/>
<span class="font-22 font-400 textColor">{{ $t("止损") }}</span>
</div> -->
- <div
- class="w-440 flex items-center inputBackground h-76 lh-76 rounded-lg"
- >
- <div
- v-if="selectIndex == 1"
- class="w-80 flex items-center justify-center"
- style="height: 100%"
- @click="onReduce"
- >
- <img
- src="../../assets/image/public/reduce.png"
- alt="add"
- class="w-30 h-6"
- />
+ <div class="w-440 flex items-center inputBackground h-76 lh-76 rounded-lg">
+ <div v-if="selectIndex == 1" class="w-80 flex items-center justify-center" style="height: 100%"
+ @click="onReduce">
+ <img src="../../assets/image/public/reduce.png" alt="add" class="w-30 h-6" />
</div>
- <input
- :placeholder="
- selectIndex == 1
- ? $t('手数')
- : $t('最少') + initFutrue && initFutrue.para
- ? $t('最小金额') + initFutrue.para[paraIndex].buy_min
- : ''
- "
- class="border-none inputBackground text-center textColor"
- style="width: 156px"
- v-model="form.amount"
- type="number"
- @input="onInput"
- />
- <div
- class="w-80 flex items-center justify-center"
- style="height: 100%"
- >
+ <input :placeholder="selectIndex == 1
+ ? $t('手数')
+ : $t('最少') + initFutrue && initFutrue.para
+ ? $t('最小金额') + initFutrue.para[paraIndex].buy_min
+ : ''
+ " class="border-none inputBackground text-center textColor" style="width: 156px" v-model="form.amount"
+ type="number" @input="onInput" />
+ <div class="w-80 flex items-center justify-center" style="height: 100%">
<template v-if="selectIndex == 1">
- <img
- @click="onAdd"
- src="../../assets/image/public/add.png"
- alt="reduce"
- class="w-30 h-30"
- />
+ <img @click="onAdd" src="../../assets/image/public/add.png" alt="reduce" class="w-30 h-30" />
</template>
<template v-else>
<span class="textColor">USDT</span>
@@ -211,20 +126,16 @@
<template v-slot:step="{ active }">
<div :class="['custom-step', { active }]"></div>
</template>
- </vue-slider>
- <div style="color: #868D9A" class="mt-36 font-24 w-full flex justify-between items-center">
- <span class="flex-1 text-left">0%</span>
- <span class="flex-1 text-left">25%</span>
- <span class="flex-1 text-center">50%</span>
- <span class="flex-1 text-right">75%</span>
- <span class="flex-1 text-right">100%</span>
- </div> -->
+</vue-slider>
+<div style="color: #868D9A" class="mt-36 font-24 w-full flex justify-between items-center">
+ <span class="flex-1 text-left">0%</span>
+ <span class="flex-1 text-left">25%</span>
+ <span class="flex-1 text-center">50%</span>
+ <span class="flex-1 text-right">75%</span>
+ <span class="flex-1 text-right">100%</span>
+</div> -->
<!-- 张数 滑块 -->
- <amount-slider
- ref="sliderRef"
- :maxAmount="maxItems"
- @getAmount="getAmount"
- ></amount-slider>
+ <amount-slider ref="sliderRef" :maxAmount="maxItems" @getAmount="getAmount"></amount-slider>
</template>
<template v-if="selectIndex == 1 && userInfo.token">
<div class="flex justify-between mt-30">
@@ -251,17 +162,11 @@
<div class="textColor">{{ fee.toFixed(4) }} USDT</div>
</div>
</template>
- <div
- class="flex font-24 text-grey justify-between mt-32"
- v-if="selectIndex == 2"
- >
+ <div class="flex font-24 text-grey justify-between mt-32" v-if="selectIndex == 2">
<div>{{ $t("可用USDT") }}</div>
<div class="textColor">{{ initFutrue.amount | nan }} USDT</div>
</div>
- <div
- class="flex font-24 text-grey justify-between mt-20"
- v-if="selectIndex == 2"
- >
+ <div class="flex font-24 text-grey justify-between mt-20" v-if="selectIndex == 2">
<div>{{ $t("手续费") }}</div>
<div class="textColor">
{{
@@ -277,78 +182,48 @@
</div>
<template v-if="userInfo.token">
<template v-if="selectIndex == 1">
- <div
- class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-50"
- v-if="currentType == 'long'"
- @click="order('long')"
- >
- <div
- class="font-34 relative text-center"
- style="flex-grow: 1"
- v-if="selectIndex == 1"
- >
+ <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-50" 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">{{
+ <!-- <span class="right-word font-22 text-center">{{
$t("看涨")
- }}</span>
+ }}</span> -->
</div>
- <div
- class="font-34 relative text-center"
- style="flex-grow: 1"
- v-else
- >
+ <div class="font-34 relative text-center" style="flex-grow: 1" v-else>
{{ $t("做多买入") }}
</div>
</div>
- <div
- class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-50"
- v-if="currentType == 'short'"
- @click="order('short')"
- >
- <div
- class="relative font-34 text-center"
- style="flex-grow: 1"
- v-if="selectIndex == 1"
- >
+ <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-50" v-if="currentType == 'short'"
+ @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">{{
+ <!-- <span class="right-word font-22 text-center">{{
$t("看跌")
- }}</span>
+ }}</span> -->
</div>
- <div
- class="relative font-34 text-center"
- style="flex-grow: 1"
- v-else
- >
+ <div class="relative font-34 text-center" style="flex-grow: 1" v-else>
{{ $t("做空买入") }}
</div>
</div>
</template>
<template v-if="selectIndex == 2">
- <div
- class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-30"
- @click="order('open')"
- v-if="userInfo.token"
- >
+ <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-30" @click="order('open')"
+ v-if="userInfo.token">
<div class="font-34 relative text-center" style="flex-grow: 1">
{{ $t("开多") }}
- <span class="right-word font-22 text-center">{{
+ <!-- <span class="right-word font-22 text-center">{{
$t("看涨")
- }}</span>
+ }}</span> -->
</div>
</div>
- <div
- class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-20 mb-10"
- style="position: relative"
- :class="{ 'mt-22': selectIndex == 2 }"
- @click="order('close')"
- v-if="userInfo.token"
- >
+ <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-20 mb-10" style="position: relative"
+ :class="{ 'mt-22': selectIndex == 2 }" @click="order('close')" v-if="userInfo.token">
<div class="relative font-34 text-center" style="flex-grow: 1">
{{ $t("开空") }}
- <span class="right-word font-22 text-center">{{
+ <!-- <span class="right-word font-22 text-center">{{
$t("看跌")
- }}</span>
+ }}</span> -->
</div>
</div>
</template>
@@ -358,10 +233,8 @@
<p>{{ $t("套期保值，风险对冲") }}</p>
<p class="pt-8">{{ $t("登陆后继续") }}</p>
</div>
- <div
- class="h-80 lh-80 btnBackground flex text-white rounded-md justify-center mt-50"
- @click="$router.push('/login')"
- >
+ <div class="h-80 lh-80 btnBackground flex text-white rounded-md justify-center mt-50"
+ @click="$router.push('/login')">
{{ $t("登录后进行交易") }}
</div>
</div>
@@ -377,25 +250,18 @@
<div class="mt-5">({{ symbolname || "--" }})</div>
</div>
</div>
- <div
- v-if="showType == 0 || showType == 1"
- class="w-290 flex justify-between pt-12 font-26"
- v-for="(item, index) in greenData"
- :key="index"
- @click="onQuickPrice(item.price)"
- :style="{
+ <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-12 font-26"
+ v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
background:
- `linear-gradient(to right,${
- theme == 'dark' ? '#121212' : '#ffffff'
+ `linear-gradient(to right,${theme == 'dark' ? '#121212' : '#ffffff'
} 0%` +
(1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
+ 100 +
'%,rgba(94,186,137,.1) ' +
(1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
+ 100 +
'%,rgba(94,186,137,.1) 100%)',
- }"
- >
+ }">
<div class="text-green">{{ item.price }}</div>
<div class="text-right textColor" v-if="symbol == 'shib'">
{{ fixDate(item.amount, $i18n) || "--" }}
@@ -404,37 +270,26 @@
{{ item.amount || "--" }}
</div>
</div>
- <div
- v-if="showType == 0 || showType == 1 || showType == 2"
- class="w-290 text-red pt-12 font-34 font-700 text-center"
- >
+ <div v-if="showType == 0 || showType == 1 || showType == 2"
+ class="w-290 text-red pt-12 font-34 font-700 text-center">
{{ approximately || "--" }}
</div>
- <div
- v-if="showType == 0 || showType == 1 || showType == 2"
- class="approximately-text pb-12 font-20 text-center"
- >
+ <div v-if="showType == 0 || showType == 1 || showType == 2"
+ class="approximately-text pb-12 font-20 text-center">
≈ {{ price || "--" }}
</div>
- <div
- v-if="showType == 0 || showType == 2"
- class="w-290 flex justify-between pt-12 font-26"
- v-for="(item, index) in redData"
- :key="item + index"
- @click="onQuickPrice(item.price)"
- :style="{
+ <div v-if="showType == 0 || showType == 2" class="w-290 flex justify-between pt-12 font-26"
+ v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
background:
- `linear-gradient(to right,${
- theme == 'dark' ? '#121212' : '#ffffff'
+ `linear-gradient(to right,${theme == 'dark' ? '#121212' : '#ffffff'
} 0%` +
(1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
+ 100 +
'%,rgba(246,70,93,.1) ' +
(1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
+ 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) || "--" }}
@@ -445,62 +300,32 @@
</div>
<div class="flex k-select-box">
<div class="mt-30 mb-30 select-box" style="position: relative">
- <div
- class="flex justify-between items-center w-full h-70"
- @click="selectArryBtn"
- >
+ <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 textColor" style="width: 80%">
{{ dataArrTitle }}
</div>
- <img
- src="@/assets/image/public/grey-select.png"
- alt="select-icon"
- class="w-22 h-11 pr-20"
- />
+ <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
</div>
<div class="option-box" v-show="arryIsShow">
- <div
- class="font-30"
- v-for="(item, index) in selectDataArry"
- :key="index"
- @click="selectItemArry(item)"
- >
+ <div class="font-30" 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"
- />
+ <img src="@/assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30" />
</div>
</div>
</div>
</div>
</div>
<van-popup v-model="show" class="rounded-2xl">
- <popup-delivery
- showBtns
- :detailData="detailData"
- :key="detailData.order_no"
- @close="onClose"
- @continueToBuy="continueTobuy"
- @timeEnd="handleTimeEnd"
- :price="price"
- :symbol="symbol"
- />
+ <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
+ @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" :symbol="symbol" />
</van-popup>
- <van-action-sheet
- v-model="isSelectShow"
- @select="onSelect"
- :actions="actions"
- :cancel-text="$t('取消')"
- close-on-click-action
- @cancel="onCancel"
- >
+ <van-action-sheet v-model="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
+ close-on-click-action @cancel="onCancel">
</van-action-sheet>
</div>
</template>
@@ -1198,7 +1023,8 @@
this.$store.commit("user/SET_USERINFO", {
balance: data.money,
});
- location.reload();
+ this.initFutrue.amount = data.money;
+ // location.reload();
});
this.$emit("ordered", emitFunc);
if (this.selectIndex / 1 === 2) {
@@ -1340,16 +1166,16 @@
overflow: hidden;
}
-.tab > * {
+.tab>* {
height: 100%;
}
-.tab > img {
+.tab>img {
margin-left: -2px;
margin-right: -2px;
}
-.tab > a {
+.tab>a {
flex-grow: 1;
display: flex;
justify-content: center;
@@ -1388,11 +1214,11 @@
}
}
-.option-box > div {
+.option-box>div {
padding: 30px 0;
}
-.option-box > div:hover {
+.option-box>div:hover {
// background-color: #f5f5f5;
}
@@ -1408,8 +1234,7 @@
-webkit-appearance: none;
/* Safari and Chrome */
padding: 0 20px 0 20px;
- background: url("../../assets/image/public/grey-select.png") no-repeat scroll
- right center transparent;
+ background: url("../../assets/image/public/grey-select.png") no-repeat scroll right center transparent;
/* 自己的图*/
background-size: 20px 11px;
}
@@ -1522,6 +1347,7 @@
}
.perpetual-open {
+
::v-deep .van-action-sheet__item,
::v-deep .van-action-sheet__cancel {
@include themify() {
--
Gitblit v1.9.3