<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: 'financialManagement',
|
}"
|
>
|
<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>
|
