~admin/aerospace-app.git

parent: 403a5616 | patch | commit | ignore whitespace

lxf

2025-06-05 f9a8e00fea32e30fe1ad031b265fc574e88ead7a

style

6 files modified

2 files added

	public/desk/manifest.json	6 ●●●●● patch \| view \| raw \| blame \| history
	public/img/logo.jpeg	patch \| view \| raw \| blame \| history
	public/index.html	45 ●●●●● patch \| view \| raw \| blame \| history
	src/assets/logo.jpeg	patch \| view \| raw \| blame \| history
	src/components/perpetual-open/amountSlider.vue	6 ●●●●● patch \| view \| raw \| blame \| history
	src/components/perpetual-open/index.vue	169 ●●●●● patch \| view \| raw \| blame \| history
	src/components/trade-order-area/index.vue	488 ●●●●● patch \| view \| raw \| blame \| history
	src/page/helpCenter/about.vue	8 ●●●●● patch \| view \| raw \| blame \| history

 public/desk/manifest.json

@@ -1,9 +1,9 @@
{
    "name": "Web3bit",
    "short_name": "Web3bit",
    "name": "Deepcoin",
    "short_name": "Deepcoin",
    "icon": [
        {
            "src": "../img/App.png",
            "src": "../img/logo.jpeg",
            "sizes": "192x192",
            "type": "image/png"
        }

 public/img/logo.jpeg


 public/index.html

@@ -1,22 +1,27 @@
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="manifest" href="./desk/manifest.json">
    <meta name="theme-color" content="white">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <link rel="apple-touch-icon" href="./img/App.png">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <link rel="manifest" href="./desk/manifest.json">
  <meta name="theme-color" content="white">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="white">
  <link rel="apple-touch-icon" href="./img/logo.jpeg">
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

 src/assets/logo.jpeg


 src/components/perpetual-open/amountSlider.vue

@@ -9,6 +9,7 @@
          :marks="marks"
          v-model="sliderAmount"
          :hide-label="true"
          :interval="25"
          width="92%"
          tooltip="hover"
          :tooltip-formatter="'{value}%'"
@@ -90,7 +91,6 @@
};
</script>
<style scoped>

/* 滑块 */
.mainBox >>> .vue-slider-dot-tooltip-inner {
  background: #404040 !important;
@@ -115,8 +115,8 @@
  border: 1px solid #dddddd;
}
.custom-step.active {
  box-shadow: 0 0 0 3px #1D91FF;
  background-color: #1D91FF;
  box-shadow: 0 0 0 3px #1d91ff;
  background-color: #1d91ff;
}

.poecs {

 src/components/perpetual-open/index.vue

@@ -193,23 +193,56 @@
            <div class="mt-40 mb-30 w-full flex justify-between items-center">
              <span class="font-22 font-400 text-grey">{{
                $t("可开张数")
              }}</span>{{form.lever_rate}}
              <span class="font-22 font-400 textColor" v-if="form.lever_rate==25">
                {{Math.floor((initFutrue.amount-(initFutrue.amount *  0.0375))/initData.amount)}}
              }}</span
              >{{ form.lever_rate }}
              <span
                class="font-22 font-400 textColor"
                v-if="form.lever_rate == 25"
              >
                {{
                  Math.floor(
                    (initFutrue.amount - initFutrue.amount * 0.0375) /
                      initData.amount
                  )
                }}
                {{ $t("张") }}
              </span>
              <span class="font-22 font-400 textColor" v-if="form.lever_rate==50">
                              {{Math.floor((initFutrue.amount-(initFutrue.amount *  0.075))/initData.amount)}}
                {{ $t("张") }}
              </span>
              <span class="font-22 font-400 textColor" v-if="form.lever_rate==100">
                              {{Math.floor((initFutrue.amount-(initFutrue.amount *  0.15))/initData.amount)}}
                {{ $t("张") }}
              </span>
              <span class="font-22 font-400 textColor" v-if="form.lever_rate==200">
                              {{Math.floor((initFutrue.amount-(initFutrue.amount *  0.30))/initData.amount)}}
                {{ $t("张") }}
              </span>
              <span
                class="font-22 font-400 textColor"
                v-if="form.lever_rate == 50"
              >
                {{
                  Math.floor(
                    (initFutrue.amount - initFutrue.amount * 0.075) /
                      initData.amount
                  )
                }}
                {{ $t("张") }}
              </span>
              <span
                class="font-22 font-400 textColor"
                v-if="form.lever_rate == 100"
              >
                {{
                  Math.floor(
                    (initFutrue.amount - initFutrue.amount * 0.15) /
                      initData.amount
                  )
                }}
                {{ $t("张") }}
              </span>
              <span
                class="font-22 font-400 textColor"
                v-if="form.lever_rate == 200"
              >
                {{
                  Math.floor(
                    (initFutrue.amount - initFutrue.amount * 0.3) /
                      initData.amount
                  )
                }}
                {{ $t("张") }}
              </span>
            </div>
            <!-- <vue-slider v-bind="options" v-model="form.amount"></vue-slider> -->
            <!-- <vue-slider class="mainBox" v-bind="options" :marks="marks" v-model="form.volume" :hide-label="true"  width="90%"
@@ -237,38 +270,46 @@
            <div class="flex justify-between mt-30">
              <div class="text-grey">{{ $t("合约金额") }}</div>
              <div class="textColor">
                {{ ((initData.amount * (form.amount / 1) * form.lever_rate)).toFixed(4)}} USDT
                {{
                  (
                    initData.amount *
                    (form.amount / 1) *
                    form.lever_rate
                  ).toFixed(4)
                }}
                USDT
              </div>
            </div>
            <div class="flex justify-between mt-30">
              <div class="text-grey">{{ $t("保证金") }}</div>
              <div class="textColor">
                {{ ((initData.amount * (form.amount / 1)) | nan).toFixed(4) }} USDT
                {{ ((initData.amount * (form.amount / 1)) | nan).toFixed(4) }}
                USDT
              </div>
            </div>
            <div class="flex justify-between mt-30">
              <div class="text-grey">{{ $t("建仓手续费") }}</div>
              <!-- {{
              <!-- {{
                userInfo.perpetual_contracts_status === "1"
                  ? initData.fee * (form.amount / 1)
                  : (initData.fee * (form.amount / 1) * form.lever_rate) | nan
              }} -->
              <div class="textColor" v-if="form.lever_rate==25">
                            {{ ((initData.amount * (form.amount / 1)) *  0.0375).toFixed(4)}}
              <div class="textColor" v-if="form.lever_rate == 25">
                {{ (initData.amount * (form.amount / 1) * 0.0375).toFixed(4) }}
                USDT
              </div>
              <div class="textColor" v-if="form.lever_rate==50">
                              {{ ((initData.amount * (form.amount / 1))*  0.075).toFixed(4)}}
                USDT
              </div>
              <div class="textColor" v-if="form.lever_rate==100">
                              {{ ((initData.amount * (form.amount / 1))*  0.15).toFixed(4)}}
                USDT
              </div>
              <div class="textColor" v-if="form.lever_rate==200">
                              {{ ((initData.amount * (form.amount / 1)) * 0.30).toFixed(4)}}
                USDT
              </div>
              <div class="textColor" v-if="form.lever_rate == 50">
                {{ (initData.amount * (form.amount / 1) * 0.075).toFixed(4) }}
                USDT
              </div>
              <div class="textColor" v-if="form.lever_rate == 100">
                {{ (initData.amount * (form.amount / 1) * 0.15).toFixed(4) }}
                USDT
              </div>
              <div class="textColor" v-if="form.lever_rate == 200">
                {{ (initData.amount * (form.amount / 1) * 0.3).toFixed(4) }}
                USDT
              </div>
            </div>
          </template>
          <div
@@ -748,10 +789,10 @@
          title: this.$t("市价"),
          type: "1",
        },
        {
          title: this.$t("限价"),
          type: "2",
        },
        // {
        //   title: this.$t("限价"),
        //   type: "2",
        // },
      ],
      form: {
        symbol: "", // 币种
@@ -806,10 +847,10 @@
        title: this.$t("市价"),
        type: "1",
      },
      {
        title: this.$t("限价"),
        type: "2",
      },
      // {
      //   title: this.$t("限价"),
      //   type: "2",
      // },
    ];
    this.title = this.selectData[0].title;
    this.type = this.selectData[0].type;
@@ -819,29 +860,41 @@
    //获取张数
    getAmount(val) {
      this.form.amount = val;
      // if(this.form.lever_rate==25){
         //  this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount *  0.0375))/this.initData.amount)
      // }else if(this.form.lever_rate==50){
         //  this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount *  0.0375))/this.initData.amount)
      // }else if(this.form.lever_rate==100){
         //  this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount *  0.15))/this.initData.amount)
      // }else{
         //  this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount *  0.3))/this.initData.amount)
      // }
      // if(this.form.lever_rate==25){
      //  this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount *  0.0375))/this.initData.amount)
      // }else if(this.form.lever_rate==50){
      //  this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount *  0.0375))/this.initData.amount)
      // }else if(this.form.lever_rate==100){
      //  this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount *  0.15))/this.initData.amount)
      // }else{
      //  this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount *  0.3))/this.initData.amount)
      // }
    },
    // 获取张数,数据转换
    getVolumnByLever() {
      let vol;
      // vol = this.initOpen.volume / 1;
      if(this.form.lever_rate==25){
                vol = Math.floor((this.initFutrue.amount-(this.initFutrue.amount *  0.0375))/this.initData.amount)
      }else if(this.form.lever_rate==50){
                vol = Math.floor((this.initFutrue.amount-(this.initFutrue.amount *  0.0375))/this.initData.amount)
      }else if(this.form.lever_rate==100){
                vol = Math.floor((this.initFutrue.amount-(this.initFutrue.amount *  0.15))/this.initData.amount)
      }else{
                vol = Math.floor((this.initFutrue.amount-(this.initFutrue.amount *  0.3))/this.initData.amount)
      }
      if (this.form.lever_rate == 25) {
        vol = Math.floor(
          (this.initFutrue.amount - this.initFutrue.amount * 0.0375) /
            this.initData.amount
        );
      } else if (this.form.lever_rate == 50) {
        vol = Math.floor(
          (this.initFutrue.amount - this.initFutrue.amount * 0.0375) /
            this.initData.amount
        );
      } else if (this.form.lever_rate == 100) {
        vol = Math.floor(
          (this.initFutrue.amount - this.initFutrue.amount * 0.15) /
            this.initData.amount
        );
      } else {
        vol = Math.floor(
          (this.initFutrue.amount - this.initFutrue.amount * 0.3) /
            this.initData.amount
        );
      }
      return Math.floor(vol);
    },


 src/components/trade-order-area/index.vue

@@ -1,47 +1,101 @@
<template>
  <div class="flex flex-col flex-1">
    <div class="flex items-center h-66 tabBackground text-grey">
      <p class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
        :class="currentType == 'open' ? 'open' : ''" @click="changeTab('open')">{{ $t('买入') }}</p>
      <p class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
        :class="currentType == 'close' ? 'close' : ''" @click="changeTab('close')">{{ $t('卖出') }}</p>
      <p
        class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
        :class="currentType == 'open' ? 'open' : ''"
        @click="changeTab('open')"
      >
        {{ $t("买入") }}
      </p>
      <p
        class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
        :class="currentType == 'close' ? 'close' : ''"
        @click="changeTab('close')"
      >
        {{ $t("卖出") }}
      </p>
    </div>

    <div class="mt-22 mb-22 inputBackground" style="position:relative;">
      <div class=" flex justify-between  items-center w-full h-70" @click="selectBtn">
    <div class="mt-22 mb-22 inputBackground" style="position: relative">
      <div
        class="flex justify-between items-center w-full h-70"
        @click="selectBtn"
      >
        <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
        <div class="pl-16 textColor" style="width:80%;">{{ title }}</div>
        <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
        <div class="pl-16 textColor" style="width: 80%">{{ title }}</div>
        <img
          src="@/assets/image/public/grey-select.png"
          alt="select-icon"
          class="w-22 h-11 pr-20"
        />
      </div>
      <div class="option-box" v-if="isShow">
        <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">{{ item.title }}
        <div
          class="font-30"
          v-for="item in selectData"
          :key="item.type"
          @click="selectItem(item)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="h-70 lh-70  inputBackground mb-25 flex justify-center px-16 textColor2">
      <input placeholder="" class="targetPrice  w-full  h-70 border-none" v-model="form.price"
        :disabled="type / 1 === 1" />
    <div
      class="h-70 lh-70 inputBackground mb-25 flex justify-center px-16 textColor2"
    >
      <input
        placeholder=""
        class="targetPrice w-full h-70 border-none"
        v-model="form.price"
        :disabled="type / 1 === 1"
      />
      <span>USDT</span>
    </div>
    <div class="h-70 lh-70  inputBackground mb-25 flex justify-center px-16 textColor2">
    <div
      class="h-70 lh-70 inputBackground mb-25 flex justify-center px-16 textColor2"
    >
      <span>{{ title }}</span>
    </div>
    <div class="flex total-list">
      <div class="total-div" :class="[!isTotal ? 'active-bg' : '']" @click="checkIsTotal(false)">
        {{ $t('数量') }}
      <div
        class="total-div"
        :class="[!isTotal ? 'active-bg' : '']"
        @click="checkIsTotal(false)"
      >
        {{ $t("数量") }}
      </div>
      <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">
        {{ $t('总额') }}
      <div
        class="total-div"
        :class="[isTotal ? 'active-bg' : '']"
        @click="checkIsTotal(true)"
      >
        {{ $t("总额") }}
      </div>
    </div>
    <div v-if="!isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
      <input :placeholder="$t('数量')" class=" w-full h-70 border-none textColor" v-model="form.volume" @input="onInput" />
    <div
      v-if="!isTotal"
      class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16"
    >
      <input
        :placeholder="$t('数量')"
        class="w-full h-70 border-none textColor"
        v-model="form.volume"
        @input="onInput"
      />
      <span class="textColor">{{ symbolname }}</span>
    </div>
    <div v-if="isTotal" class="h-70 lh-70 inputBackground  mb-36 flex justify-center px-16">
      <input :placeholder="$t('总额')" class=" w-full h-70 border-none textColor" v-model="form.total"
        @input="onInputTotal" />
      <span class="textColor">{{ 'USDT' }}</span>
    <div
      v-if="isTotal"
      class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16"
    >
      <input
        :placeholder="$t('总额')"
        class="w-full h-70 border-none textColor"
        v-model="form.total"
        @input="onInputTotal"
      />
      <span class="textColor">{{ "USDT" }}</span>
    </div>
    <!-- <vue-slider v-bind="options" v-model="form.volume"  :interval="interval"></vue-slider> -->
    <!-- <vue-slider class="mainBox"  v-bind="options" :interval="interval"  v-model="form.volume" :hide-label="true"  :railStyle="{ background: '#404040', height: '10px' }"
@@ -50,42 +104,75 @@
        <div :class="['custom-step', { active }]"></div>
      </template>
    </vue-slider> -->
    <div style="color: #868D9A" class="font-24 w-full flex justify-between items-center">
    <div
      style="color: #868d9a"
      class="font-24 w-full flex justify-between items-center"
    >
      <!-- <span class="flex-1 text-left">0%</span> -->
      <span class="flex-1 tab-item" :class="[percentageVal == 25 ? 'select-active' : '']"
        @click="exchangeVal(25)">25%</span>
      <span class="flex-1 tab-item" :class="[percentageVal == 50 ? 'select-active' : '']"
        @click="exchangeVal(50)">50%</span>
      <span class="flex-1 tab-item" :class="[percentageVal == 75 ? 'select-active' : '']"
        @click="exchangeVal(75)">75%</span>
      <span class="flex-1 tab-item" :class="[percentageVal == 100 ? 'select-active' : '']"
        @click="exchangeVal(100)">100%</span>
      <span
        class="flex-1 tab-item"
        :class="[percentageVal == 25 ? 'select-active' : '']"
        @click="exchangeVal(25)"
        >25%</span
      >
      <span
        class="flex-1 tab-item"
        :class="[percentageVal == 50 ? 'select-active' : '']"
        @click="exchangeVal(50)"
        >50%</span
      >
      <span
        class="flex-1 tab-item"
        :class="[percentageVal == 75 ? 'select-active' : '']"
        @click="exchangeVal(75)"
        >75%</span
      >
      <span
        class="flex-1 tab-item"
        :class="[percentageVal == 100 ? 'select-active' : '']"
        @click="exchangeVal(100)"
        >100%</span
      >
    </div>
    <div class="flex justify-between items-center mt-40">
      <div class="flex flex-col font-24">
        <p class="text-grey" v-if="this.currentType === 'open'">{{ $t('可用') }}<span class="textColor ml-8">
            {{ initOpen.volume | nan }}&nbsp;USDT</span>
        <p class="text-grey" v-if="this.currentType === 'open'">
          {{ $t("可用")
          }}<span class="textColor ml-8">
            {{ initOpen.volume | nan }}&nbsp;USDT</span
          >
        </p>
        <p class="text-grey" v-else>{{ $t('可卖') }}<span class="textColor ml-8">{{ initClose.volume | nan }}&nbsp;{{
          symbolname }}</span></p>
        <p class="text-grey" v-else>
          {{ $t("可卖")
          }}<span class="textColor ml-8"
            >{{ initClose.volume | nan }}&nbsp;{{ symbolname }}</span
          >
        </p>
      </div>
      <van-icon name="add-o" @click="$router.push('/exchange/exchangePage')" class="font-30 add-icon" />
      <van-icon
        name="add-o"
        @click="$router.push('/exchange/exchangePage')"
        class="font-30 add-icon"
      />
      <!-- <img @click="$router.push('/exchange/exchangePage')" src="@/assets/image/public/switch.png" class="w-24 h-24" /> -->
    </div>
    <div style="" class="w-full h-90 lh-90 flex justify-center text-white text-center rounded buyandSell mt-70"
      :class="currentType === 'open' ? 'bg-green' : 'bg-red'" @click="order()">
      {{ currentType == 'open' ? $t('买入') : $t('卖出') }}
    <div
      style=""
      class="w-full h-90 lh-90 flex justify-center text-white text-center rounded buyandSell mt-70"
      :class="currentType === 'open' ? 'bg-green' : 'bg-red'"
      @click="order()"
    >
      {{ currentType == "open" ? $t("买入") : $t("卖出") }}
    </div>

  </div>
</template>

<script>
import config from "@/config";
import { Popup, Tabs, Tab } from 'vant';
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
import { _getBalance } from '@/API/trade.api'
import { Popup, Tabs, Tab } from "vant";
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/default.css";
import { _getBalance } from "@/API/trade.api";
import TradeApi from "@/API/trading.js";
import { mapGetters } from "vuex";
// import PopupConfirmOrder from '@/components/popup-confirm-order'
@@ -95,170 +182,187 @@
    VueSlider,
    [Popup.name]: Popup,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab
    [Tab.name]: Tab,
  },
  props: {
    symbol: {
      type: String,
      default: ''
      default: "",
    },
    symbolname: {
      type: String,
      default: '--'
    },
    symbolname: {
      type: String,
      default: "--",
    },
    price: {
      type: [Number, String],
      default: '0.00'
      default: "0.00",
    },
    initOpen: {
      type: Object,
      default() {
        return {}
      }
        return {};
      },
    },
    initClose: {
      type: Object,
      default() {
        return {}
      }
        return {};
      },
    },
  },
  computed: {
    ...mapGetters('user', ['userInfo'])
    ...mapGetters("user", ["userInfo"]),
  },
  activated() {
    this.selectData = [
      { title: this.$t('市价委托'), type: '1' },
      { title: this.$t('限价委托'), type: '2' },
    ]
    this.title = this.selectData[0].title
    this.type = this.selectData[0].type
      { title: this.$t("市价委托"), type: "1" },
      { title: this.$t("限价委托"), type: "2" },
    ];
    this.title = this.selectData[0].title;
    this.type = this.selectData[0].type;
  },
  watch: {
    initOpen: { // 处理滚动条初始值
    initOpen: {
      // 处理滚动条初始值
      deep: true,
      handler(val) {
        console.log(val)
        console.log(val);
        if (val.volume / 1 > 0) {
          this.handleInitSliderOption()
          this.handleInitSliderOption();
        }
      }
      },
    },
    initClose: { // 处理滚动条初始值
    initClose: {
      // 处理滚动条初始值
      deep: true,
      handler(newVal, oldVal) {
        if (newVal.volume / 1 > 0) {
          this.handleInitSliderOption(true)
          this.handleInitSliderOption(true);
        }
      }
      },
    },
    price(val) {
      if (this.type === '1') { // !this.focus &&
        this.form.price = val
      if (this.type === "1") {
        // !this.focus &&
        this.form.price = val;
      }
    },
  },
  filters: {
    nan(val) {
      return isNaN(val) ? '--' : val
    }
      return isNaN(val) ? "--" : val;
    },
  },
  data() {
    return {
      options: config.sliderOptions,
      value: 0,
      isShow: false,
      title: this.$t('市价委托'),
      title: this.$t("市价委托"),
      selectData: [],
      form: {
        volume: '',
        session_token: '',
        symbol: '', // 币种
        price: '',
        total: '',
        order_price_type: 'opponent', // 市价or限价
        volume: "",
        session_token: "",
        symbol: "", // 币种
        price: "",
        total: "",
        order_price_type: "opponent", // 市价or限价
      },
      type: "1",//选中市价或限价类型
      type: "1", //选中市价或限价类型
      currentType: "open", //开仓类型
      interval: 0.001,
      marks: (val) => val % 25 === 0,
      isTotal: false,
      percentageVal: 0
    }
      percentageVal: 0,
    };
  },
  mounted() {

  },
  mounted() {},
  methods: {
    checkIsTotal(val) {
      this.isTotal = val
      this.percentageVal = 0
      this.form.total = ''
      this.form.volume = ''
      this.isTotal = val;
      this.percentageVal = 0;
      this.form.total = "";
      this.form.volume = "";
    },
    exchangeVal(val) {
      this.percentageVal = val
      this.percentageVal = val;
      if (!this.isTotal) {
        if (this.currentType == 'open') {
          let sum = (parseFloat(this.initOpen.volume) * (val / 100) / parseFloat(this.form.price))
          this.form.volume = Math.floor(sum * 100000) / 100000
        if (this.currentType == "open") {
          let sum =
            (parseFloat(this.initOpen.volume) * (val / 100)) /
            parseFloat(this.form.price);
          this.form.volume = Math.floor(sum * 100000) / 100000;
        } else {
          let sum = parseFloat(this.initClose.volume)
          this.form.volume = (Math.floor(sum * (val / 100) * 100000)) / 100000
          let sum = parseFloat(this.initClose.volume);
          this.form.volume = Math.floor(sum * (val / 100) * 100000) / 100000;
        }
      } else {
        if (this.currentType == 'open') {
          this.form.total = this.initOpen.volume * (val / 100)
        if (this.currentType == "open") {
          this.form.total = this.initOpen.volume * (val / 100);
        } else {
          this.form.total = Math.floor((this.initClose.volume * (val / 100) * parseFloat(this.form.price)) * 1000) / 1000
          this.form.total =
            Math.floor(
              this.initClose.volume *
                (val / 100) *
                parseFloat(this.form.price) *
                1000
            ) / 1000;
        }
      }
    },
    handleInitSliderOption(volume) {
      if (!volume) { // 金额是否需要变动
        this.form.volume = ''
      if (!volume) {
        // 金额是否需要变动
        this.form.volume = "";
      }
      console.log(this.initOpen.volume)
      let vol
      if (this.currentType === 'open') {
        vol = this.initOpen.volume / 1
      console.log(this.initOpen.volume);
      let vol;
      if (this.currentType === "open") {
        vol = this.initOpen.volume / 1;
      } else {
        vol = this.initClose.volume / 1
        vol = this.initClose.volume / 1;
      }
      this.options.max = Number(vol.toFixed(3))
      this.options.max = Number(vol.toFixed(3));
      if (this.options.max > 0) {
        this.options.disabled = false
        this.options.disabled = false;
      } else {
        this.options.disabled = true
        this.options.disabled = true;
      }
    },
    onInput() { // 数量变化
      if (this.currentType === 'open') {
        let maxSum = (parseFloat(this.initOpen.volume) / parseFloat(this.form.price))
        console.log(this.initOpen.volume)
        console.log(this.form.price)
        console.log(maxSum)
    onInput() {
      // 数量变化
      if (this.currentType === "open") {
        let maxSum =
          parseFloat(this.initOpen.volume) / parseFloat(this.form.price);
        console.log(this.initOpen.volume);
        console.log(this.form.price);
        console.log(maxSum);
        if (this.form.volume * 1 > maxSum / 1) {
          this.form.volume = maxSum
          this.form.volume = maxSum;
        }
      } else {
        if (this.form.volume * 1 / 1 > this.options.max / 1) {
          this.form.volume = this.options.max / 1
        if ((this.form.volume * 1) / 1 > this.options.max / 1) {
          this.form.volume = this.options.max / 1;
        }
      }
    },
    onInputTotal() { //总额变化
    onInputTotal() {
      //总额变化
      //最大额度
      if (this.form.total > 0) {
        if (this.currentType === 'open') {
          console.log(this.initOpen.volume)
        if (this.currentType === "open") {
          console.log(this.initOpen.volume);
          if (this.form.total * 1 > this.initOpen.volume * 1) {
            this.form.total = this.initOpen.volume
            this.form.total = this.initOpen.volume;
          }
        } else {
          let sum = (parseFloat(this.form.total) / parseFloat(this.form.price)).toFixed(5)
          let sum = (
            parseFloat(this.form.total) / parseFloat(this.form.price)
          ).toFixed(5);
          if (parseFloat(sum) > parseFloat(this.initClose.volume)) {
            this.form.total = (parseFloat(this.initClose.volume) * parseFloat(this.form.price)).toFixed(5)
            this.form.total = (
              parseFloat(this.initClose.volume) * parseFloat(this.form.price)
            ).toFixed(5);
          }
        }
      }
@@ -270,72 +374,75 @@
    //选择价格类型
    selectItem(item) {
      if (item.type == 1) {
        this.form.price = this.price
        this.form.price = this.price;
      }
      this.form.order_price_type = item.type === '1' ? 'opponent' : 'limit'
      this.form.order_price_type = item.type === "1" ? "opponent" : "limit";
      this.title = item.title;
      this.type = item.type;
      this.isShow = false;
    },
    //选择开仓类型
    changeTab(type) { // 开仓和
      this.percentageVal = 0
      this.isTotal = false
      this.form.total = ''
      console.log('changeTab', type)
    changeTab(type) {
      // 开仓和
      this.percentageVal = 0;
      this.isTotal = false;
      this.form.total = "";
      console.log("changeTab", type);
      // TODO: 这里应该是换函数
      // this.form.direction = type === 'open' ? 'buy' : 'sell'
      if (this.currentType === type) {
        return
        return;
      }
      this.currentType = type;
      if (this.currentType === 'close') {
        this.$emit('ordered', 'close') // 更新平仓初始化参数
      if (this.currentType === "close") {
        this.$emit("ordered", "close"); // 更新平仓初始化参数
      } else {
        this.$emit('ordered', 'open') // 更新平仓初始化参数
        this.$emit("ordered", "open"); // 更新平仓初始化参数
      }
      this.handleInitSliderOption()
      this.handleInitSliderOption();
    },
    order() {
      if (!this.userInfo.token) {
        this.$router.push('/login')
        return
        this.$router.push("/login");
        return;
      }
      let volume = ''
      let volume = "";
      if (this.isTotal) {
        if (!this.form.total) {
          this.$toast.fail(this.$t('请输入总额'))
          return
          this.$toast.fail(this.$t("请输入总额"));
          return;
        }
        if (this.currentType === 'open') {
          this.form.volume = parseFloat(this.form.total).toFixed(5)
        if (this.currentType === "open") {
          this.form.volume = parseFloat(this.form.total).toFixed(5);
        } else {
          this.form.volume = (parseFloat(this.form.total) / parseFloat(this.form.price))
          this.form.volume = this.form.volume.toFixed(5)
          this.form.volume =
            parseFloat(this.form.total) / parseFloat(this.form.price);
          this.form.volume = this.form.volume.toFixed(5);
        }
        volume = this.form.volume
        volume = this.form.volume;
      } else {
        if (!this.form.volume) {
          this.$toast.fail(this.$t('请输入数量'))
          return
          this.$toast.fail(this.$t("请输入数量"));
          return;
        }
        if (this.currentType === 'open') {
          volume = (parseFloat(this.form.volume) * parseFloat(this.form.price))
        if (this.currentType === "open") {
          volume = parseFloat(this.form.volume) * parseFloat(this.form.price);
        } else {
          volume = this.form.volume
          volume = this.form.volume;
        }
      }
      this.form.symbol = this.$route.params.symbol
      let _order = null // api
      let emitFunc = null // 触发函数
      this.form.symbol = this.$route.params.symbol;
      let _order = null; // api
      let emitFunc = null; // 触发函数

      if (this.currentType === 'open') {
        this.form.session_token = this.initOpen.session_token
      if (this.currentType === "open") {
        this.form.session_token = this.initOpen.session_token;
      } else {
        this.form.session_token = this.initClose.session_token
        this.form.session_token = this.initClose.session_token;
      }
      _order = this.currentType === 'open' ? TradeApi.tradeBuy : TradeApi.tradeSell
      emitFunc = this.currentType
      _order =
        this.currentType === "open" ? TradeApi.tradeBuy : TradeApi.tradeSell;
      emitFunc = this.currentType;
      _order({
        volume: volume,
        session_token: this.form.session_token,
@@ -343,21 +450,24 @@
        price: this.form.price,
        total: this.form.total,
        order_price_type: this.form.order_price_type, // 市价or限价
      }).then((res) => {
        this.$toast(this.$t('操作成功'))
        this.form.volume = ''
        this.form.total = ''
        _getBalance().then(data => { // 刷新余额
          this.$store.commit('user/SET_USERINFO', { balance: data.money })
        })
        this.$emit('ordered', emitFunc)
      }).catch(() => { // 也需要重新初始化
        this.$emit('ordered', emitFunc)
      })
        .then((res) => {
          this.$toast(this.$t("操作成功"));
          this.form.volume = "";
          this.form.total = "";
          _getBalance().then((data) => {
            // 刷新余额
            this.$store.commit("user/SET_USERINFO", { balance: data.money });
          });
          this.$emit("ordered", emitFunc);
        })
        .catch(() => {
          // 也需要重新初始化
          this.$emit("ordered", emitFunc);
        });
    },
  }

}
  },
};
</script>

<style lang="scss" scoped>
@@ -383,7 +493,7 @@
    line-height: 60px;

    &.option-active {
      background-color: #F5F5F5;
      background-color: #f5f5f5;
    }
  }
}
@@ -404,7 +514,6 @@
.vue-slider-dot {
  width: 28px !important;
  height: 28px !important;

}

.vue-slider-mark-label {
@@ -413,11 +522,11 @@
}

.vue-slider-mark-label-active {
  color: #868D9A !important;
  color: #868d9a !important;
}

.vue-slider-dot-handle {
  border: 3px solid #2C78F8;
  border: 3px solid #2c78f8;
}

.vue-slider-mark {
@@ -457,16 +566,16 @@
  overflow: hidden;
}

.tab>* {
.tab > * {
  height: 100%;
}

.tab>img {
.tab > img {
  margin-left: -2px;
  margin-right: -2px;
}

.tab>a {
.tab > a {
  flex-grow: 1;
  display: flex;
  justify-content: center;
@@ -514,16 +623,16 @@
  }
}

.option-box>div {
.option-box > div {
  padding: 30px 0;
}

.option-box>div:hover {
.option-box > div:hover {
  // background-color: #F5F5F5;
}

.num-text-color {
  color: #4C4A54;
  color: #4c4a54;
}

select {
@@ -534,7 +643,8 @@
  -webkit-appearance: none;
  /* Safari and Chrome */
  padding: 0 20px 0 20px;
  background: url("../../assets/image/public/grey-select.png") no-repeat scroll right center transparent;
  background: url("../../assets/image/public/grey-select.png") no-repeat scroll
    right center transparent;
  /* 自己的图*/
  background-size: 20px 11px;
}
@@ -548,7 +658,6 @@
}

.targetPrice {

  opacity: 1;
}

@@ -558,19 +667,18 @@
  }
}


.custom-step {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: fff;
  border: solid 1px #2256F7;
  border: solid 1px #2256f7;
  background: #fff;
}

.custom-step.active {
  box-shadow: 0 0 0 2px #2256F7;
  background-color: #2256F7;
  box-shadow: 0 0 0 2px #2256f7;
  background-color: #2256f7;
}

.tab-item {
@@ -623,7 +731,7 @@
}

.add-icon {
  color: #1194F7;
  color: #1194f7;
}

.active-bg {
@@ -633,7 +741,7 @@
}

.select-active {
  background: #2EBD85;
  background: #2ebd85;

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

 src/page/helpCenter/about.vue

@@ -41,7 +41,7 @@
            mso-pagination: widow-orphan;
          "
        >
          Web3bit
          Deepcoin
          {{
            $t(
              "是全球领先的数字货币资产交易平台，致力于为用户提供安全、专业、便利的数字货币交易服务"
@@ -75,14 +75,14 @@
          {{ $t("该公司成立于") }}
          {{ $t("2014") }}
          {{ $t("年，目前总部位于英国") }}。
          {{ $t("2022年，经过八年的发展") }}，Web3bit
          {{ $t("2022年，经过八年的发展") }}，Deepcoin
          {{ $t("平台在欧洲取得了巨大成功，在加密货币撮合交易领域占据了") }}
          {{
            $t(
              "43.17%的市场份额。也吸引了大量的资本。为了加速全球战略布局进程"
            )
          }}，Web3bit {{ $t("团队决定在北美设立第二总部") }}。
          {{ $t("2022年底，在美国正式成立！同年") }}，Web3bit
          }}，Deepcoin {{ $t("团队决定在北美设立第二总部") }}。
          {{ $t("2022年底，在美国正式成立！同年") }}，Deepcoin
          {{ $t("向美国金融部门申请并获得了") }}
          {{
            $t(

			@@ -1,9 +1,9 @@
			{
			"name": "Web3bit",
			"short_name": "Web3bit",
			"name": "Deepcoin",
			"short_name": "Deepcoin",
			"icon": [
			{
			"src": "../img/App.png",
			"src": "../img/logo.jpeg",
			"sizes": "192x192",
			"type": "image/png"
			}

			@@ -1,22 +1,27 @@
			<!DOCTYPE html>
			<html lang="">
			<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover">
			<link rel="icon" href="<%= BASE_URL %>favicon.ico">
			<title><%= htmlWebpackPlugin.options.title %></title>
			<link rel="manifest" href="./desk/manifest.json">
			<meta name="theme-color" content="white">
			<meta name="apple-mobile-web-app-capable" content="yes">
			<meta name="apple-mobile-web-app-status-bar-style" content="white">
			<link rel="apple-touch-icon" href="./img/App.png">
			</head>
			<body>
			<noscript>
			<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			</noscript>
			<div id="app"></div>
			<!-- built files will be auto injected -->
			</body>
			</html>

			<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover">
			<link rel="icon" href="<%= BASE_URL %>favicon.ico">
			<title><%= htmlWebpackPlugin.options.title %></title>
			<link rel="manifest" href="./desk/manifest.json">
			<meta name="theme-color" content="white">
			<meta name="apple-mobile-web-app-capable" content="yes">
			<meta name="apple-mobile-web-app-status-bar-style" content="white">
			<link rel="apple-touch-icon" href="./img/logo.jpeg">
			</head>

			<body>
			<noscript>
			<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
			Please enable it to continue.</strong>
			</noscript>
			<div id="app"></div>
			<!-- built files will be auto injected -->
			</body>

			</html>

			@@ -9,6 +9,7 @@
			:marks="marks"
			v-model="sliderAmount"
			:hide-label="true"
			:interval="25"
			width="92%"
			tooltip="hover"
			:tooltip-formatter="'{value}%'"
			@@ -90,7 +91,6 @@
			};
			</script>
			<style scoped>

			/* 滑块 */
			.mainBox >>> .vue-slider-dot-tooltip-inner {
			background: #404040 !important;
			@@ -115,8 +115,8 @@
			border: 1px solid #dddddd;
			}
			.custom-step.active {
			box-shadow: 0 0 0 3px #1D91FF;
			background-color: #1D91FF;
			box-shadow: 0 0 0 3px #1d91ff;
			background-color: #1d91ff;
			}

			.poecs {

			@@ -193,23 +193,56 @@
			<div class="mt-40 mb-30 w-full flex justify-between items-center">
			<span class="font-22 font-400 text-grey">{{
			$t("可开张数")
			}}</span>{{form.lever_rate}}
			<span class="font-22 font-400 textColor" v-if="form.lever_rate==25">
			{{Math.floor((initFutrue.amount-(initFutrue.amount * 0.0375))/initData.amount)}}
			}}</span
			>{{ form.lever_rate }}
			<span
			class="font-22 font-400 textColor"
			v-if="form.lever_rate == 25"
			>
			{{
			Math.floor(
			(initFutrue.amount - initFutrue.amount * 0.0375) /
			initData.amount
			)
			}}
			{{ $t("张") }}
			</span>
			<span class="font-22 font-400 textColor" v-if="form.lever_rate==50">
			{{Math.floor((initFutrue.amount-(initFutrue.amount * 0.075))/initData.amount)}}
			{{ $t("张") }}
			</span>
			<span class="font-22 font-400 textColor" v-if="form.lever_rate==100">
			{{Math.floor((initFutrue.amount-(initFutrue.amount * 0.15))/initData.amount)}}
			{{ $t("张") }}
			</span>
			<span class="font-22 font-400 textColor" v-if="form.lever_rate==200">
			{{Math.floor((initFutrue.amount-(initFutrue.amount * 0.30))/initData.amount)}}
			{{ $t("张") }}
			</span>
			<span
			class="font-22 font-400 textColor"
			v-if="form.lever_rate == 50"
			>
			{{
			Math.floor(
			(initFutrue.amount - initFutrue.amount * 0.075) /
			initData.amount
			)
			}}
			{{ $t("张") }}
			</span>
			<span
			class="font-22 font-400 textColor"
			v-if="form.lever_rate == 100"
			>
			{{
			Math.floor(
			(initFutrue.amount - initFutrue.amount * 0.15) /
			initData.amount
			)
			}}
			{{ $t("张") }}
			</span>
			<span
			class="font-22 font-400 textColor"
			v-if="form.lever_rate == 200"
			>
			{{
			Math.floor(
			(initFutrue.amount - initFutrue.amount * 0.3) /
			initData.amount
			)
			}}
			{{ $t("张") }}
			</span>
			</div>
			<!-- <vue-slider v-bind="options" v-model="form.amount"></vue-slider> -->
			<!-- <vue-slider class="mainBox" v-bind="options" :marks="marks" v-model="form.volume" :hide-label="true" width="90%"
			@@ -237,38 +270,46 @@
			<div class="flex justify-between mt-30">
			<div class="text-grey">{{ $t("合约金额") }}</div>
			<div class="textColor">
			{{ ((initData.amount * (form.amount / 1) * form.lever_rate)).toFixed(4)}} USDT
			{{
			(
			initData.amount *
			(form.amount / 1) *
			form.lever_rate
			).toFixed(4)
			}}
			USDT
			</div>
			</div>
			<div class="flex justify-between mt-30">
			<div class="text-grey">{{ $t("保证金") }}</div>
			<div class="textColor">
			{{ ((initData.amount * (form.amount / 1)) \| nan).toFixed(4) }} USDT
			{{ ((initData.amount * (form.amount / 1)) \| nan).toFixed(4) }}
			USDT
			</div>
			</div>
			<div class="flex justify-between mt-30">
			<div class="text-grey">{{ $t("建仓手续费") }}</div>
			<!-- {{
			<!-- {{
			userInfo.perpetual_contracts_status === "1"
			? initData.fee * (form.amount / 1)
			: (initData.fee * (form.amount / 1) * form.lever_rate) \| nan
			}} -->
			<div class="textColor" v-if="form.lever_rate==25">
			{{ ((initData.amount * (form.amount / 1)) * 0.0375).toFixed(4)}}
			<div class="textColor" v-if="form.lever_rate == 25">
			{{ (initData.amount * (form.amount / 1) * 0.0375).toFixed(4) }}
			USDT
			</div>
			<div class="textColor" v-if="form.lever_rate==50">
			{{ ((initData.amount * (form.amount / 1))* 0.075).toFixed(4)}}
			USDT
			</div>
			<div class="textColor" v-if="form.lever_rate==100">
			{{ ((initData.amount * (form.amount / 1))* 0.15).toFixed(4)}}
			USDT
			</div>
			<div class="textColor" v-if="form.lever_rate==200">
			{{ ((initData.amount * (form.amount / 1)) * 0.30).toFixed(4)}}
			USDT
			</div>
			<div class="textColor" v-if="form.lever_rate == 50">
			{{ (initData.amount * (form.amount / 1) * 0.075).toFixed(4) }}
			USDT
			</div>
			<div class="textColor" v-if="form.lever_rate == 100">
			{{ (initData.amount * (form.amount / 1) * 0.15).toFixed(4) }}
			USDT
			</div>
			<div class="textColor" v-if="form.lever_rate == 200">
			{{ (initData.amount * (form.amount / 1) * 0.3).toFixed(4) }}
			USDT
			</div>
			</div>
			</template>
			<div
			@@ -748,10 +789,10 @@
			title: this.$t("市价"),
			type: "1",
			},
			{
			title: this.$t("限价"),
			type: "2",
			},
			// {
			// title: this.$t("限价"),
			// type: "2",
			// },
			],
			form: {
			symbol: "", // 币种
			@@ -806,10 +847,10 @@
			title: this.$t("市价"),
			type: "1",
			},
			{
			title: this.$t("限价"),
			type: "2",
			},
			// {
			// title: this.$t("限价"),
			// type: "2",
			// },
			];
			this.title = this.selectData[0].title;
			this.type = this.selectData[0].type;
			@@ -819,29 +860,41 @@
			//获取张数
			getAmount(val) {
			this.form.amount = val;
			// if(this.form.lever_rate==25){
			// this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount * 0.0375))/this.initData.amount)
			// }else if(this.form.lever_rate==50){
			// this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount * 0.0375))/this.initData.amount)
			// }else if(this.form.lever_rate==100){
			// this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount * 0.15))/this.initData.amount)
			// }else{
			// this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount * 0.3))/this.initData.amount)
			// }
			// if(this.form.lever_rate==25){
			// this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount * 0.0375))/this.initData.amount)
			// }else if(this.form.lever_rate==50){
			// this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount * 0.0375))/this.initData.amount)
			// }else if(this.form.lever_rate==100){
			// this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount * 0.15))/this.initData.amount)
			// }else{
			// this.form.amount = Math.floor((this.initFutrue.amount-(this.initFutrue.amount * 0.3))/this.initData.amount)
			// }
			},
			// 获取张数,数据转换
			getVolumnByLever() {
			let vol;
			// vol = this.initOpen.volume / 1;
			if(this.form.lever_rate==25){
			vol = Math.floor((this.initFutrue.amount-(this.initFutrue.amount * 0.0375))/this.initData.amount)
			}else if(this.form.lever_rate==50){
			vol = Math.floor((this.initFutrue.amount-(this.initFutrue.amount * 0.0375))/this.initData.amount)
			}else if(this.form.lever_rate==100){
			vol = Math.floor((this.initFutrue.amount-(this.initFutrue.amount * 0.15))/this.initData.amount)
			}else{
			vol = Math.floor((this.initFutrue.amount-(this.initFutrue.amount * 0.3))/this.initData.amount)
			}
			if (this.form.lever_rate == 25) {
			vol = Math.floor(
			(this.initFutrue.amount - this.initFutrue.amount * 0.0375) /
			this.initData.amount
			);
			} else if (this.form.lever_rate == 50) {
			vol = Math.floor(
			(this.initFutrue.amount - this.initFutrue.amount * 0.0375) /
			this.initData.amount
			);
			} else if (this.form.lever_rate == 100) {
			vol = Math.floor(
			(this.initFutrue.amount - this.initFutrue.amount * 0.15) /
			this.initData.amount
			);
			} else {
			vol = Math.floor(
			(this.initFutrue.amount - this.initFutrue.amount * 0.3) /
			this.initData.amount
			);
			}
			return Math.floor(vol);
			},

			@@ -1,47 +1,101 @@
			<template>
			<div class="flex flex-col flex-1">
			<div class="flex items-center h-66 tabBackground text-grey">
			<p class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
			:class="currentType == 'open' ? 'open' : ''" @click="changeTab('open')">{{ $t('买入') }}</p>
			<p class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
			:class="currentType == 'close' ? 'close' : ''" @click="changeTab('close')">{{ $t('卖出') }}</p>
			<p
			class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
			:class="currentType == 'open' ? 'open' : ''"
			@click="changeTab('open')"
			>
			{{ $t("买入") }}
			</p>
			<p
			class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
			:class="currentType == 'close' ? 'close' : ''"
			@click="changeTab('close')"
			>
			{{ $t("卖出") }}
			</p>
			</div>

			<div class="mt-22 mb-22 inputBackground" style="position:relative;">
			<div class=" flex justify-between items-center w-full h-70" @click="selectBtn">
			<div class="mt-22 mb-22 inputBackground" style="position: relative">
			<div
			class="flex justify-between items-center w-full h-70"
			@click="selectBtn"
			>
			<!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
			<div class="pl-16 textColor" style="width:80%;">{{ title }}</div>
			<img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
			<div class="pl-16 textColor" style="width: 80%">{{ title }}</div>
			<img
			src="@/assets/image/public/grey-select.png"
			alt="select-icon"
			class="w-22 h-11 pr-20"
			/>
			</div>
			<div class="option-box" v-if="isShow">
			<div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">{{ item.title }}
			<div
			class="font-30"
			v-for="item in selectData"
			:key="item.type"
			@click="selectItem(item)"
			>
			{{ item.title }}
			</div>
			</div>
			</div>
			<div class="h-70 lh-70 inputBackground mb-25 flex justify-center px-16 textColor2">
			<input placeholder="" class="targetPrice w-full h-70 border-none" v-model="form.price"
			:disabled="type / 1 === 1" />
			<div
			class="h-70 lh-70 inputBackground mb-25 flex justify-center px-16 textColor2"
			>
			<input
			placeholder=""
			class="targetPrice w-full h-70 border-none"
			v-model="form.price"
			:disabled="type / 1 === 1"
			/>
			<span>USDT</span>
			</div>
			<div class="h-70 lh-70 inputBackground mb-25 flex justify-center px-16 textColor2">
			<div
			class="h-70 lh-70 inputBackground mb-25 flex justify-center px-16 textColor2"
			>
			<span>{{ title }}</span>
			</div>
			<div class="flex total-list">
			<div class="total-div" :class="[!isTotal ? 'active-bg' : '']" @click="checkIsTotal(false)">
			{{ $t('数量') }}
			<div
			class="total-div"
			:class="[!isTotal ? 'active-bg' : '']"
			@click="checkIsTotal(false)"
			>
			{{ $t("数量") }}
			</div>
			<div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">
			{{ $t('总额') }}
			<div
			class="total-div"
			:class="[isTotal ? 'active-bg' : '']"
			@click="checkIsTotal(true)"
			>
			{{ $t("总额") }}
			</div>
			</div>
			<div v-if="!isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
			<input :placeholder="$t('数量')" class=" w-full h-70 border-none textColor" v-model="form.volume" @input="onInput" />
			<div
			v-if="!isTotal"
			class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16"
			>
			<input
			:placeholder="$t('数量')"
			class="w-full h-70 border-none textColor"
			v-model="form.volume"
			@input="onInput"
			/>
			<span class="textColor">{{ symbolname }}</span>
			</div>
			<div v-if="isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
			<input :placeholder="$t('总额')" class=" w-full h-70 border-none textColor" v-model="form.total"
			@input="onInputTotal" />
			<span class="textColor">{{ 'USDT' }}</span>
			<div
			v-if="isTotal"
			class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16"
			>
			<input
			:placeholder="$t('总额')"
			class="w-full h-70 border-none textColor"
			v-model="form.total"
			@input="onInputTotal"
			/>
			<span class="textColor">{{ "USDT" }}</span>
			</div>
			<!-- <vue-slider v-bind="options" v-model="form.volume" :interval="interval"></vue-slider> -->
			<!-- <vue-slider class="mainBox" v-bind="options" :interval="interval" v-model="form.volume" :hide-label="true" :railStyle="{ background: '#404040', height: '10px' }"
			@@ -50,42 +104,75 @@
			<div :class="['custom-step', { active }]"></div>
			</template>
			</vue-slider> -->
			<div style="color: #868D9A" class="font-24 w-full flex justify-between items-center">
			<div
			style="color: #868d9a"
			class="font-24 w-full flex justify-between items-center"
			>
			<!-- <span class="flex-1 text-left">0%</span> -->
			<span class="flex-1 tab-item" :class="[percentageVal == 25 ? 'select-active' : '']"
			@click="exchangeVal(25)">25%</span>
			<span class="flex-1 tab-item" :class="[percentageVal == 50 ? 'select-active' : '']"
			@click="exchangeVal(50)">50%</span>
			<span class="flex-1 tab-item" :class="[percentageVal == 75 ? 'select-active' : '']"
			@click="exchangeVal(75)">75%</span>
			<span class="flex-1 tab-item" :class="[percentageVal == 100 ? 'select-active' : '']"
			@click="exchangeVal(100)">100%</span>
			<span
			class="flex-1 tab-item"
			:class="[percentageVal == 25 ? 'select-active' : '']"
			@click="exchangeVal(25)"
			>25%</span
			>
			<span
			class="flex-1 tab-item"
			:class="[percentageVal == 50 ? 'select-active' : '']"
			@click="exchangeVal(50)"
			>50%</span
			>
			<span
			class="flex-1 tab-item"
			:class="[percentageVal == 75 ? 'select-active' : '']"
			@click="exchangeVal(75)"
			>75%</span
			>
			<span
			class="flex-1 tab-item"
			:class="[percentageVal == 100 ? 'select-active' : '']"
			@click="exchangeVal(100)"
			>100%</span
			>
			</div>
			<div class="flex justify-between items-center mt-40">
			<div class="flex flex-col font-24">
			<p class="text-grey" v-if="this.currentType === 'open'">{{ $t('可用') }}<span class="textColor ml-8">
			{{ initOpen.volume \| nan }} USDT</span>
			<p class="text-grey" v-if="this.currentType === 'open'">
			{{ $t("可用")
			}}<span class="textColor ml-8">
			{{ initOpen.volume \| nan }} USDT</span
			>
			</p>
			<p class="text-grey" v-else>{{ $t('可卖') }}<span class="textColor ml-8">{{ initClose.volume \| nan }} {{
			symbolname }}</span></p>
			<p class="text-grey" v-else>
			{{ $t("可卖")
			}}<span class="textColor ml-8"
			>{{ initClose.volume \| nan }} {{ symbolname }}</span
			>
			</p>
			</div>
			<van-icon name="add-o" @click="$router.push('/exchange/exchangePage')" class="font-30 add-icon" />
			<van-icon
			name="add-o"
			@click="$router.push('/exchange/exchangePage')"
			class="font-30 add-icon"
			/>
			<!-- <img @click="$router.push('/exchange/exchangePage')" src="@/assets/image/public/switch.png" class="w-24 h-24" /> -->
			</div>
			<div style="" class="w-full h-90 lh-90 flex justify-center text-white text-center rounded buyandSell mt-70"
			:class="currentType === 'open' ? 'bg-green' : 'bg-red'" @click="order()">
			{{ currentType == 'open' ? $t('买入') : $t('卖出') }}
			<div
			style=""
			class="w-full h-90 lh-90 flex justify-center text-white text-center rounded buyandSell mt-70"
			:class="currentType === 'open' ? 'bg-green' : 'bg-red'"
			@click="order()"
			>
			{{ currentType == "open" ? $t("买入") : $t("卖出") }}
			</div>

			</div>
			</template>

			<script>
			import config from "@/config";
			import { Popup, Tabs, Tab } from 'vant';
			import VueSlider from 'vue-slider-component'
			import 'vue-slider-component/theme/default.css'
			import { _getBalance } from '@/API/trade.api'
			import { Popup, Tabs, Tab } from "vant";
			import VueSlider from "vue-slider-component";
			import "vue-slider-component/theme/default.css";
			import { _getBalance } from "@/API/trade.api";
			import TradeApi from "@/API/trading.js";
			import { mapGetters } from "vuex";
			// import PopupConfirmOrder from '@/components/popup-confirm-order'
			@@ -95,170 +182,187 @@
			VueSlider,
			[Popup.name]: Popup,
			[Tabs.name]: Tabs,
			[Tab.name]: Tab
			[Tab.name]: Tab,
			},
			props: {
			symbol: {
			type: String,
			default: ''
			default: "",
			},
			symbolname: {
			type: String,
			default: '--'
			},
			symbolname: {
			type: String,
			default: "--",
			},
			price: {
			type: [Number, String],
			default: '0.00'
			default: "0.00",
			},
			initOpen: {
			type: Object,
			default() {
			return {}
			}
			return {};
			},
			},
			initClose: {
			type: Object,
			default() {
			return {}
			}
			return {};
			},
			},
			},
			computed: {
			...mapGetters('user', ['userInfo'])
			...mapGetters("user", ["userInfo"]),
			},
			activated() {
			this.selectData = [
			{ title: this.$t('市价委托'), type: '1' },
			{ title: this.$t('限价委托'), type: '2' },
			]
			this.title = this.selectData[0].title
			this.type = this.selectData[0].type
			{ title: this.$t("市价委托"), type: "1" },
			{ title: this.$t("限价委托"), type: "2" },
			];
			this.title = this.selectData[0].title;
			this.type = this.selectData[0].type;
			},
			watch: {
			initOpen: { // 处理滚动条初始值
			initOpen: {
			// 处理滚动条初始值
			deep: true,
			handler(val) {
			console.log(val)
			console.log(val);
			if (val.volume / 1 > 0) {
			this.handleInitSliderOption()
			this.handleInitSliderOption();
			}
			}
			},
			},
			initClose: { // 处理滚动条初始值
			initClose: {
			// 处理滚动条初始值
			deep: true,
			handler(newVal, oldVal) {
			if (newVal.volume / 1 > 0) {
			this.handleInitSliderOption(true)
			this.handleInitSliderOption(true);
			}
			}
			},
			},
			price(val) {
			if (this.type === '1') { // !this.focus &&
			this.form.price = val
			if (this.type === "1") {
			// !this.focus &&
			this.form.price = val;
			}
			},
			},
			filters: {
			nan(val) {
			return isNaN(val) ? '--' : val
			}
			return isNaN(val) ? "--" : val;
			},
			},
			data() {
			return {
			options: config.sliderOptions,
			value: 0,
			isShow: false,
			title: this.$t('市价委托'),
			title: this.$t("市价委托"),
			selectData: [],
			form: {
			volume: '',
			session_token: '',
			symbol: '', // 币种
			price: '',
			total: '',
			order_price_type: 'opponent', // 市价or限价
			volume: "",
			session_token: "",
			symbol: "", // 币种
			price: "",
			total: "",
			order_price_type: "opponent", // 市价or限价
			},
			type: "1",//选中市价或限价类型
			type: "1", //选中市价或限价类型
			currentType: "open", //开仓类型
			interval: 0.001,
			marks: (val) => val % 25 === 0,
			isTotal: false,
			percentageVal: 0
			}
			percentageVal: 0,
			};
			},
			mounted() {

			},
			mounted() {},
			methods: {
			checkIsTotal(val) {
			this.isTotal = val
			this.percentageVal = 0
			this.form.total = ''
			this.form.volume = ''
			this.isTotal = val;
			this.percentageVal = 0;
			this.form.total = "";
			this.form.volume = "";
			},
			exchangeVal(val) {
			this.percentageVal = val
			this.percentageVal = val;
			if (!this.isTotal) {
			if (this.currentType == 'open') {
			let sum = (parseFloat(this.initOpen.volume) * (val / 100) / parseFloat(this.form.price))
			this.form.volume = Math.floor(sum * 100000) / 100000
			if (this.currentType == "open") {
			let sum =
			(parseFloat(this.initOpen.volume) * (val / 100)) /
			parseFloat(this.form.price);
			this.form.volume = Math.floor(sum * 100000) / 100000;
			} else {
			let sum = parseFloat(this.initClose.volume)
			this.form.volume = (Math.floor(sum * (val / 100) * 100000)) / 100000
			let sum = parseFloat(this.initClose.volume);
			this.form.volume = Math.floor(sum * (val / 100) * 100000) / 100000;
			}
			} else {
			if (this.currentType == 'open') {
			this.form.total = this.initOpen.volume * (val / 100)
			if (this.currentType == "open") {
			this.form.total = this.initOpen.volume * (val / 100);
			} else {
			this.form.total = Math.floor((this.initClose.volume * (val / 100) * parseFloat(this.form.price)) * 1000) / 1000
			this.form.total =
			Math.floor(
			this.initClose.volume *
			(val / 100) *
			parseFloat(this.form.price) *
			1000
			) / 1000;
			}
			}
			},
			handleInitSliderOption(volume) {
			if (!volume) { // 金额是否需要变动
			this.form.volume = ''
			if (!volume) {
			// 金额是否需要变动
			this.form.volume = "";
			}
			console.log(this.initOpen.volume)
			let vol
			if (this.currentType === 'open') {
			vol = this.initOpen.volume / 1
			console.log(this.initOpen.volume);
			let vol;
			if (this.currentType === "open") {
			vol = this.initOpen.volume / 1;
			} else {
			vol = this.initClose.volume / 1
			vol = this.initClose.volume / 1;
			}
			this.options.max = Number(vol.toFixed(3))
			this.options.max = Number(vol.toFixed(3));
			if (this.options.max > 0) {
			this.options.disabled = false
			this.options.disabled = false;
			} else {
			this.options.disabled = true
			this.options.disabled = true;
			}
			},
			onInput() { // 数量变化
			if (this.currentType === 'open') {
			let maxSum = (parseFloat(this.initOpen.volume) / parseFloat(this.form.price))
			console.log(this.initOpen.volume)
			console.log(this.form.price)
			console.log(maxSum)
			onInput() {
			// 数量变化
			if (this.currentType === "open") {
			let maxSum =
			parseFloat(this.initOpen.volume) / parseFloat(this.form.price);
			console.log(this.initOpen.volume);
			console.log(this.form.price);
			console.log(maxSum);
			if (this.form.volume * 1 > maxSum / 1) {
			this.form.volume = maxSum
			this.form.volume = maxSum;
			}
			} else {
			if (this.form.volume * 1 / 1 > this.options.max / 1) {
			this.form.volume = this.options.max / 1
			if ((this.form.volume * 1) / 1 > this.options.max / 1) {
			this.form.volume = this.options.max / 1;
			}
			}
			},
			onInputTotal() { //总额变化
			onInputTotal() {
			//总额变化
			//最大额度
			if (this.form.total > 0) {
			if (this.currentType === 'open') {
			console.log(this.initOpen.volume)
			if (this.currentType === "open") {
			console.log(this.initOpen.volume);
			if (this.form.total * 1 > this.initOpen.volume * 1) {
			this.form.total = this.initOpen.volume
			this.form.total = this.initOpen.volume;
			}
			} else {
			let sum = (parseFloat(this.form.total) / parseFloat(this.form.price)).toFixed(5)
			let sum = (
			parseFloat(this.form.total) / parseFloat(this.form.price)
			).toFixed(5);
			if (parseFloat(sum) > parseFloat(this.initClose.volume)) {
			this.form.total = (parseFloat(this.initClose.volume) * parseFloat(this.form.price)).toFixed(5)
			this.form.total = (
			parseFloat(this.initClose.volume) * parseFloat(this.form.price)
			).toFixed(5);
			}
			}
			}
			@@ -270,72 +374,75 @@
			//选择价格类型
			selectItem(item) {
			if (item.type == 1) {
			this.form.price = this.price
			this.form.price = this.price;
			}
			this.form.order_price_type = item.type === '1' ? 'opponent' : 'limit'
			this.form.order_price_type = item.type === "1" ? "opponent" : "limit";
			this.title = item.title;
			this.type = item.type;
			this.isShow = false;
			},
			//选择开仓类型
			changeTab(type) { // 开仓和
			this.percentageVal = 0
			this.isTotal = false
			this.form.total = ''
			console.log('changeTab', type)
			changeTab(type) {
			// 开仓和
			this.percentageVal = 0;
			this.isTotal = false;
			this.form.total = "";
			console.log("changeTab", type);
			// TODO: 这里应该是换函数
			// this.form.direction = type === 'open' ? 'buy' : 'sell'
			if (this.currentType === type) {
			return
			return;
			}
			this.currentType = type;
			if (this.currentType === 'close') {
			this.$emit('ordered', 'close') // 更新平仓初始化参数
			if (this.currentType === "close") {
			this.$emit("ordered", "close"); // 更新平仓初始化参数
			} else {
			this.$emit('ordered', 'open') // 更新平仓初始化参数
			this.$emit("ordered", "open"); // 更新平仓初始化参数
			}
			this.handleInitSliderOption()
			this.handleInitSliderOption();
			},
			order() {
			if (!this.userInfo.token) {
			this.$router.push('/login')
			return
			this.$router.push("/login");
			return;
			}
			let volume = ''
			let volume = "";
			if (this.isTotal) {
			if (!this.form.total) {
			this.$toast.fail(this.$t('请输入总额'))
			return
			this.$toast.fail(this.$t("请输入总额"));
			return;
			}
			if (this.currentType === 'open') {
			this.form.volume = parseFloat(this.form.total).toFixed(5)
			if (this.currentType === "open") {
			this.form.volume = parseFloat(this.form.total).toFixed(5);
			} else {
			this.form.volume = (parseFloat(this.form.total) / parseFloat(this.form.price))
			this.form.volume = this.form.volume.toFixed(5)
			this.form.volume =
			parseFloat(this.form.total) / parseFloat(this.form.price);
			this.form.volume = this.form.volume.toFixed(5);
			}
			volume = this.form.volume
			volume = this.form.volume;
			} else {
			if (!this.form.volume) {
			this.$toast.fail(this.$t('请输入数量'))
			return
			this.$toast.fail(this.$t("请输入数量"));
			return;
			}
			if (this.currentType === 'open') {
			volume = (parseFloat(this.form.volume) * parseFloat(this.form.price))
			if (this.currentType === "open") {
			volume = parseFloat(this.form.volume) * parseFloat(this.form.price);
			} else {
			volume = this.form.volume
			volume = this.form.volume;
			}
			}
			this.form.symbol = this.$route.params.symbol
			let _order = null // api
			let emitFunc = null // 触发函数
			this.form.symbol = this.$route.params.symbol;
			let _order = null; // api
			let emitFunc = null; // 触发函数

			if (this.currentType === 'open') {
			this.form.session_token = this.initOpen.session_token
			if (this.currentType === "open") {
			this.form.session_token = this.initOpen.session_token;
			} else {
			this.form.session_token = this.initClose.session_token
			this.form.session_token = this.initClose.session_token;
			}
			_order = this.currentType === 'open' ? TradeApi.tradeBuy : TradeApi.tradeSell
			emitFunc = this.currentType
			_order =
			this.currentType === "open" ? TradeApi.tradeBuy : TradeApi.tradeSell;
			emitFunc = this.currentType;
			_order({
			volume: volume,
			session_token: this.form.session_token,
			@@ -343,21 +450,24 @@
			price: this.form.price,
			total: this.form.total,
			order_price_type: this.form.order_price_type, // 市价or限价
			}).then((res) => {
			this.$toast(this.$t('操作成功'))
			this.form.volume = ''
			this.form.total = ''
			_getBalance().then(data => { // 刷新余额
			this.$store.commit('user/SET_USERINFO', { balance: data.money })
			})
			this.$emit('ordered', emitFunc)
			}).catch(() => { // 也需要重新初始化
			this.$emit('ordered', emitFunc)
			})
			.then((res) => {
			this.$toast(this.$t("操作成功"));
			this.form.volume = "";
			this.form.total = "";
			_getBalance().then((data) => {
			// 刷新余额
			this.$store.commit("user/SET_USERINFO", { balance: data.money });
			});
			this.$emit("ordered", emitFunc);
			})
			.catch(() => {
			// 也需要重新初始化
			this.$emit("ordered", emitFunc);
			});
			},
			}

			}
			},
			};
			</script>

			<style lang="scss" scoped>
			@@ -383,7 +493,7 @@
			line-height: 60px;

			&.option-active {
			background-color: #F5F5F5;
			background-color: #f5f5f5;
			}
			}
			}
			@@ -404,7 +514,6 @@
			.vue-slider-dot {
			width: 28px !important;
			height: 28px !important;

			}

			.vue-slider-mark-label {
			@@ -413,11 +522,11 @@
			}

			.vue-slider-mark-label-active {
			color: #868D9A !important;
			color: #868d9a !important;
			}

			.vue-slider-dot-handle {
			border: 3px solid #2C78F8;
			border: 3px solid #2c78f8;
			}

			.vue-slider-mark {
			@@ -457,16 +566,16 @@
			overflow: hidden;
			}

			.tab>* {
			.tab > * {
			height: 100%;
			}

			.tab>img {
			.tab > img {
			margin-left: -2px;
			margin-right: -2px;
			}

			.tab>a {
			.tab > a {
			flex-grow: 1;
			display: flex;
			justify-content: center;
			@@ -514,16 +623,16 @@
			}
			}

			.option-box>div {
			.option-box > div {
			padding: 30px 0;
			}

			.option-box>div:hover {
			.option-box > div:hover {
			// background-color: #F5F5F5;
			}

			.num-text-color {
			color: #4C4A54;
			color: #4c4a54;
			}

			select {
			@@ -534,7 +643,8 @@
			-webkit-appearance: none;
			/* Safari and Chrome */
			padding: 0 20px 0 20px;
			background: url("../../assets/image/public/grey-select.png") no-repeat scroll right center transparent;
			background: url("../../assets/image/public/grey-select.png") no-repeat scroll
			right center transparent;
			/* 自己的图*/
			background-size: 20px 11px;
			}
			@@ -548,7 +658,6 @@
			}

			.targetPrice {

			opacity: 1;
			}

			@@ -558,19 +667,18 @@
			}
			}


			.custom-step {
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: fff;
			border: solid 1px #2256F7;
			border: solid 1px #2256f7;
			background: #fff;
			}

			.custom-step.active {
			box-shadow: 0 0 0 2px #2256F7;
			background-color: #2256F7;
			box-shadow: 0 0 0 2px #2256f7;
			background-color: #2256f7;
			}

			.tab-item {
			@@ -623,7 +731,7 @@
			}

			.add-icon {
			color: #1194F7;
			color: #1194f7;
			}

			.active-bg {
			@@ -633,7 +741,7 @@
			}

			.select-active {
			background: #2EBD85;
			background: #2ebd85;

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

			@@ -41,7 +41,7 @@
			mso-pagination: widow-orphan;
			"
			>
			Web3bit
			Deepcoin
			{{
			$t(
			"是全球领先的数字货币资产交易平台，致力于为用户提供安全、专业、便利的数字货币交易服务"
			@@ -75,14 +75,14 @@
			{{ $t("该公司成立于") }}
			{{ $t("2014") }}
			{{ $t("年，目前总部位于英国") }}。
			{{ $t("2022年，经过八年的发展") }}，Web3bit
			{{ $t("2022年，经过八年的发展") }}，Deepcoin
			{{ $t("平台在欧洲取得了巨大成功，在加密货币撮合交易领域占据了") }}
			{{
			$t(
			"43.17%的市场份额。也吸引了大量的资本。为了加速全球战略布局进程"
			)
			}}，Web3bit {{ $t("团队决定在北美设立第二总部") }}。
			{{ $t("2022年底，在美国正式成立！同年") }}，Web3bit
			}}，Deepcoin {{ $t("团队决定在北美设立第二总部") }}。
			{{ $t("2022年底，在美国正式成立！同年") }}，Deepcoin
			{{ $t("向美国金融部门申请并获得了") }}
			{{
			$t(