style

lxf

2025-07-09 2eb4dd6f50b75c9ec844d08eded5365cd79e4207

 src/components/fx-footer/index.vue

@@ -3,13 +3,13 @@
    <!-- 底部 bar -->
    <van-tabbar route v-model="active" active-color="#1194F7" @change="changeIndex" fixed safe-area-inset-bottom>
      <van-tabbar-item name="news" to="/news">
        <span :class="[active === 'news' ? 'active' : '']">{{ $t('首页') }}</span>
        <span :class="[active === 'news' ? 'active' : 'cor_t1']">{{ $t('首页') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.news.active : icon.news.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="quotes" to="/quotes">
        <span :class="[active === 'quotes' ? 'active' : '']">{{ $t('quotes') }}</span>
        <span :class="[active === 'quotes' ? 'active' : 'cor_t1']">{{ $t('quotes') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.quotes.active : icon.quotes.inactive" />
        </template>
@@ -28,7 +28,7 @@
        </template>
      </van-tabbar-item> -->
      <van-tabbar-item name="optional" to="/optional">
        <span :class="[active === 'optional' ? 'active' : '']">{{ $t('资产') }}</span>
        <span :class="[active === 'optional' ? 'active' : 'cor_t1']">{{ $t('资产') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.optional.active : icon.optional.inactive" />
        </template>
@@ -41,7 +41,7 @@
        </template>
      </van-tabbar-item> -->
      <van-tabbar-item name="mine" to="/my">
        <span :class="[active === 'mine' ? 'active' : '']">{{ $t('my') }}</span>
        <span :class="[active === 'mine' ? 'active' : 'cor_t1']">{{ $t('my') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.mine.active : icon.mine.inactive" />
        </template>
@@ -100,28 +100,28 @@
// 底部列表
const icon = {
  optional: {
    active: new URL('@/assets/imgs/footer/optional-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/optional.png', import.meta.url),
    active: new URL('@/assets/imgs/footer/position-select.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/position-unselect.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/quotes-select.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/quotes-unselect.png', import.meta.url),
  },
  news: {
    active: new URL('@/assets/imgs/footer/news-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/news.png', import.meta.url),
    active: new URL('@/assets/imgs/footer/home-select.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/home-unselect.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/position-select.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/position-unselect.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),
  // },
  mine: {
    active: new URL('@/assets/imgs/footer/menu-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/menu.png', import.meta.url),
    active: new URL('@/assets/imgs/footer/mine-select.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/mine-unselect.png', import.meta.url),
  }
}
const changeIndex = (index) => {
@@ -155,7 +155,10 @@
}

.active {
  color: $blue !important;
  color: #000 !important;
}
.cor_t1{
  color: #333;
}

.footer {