1

admin

2026-04-29 1febaf2c9b7c7cb7f208624c4c2e9d972cf8b265

 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>