From 631dc512b226b346fefaebbedf1ddd79c06cab71 Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Thu, 09 Oct 2025 11:06:15 +0800
Subject: [PATCH] 二三给的
---
src/components/fx-footer/index.vue | 58 ++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 38 insertions(+), 20 deletions(-)
diff --git a/src/components/fx-footer/index.vue b/src/components/fx-footer/index.vue
index 3e501f9..27b0e0e 100644
--- a/src/components/fx-footer/index.vue
+++ b/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 {
--
Gitblit v1.9.3