| | |
| | | <div> |
| | | <div class="contract-header"> |
| | | <div class="pl-30 pr-30"> |
| | | <div class="flex justify-center pt-45 before"> |
| | | <div class="flex pt-45 before"> |
| | | <div class="flex items-center justify-center"> |
| | | <!-- <img :src="require(`@/assets/theme/${theme}/image/icon_back.png`)" class="w-35 h-35 back" alt="" |
| | | @click="$router.push(`/trendDetails/${symbol}`)"> --> |
| | | <img |
| | | <!-- <img |
| | | :src="require(`@/assets/theme/${theme}/image/convert.png`)" |
| | | alt="convert-img" |
| | | class="w-35 h-35" |
| | | @click="onSidebar" |
| | | /> |
| | | /> --> |
| | | <div class="flex pl-21 textColor" @click="onSidebar"> |
| | | <div class="font-35">{{ symbol.toUpperCase() || "--" }}/USDT</div> |
| | | <div class="font-35">{{ symbol | _symbolName }}/USDT</div> |
| | | <div class="ml-15">{{ title }}</div> |
| | | </div> |
| | | <div |
| | |
| | | </div> |
| | | <div class="flex justify-between pt-34"> |
| | | <button |
| | | class="tabBtn w-368 h-74 lh-74 border-none rounded" |
| | | class="w-368 h-74 lh-74" |
| | | :class="selectIndex == 1 ? 'select-active' : 'no-select'" |
| | | @click="changeTab(1)" |
| | | > |
| | | {{ $t("永续合约") }} |
| | | </button> |
| | | <button |
| | | class="tabBtn w-368 m-[10px] h-74 lh-74 border-none rounded" |
| | | :class="selectIndex == 3 ? 'select-active' : 'no-select'" |
| | | @click="$router.push('/trade/btc')" |
| | | > |
| | | {{ $t("币币交易") }} |
| | | </button> |
| | | <button |
| | | class="tabBtn w-368 h-74 lh-74 border-none rounded" |
| | | class="w-368 h-74 lh-74" |
| | | :class="selectIndex == 2 ? 'select-active' : 'no-select'" |
| | | @click="changeTab(2)" |
| | | > |
| | | {{ $t("期权交易") }} |
| | | {{ $t("交割合约") }} |
| | | </button> |
| | | </div> |
| | | </div> |
| | |
| | | @click="onRoute(item)" |
| | | > |
| | | <div> |
| | | <div class="textColor">{{ item.name }}</div> |
| | | <div class="textColor"> |
| | | {{ item.symbol | _symbolName(1) }} |
| | | </div> |
| | | <div class="text-grey mt-10"> |
| | | {{ selectIndex == 1 ? $t("永续") : $t("交割") }} |
| | | </div> |
| | |
| | | |
| | | <script> |
| | | import { Popup } from "vant"; |
| | | import { mapGetters } from "vuex"; |
| | | import { mapActions, mapGetters } from "vuex"; |
| | | import { _getHomeList } from "@/API/home.api"; |
| | | import { setStorage } from "@/utils/utis"; |
| | | export default { |
| | |
| | | ...mapGetters({ |
| | | coinList: "home/coinList", |
| | | theme: "home/theme", |
| | | newcoinArr: "home/newcoinArr", |
| | | }), |
| | | title() { |
| | | return [this.$t("永续"), this.$t("交割")][this.selectIndex - 1]; |
| | |
| | | }; |
| | | }, |
| | | created() { |
| | | this.$emit("tab", this.$route.params.type); |
| | | this.NEW_CION_LIST(); |
| | | // this.coins = this.coinList.map(item => item.symbol) |
| | | // console.log('this.coins', this.coins) |
| | | }, |
| | | methods: { |
| | | ...mapActions("home", ["NEW_CION_LIST"]), |
| | | onRoute(item) { |
| | | if (this.$route.params.symbol !== item.symbol) { |
| | | this.$router.push(`/perpetualContract/${item.symbol}`); |
| | |
| | | }, |
| | | fetchList() { |
| | | // 获取行情 |
| | | _getHomeList(this.coins.join(",")).then((list) => { |
| | | const mainArray = this.coins.filter( |
| | | (item) => !this.newcoinArr.includes(item) |
| | | ); |
| | | _getHomeList(mainArray.join(",")).then((list) => { |
| | | // console.log(list) |
| | | this.list = list; |
| | | if (this.timeout) { |
| | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | @import "@/assets/init.scss"; |
| | | |
| | | .before { |
| | | position: relative; |
| | | |
| | |
| | | |
| | | .select-active { |
| | | background-color: transparent; |
| | | |
| | | color: white !important; |
| | | |
| | | @include themify() { |
| | | background: themed("color_main"); |
| | | } |
| | | |
| | | border: none; |
| | | border: 0px; |
| | | color: $newcolor; |
| | | } |
| | | |
| | | .no-select { |
| | | background-color: transparent; |
| | | border: 0px; |
| | | color: $newcolor1; |
| | | } |
| | | |
| | | // 弹出层样式 |