二三给的

李凌

2025-10-09 631dc512b226b346fefaebbedf1ddd79c06cab71

 src/components/fx-footer/index.vue

@@ -1,7 +1,6 @@
<template>
  <div class="relative z-30 footer">
    <van-tabbar route v-model="active" active-color="#292929" inactive-color="7f7f7f" @change="changeIndex" fixed
      safe-area-inset-bottom>
    <van-tabbar route v-model="active" @change="changeIndex" fixed safe-area-inset-bottom>
      <!-- <van-tabbar-item name="optional" to="/optional">
        <span :class="[active === 'optional' ? 'active' : '']">{{ $t('Optional') }}</span>
        <template #icon="props">
@@ -11,21 +10,32 @@
      <van-tabbar-item name="homePage" to="/homePage">
        <span :class="[active === 'homePage' ? 'active' : '']">{{ $t('首页') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.home.active : icon.home.inactive" />
          <img :src="props.active ? icon.home.active : icon.home.inactive" v-if="store.state.vant.theme == 'light'" />
          <img :src="props.active ? icon.home.active2 : icon.home.inactive" v-else />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="quotes" to="/quotes">
        <span :class="[active === 'quotes' ? 'active' : '']">{{ $t('quotes') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.quotes.active : icon.quotes.inactive" />
          <img :src="props.active ? icon.quotes.active : icon.quotes.inactive" v-if="store.state.vant.theme == 'light'" />
          <img :src="props.active ? icon.quotes.active2 : icon.quotes.inactive" v-else />
        </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" />
          <img :src="props.active ? icon.trade.active : icon.trade.inactive" v-if="store.state.vant.theme == 'light'" />
          <img :src="props.active ? icon.trade.active2 : icon.trade.inactive" v-else />
        </template>
      </van-tabbar-item>

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

      <!-- <van-tabbar-item name="funds" to="/cryptos/funds">
        <span>{{ $t('资金') }}</span>
        <template #icon="props">
@@ -39,7 +49,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">
@@ -64,7 +74,8 @@
      <van-tabbar-item name="assets" to="/my/assets">
        <span :class="[active === 'assets' ? 'active' : '']">{{ $t('资产') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.assets.active : icon.assets.inactive" />
          <img :src="props.active ? icon.assets.active : icon.assets.inactive" v-if="store.state.vant.theme == 'light'" />
          <img :src="props.active ? icon.assets.active2 : icon.assets.inactive" v-else />
        </template>
      </van-tabbar-item>
    </van-tabbar>
@@ -77,6 +88,7 @@
import { useI18n } from "vue-i18n";
import { useRoute } from 'vue-router';
import { watch } from "vue";
import store from '@/store/store'
const { t } = useI18n()
const active = ref('home')
const route = useRoute()
@@ -127,12 +139,14 @@
  //   inactive: new URL('@/assets/imgs/footer/optional.png', import.meta.url),
  // },
  home: {
    active: new URL('@/assets/imgs/footer/home-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/home.png', import.meta.url),
    active: new URL('@/assets/imgs/footer/f_1b.png', import.meta.url),
    active2: new URL('@/assets/imgs/footer/f_1c.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/f_1a.png', import.meta.url),
  },
  quotes: {
    active: new URL('@/assets/imgs/footer/quotes-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/quotes.png', import.meta.url),
    active: new URL('@/assets/imgs/footer/f_2b.png', import.meta.url),
    active2: new URL('@/assets/imgs/footer/f_2c.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/f_2a.png', import.meta.url),
  },
  // news: {
  //   active: new URL('@/assets/imgs/footer/news-active.png', import.meta.url),
@@ -143,8 +157,9 @@
    inactive: new URL('@/assets/imgs/footer/quotes.png', import.meta.url),
  },
  trade: {
    active: new URL('@/assets/imgs/footer/trade-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/trade.png', import.meta.url),
    active: new URL('@/assets/imgs/footer/f_3b.png', import.meta.url),
    active2: new URL('@/assets/imgs/footer/f_3c.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/f_3a.png', import.meta.url),
  },
  // funds: {
  //   active: new URL('@/assets/imgs/footer/funds-active.png', import.meta.url),
@@ -155,8 +170,9 @@
    inactive: new URL('@/assets/imgs/footer/menu.png', import.meta.url),
  },
  assets: {
    active: new URL('@/assets/imgs/footer/assets-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/assets.png', import.meta.url),
    active: new URL('@/assets/imgs/footer/f_5b.png', import.meta.url),
    active2: new URL('@/assets/imgs/footer/f_5c.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/f_5a.png', import.meta.url),
  }
}
const changeIndex = (index) => {
@@ -167,22 +183,22 @@
<style lang="scss" scoped>
:deep(.van-tabbar-item__text) {
  font-size: 12px;
  color: #7f7f7f;
  color: $text_color1;
}

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

.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: $white;
}

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

// .blue {
@@ -190,7 +206,9 @@
// }

.active {
  color: #292929 !important;
  @include themify() {
    color: themed("tab_color");
  }
}

.footer {