1

jhzh

2026-05-22 ef52095f5e9f0a9fe2da779bb1573947d77d75b6

 src/components/Transform/contract-header/index.vue

@@ -1,20 +1,20 @@
<template>
  <!-- 永续合约，交割合约公共头部 -->
  <div id="cryptos">
  <div id="cryptos" style="padding: 0.9rem 1.6rem 0rem 1.6rem;margin-bottom: 10px;">
    <div class="contract-header">
      <div>
        <div class="flex justify-start pt-5 before">
          <div class="flex items-center ">
            <img src="@/assets/image/icon_back.png" class="w-35 h-35 back" alt="" @click="jump()">
            <!-- <img src="@/assets/image/icon_back.png" class="w-35 h-35 back" alt="" @click="jump()"> -->
            <!-- <img src="@/assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-35 h-35" @click="onSidebar"> -->
            <img src="@/assets/image/exchangeIcon.png" alt="convert-img" class="w-35 h-35" @click="onSidebar">
            <img src="../../../assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-45 h-45" @click="onSidebar">
            <div class="flex pl-21 textColor" @click="onSidebar">
              <div class="font-35">{{ symbolName.toUpperCase() || '--' }}</div>
              <!-- <div class="ml-15 font-28">{{ title }}</div> -->
            </div>
            <div class="pl-10 w-160  font-28" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range > 0
            <!-- <div class="pl-10 w-160  font-28" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range > 0
              ?
              '+' : '' }}{{ range || '--' }}%</div>
              '+' : '' }}{{ range || '--' }}%</div> -->
            <img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="klineJump()">
          </div>
          <!-- <div class="flex items-center">
@@ -22,14 +22,14 @@
                            @click="jump" />
                    </div> -->
        </div>
        <div class="flex justify-between  pt-34">
        <!-- <div class="flex justify-between  pt-34">
          <button class="tabBtn w-368 h-74 lh-74 border-none  rounded"
            :class="selectIndex == 1 ? 'select-active' : 'no-select'" @click="changeTab(1)">
            {{ $t('永续合约') }}</button>
          <button class="tabBtn w-368 h-74 lh-74 border-none  rounded"
            :class="selectIndex == 2 ? 'select-one-active' : 'no-select'" @click="changeTab(2)">
            {{ queryType == 'cryptos' ? $t('交割合约') : $t('期货交易') }}</button>
        </div>
        </div> -->
      </div>
    </div>
    <!-- 左侧边弹出菜单 -->
@@ -155,12 +155,18 @@
  },
  methods: {
    onRoute(item) {
      if (this.$route.params.symbol !== item.symbol) {
        this.$router.push(`/cryptos/perpetualContract/${item.symbol}?type=${this.queryType}`)
        this.$emit('update-coin', item.symbol)
        setStorage('symbol', item.symbol)
        this.$forceUpdate()
      if (this.$route.params.symbol === item.symbol) {
        this.show = false
        return
      }
      setStorage('symbol', item.symbol)
      this.$emit('update-coin', item.symbol)
      // 当前在 /trade/index 时只更新币种不跳转，其它页面跳转到永续合约页
      const isTradeIndex = this.$route.path === '/trade/index' || this.$route.path === '/trade'
      if (!isTradeIndex) {
        this.$router.push(`/cryptos/perpetualContract/${item.symbol}?type=${this.queryType}`)
      }
      this.$forceUpdate()
      this.show = false
    },
    onSidebar() { // 侧边栏打开