dcc
2024-06-07 d5381ec06ab5f549fade867c3a874de613bdd5d4
src/components/contract-header/index.vue
@@ -3,18 +3,18 @@
  <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
@@ -32,25 +32,18 @@
        </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>
@@ -93,7 +86,9 @@
          @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>
@@ -115,7 +110,7 @@
<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 {
@@ -154,6 +149,7 @@
    ...mapGetters({
      coinList: "home/coinList",
      theme: "home/theme",
      newcoinArr: "home/newcoinArr",
    }),
    title() {
      return [this.$t("永续"), this.$t("交割")][this.selectIndex - 1];
@@ -173,11 +169,12 @@
    };
  },
  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}`);
@@ -197,7 +194,10 @@
    },
    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) {
@@ -227,6 +227,8 @@
</script>
<style lang="scss" scoped>
@import "@/assets/init.scss";
.before {
  position: relative;
@@ -254,17 +256,14 @@
.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;
}
// 弹出层样式