style

lxf

2025-07-02 7a52988eb65d0e50cc56e9da8e0088dfc5f9e416

 src/components/fx-footer/index.vue

@@ -1,10 +1,11 @@
<template>
  <div class="relative z-30 footer">
    <!-- 底部 bar -->
    <van-tabbar route v-model="active" active-color="#1194F7" @change="changeIndex" fixed safe-area-inset-bottom>
      <van-tabbar-item name="optional" to="/optional">
        <span :class="[active === 'optional' ? 'active' : '']">{{ $t('Optional') }}</span>
      <van-tabbar-item name="news" to="/news">
        <span :class="[active === 'news' ? 'active' : '']">{{ $t('首页') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.optional.active : icon.optional.inactive" />
          <img :src="props.active ? icon.news.active : icon.news.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="quotes" to="/quotes">
@@ -13,7 +14,8 @@
          <img :src="props.active ? icon.quotes.active : icon.quotes.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="trade" to="/trade">
      <!-- /foreign -->
      <van-tabbar-item name="trade" to="/foreign/deliveryContract/USDSGD">
        <span :class="[active === 'trade' ? 'active' : '']">{{ $t('trade') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.trade.active : icon.trade.inactive" />
@@ -25,12 +27,13 @@
          <img :src="props.active ? icon.funds.active : icon.funds.inactive" />
        </template>
      </van-tabbar-item> -->
      <van-tabbar-item name="news" to="/news">
        <span :class="[active === 'news' ? 'active' : '']">{{ $t('news') }}</span>
      <van-tabbar-item name="optional" to="/optional">
        <span :class="[active === 'optional' ? 'active' : '']">{{ $t('资产') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.news.active : icon.news.inactive" />
          <img :src="props.active ? icon.optional.active : icon.optional.inactive" />
        </template>
      </van-tabbar-item>
     
      <!-- <van-tabbar-item name="trade" to="/exchange">
        <span>{{ $t('trade') }}</span>
        <template #icon="props">
@@ -64,8 +67,10 @@
  active.value = 'news'
} else if (route.path == "/my/index") {
  active.value = 'mine'
} else if (route.path == "/optional/index") {
} else if (route.path == "/foreign/index") {
  active.value = 'optional'
}else if (route.path == "/foreign/deliveryContract/USDSGD") {
  active.value = 'trade'
}else if (route.path == "/cryptos/funds") {
  active.value = 'funds'
}
@@ -82,6 +87,8 @@
    active.value = 'mine'
  } else if (route.path == "/optional/index") {
    active.value = 'optional'
  }else if (route.path == "/foreign/deliveryContract/USDSGD") {
    active.value = 'trade'
  }
})
// 底部列表
@@ -122,15 +129,15 @@
}

:deep(.van-tabbar-item--active) {
  background-color: #12192F;
  color: $color_main !important;
  // background-color: #12192F;
  // color: $color_main !important;
}

.van-tabbar--fixed {
  z-index: 10;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #12192F;
  background-color: #fff;
}

.van-tabbar--fixed::after {