From 30d1ee7be942d7a2201e1ab2ca7d96badff8bf50 Mon Sep 17 00:00:00 2001
From: 李 <344137771@qq.com>
Date: Sat, 23 May 2026 11:23:00 +0800
Subject: [PATCH] 1
---
src/components/Transform/perpetual-open/index.vue | 110 ++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 85 insertions(+), 25 deletions(-)
diff --git a/src/components/Transform/perpetual-open/index.vue b/src/components/Transform/perpetual-open/index.vue
index e1c869a..93f2a4a 100644
--- a/src/components/Transform/perpetual-open/index.vue
+++ b/src/components/Transform/perpetual-open/index.vue
@@ -53,7 +53,7 @@
'%,rgba(246,70,93,.1) 100%)'
}">
<div class="text-red">{{ item.price }}</div>
- <div class="text-right textColor" v-if="symbol == 'shib'">
+ <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>
@@ -102,7 +102,7 @@
<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;">
+ <div class="text-right textColor" v-else style="padding-right: 5px;">
{{ item.amount || "--" }}
</div>
@@ -151,10 +151,11 @@
<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')" />
+ <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
+ {{ $t('Bonus') }}: {{ initFutrue.capitaltAmount || 0 }} USDT
</div>
</div>
<div class="mt-22 mb-30" style="position:relative;">
@@ -260,10 +261,10 @@
</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>
@@ -339,7 +340,7 @@
{{ $t('logIn') }}</div>
</div>
</div>
-
+
</div>
</div>
<van-popup v-model:show="show" class="rounded-2xl">
@@ -359,16 +360,18 @@
<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 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>
+ <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 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>
@@ -1042,6 +1045,8 @@
}
#cryptos {
+ background-color: #fff !important;
+
.perpetual-open {
font-size: 26px;
}
@@ -1261,6 +1266,7 @@
padding: 14px 18px;
border-radius: 12px;
}
+
.trade-top-selectors .trade-selector {
flex: 1;
display: flex;
@@ -1271,6 +1277,7 @@
cursor: pointer;
min-height: 72px;
}
+
.trade-top-selectors .trade-selector-tag {
padding: 8px 20px;
border-radius: 6px;
@@ -1280,12 +1287,15 @@
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;
@@ -1293,6 +1303,7 @@
color: #1e1e1e;
min-width: 0;
}
+
.trade-top-selectors .trade-selector-arrow {
font-size: 28px;
color: #999;
@@ -1300,12 +1311,13 @@
margin-left: 8px;
}
-.perpetual-open-form > div,
-.perpetual-open-form > .order-area_tabs,
-.perpetual-open-form > .trade-futures-bonus,
+.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,
@@ -1314,18 +1326,22 @@
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;
}
@@ -1353,6 +1369,7 @@
border-radius: 8px 8px 0 0;
overflow: hidden;
}
+
.order-area_tabs .order-tabs-buttons {
display: flex;
justify-content: space-between;
@@ -1362,6 +1379,7 @@
position: relative;
z-index: 0;
}
+
.order-area_tabs .order-tab {
flex: 0 0 calc(50%);
width: calc(50%);
@@ -1369,28 +1387,35 @@
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%;
@@ -1404,6 +1429,7 @@
align-items: center;
justify-content: center;
}
+
.order-area_tabs .order-tabs-bg-img {
width: 100%;
height: 100%;
@@ -1414,23 +1440,27 @@
.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);
+ 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;
@@ -1438,6 +1468,7 @@
cursor: pointer;
padding: 6px;
}
+
.lever-popup-segment {
display: flex;
align-items: stretch;
@@ -1445,6 +1476,7 @@
border-radius: 15px;
overflow: hidden;
}
+
.lever-popup-seg-item {
flex: 1;
padding: 18px 24px;
@@ -1453,14 +1485,22 @@
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-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);
+ box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}
+
.lever-popup-row {
display: flex;
align-items: stretch;
@@ -1469,6 +1509,7 @@
overflow: hidden;
border: 1px solid #eee;
}
+
.lever-popup-btn {
width: 78px;
min-width: 78px;
@@ -1481,8 +1522,15 @@
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-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;
@@ -1494,34 +1542,43 @@
background: #fff;
padding: 21px 12px;
}
-.lever-popup-input:focus { outline: none; }
+
+.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);
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
+
.lever-popup-confirm {
margin-top: 42px;
width: 100%;
@@ -1536,7 +1593,10 @@
}
.trade-futures-bonus {
- .mr-10 { margin-right: 10px; }
+ .mr-10 {
+ margin-right: 10px;
+ }
+
.trade-futures-transfer-icon {
flex-shrink: 0;
padding: 8px;
--
Gitblit v1.9.3