1

李

2026-05-22 836a56418f932086e4221cb6c5e6a56f1c0dfecf

 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;