<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-item name="optional" to="/optional">
|
<span :class="[active === 'optional' ? 'active' : '']">{{ $t('Optional') }}</span>
|
<template #icon="props">
|
<img :src="props.active ? icon.optional.active : icon.optional.inactive" />
|
</template>
|
</van-tabbar-item> -->
|
<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" />
|
</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" />
|
</template>
|
</van-tabbar-item>
|
|
<van-tabbar-item name="STO" to="/ICO/ico">
|
<span :class="[active === 'STO' ? 'active' : '']">STO</span>
|
<template #icon="props">
|
<img :src="props.active ? icon.sto.active : icon.sto.inactive" />
|
</template>
|
</van-tabbar-item>
|
|
<van-tabbar-item name="btcusdt" to="/cryptos/trade/btcusdt">
|
<span :class="[active === 'btcusdt' ? 'active' : '']">{{ $t('现货') }}</span>
|
<template #icon="props">
|
<img :src="props.active ? icon.btcusdt.active : icon.btcusdt.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">
|
<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>
|
<template #icon="props">
|
<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">
|
<img :src="props.active ? icon.documentation.active : icon.documentation.inactive" />
|
</template>
|
</van-tabbar-item> -->
|
|
<!-- <van-tabbar-item name="trade" to="/exchange">
|
<span>{{ $t('trade') }}</span>
|
<template #icon="props">
|
<img :src="props.active ? icon.trade.active : icon.trade.inactive" />
|
</template>
|
</van-tabbar-item> -->
|
|
<!-- <van-tabbar-item name="mine" to="/my">
|
<span :class="[active === 'mine' ? 'active' : '']">{{ $t('my') }}</span>
|
<template #icon="props">
|
<img :src="props.active ? icon.mine.active : icon.mine.inactive" />
|
</template>
|
</van-tabbar-item> -->
|
|
<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" />
|
</template>
|
</van-tabbar-item>
|
</van-tabbar>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from "vue";
|
import { useQuotesStore } from "@/store/quotes.store.js";
|
import { useI18n } from "vue-i18n";
|
import { useRoute } from 'vue-router';
|
import { watch } from "vue";
|
const { t } = useI18n()
|
const active = ref('home')
|
const route = useRoute()
|
if (route.path == "/trade/index") {
|
active.value = 'trade'
|
} else if (route.path.indexOf('/quotes') != -1) {
|
active.value = 'quotes'
|
} else if (route.path == "/news/index") {
|
active.value = 'news'
|
} else if (route.path == "/my/index") {
|
active.value = 'mine'
|
} else if (route.path == "/optional/index") {
|
active.value = 'optional'
|
} else if (route.path == "/cryptos/funds") {
|
active.value = 'funds'
|
} else if (route.path == "/homePage/index") {
|
active.value = 'homePage'
|
} else if (route.path == "/my/assets") {
|
active.value = 'assets'
|
} else if (route.path == "/documentation/index") {
|
active.value = 'documentation'
|
} else if (route.path == "/ICO/ico") {
|
active.value = 'sto'
|
}
|
let quotesStore = useQuotesStore()
|
|
watch(() => route.path, (nv) => {
|
if (route.path == "/trade/index") {
|
active.value = 'trade'
|
} else if (route.path.indexOf('/quotes') != -1) {
|
active.value = 'quotes'
|
} else if (route.path == "/news/index") {
|
active.value = 'news'
|
} else if (route.path == "/my/index") {
|
active.value = 'mine'
|
} else if (route.path == "/optional/index") {
|
active.value = 'optional'
|
} else if (route.path == "/homePage/index") {
|
active.value = 'homePage'
|
} else if (route.path == "/my/assets") {
|
active.value = 'assets'
|
} else if (route.path == "/documentation/index") {
|
active.value = 'documentation'
|
} else if (route.path == "/ICO/ico") {
|
active.value = 'sto'
|
}
|
})
|
// 底部列表
|
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),
|
// },
|
home: {
|
active: new URL('@/assets/imgs/footer/home-active.png', import.meta.url),
|
inactive: new URL('@/assets/imgs/footer/home.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),
|
},
|
// news: {
|
// active: new URL('@/assets/imgs/footer/news-active.png', import.meta.url),
|
// inactive: new URL('@/assets/imgs/footer/news.png', import.meta.url),
|
// },
|
sto: {
|
active: new URL('@/assets/imgs/footer/sto-active.png', import.meta.url),
|
inactive: new URL('@/assets/imgs/footer/sto.png', import.meta.url),
|
},
|
documentation: {
|
active: new URL('@/assets/imgs/footer/quotes-active.png', import.meta.url),
|
inactive: new URL('@/assets/imgs/footer/quotes.png', import.meta.url),
|
},
|
btcusdt: {
|
active: new URL('@/assets/imgs/footer/trade-active.png', import.meta.url),
|
inactive: new URL('@/assets/imgs/footer/trade.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),
|
},
|
// 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),
|
},
|
assets: {
|
active: new URL('@/assets/imgs/footer/assets-active.png', import.meta.url),
|
inactive: new URL('@/assets/imgs/footer/assets.png', import.meta.url),
|
}
|
}
|
const changeIndex = (index) => {
|
// console.log(index)
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
:deep(.van-tabbar-item__text) {
|
font-size: 12px;
|
color: #7f7f7f;
|
}
|
|
:deep(.van-tabbar-item--active) {
|
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;
|
}
|
|
.van-tabbar--fixed::after {
|
border-color: $white;
|
}
|
|
// .blue {
|
// color: $blue !important;
|
// }
|
|
.active {
|
color: #292929 !important;
|
}
|
|
.footer {
|
img {
|
width: 20px;
|
height: 20px;
|
}
|
}
|
</style>
|
