style

lxf

2025-07-07 93f9b248dd0eecbaa77006e5146c58c831d89d8e

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

@@ -13,7 +13,7 @@
            </div>
            <div class="pl-10 w-160  font-28" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range > 0 ?
              '+' : '' }}{{ range || '--' }}%</div>
            <img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="klineJump()">
            <!-- <img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="klineJump()"> -->
          </div>
          <!-- <div class="flex items-center">
                        <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35"
@@ -25,9 +25,9 @@
          <!-- <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"
          <!-- <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>
            {{ queryType == 'cryptos' ? $t('交割合约') : $t('期货交易') }}</button> -->
        </div>
      </div>
    </div>
@@ -36,7 +36,7 @@
      <div class="pl-42 border-b-color pt-48 pb-48">
        <div class="textColor">
          <span class="font-bold font-45 mr-12">{{ title }} {{ $t('合约') }}</span>
          <span class="font-30">/{{ queryType == 'cryptos' ? 'USDT'  : 'USD'}} </span>
          <span class="font-30">/{{ 'USD'}} </span>
        </div>
      </div>
      <div class="pl-42 pr-40 font-28">
@@ -56,7 +56,7 @@
        <div class="flex justify-between mb-50" v-for="item in list" :key="item.name" @click="onRoute(item)">
          <div>
            <div class="textColor font-28">{{ item.name }}</div>
            <div class="text-grey mt-10 font-28">{{ selectIndex == 1 ? $t('永续') : $t('交割') }}</div>
            <!-- <div class="text-grey mt-10 font-28">{{ selectIndex == 1 ? $t('永续') : $t('交割') }}</div> -->
          </div>
          <div class="text-right">
            <div class="textColor font-28">{{ item.close }}</div>
@@ -73,6 +73,7 @@
import { Popup } from "vant";
import { mapGetters } from "vuex";
import { _getHomeList } from "@/service/home.api";
import { useQuotesStore } from '@/store/quotes.store';
import { THEME } from '@/config/theme'
import { setStorage } from '@/utils/utis'
export default {
@@ -112,6 +113,9 @@
  },
  computed: {
    ...mapGetters({ coinList: 'home/coinList' }),
    ...mapGetters({
      myCoinList: 'qoutes/coinList'
    }),
    title() {
      return [this.$t('永续'), this.$t('交割')][this.selectIndex - 1]
    }
@@ -141,7 +145,8 @@
  methods: {
    onRoute(item) {
      if (this.$route.params.symbol !== item.symbol) {
        this.$router.push(`/cryptos/perpetualContract/${item.symbol}?type=${this.queryType}`)
        // this.$router.push(`/cryptos/perpetualContract/${item.symbol}?selectIndex=${this.selectIndex}`)
        // debugger
        this.$emit('update-coin', item.symbol)
        setStorage('symbol', item.symbol)
        this.$forceUpdate()
@@ -149,7 +154,17 @@
      this.show = false
    },
    onSidebar() { // 侧边栏打开
      this.coins = this.coinList.map(item => item.symbol)
      // console.log('侧边栏打开: ', this.selectIndex)
      if (this.selectIndex == 2) {
        const quotesData = JSON.parse(localStorage.getItem('qoutes'));
        this.coins = quotesData.coins || [];
        this.coins = quotesData.coins.map(item => item.symbol)
      } else {
        this.coins = this.coinList.map(item => item.symbol);
      }

      // quotesStore.coins

      console.log(this.coins, 11111)
      this.show = true
      this.fetchList()
@@ -166,6 +181,7 @@
          this.fetchList()
        }, 1000)
      })

    },
    onClose() {
      if (this.timeout) {
@@ -188,7 +204,7 @@
      // }
    },
    klineJump() {
      this.$router.push(`/cryptos/trendDetails/${this.symbol}?type=${this.queryType}`)
      this.$router.push(`/cryptos/trendDetails/${this.symbol}?type=${this.queryType}&selectIndex=${this.selectIndex}`)
    },
    changeTab(index) {
      this.$emit('tab', index)