9.11

李凌

2025-09-11 d5ff9af6bb6b1974f6e50c3330ea7d8e5ad9fa76

 src/components/fx-footer/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="relative z-30 footer">
    <van-tabbar route v-model="active" active-color="#292929" inactive-color="7f7f7f" @change="changeIndex" fixed
    <van-tabbar route v-model="active" active-color="f7b328" inactive-color="868d9a" @change="changeIndex" fixed
      safe-area-inset-bottom>
      <!-- <van-tabbar-item name="optional" to="/optional">
        <span :class="[active === 'optional' ? 'active' : '']">{{ $t('Optional') }}</span>
@@ -20,12 +20,21 @@
          <img :src="props.active ? icon.quotes.active : icon.quotes.inactive" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item name="spot" to="/cryptos/trade/btcusdt">
        <span :class="[active === 'spot' ? 'active' : '']">{{ $t('现货') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.spot.active : icon.spot.inactive" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item name="trade" to="/trade">
        <span :class="[active === 'trade' ? 'active' : '']">{{ $t('trade') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.trade.active : icon.trade.inactive" />
        </template>
      </van-tabbar-item>

      <!-- <van-tabbar-item name="funds" to="/cryptos/funds">
        <span>{{ $t('资金') }}</span>
        <template #icon="props">
@@ -39,7 +48,7 @@
          <img :src="props.active ? icon.news.active : icon.news.inactive" />
        </template>
      </van-tabbar-item> -->
      

      <!-- <van-tabbar-item name="documentation" to="/documentation">
        <span :class="[active === 'documentation' ? 'active' : '']">{{ $t('跟单') }}</span>
        <template #icon="props">
@@ -98,7 +107,7 @@
  active.value = 'assets'
} else if (route.path == "/documentation/index") {
  active.value = 'documentation'
}
} 
let quotesStore = useQuotesStore()

watch(() => route.path, (nv) => {
@@ -146,6 +155,10 @@
    active: new URL('@/assets/imgs/footer/trade-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/trade.png', import.meta.url),
  },
  spot: {
    active: new URL('@/assets/imgs/footer/spot-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/spot.png', import.meta.url),
  },
  // funds: {
  //   active: new URL('@/assets/imgs/footer/funds-active.png', import.meta.url),
  //   inactive: new URL('@/assets/imgs/footer/funds.png', import.meta.url),
@@ -167,22 +180,22 @@
<style lang="scss" scoped>
:deep(.van-tabbar-item__text) {
  font-size: 12px;
  color: #7f7f7f;
  color: #868d9a;
}

:deep(.van-tabbar-item--active) {
  background-color: $white;
  background-color: $footer_background;
}

.van-tabbar--fixed {
  z-index: 10;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: $white;
  background-color: $footer_background;
}

.van-tabbar--fixed::after {
  border-color: $white;
  border-color: $footer_background;
}

// .blue {
@@ -190,7 +203,7 @@
// }

.active {
  color: #292929 !important;
  color: #f7b328 !important;
}

.footer {