From 0dbc7465447164fef24327b5d494870832d798dd Mon Sep 17 00:00:00 2001
From: 李 <344137771@qq.com>
Date: Tue, 26 May 2026 11:15:18 +0800
Subject: [PATCH] 1
---
src/components/fx-footer/index.vue | 247 +++++++++++++++++++++++++-----------------------
1 files changed, 129 insertions(+), 118 deletions(-)
diff --git a/src/components/fx-footer/index.vue b/src/components/fx-footer/index.vue
index 40f1887..a383518 100644
--- a/src/components/fx-footer/index.vue
+++ b/src/components/fx-footer/index.vue
@@ -1,159 +1,133 @@
<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="optional" to="/optional">
- <span :class="[active === 'optional' ? 'active' : '']">{{ $t("Optional") }}</span>
- <template #icon="props">
- <img :src="active == 'optional' ? icon.optional.active : icon.optional.inactive" alt="optional" />
+ <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/index?tabActive=1">
- <span :class="[active === 'quotes' ? 'active' : '']">{{ $t("首页") }}</span>
+ </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">
- <span :class="[active === 'trade' ? 'active' : '']">{{ $t("trade") }}</span>
<template #icon>
<img :src="active == 'trade' ? icon.trade.active : icon.trade.inactive" alt="trade" />
</template>
</van-tabbar-item>
- <!-- <van-tabbar-item name="funds" to="/funds"> -->
- <!-- <span :class="[active === 'funds' ? 'active' : '']">{{ $t('资金') }}</span> -->
- <!-- <template #icon="props"> -->
- <!-- <img :src="props.active ? icon.funds.active : icon.funds.inactive" alt="funds" /> -->
- <!-- </template> -->
- <!-- </van-tabbar-item> -->
- <!-- <van-tabbar-item name="news" to="/news">
- <span :class="[active === 'news' ? 'active' : '']">{{ $t("news") }}</span>
- <template #icon>
- <img :src="active == 'news' ? icon.news.active : icon.news.inactive" alt="news" />
- </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" alt="exchange"/>
- </template>
- </van-tabbar-item> -->
-
- <van-tabbar-item name="personal" to="/personal">
- <span :class="[active === 'personal' ? 'active' : '']">{{ $t('资产') }}</span>
- <template #icon="props">
- <img :src="props.active ? icon.personal.active : icon.personal.inactive" alt="personal" />
- </template>
- </van-tabbar-item>
<van-tabbar-item name="mine" to="/my">
- <span :class="[active === 'mine' ? 'active' : '']">{{ $t("my") }}</span>
<template #icon>
<img :src="active == 'mine' ? icon.mine.active : icon.mine.inactive" alt="mine" />
</template>
- </van-tabbar-item>
+ </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 } from "vue";
+import { ref, watch } from "vue";
import { useQuotesStore } from "@/store/quotes.store.js";
import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
-import { watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
import { themeStore } from "@/store/theme";
-const thStore = themeStore();
+
+const router = useRouter();
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 == "/funds/index") {
- active.value = "funds";
+
+/** 根据当前 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";
}
-let quotesStore = useQuotesStore();
+
+const active = ref(getActiveFromPath(route.path));
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 == "/funds/index") {
- active.value = "funds";
- }
- }
+ (path) => {
+ active.value = getActiveFromPath(path);
+ },
+ { immediate: false }
);
-// 底部列表
+
+let quotesStore = useQuotesStore();
+
+// 底部图标列表
const icon = {
- optional: {
- active: new URL(
- "@/assets/theme/dark/image/footer/optional-active.png",
- import.meta.url
- ),
- inactive: new URL(
- `../../assets/theme/${thStore.theme}/image/footer/optional.png`,
- import.meta.url
- ),
+ 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/theme/dark/image/footer/quotes-active.png",
- import.meta.url
- ),
- inactive: new URL(
- `../../assets/theme/${thStore.theme}/image/footer/quotes.png`,
- import.meta.url
- ),
+ 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),
},
- news: {
- active: new URL("@/assets/theme/dark/image/footer/news-active.png", import.meta.url),
- inactive: new URL(
- `../../assets/theme/${thStore.theme}/image/footer/news.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/theme/dark/image/footer/trade-active.png", import.meta.url),
- inactive: new URL(
- `../../assets/theme/${thStore.theme}/image/footer/trade.png`,
- import.meta.url
- ),
- },
- funds: {
- active: new URL('@/assets/theme/dark/image/footer/funds-active.png', import.meta.url),
- inactive: new URL(`../../assets/theme/${thStore.theme}/image/footer/funds.png`, import.meta.url),
+ 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/theme/dark/image/footer/menu-active.png", import.meta.url),
- inactive: new URL(
- `../../assets/theme/${thStore.theme}/image/footer/menu.png`,
- import.meta.url
- ),
+ 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/theme/dark/image/footer/funds-active.png", import.meta.url),
- inactive: new URL(
- `../../assets/theme/${thStore.theme}/image/footer/funds.png`,
- import.meta.url
- ),
+ 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)
};
@@ -161,23 +135,28 @@
<style lang="scss" scoped>
:deep(.van-tabbar-item__text) {
- font-size: 12px;
+ 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;
- padding-bottom: constant(safe-area-inset-bottom);
- padding-bottom: env(safe-area-inset-bottom);
+ position: fixed !important;
+ bottom: 3rem !important;
+ left: 2.4rem !important;
+ right: 2.4rem !important;
+ width: auto !important;
background-color: $footer_bg;
- box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
+ 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(10px);
+ backdrop-filter: blur(1.25rem);
+ border-radius: 1.6rem;
}
.van-hairline--top-bottom::after {
@@ -194,8 +173,40 @@
.footer {
img {
- width: 20px;
- height: 20px;
+ 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>
--
Gitblit v1.9.3