<template>
|
<div class="relative z-30 footer">
|
<van-tabbar route v-model="active" active-color="#92D1FF" @change="changeIndex" fixed safe-area-inset-bottom>
|
<van-tabbar-item name="home" to="/home">
|
<template #icon>
|
<img :src="active == 'home' ? icon.home.active : icon.home.inactive" alt="home" />
|
</template>
|
</van-tabbar-item>
|
|
<van-tabbar-item name="quotes" to="/quotes/market">
|
<template #icon>
|
<img :src="active == 'quotes' ? icon.quotes.active : icon.quotes.inactive" alt="quotes" />
|
</template>
|
</van-tabbar-item>
|
|
<van-tabbar-item name="options" to="/trade/options">
|
<template #icon>
|
<img :src="active == 'options' ? icon.options.active : icon.options.inactive" alt="options" />
|
</template>
|
</van-tabbar-item>
|
|
<van-tabbar-item name="fund" to="/cryptos/fund">
|
<template #icon>
|
<img :src="active == 'fund' ? icon.fund.active : icon.fund.inactive" alt="fund" />
|
</template>
|
</van-tabbar-item>
|
|
<van-tabbar-item name="personal" to="/personal">
|
<template #icon>
|
<img :src="active == 'personal' ? icon.personal.active : icon.personal.inactive" alt="personal" />
|
</template>
|
</van-tabbar-item>
|
|
<!-- <van-tabbar-item name="quotes" to="/quotes/index?tabActive=1">
|
<template #icon>
|
<img :src="active == 'quotes' ? icon.quotes.active : icon.quotes.inactive" alt="quotes" />
|
</template>
|
</van-tabbar-item>
|
|
<van-tabbar-item name="trade" to="/trade">
|
<template #icon>
|
<img :src="active == 'trade' ? icon.trade.active : icon.trade.inactive" alt="trade" />
|
</template>
|
</van-tabbar-item>
|
|
<van-tabbar-item name="mine" to="/my">
|
<template #icon>
|
<img :src="active == 'mine' ? icon.mine.active : icon.mine.inactive" alt="mine" />
|
</template>
|
</van-tabbar-item> -->
|
</van-tabbar>
|
|
<!-- 全局悬浮客服按钮 -->
|
<div class="floating-customer-service" @click="$router.push('/customerService')">
|
<img src="@/assets/image/customer.png" alt="customer service" />
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, watch } from "vue";
|
import { useQuotesStore } from "@/store/quotes.store.js";
|
import { useI18n } from "vue-i18n";
|
import { useRoute, useRouter } from "vue-router";
|
import { themeStore } from "@/store/theme";
|
|
const router = useRouter();
|
const { t } = useI18n();
|
const route = useRoute();
|
|
/** 根据当前 path 自动判断选中的 tab name */
|
function getActiveFromPath(path) {
|
const p = path.replace(/\/$/, "") || "/";
|
if (p === "/home") return "home";
|
if (p === "/trade/options" || p.startsWith("/trade/options")) return "options";
|
if (p === "/trade/index" || p === "/trade") return "trade";
|
if (p.startsWith("/quotes")) return "quotes";
|
if (p.startsWith("/cryptos/fund")) return "fund";
|
if (p.startsWith("/personal") || p === "/personal/index") return "personal";
|
if (p === "/news/index") return "news";
|
if (p.startsWith("/my") || p === "/my/index") return "mine";
|
if (p.startsWith("/optional")) return "optional";
|
if (p.startsWith("/funds")) return "funds";
|
return "home";
|
}
|
|
const active = ref(getActiveFromPath(route.path));
|
|
watch(
|
() => route.path,
|
(path) => {
|
active.value = getActiveFromPath(path);
|
},
|
{ immediate: false }
|
);
|
|
let quotesStore = useQuotesStore();
|
|
// 底部图标列表
|
const icon = {
|
home: {
|
active: new URL("@/assets/imgs/footer/ft_1_a.png", import.meta.url),
|
inactive: new URL(`@/assets/imgs/footer/ft_1.png`, import.meta.url),
|
},
|
quotes: {
|
active: new URL("@/assets/imgs/footer/ft_2_a.png", import.meta.url),
|
inactive: new URL(`@/assets/imgs/footer/ft_2.png`, import.meta.url),
|
},
|
options: {
|
active: new URL("@/assets/imgs/footer/ft_3_a.png", import.meta.url),
|
inactive: new URL(`@/assets/imgs/footer/ft_3.png`, import.meta.url),
|
},
|
fund: {
|
active: new URL("@/assets/imgs/footer/ft_4_a.png", import.meta.url),
|
inactive: new URL("@/assets/imgs/footer/ft_4.png", import.meta.url),
|
},
|
trade: {
|
active: new URL("@/assets/imgs/footer/ft_2_a.png", import.meta.url),
|
inactive: new URL(`@/assets/imgs/footer/ft_2.png`, import.meta.url),
|
},
|
mine: {
|
active: new URL("@/assets/imgs/footer/ft_3_a.png", import.meta.url),
|
inactive: new URL(`@/assets/imgs/footer/ft_3.png`, import.meta.url),
|
},
|
personal: {
|
active: new URL("@/assets/imgs/footer/ft_5_a.png", import.meta.url),
|
inactive: new URL(`@/assets/imgs/footer/ft_5.png`, import.meta.url),
|
},
|
};
|
|
const changeIndex = (index) => {
|
// console.log(index)
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
:deep(.van-tabbar-item__text) {
|
font-size: 1.5rem;
|
color: $footer_color !important;
|
}
|
|
:deep(.van-tabbar-item--active) {
|
background-color: $footer_bg;
|
color: $color_main !important;
|
border-radius: 1.6rem;
|
}
|
|
.van-tabbar--fixed {
|
z-index: 10;
|
position: fixed !important;
|
bottom: 3rem !important;
|
left: 2.4rem !important;
|
right: 2.4rem !important;
|
width: auto !important;
|
background-color: $footer_bg;
|
box-shadow: 0rem 1.6rem 4.8rem 0.8rem rgba(24, 11, 0, 0.14);
|
border-top: 1px solid rgba(118, 128, 143, 0.1);
|
backdrop-filter: blur(1.25rem);
|
border-radius: 1.6rem;
|
}
|
|
.van-hairline--top-bottom::after {
|
border: none;
|
}
|
|
.blue {
|
color: $blue !important;
|
}
|
|
.active {
|
color: $active_line !important;
|
}
|
|
.footer {
|
img {
|
width: 3.5rem;
|
height: 3.5rem;
|
}
|
}
|
|
/* 全局悬浮客服按钮 */
|
.floating-customer-service {
|
position: fixed;
|
top: 60%;
|
left: 83%;
|
width: 6.5rem;
|
height: 6.5rem;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
box-shadow: 0 0.25rem 1.5rem rgba(146, 209, 255, 0.4);
|
z-index: 998;
|
transition: all 0.3s ease;
|
|
&:hover {
|
transform: scale(1.1);
|
box-shadow: 0 0.5rem 2rem rgba(146, 209, 255, 0.6);
|
}
|
|
&:active {
|
transform: scale(0.95);
|
}
|
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
}
|
</style>
|
