first

zzzz

2024-04-19 41f60633cbdaed2c633f90e43ca0c83fb3fdb975

 src/components/contract-header/index.vue

@@ -3,16 +3,16 @@
  <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="ml-15">{{ title }}</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,13 @@
          @click="onRoute(item)"
        >
          <div>
            <div class="textColor">{{ item.name }}</div>
            <div class="textColor">
              {{
                item.name
                  ? item.symbol.toUpperCase() + "/" + item.name.split("/")[1]
                  : "--"
              }}
            </div>
            <div class="text-grey mt-10">
              {{ selectIndex == 1 ? $t("永续") : $t("交割") }}
            </div>
@@ -173,7 +172,6 @@
    };
  },
  created() {
    this.$emit("tab", this.$route.params.type);
    // this.coins = this.coinList.map(item => item.symbol)
    // console.log('this.coins', this.coins)
  },
@@ -227,6 +225,8 @@
</script>

<style lang="scss" scoped>
@import "@/assets/init.scss";

.before {
  position: relative;

@@ -254,17 +254,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;
}

// 弹出层样式