<template>
|
<div class="tabbar-footer">
|
<van-tabbar
|
route
|
v-model="active"
|
active-color="#1D91FF"
|
fixed
|
inactive-color="#868D9A"
|
safe-area-inset-bottom
|
class="bgFooter"
|
>
|
<div class="bgc"></div>
|
<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-item
|
name="profile"
|
:to="{
|
name: 'profile',
|
}"
|
>
|
<span>{{ $t("我的") }}</span>
|
<template #icon="props">
|
<img
|
:src="props.active ? profile.active : profile.inactive"
|
alt="perpetualContract"
|
/>
|
</template>
|
</van-tabbar-item> -->
|
<van-tabbar-item
|
name="userCenter"
|
:to="{
|
name: 'userCenter',
|
}"
|
>
|
<span>{{ $t("我的") }}</span>
|
<template #icon="props">
|
<img
|
:src="props.active ? userCenter.active : userCenter.inactive"
|
alt="userCenter"
|
/>
|
</template>
|
</van-tabbar-item>
|
</van-tabbar>
|
</div>
|
</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: {},
|
profile: {},
|
userCenter:{}
|
};
|
},
|
created() {
|
this.$nextTick(() => {
|
// 禁用右键
|
document.oncontextmenu = new Function("event.returnValue=false");
|
// 禁用选择
|
document.onselectstart = new Function("event.returnValue=false");
|
});
|
},
|
mounted() {
|
this.home = {
|
inactive: require(`@/assets/3x/资源 10@3x.png`),
|
active: require(`@/assets/3x/names1.png`),
|
};
|
this.qoutes = {
|
active: require(`@/assets/3x/asda.png`),
|
inactive: require(`@/assets/3x/资源 14@3x.png`),
|
};
|
this.trade = {
|
active: require(`@/assets/3x/namses2.png`),
|
inactive: require(`@/assets/3x/资源 13@3x.png`),
|
};
|
this.contract = {
|
active: require(`@/assets/3x/naamses3.png`),
|
inactive: require(`@/assets/3x/资源 12@3x.png`),
|
};
|
this.funds = {
|
active: require(`@/assets/3x/sses4.png`),
|
inactive: require(`@/assets/3x/资源 11@3x.png`),
|
};
|
this.userCenter = {
|
active: require(`@/assets/3x/sses5.png`),
|
inactive: require(`@/assets/3x/资源 15@3x.png`),
|
};
|
// this.profile = {
|
// active: require(`@/assets/3x/sses5.png`),
|
// inactive: require(`@/assets/3x/资源 15@3x.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;
|
pointer-events: none;
|
}
|
|
::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;
|
// }
|
// }
|
|
.tabbar-footer {
|
-webkit-user-select: none; /* Safari */
|
-moz-user-select: none; /* Firefox */
|
-ms-user-select: none; /* IE10+/Edge */
|
user-select: none; /* Standard syntax */
|
|
position: relative;
|
.bgc {
|
position: absolute;
|
left: 0;
|
top: 6px;
|
background-color: #f5f5f8;
|
width: calc(100% - 60px);
|
height: 60px;
|
border-radius: 30px;
|
margin: 0 30px;
|
}
|
}
|
::v-deep .van-tabbar-item__text {
|
position: relative;
|
z-index: 99;
|
}
|
::v-deep .van-tabbar-item {
|
// color: #d2d2dc !important;
|
}
|
::v-deep .van-tabbar-item--active {
|
color: #9691fa !important;
|
}
|
</style>
|
