From 8588fe30f17d0d28190a279aab8675de0dbf1a5b Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Wed, 16 Jul 2025 18:46:29 +0800
Subject: [PATCH] 个人添加图片
---
src/components/Transform/perpetual-open/index.vue | 97 ++++++++++++++++++++++++++----------------------
1 files changed, 52 insertions(+), 45 deletions(-)
diff --git a/src/components/Transform/perpetual-open/index.vue b/src/components/Transform/perpetual-open/index.vue
index 5c53bf9..15dd02a 100644
--- a/src/components/Transform/perpetual-open/index.vue
+++ b/src/components/Transform/perpetual-open/index.vue
@@ -1,7 +1,7 @@
<template>
<!-- 永续合约开仓页 -->
<div id="cryptos">
- <div class="perpetual-open">
+ <div class="perpetual-open" style="width: 280px;">
<div class="flex pt-34 ">
<div class="w-180 h-60 lh-60 text-center rounded tabBackground textColor">{{ $t('全仓') }} </div>
<div class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor" v-if="selectIndex / 1 === 1">
@@ -21,7 +21,7 @@
</div>
<div class="pt-30 pb-20">
<div class="flex">
- <div class="w-440 flex flex-col">
+ <div class=" 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 "
@@ -34,26 +34,28 @@
</p>
</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" @click="selectBtn">
+ <div class="greyBg 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 ml-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 mr-20" />
</div>
<div class="option-box" v-show="isShow">
- <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">{{ item.title
- }}</div>
+ <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" />
+ <contract-futrue v-if="selectIndex == 2" class="mb-20" :initFutrue="initFutrue" @paraId="onParaId" />
<div class="h-76 lh-76 greyBg mb-30 flex pr-20 justify-center rounded-lg textColor" v-if="selectIndex == 1">
<input placeholder="" class="greyBg 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">{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</span>
</div>
- <div class="w-440 flex items-center greyBg h-76 lh-76 rounded-lg" style="background-color:#f5f5f5;" v-if="initFutrue" >
+ <div class=" flex items-center greyBg h-76 lh-76 rounded-lg" style="background-color:#f5f5f5;"
+ v-if="initFutrue">
<!-- <div v-if="selectIndex == 1 && initFutrue.para && initFutrue.para.length > 0"
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" />
@@ -62,8 +64,8 @@
style="width: 156px;" v-model="form.amount" type="number" @input="onInput" /> -->
<input v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'"
:placeholder="($t('最少') + initFutrue && initFutrue.para ? $t('最小金额') + initFutrue.para[paraIndex].buy_min : '')"
- class="border-none greyBg text-center textColor" style="width: 156px;background-color:#f5f5f5;" v-model="form.amount" type="number"
- @input="onInput" />
+ class="border-none greyBg text-center textColor" style="width: 226px;background-color:#f5f5f5;"
+ v-model="form.amount" type="number" @input="onInput" />
<div class="w-80 flex items-center justify-center" style="height:100%;background-color:#f5f5f5;">
<template v-if="selectIndex == 1">
<img @click="onAdd" src="../../../assets/image/public/add.png" alt="reduce" class="w-30 h-30" />
@@ -88,14 +90,14 @@
<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="getVolumnByLever()" @getAmount="getAmount"></amount-slider>
</template>
@@ -116,7 +118,7 @@
<div class="text-grey">{{ $t("建仓手续费") }}</div>
<div class="textColor">{{ userInfo.perpetual_contracts_status === '1' ? initData.fee *
(form.amount / 1) : initData.fee * (form.amount / 1) * form.lever_rate }} {{ queryType === 'cryptos' ?
- 'USDT' : 'USD' }}</div>
+ 'USDT' : 'USD' }}</div>
</div>
</template>
@@ -125,7 +127,7 @@
<div class="textColor">{{ initFutrue.amount }} {{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</div>
</div>
<!-- {{JSON.stringify(initFutrue.para) != '[]'}} {{JSON.stringify(initFutrue.para)}} -->
- <div class="flex font-24 text-grey justify-between mt-20"
+ <!-- <div class="flex font-24 text-grey justify-between mt-20"
v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'">
<div>{{ $t("手续费") }}</div>
<div class="textColor">
@@ -139,17 +141,17 @@
}}
{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}
</div>
- </div>
+ </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-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 class="right-word font-22 text-center">{{
$t("看涨")
- }}</span>
+ }}</span> -->
</div>
<div class="font-34 relative text-center" style="flex-grow:1;" v-else>
{{ $t('做多买入') }}
@@ -158,10 +160,10 @@
<div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-70" 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">{{
+ {{ $t('卖出') }}
+ <!-- <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>
{{ $t('做空买入') }}
@@ -172,19 +174,19 @@
<div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-10 " @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">{{
+ {{ $t("买入") }}
+ <!-- <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="relative font-34 text-center" style="flex-grow: 1">
- {{ $t("开空") }}
- <span class="right-word font-22 text-center">{{
+ {{ $t("卖出") }}
+ <!-- <span class="right-word font-22 text-center">{{
$t("看跌")
- }}</span>
+ }}</span> -->
</div>
</div>
</template>
@@ -195,10 +197,11 @@
<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')">{{ $t('logIn') }}</div>
+ @click="$router.push('/login')">
+ {{ $t('logIn') }}</div>
</div>
</div>
- <div class="ml-30">
+ <!-- <div class="ml-30">
<div class="w-290 flex justify-between text-grey font-22">
<div>
<div>{{ $t("价格") }}</div>
@@ -267,7 +270,6 @@
<div class="flex k-select-box">
<div class="mt-22 mb-22 select-box" 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>
@@ -283,12 +285,12 @@
<img src="../../../assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30 ml-10" />
</div>
</div>
- </div>
+ </div> -->
</div>
</div>
<van-popup v-model:show="show" class="rounded-2xl">
- <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
- @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" />
+ <popup-delivery style="padding: 10px;" showBtns :detailData="detailData" :key="detailData.order_no"
+ @close="onClose" @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" />
</van-popup>
<van-action-sheet v-model:show="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
close-on-click-action @cancel="onCancel">
@@ -639,9 +641,10 @@
},
continueTobuy(detailData) {
this.show = false
- setTimeout(() => {
- this.$router.push(`/trendDetails/${detailData.symbol}?direction=${detailData.direction}`)
- }, 300);
+ // this.order()
+ // setTimeout(() => {
+ // this.$router.push(`/trendDetails/${detailData.symbol}?direction=${detailData.direction}`)
+ // }, 300);
},
onQuickPrice(price) { // 点击金额变化
if (this.type === '2') {
@@ -840,7 +843,7 @@
})
},
//数字排序
- orderListAsc(filed, type = "asc"){
+ orderListAsc(filed, type = "asc") {
return (a, b) => {
if (type == "asc") return parseFloat(a[filed]) > parseFloat(b[filed]) ? 1 : -1;
return parseFloat(a[filed]) > parseFloat(b[filed]) ? -1 : 1;
@@ -1063,12 +1066,16 @@
margin-right: 20px;
}
}
-.diviLine{
+
+.diviLine {
background-color: #f5f5f5;
}
-.textColor2, .textColor{
+
+.textColor2,
+.textColor {
color: #fff;
}
+
.deep-div {
min-height: 370px;
}
--
Gitblit v1.9.3