<template>
|
<van-tabbar route v-model="active" active-color="#1D91FF" fixed inactive-color="#868D9A" safe-area-inset-bottom
|
class="bgFooter">
|
<van-tabbar-item name="home" to="/home">
|
<span>{{ $t('首页') }}</span>
|
<template #icon="props">
|
<img :src="props.active ? home.active : home.inactive" alt="home" />
|
</template>
|
</van-tabbar-item>
|
<van-tabbar-item name="quotes" :to="{ name: 'Quotes', query: { active: 2 } }">
|
<span>{{ $t('市场') }}</span>
|
<template #icon="props">
|
<img :src="props.active ? qoutes.active : qoutes.inactive" alt="Quotes" />
|
</template>
|
</van-tabbar-item>
|
<van-tabbar-item name="/trade/btc" :to="{ name: 'Trade', params: { symbol: getStorage('tradeSymbol') || 'btc' } }">
|
<span>{{ $t('交易') }}</span>
|
<template #icon="props">
|
<img :src="props.active ? trade.active : trade.inactive" alt="trade" />
|
</template>
|
</van-tabbar-item>
|
<van-tabbar-item name="perpetualContract/btc"
|
:to="{ name: 'perpetualContract', params: { symbol: getStorage('symbol') || 'btc' } }">
|
<span>{{ $t('合约') }}</span>
|
<template #icon="props">
|
<img :src="props.active ? contract.active : contract.inactive" alt="perpetualContract" />
|
</template>
|
</van-tabbar-item>
|
<van-tabbar-item name="funds" to="/funds">
|
<span>{{ $t('资金') }}</span>
|
<template #icon="props">
|
<img :src="props.active ? funds.active : funds.inactive" alt="funds" />
|
</template>
|
</van-tabbar-item>
|
</van-tabbar>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex';
|
import { getStorage } from '@/utils/utis'
|
export default {
|
props: {
|
isActive: {
|
type: Boolean,
|
default: true
|
},
|
},
|
components: {
|
|
},
|
computed: {
|
...mapGetters({
|
theme: 'home/theme'
|
}),
|
},
|
data() {
|
return {
|
getStorage,
|
active: 'home',
|
home: {
|
},
|
qoutes: {
|
|
},
|
trade: {
|
|
},
|
contract: {
|
|
},
|
funds: {
|
|
}
|
}
|
},
|
mounted() {
|
this.home = {
|
active: require(`../../assets/theme/${this.theme}/image/footer/home1.png`),
|
inactive: require(`../../assets/theme/${this.theme}/image/footer/home2.png`),
|
}
|
this.qoutes = {
|
active: require(`../../assets/theme/${this.theme}/image/footer/quotes1.png`),
|
inactive: require(`../../assets/theme/${this.theme}/image/footer/quotes2.png`),
|
}
|
this.trade = {
|
active: require(`../../assets/theme/${this.theme}/image/footer/trade1.png`),
|
inactive: require(`../../assets/theme/${this.theme}/image/footer/trade2.png`),
|
}
|
this.contract = {
|
active: require(`../../assets/theme/${this.theme}/image/footer/contract1.png`),
|
inactive: require(`../../assets/theme/${this.theme}/image/footer/contract2.png`),
|
}
|
this.funds = {
|
active: require(`../../assets/theme/${this.theme}/image/footer/funds1.png`),
|
inactive: require(`../../assets/theme/${this.theme}/image/footer/funds2.png`),
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "../../assets/init.scss";
|
|
.van-tabbar--fixed {
|
z-index: 10;
|
padding-bottom: constant(safe-area-inset-bottom);
|
padding-bottom: env(safe-area-inset-bottom);
|
}
|
|
.van-tabbar {
|
height: 108px;
|
font-size: 22px;
|
}
|
|
.van-tabbar-item__icon img {
|
height: 56px;
|
width: 56px;
|
}
|
|
::v-deep .van-tabbar-item__icon {
|
margin-bottom: 9px;
|
}
|
|
::v-deep .van-tabbar-item__text {
|
text-align: center;
|
}
|
|
.bgFooter {
|
::v-deep .van-tabbar-item--active {
|
@include themify() {
|
background: themed("footer_background");
|
}
|
}
|
|
::v-deep .van-tabbar-item--active {
|
@include themify() {
|
color: themed("color_main") !important;
|
}
|
}
|
}
|
|
.bg-night {
|
::v-deep .van-tabbar-item--active {
|
background: $night;
|
}
|
}
|
</style>
|
