zzzz
2024-03-20 d25a45190cee44b36296693d5022a0ce9ae9b698
1
{"ast":null,"code":"import \"vant/es/tab/style\";\nimport _Tab from \"vant/es/tab\";\nimport \"vant/es/tabs/style\";\nimport _Tabs from \"vant/es/tabs\";\nimport \"vant/es/popup/style\";\nimport _Popup from \"vant/es/popup\";\nimport \"core-js/modules/es.array.push.js\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\nimport config from \"@/config\";\nimport VueSlider from 'vue-slider-component';\nimport 'vue-slider-component/theme/default.css';\nimport { _getBalance } from '@/API/trade.api';\nimport TradeApi from \"@/API/trading.js\";\nimport { mapGetters } from \"vuex\";\n// import PopupConfirmOrder from '@/components/popup-confirm-order'\nexport default {\n  name: \"perpetualPosition\",\n  components: {\n    VueSlider,\n    [_Popup.name]: _Popup,\n    [_Tabs.name]: _Tabs,\n    [_Tab.name]: _Tab\n  },\n  props: {\n    symbol: {\n      type: String,\n      default: ''\n    },\n    price: {\n      type: [Number, String],\n      default: '0.00'\n    },\n    initOpen: {\n      type: Object,\n      default() {\n        return {};\n      }\n    },\n    initClose: {\n      type: Object,\n      default() {\n        return {};\n      }\n    }\n  },\n  computed: {\n    ...mapGetters('user', ['userInfo'])\n  },\n  activated() {\n    this.selectData = [{\n      title: this.$t('市价委托'),\n      type: '1'\n    }, {\n      title: this.$t('限价委托'),\n      type: '2'\n    }];\n    this.title = this.selectData[0].title;\n    this.type = this.selectData[0].type;\n  },\n  watch: {\n    initOpen: {\n      // 处理滚动条初始值\n      deep: true,\n      handler(val) {\n        console.log(val);\n        if (val.volume / 1 > 0) {\n          this.handleInitSliderOption();\n        }\n      }\n    },\n    initClose: {\n      // 处理滚动条初始值\n      deep: true,\n      handler(newVal, oldVal) {\n        if (newVal.volume / 1 > 0) {\n          this.handleInitSliderOption(true);\n        }\n      }\n    },\n    price(val) {\n      if (this.type === '1') {\n        // !this.focus &&\n        this.form.price = val;\n      }\n    }\n  },\n  filters: {\n    nan(val) {\n      return isNaN(val) ? '--' : val;\n    }\n  },\n  data() {\n    return {\n      options: config.sliderOptions,\n      value: 0,\n      isShow: false,\n      title: this.$t('市价委托'),\n      selectData: [],\n      form: {\n        volume: '',\n        session_token: '',\n        symbol: '',\n        // 币种\n        price: '',\n        total: '',\n        order_price_type: 'opponent' // 市价or限价\n      },\n      type: \"1\",\n      //选中市价或限价类型\n      currentType: \"open\",\n      //开仓类型\n      interval: 0.001,\n      marks: val => val % 25 === 0,\n      isTotal: false,\n      percentageVal: 0\n    };\n  },\n  mounted() {},\n  methods: {\n    checkIsTotal(val) {\n      this.isTotal = val;\n      this.percentageVal = 0;\n      this.form.total = '';\n      this.form.volume = '';\n    },\n    exchangeVal(val) {\n      this.percentageVal = val;\n      if (!this.isTotal) {\n        if (this.currentType == 'open') {\n          let sum = parseFloat(this.initOpen.volume) * (val / 100) / parseFloat(this.form.price);\n          this.form.volume = Math.floor(sum * 100000) / 100000;\n        } else {\n          let sum = parseFloat(this.initClose.volume);\n          this.form.volume = Math.floor(sum * (val / 100) * 100000) / 100000;\n        }\n      } else {\n        if (this.currentType == 'open') {\n          this.form.total = this.initOpen.volume * (val / 100);\n        } else {\n          this.form.total = Math.floor(this.initClose.volume * (val / 100) * parseFloat(this.form.price) * 1000) / 1000;\n        }\n      }\n    },\n    handleInitSliderOption(volume) {\n      if (!volume) {\n        // 金额是否需要变动\n        this.form.volume = '';\n      }\n      console.log(this.initOpen.volume);\n      let vol;\n      if (this.currentType === 'open') {\n        vol = this.initOpen.volume / 1;\n      } else {\n        vol = this.initClose.volume / 1;\n      }\n      this.options.max = Number(vol.toFixed(3));\n      if (this.options.max > 0) {\n        this.options.disabled = false;\n      } else {\n        this.options.disabled = true;\n      }\n    },\n    onInput() {\n      // 数量变化\n      if (this.currentType === 'open') {\n        let maxSum = parseFloat(this.initOpen.volume) / parseFloat(this.form.price);\n        console.log(this.initOpen.volume);\n        console.log(this.form.price);\n        console.log(maxSum);\n        if (this.form.volume * 1 > maxSum / 1) {\n          this.form.volume = maxSum;\n        }\n      } else {\n        if (this.form.volume * 1 / 1 > this.options.max / 1) {\n          this.form.volume = this.options.max / 1;\n        }\n      }\n    },\n    onInputTotal() {\n      //总额变化\n      //最大额度\n      if (this.form.total > 0) {\n        if (this.currentType === 'open') {\n          console.log(this.initOpen.volume);\n          if (this.form.total * 1 > this.initOpen.volume * 1) {\n            this.form.total = this.initOpen.volume;\n          }\n        } else {\n          let sum = (parseFloat(this.form.total) / parseFloat(this.form.price)).toFixed(5);\n          if (parseFloat(sum) > parseFloat(this.initClose.volume)) {\n            this.form.total = (parseFloat(this.initClose.volume) * parseFloat(this.form.price)).toFixed(5);\n          }\n        }\n      }\n    },\n    //价格类型下拉框切换\n    selectBtn() {\n      this.isShow = !this.isShow;\n    },\n    //选择价格类型\n    selectItem(item) {\n      if (item.type == 1) {\n        this.form.price = this.price;\n      }\n      this.form.order_price_type = item.type === '1' ? 'opponent' : 'limit';\n      this.title = item.title;\n      this.type = item.type;\n      this.isShow = false;\n    },\n    //选择开仓类型\n    changeTab(type) {\n      // 开仓和\n      this.percentageVal = 0;\n      this.isTotal = false;\n      this.form.total = '';\n      console.log('changeTab', type);\n      // TODO: 这里应该是换函数\n      // this.form.direction = type === 'open' ? 'buy' : 'sell'\n      if (this.currentType === type) {\n        return;\n      }\n      this.currentType = type;\n      if (this.currentType === 'close') {\n        this.$emit('ordered', 'close'); // 更新平仓初始化参数\n      } else {\n        this.$emit('ordered', 'open'); // 更新平仓初始化参数\n      }\n      this.handleInitSliderOption();\n    },\n    order() {\n      if (!this.userInfo.token) {\n        this.$router.push('/login');\n        return;\n      }\n      let volume = '';\n      if (this.isTotal) {\n        if (!this.form.total) {\n          this.$toast.fail(this.$t('请输入总额'));\n          return;\n        }\n        if (this.currentType === 'open') {\n          this.form.volume = parseFloat(this.form.total).toFixed(5);\n        } else {\n          this.form.volume = parseFloat(this.form.total) / parseFloat(this.form.price);\n          this.form.volume = this.form.volume.toFixed(5);\n        }\n        volume = this.form.volume;\n      } else {\n        if (!this.form.volume) {\n          this.$toast.fail(this.$t('请输入数量'));\n          return;\n        }\n        if (this.currentType === 'open') {\n          volume = parseFloat(this.form.volume) * parseFloat(this.form.price);\n        } else {\n          volume = this.form.volume;\n        }\n      }\n      this.form.symbol = this.$route.params.symbol;\n      let _order = null; // api\n      let emitFunc = null; // 触发函数\n\n      if (this.currentType === 'open') {\n        this.form.session_token = this.initOpen.session_token;\n      } else {\n        this.form.session_token = this.initClose.session_token;\n      }\n      _order = this.currentType === 'open' ? TradeApi.tradeBuy : TradeApi.tradeSell;\n      emitFunc = this.currentType;\n      _order({\n        volume: volume,\n        session_token: this.form.session_token,\n        symbol: this.form.symbol,\n        // 币种\n        price: this.form.price,\n        total: this.form.total,\n        order_price_type: this.form.order_price_type // 市价or限价\n      }).then(res => {\n        this.$toast(this.$t('操作成功'));\n        this.form.volume = '';\n        this.form.total = '';\n        _getBalance().then(data => {\n          // 刷新余额\n          this.$store.commit('user/SET_USERINFO', {\n            balance: data.money\n          });\n        });\n        this.$emit('ordered', emitFunc);\n      }).catch(() => {\n        // 也需要重新初始化\n        this.$emit('ordered', emitFunc);\n      });\n    }\n  }\n};","map":{"version":3,"names":["config","VueSlider","_getBalance","TradeApi","mapGetters","name","components","_Popup","_Tabs","_Tab","props","symbol","type","String","default","price","Number","initOpen","Object","initClose","computed","activated","selectData","title","$t","watch","deep","handler","val","console","log","volume","handleInitSliderOption","newVal","oldVal","form","filters","nan","isNaN","data","options","sliderOptions","value","isShow","session_token","total","order_price_type","currentType","interval","marks","isTotal","percentageVal","mounted","methods","checkIsTotal","exchangeVal","sum","parseFloat","Math","floor","vol","max","toFixed","disabled","onInput","maxSum","onInputTotal","selectBtn","selectItem","item","changeTab","$emit","order","userInfo","token","$router","push","$toast","fail","$route","params","_order","emitFunc","tradeBuy","tradeSell","then","res","$store","commit","balance","money","catch"],"sources":["src/components/trade-order-area/index.vue"],"sourcesContent":["<template>\n  <div class=\"flex flex-col flex-1\">\n    <div class=\"flex items-center h-66 tabBackground text-grey\">\n      <p class=\"font-28 flex-1 flex items-center justify-center h-66 buy-item\"\n        :class=\"currentType == 'open' ? 'open' : ''\" @click=\"changeTab('open')\">{{ $t('买入') }}</p>\n      <p class=\"font-28 flex-1 flex items-center justify-center h-66 buy-item\"\n        :class=\"currentType == 'close' ? 'close' : ''\" @click=\"changeTab('close')\">{{ $t('卖出') }}</p>\n    </div>\n\n    <div class=\"mt-22 mb-22 inputBackground\" style=\"position:relative;\">\n      <div class=\" flex justify-between  items-center w-full h-70\" @click=\"selectBtn\">\n        <!-- <img src=\"@/assets/image/public/warn.png\" alt=\"warn-icon\" class=\"w-25 h-25 pl-20\"/> -->\n        <div class=\"pl-16 textColor\" style=\"width:80%;\">{{ title }}</div>\n        <img src=\"@/assets/image/public/grey-select.png\" alt=\"select-icon\" class=\"w-22 h-11 pr-20\" />\n      </div>\n      <div class=\"option-box\" v-if=\"isShow\">\n        <div class=\"font-30\" v-for=\"item in selectData\" :key=\"item.type\" @click=\"selectItem(item)\">{{ item.title }}\n        </div>\n      </div>\n    </div>\n    <div class=\"h-70 lh-70  inputBackground mb-25 flex justify-center px-16 textColor2\">\n      <input placeholder=\"\" class=\"targetPrice  w-full  h-70 border-none\" v-model=\"form.price\"\n        :disabled=\"type / 1 === 1\" />\n      <span>USDT</span>\n    </div>\n    <div class=\"h-70 lh-70  inputBackground mb-25 flex justify-center px-16 textColor2\">\n      <span>{{ title }}</span>\n    </div>\n    <div class=\"flex total-list\">\n      <div class=\"total-div\" :class=\"[!isTotal ? 'active-bg' : '']\" @click=\"checkIsTotal(false)\">\n        {{ $t('数量') }}\n      </div>\n      <div class=\"total-div\" :class=\"[isTotal ? 'active-bg' : '']\" @click=\"checkIsTotal(true)\">\n        {{ $t('总额') }}\n      </div>\n    </div>\n    <div v-if=\"!isTotal\" class=\"h-70 lh-70 inputBackground mb-36 flex justify-center px-16\">\n      <input :placeholder=\"$t('数量')\" class=\" w-full h-70 border-none textColor\" v-model=\"form.volume\" @input=\"onInput\" />\n      <span class=\"textColor\">{{ symbol.toLocaleUpperCase() }}</span>\n    </div>\n    <div v-if=\"isTotal\" class=\"h-70 lh-70 inputBackground  mb-36 flex justify-center px-16\">\n      <input :placeholder=\"$t('总额')\" class=\" w-full h-70 border-none textColor\" v-model=\"form.total\"\n        @input=\"onInputTotal\" />\n      <span class=\"textColor\">{{ 'USDT' }}</span>\n    </div>\n    <!-- <vue-slider v-bind=\"options\" v-model=\"form.volume\"  :interval=\"interval\"></vue-slider> -->\n    <!-- <vue-slider class=\"mainBox\"  v-bind=\"options\" :interval=\"interval\"  v-model=\"form.volume\" :hide-label=\"true\"  :railStyle=\"{ background: '#404040', height: '10px' }\"\n      :processStyle=\"{ background: '#266BFF', height: '10px' }\">\n      <template v-slot:step=\"{ active }\">\n        <div :class=\"['custom-step', { active }]\"></div>\n      </template>\n    </vue-slider> -->\n    <div style=\"color: #868D9A\" class=\"font-24 w-full flex justify-between items-center\">\n      <!-- <span class=\"flex-1 text-left\">0%</span> -->\n      <span class=\"flex-1 tab-item\" :class=\"[percentageVal == 25 ? 'select-active' : '']\"\n        @click=\"exchangeVal(25)\">25%</span>\n      <span class=\"flex-1 tab-item\" :class=\"[percentageVal == 50 ? 'select-active' : '']\"\n        @click=\"exchangeVal(50)\">50%</span>\n      <span class=\"flex-1 tab-item\" :class=\"[percentageVal == 75 ? 'select-active' : '']\"\n        @click=\"exchangeVal(75)\">75%</span>\n      <span class=\"flex-1 tab-item\" :class=\"[percentageVal == 100 ? 'select-active' : '']\"\n        @click=\"exchangeVal(100)\">100%</span>\n    </div>\n    <div class=\"flex justify-between items-center mt-40\">\n      <div class=\"flex flex-col font-24\">\n        <p class=\"text-grey\" v-if=\"this.currentType === 'open'\">{{ $t('可用') }}<span class=\"textColor ml-8\">\n            {{ initOpen.volume | nan }}&nbsp;USDT</span>\n        </p>\n        <p class=\"text-grey\" v-else>{{ $t('可卖') }}<span class=\"textColor ml-8\">{{ initClose.volume | nan }}&nbsp;{{\n          symbol.toLocaleUpperCase() }}</span></p>\n      </div>\n      <van-icon name=\"add-o\" @click=\"$router.push('/exchange/exchangePage')\" class=\"font-30 add-icon\" />\n      <!-- <img @click=\"$router.push('/exchange/exchangePage')\" src=\"@/assets/image/public/switch.png\" class=\"w-24 h-24\" /> -->\n    </div>\n    <div style=\"\" class=\"w-full h-90 lh-90 flex justify-center text-white text-center rounded buyandSell mt-70\"\n      :class=\"currentType === 'open' ? 'bg-green' : 'bg-red'\" @click=\"order()\">\n      {{ currentType == 'open' ? $t('买入') : $t('卖出') }}\n    </div>\n\n  </div>\n</template>\n\n<script>\nimport config from \"@/config\";\nimport { Popup, Tabs, Tab } from 'vant';\nimport VueSlider from 'vue-slider-component'\nimport 'vue-slider-component/theme/default.css'\nimport { _getBalance } from '@/API/trade.api'\nimport TradeApi from \"@/API/trading.js\";\nimport { mapGetters } from \"vuex\";\n// import PopupConfirmOrder from '@/components/popup-confirm-order'\nexport default {\n  name: \"perpetualPosition\",\n  components: {\n    VueSlider,\n    [Popup.name]: Popup,\n    [Tabs.name]: Tabs,\n    [Tab.name]: Tab\n  },\n  props: {\n    symbol: {\n      type: String,\n      default: ''\n    },\n    price: {\n      type: [Number, String],\n      default: '0.00'\n    },\n    initOpen: {\n      type: Object,\n      default() {\n        return {}\n      }\n    },\n    initClose: {\n      type: Object,\n      default() {\n        return {}\n      }\n    },\n  },\n  computed: {\n    ...mapGetters('user', ['userInfo'])\n  },\n  activated() {\n    this.selectData = [\n      { title: this.$t('市价委托'), type: '1' },\n      { title: this.$t('限价委托'), type: '2' },\n    ]\n    this.title = this.selectData[0].title\n    this.type = this.selectData[0].type\n  },\n  watch: {\n    initOpen: { // 处理滚动条初始值\n      deep: true,\n      handler(val) {\n        console.log(val)\n        if (val.volume / 1 > 0) {\n          this.handleInitSliderOption()\n        }\n      }\n    },\n    initClose: { // 处理滚动条初始值\n      deep: true,\n      handler(newVal, oldVal) {\n        if (newVal.volume / 1 > 0) {\n          this.handleInitSliderOption(true)\n        }\n      }\n    },\n    price(val) {\n      if (this.type === '1') { // !this.focus &&\n        this.form.price = val\n      }\n    },\n  },\n  filters: {\n    nan(val) {\n      return isNaN(val) ? '--' : val\n    }\n  },\n  data() {\n    return {\n      options: config.sliderOptions,\n      value: 0,\n      isShow: false,\n      title: this.$t('市价委托'),\n      selectData: [],\n      form: {\n        volume: '',\n        session_token: '',\n        symbol: '', // 币种\n        price: '',\n        total: '',\n        order_price_type: 'opponent', // 市价or限价\n      },\n      type: \"1\",//选中市价或限价类型\n      currentType: \"open\", //开仓类型\n      interval: 0.001,\n      marks: (val) => val % 25 === 0,\n      isTotal: false,\n      percentageVal: 0\n    }\n  },\n  mounted() {\n\n  },\n  methods: {\n    checkIsTotal(val) {\n      this.isTotal = val\n      this.percentageVal = 0\n      this.form.total = ''\n      this.form.volume = ''\n    },\n    exchangeVal(val) {\n      this.percentageVal = val\n      if (!this.isTotal) {\n        if (this.currentType == 'open') {\n          let sum = (parseFloat(this.initOpen.volume) * (val / 100) / parseFloat(this.form.price))\n          this.form.volume = Math.floor(sum * 100000) / 100000\n        } else {\n          let sum = parseFloat(this.initClose.volume)\n          this.form.volume = (Math.floor(sum * (val / 100) * 100000)) / 100000\n        }\n      } else {\n        if (this.currentType == 'open') {\n          this.form.total = this.initOpen.volume * (val / 100)\n        } else {\n          this.form.total = Math.floor((this.initClose.volume * (val / 100) * parseFloat(this.form.price)) * 1000) / 1000\n        }\n      }\n    },\n    handleInitSliderOption(volume) {\n      if (!volume) { // 金额是否需要变动\n        this.form.volume = ''\n      }\n      console.log(this.initOpen.volume)\n      let vol\n      if (this.currentType === 'open') {\n        vol = this.initOpen.volume / 1\n      } else {\n        vol = this.initClose.volume / 1\n      }\n      this.options.max = Number(vol.toFixed(3))\n      if (this.options.max > 0) {\n        this.options.disabled = false\n      } else {\n        this.options.disabled = true\n      }\n    },\n    onInput() { // 数量变化\n      if (this.currentType === 'open') {\n        let maxSum = (parseFloat(this.initOpen.volume) / parseFloat(this.form.price))\n        console.log(this.initOpen.volume)\n        console.log(this.form.price)\n        console.log(maxSum)\n        if (this.form.volume * 1 > maxSum / 1) {\n          this.form.volume = maxSum\n        }\n      } else {\n        if (this.form.volume * 1 / 1 > this.options.max / 1) {\n          this.form.volume = this.options.max / 1\n        }\n      }\n    },\n    onInputTotal() { //总额变化\n      //最大额度\n      if (this.form.total > 0) {\n        if (this.currentType === 'open') {\n          console.log(this.initOpen.volume)\n          if (this.form.total * 1 > this.initOpen.volume * 1) {\n            this.form.total = this.initOpen.volume\n          }\n        } else {\n          let sum = (parseFloat(this.form.total) / parseFloat(this.form.price)).toFixed(5)\n          if (parseFloat(sum) > parseFloat(this.initClose.volume)) {\n            this.form.total = (parseFloat(this.initClose.volume) * parseFloat(this.form.price)).toFixed(5)\n          }\n        }\n      }\n    },\n    //价格类型下拉框切换\n    selectBtn() {\n      this.isShow = !this.isShow;\n    },\n    //选择价格类型\n    selectItem(item) {\n      if (item.type == 1) {\n        this.form.price = this.price\n      }\n      this.form.order_price_type = item.type === '1' ? 'opponent' : 'limit'\n      this.title = item.title;\n      this.type = item.type;\n      this.isShow = false;\n    },\n    //选择开仓类型\n    changeTab(type) { // 开仓和\n      this.percentageVal = 0\n      this.isTotal = false\n      this.form.total = ''\n      console.log('changeTab', type)\n      // TODO: 这里应该是换函数\n      // this.form.direction = type === 'open' ? 'buy' : 'sell'\n      if (this.currentType === type) {\n        return\n      }\n      this.currentType = type;\n      if (this.currentType === 'close') {\n        this.$emit('ordered', 'close') // 更新平仓初始化参数\n      } else {\n        this.$emit('ordered', 'open') // 更新平仓初始化参数\n      }\n      this.handleInitSliderOption()\n    },\n    order() {\n      if (!this.userInfo.token) {\n        this.$router.push('/login')\n        return\n      }\n      let volume = ''\n      if (this.isTotal) {\n        if (!this.form.total) {\n          this.$toast.fail(this.$t('请输入总额'))\n          return\n        }\n        if (this.currentType === 'open') {\n          this.form.volume = parseFloat(this.form.total).toFixed(5)\n        } else {\n          this.form.volume = (parseFloat(this.form.total) / parseFloat(this.form.price))\n          this.form.volume = this.form.volume.toFixed(5)\n        }\n        volume = this.form.volume\n      } else {\n        if (!this.form.volume) {\n          this.$toast.fail(this.$t('请输入数量'))\n          return\n        }\n        if (this.currentType === 'open') {\n          volume = (parseFloat(this.form.volume) * parseFloat(this.form.price))\n        } else {\n          volume = this.form.volume\n        }\n      }\n      this.form.symbol = this.$route.params.symbol\n      let _order = null // api\n      let emitFunc = null // 触发函数\n\n      if (this.currentType === 'open') {\n        this.form.session_token = this.initOpen.session_token\n      } else {\n        this.form.session_token = this.initClose.session_token\n      }\n      _order = this.currentType === 'open' ? TradeApi.tradeBuy : TradeApi.tradeSell\n      emitFunc = this.currentType\n      _order({\n        volume: volume,\n        session_token: this.form.session_token,\n        symbol: this.form.symbol, // 币种\n        price: this.form.price,\n        total: this.form.total,\n        order_price_type: this.form.order_price_type, // 市价or限价\n      }).then((res) => {\n        this.$toast(this.$t('操作成功'))\n        this.form.volume = ''\n        this.form.total = ''\n        _getBalance().then(data => { // 刷新余额\n          this.$store.commit('user/SET_USERINFO', { balance: data.money })\n        })\n        this.$emit('ordered', emitFunc)\n      }).catch(() => { // 也需要重新初始化\n        this.$emit('ordered', emitFunc)\n      })\n    },\n  }\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.buy-item {\n  @include themify() {\n    background: themed(\"input_background\");\n  }\n}\n\n.bg-f3 {\n  background: #f3f3f3;\n}\n\n.options {\n  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);\n  border-radius: 6px;\n\n  div {\n    font-size: 22px;\n    text-align: center;\n    width: 140px;\n    height: 60px;\n    line-height: 60px;\n\n    &.option-active {\n      background-color: #F5F5F5;\n    }\n  }\n}\n\n.right-word {\n  top: 50%;\n  transform: translateY(-50%);\n  right: 19px;\n  position: absolute;\n  border-radius: 6px;\n}\n\n.vue-slider {\n  height: 3px !important;\n  padding: 0 10px !important;\n}\n\n.vue-slider-dot {\n  width: 28px !important;\n  height: 28px !important;\n\n}\n\n.vue-slider-mark-label {\n  font-size: 16px;\n  margin-top: 14px !important;\n}\n\n.vue-slider-mark-label-active {\n  color: #868D9A !important;\n}\n\n.vue-slider-dot-handle {\n  border: 3px solid #2C78F8;\n}\n\n.vue-slider-mark {\n  width: 20px !important;\n  height: 20px !important;\n\n  &:nth-child(1) {\n    .vue-slider-mark-label {\n      transform: translateX(-14px) !important;\n    }\n  }\n\n  &:nth-child(5) {\n    .vue-slider-mark-label {\n      transform: translateX(-60px) !important;\n    }\n  }\n}\n\n// 开仓样式\n.tabcon {\n  // padding-bottom: 16%;\n  position: relative;\n  height: 80px;\n}\n\n.tab {\n  position: absolute;\n  left: 0px;\n  right: 0px;\n  top: 0px;\n  bottom: 0px;\n  display: flex;\n  align-items: center;\n  background-color: #f3f3f3;\n  border-radius: 5px;\n  overflow: hidden;\n}\n\n.tab>* {\n  height: 100%;\n}\n\n.tab>img {\n  margin-left: -2px;\n  margin-right: -2px;\n}\n\n.tab>a {\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n.open {\n  // background-color: #2EBD85;\n  background: url(@/assets/image/public/open-bg.png) no-repeat right center;\n  background-size: 100% 100%;\n  color: white;\n}\n\n.close {\n  // background-color: #F6465D;\n  background: url(@/assets/image/public/close-bg.png) no-repeat left center;\n  background-size: 100% 100%;\n  color: white;\n}\n\n// 下拉\n.option-box {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 90px;\n  width: 100%;\n  z-index: 3;\n\n  @include themify() {\n    background: themed(\"grey_bg\");\n  }\n\n  text-align: center;\n\n  @include themify() {\n    box-shadow: 0px 0px 3px 3px themed(\"grey_bg\");\n  }\n\n  border-radius: 4px;\n\n  @include themify() {\n    color: themed(\"text_color3\");\n  }\n}\n\n.option-box>div {\n  padding: 30px 0;\n}\n\n.option-box>div:hover {\n  // background-color: #F5F5F5;\n}\n\n.num-text-color {\n  color: #4C4A54;\n}\n\nselect {\n  appearance: none;\n  /* 去掉默认图标 */\n  -moz-appearance: none;\n  /* Firefox */\n  -webkit-appearance: none;\n  /* Safari and Chrome */\n  padding: 0 20px 0 20px;\n  background: url(\"../../assets/image/public/grey-select.png\") no-repeat scroll right center transparent;\n  /* 自己的图*/\n  background-size: 20px 11px;\n}\n\n.with100 {\n  width: 100%;\n}\n\n.height100 {\n  height: 100%;\n}\n\n.targetPrice {\n\n  opacity: 1;\n}\n\n.inputBackground {\n  input {\n    background: transparent !important;\n  }\n}\n\n\n.custom-step {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: fff;\n  border: solid 1px #2256F7;\n  background: #fff;\n}\n\n.custom-step.active {\n  box-shadow: 0 0 0 2px #2256F7;\n  background-color: #2256F7;\n}\n\n.tab-item {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  @include themify() {\n    background: themed(\"input_background\");\n  }\n\n  border-radius: 4px;\n  margin-right: 10px;\n  padding: 10px 0;\n}\n\n.total-list {\n  @include themify() {\n    background: themed(\"grey_bg\");\n  }\n\n  display: flex;\n\n  @include themify() {\n    color: themed(\"text_color\");\n  }\n\n  font-size: 26px;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 20px;\n  position: relative;\n\n  // ::after {\n  //   position: absolute;\n  //   content: '';\n  //   top: 20%;\n  //   left: 50%;\n  //   height: 40px;\n  //   background: #373737;\n  //   width: 1px;\n\n  // }\n\n  .total-div {\n    flex: 1;\n    text-align: center;\n    padding: 20px 0;\n  }\n}\n\n.add-icon {\n  color: #1194F7;\n}\n\n.active-bg {\n  @include themify() {\n    background: themed(\"bg_dark\");\n  }\n}\n\n.select-active {\n  background: #2EBD85;\n\n  @include themify() {\n    color: themed(\"text_color\") !important;\n  }\n}\n\n.buyandSell {\n  position: relative;\n  z-index: 9;\n}\n</style>\n"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}