1

jhzh

2026-05-29 bbf6d337c9641c0d1bf2c57f05310e59c104990b

 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,41 +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" >
               <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>
              <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> -->
            </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>
@@ -174,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">
@@ -231,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">
@@ -352,6 +349,28 @@
      <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-presets">
            <div v-for="lv in leverPresetList" :key="lv" class="lever-popup-preset-item"
              :class="{ 'lever-popup-preset-active': leverPopupValue === lv }" @click="leverPopupValue = lv">{{ lv }}X</div>
          </div>
          <div class="lever-popup-confirm" @click="confirmLeverPopup">Confirm</div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
@@ -513,8 +532,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
      }
@@ -535,19 +554,25 @@
      // console.log("dddddd", max, this.form.lever_rate, (1 / this.form.lever_rate + this.initData.fee));

      return max
    }
    },
    maxLever() {
      return Math.max(...this.leverPresetList)
    },
    leverDisplayMode() {
      return this.locationVal === 1 ? 'Cross' : 'Part'
    },
  },
  data() {
    return {
      THEME,
      fixDate,
     bfbindex:null,
     bfblist:[
        {name:'25'},
        {name:'50'},
        {name:'75'},
        {name:'100'}
     ],
      bfbindex: null,
      bfblist: [
        { name: '25' },
        { name: '50' },
        { name: '75' },
        { name: '100' }
      ],
      currentBuyType: '', // 交割合约当前下单的类型，用于弹窗倒计时结束以后，点击再下一单
      timeout2: null,
      timeout: null,
@@ -569,7 +594,7 @@
        session_token: '',
        direction: 'buy', // 买or卖
        price_type: 'opponent', // 市价or限价
        lever_rate: 1, // 杠杆
        lever_rate: 100, // 杠杆，默认100倍
        price: '',
        amount: '', // 数量
        para_id: '' // 交割周琦id
@@ -600,6 +625,10 @@
      locationShow: false,
      locationTitle: this.$t('全仓'),
      locationVal: 1,
      showLeverPopup: false,
      leverPresetList: [30, 50, 100, 200, 300],
      leverPopupValue: 100,
      leverPopupMargin: 1, // 1=全仓 Cross, 0=逐仓 Part
    }
  },
  created() {
@@ -624,14 +653,14 @@
  },
  methods: {
    reserve,
   bfbclick(e,i){
      this.bfbindex = i
      e = parseInt(e.name)
      const rate = e / 100; //如0.25
      this.form.amount = this.maxUSDT * rate
      var a = this.form.amount
      this.form.amount = Math.floor(a*100)/100
   },
    bfbclick(e, i) {
      this.bfbindex = i
      e = parseInt(e.name)
      const rate = e / 100; //如0.25
      this.form.amount = this.maxUSDT * rate
      var a = this.form.amount
      this.form.amount = Math.floor(a * 100) / 100
    },
    //获取张数
    getAmount(val) {
      if (!val) {
@@ -778,7 +807,7 @@
    },
    handleChoose(item) {
      this.showOptions = !this.showOptions
      this.form.lever_rate = item.lever_rate
      this.form.lever_rate = this.snapLeverToPreset(item.lever_rate)
      console.log('handleChoose')
      this.handleInitSliderOption()
    },
@@ -833,6 +862,39 @@
      this.locationTitle = item.title;
      this.locationVal = item.type;
      this.locationShow = false;
    },
    openLeverPopup() {
      this.leverPopupValue = this.snapLeverToPreset(this.form.lever_rate);
      this.leverPopupMargin = this.locationVal !== undefined ? this.locationVal : 1;
      this.showLeverPopup = true;
    },
    snapLeverToPreset(v) {
      const list = this.leverPresetList;
      const n = parseInt(v, 10);
      if (isNaN(n) || n <= 0) return 100;
      if (list.includes(n)) return n;
      let best = list[0];
      let bestD = Infinity;
      for (const x of list) {
        const d = Math.abs(x - n);
        if (d < bestD || (d === bestD && x < best)) {
          bestD = d;
          best = x;
        }
      }
      return best;
    },
    onLeverPopupClosed() {
      this.leverPopupValue = this.snapLeverToPreset(this.form.lever_rate);
      this.leverPopupMargin = this.locationVal !== undefined ? this.locationVal : 1;
    },
    confirmLeverPopup() {
      const val = this.snapLeverToPreset(this.leverPopupValue);
      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) {
@@ -956,24 +1018,28 @@

<style lang="scss">
@import "@/assets/init.scss";
.btns_box_boxs{
   width: 23%;
   border: 1px solid #F7B600;
   text-align: center;
   border-radius: 10px;
   color: #F7B600;

.btns_box_boxs {
  width: 23%;
  border: 1px solid #F7B600;
  text-align: center;
  border-radius: 10px;
  color: #F7B600;
}
.btns_box_box{
   width: 23%;
   border: 1px solid #cbcbcb;
   text-align: center;
   border-radius: 10px;

.btns_box_box {
  width: 23%;
  border: 1px solid #cbcbcb;
  text-align: center;
  border-radius: 10px;
}
.btns_box{
   display: flex;
   justify-content: space-between;
   align-items: center;

.btns_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#cryptos {
  .perpetual-open {
    font-size: 26px;
@@ -1156,7 +1222,10 @@

    .van-action-sheet__item {
      background: transparent !important;
      color: $text_color;

      @include themify() {
        color: themed("text_color");
      }
    }
  }

@@ -1183,7 +1252,266 @@
  }
}

/* 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-presets {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: flex-start;
}
.lever-popup-preset-item {
  flex: 1 1 calc(33.33% - 12px);
  min-width: calc(33.33% - 12px);
  box-sizing: border-box;
  padding: 21px 12px;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  color: #868e9a;
  background: #f7f7f7;
  border-radius: 15px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.lever-popup-preset-item.lever-popup-preset-active {
  color: #1e1e1e;
  background: #fff;
  border-color: #7c3aed;
  box-shadow: 0 1px 8px rgba(124, 58, 237, 0.15);
}
.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>