From a1fc87bb1ede411828f362843c89fc2fa1ee6524 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Fri, 14 Jun 2024 07:15:17 +0800
Subject: [PATCH] fix footer ui

---
 src/@core/scss/base/placeholders/_misc.scss |  2 +-
 src/layouts/components/Footer.vue           | 37 +++++++++++++++------
 src/router/menu.ts                          |  6 ++--
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/@core/scss/base/placeholders/_misc.scss b/src/@core/scss/base/placeholders/_misc.scss
index 87a3ed67..c36f73f5 100644
--- a/src/@core/scss/base/placeholders/_misc.scss
+++ b/src/@core/scss/base/placeholders/_misc.scss
@@ -3,5 +3,5 @@
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   /* stylelint-enable */
-  background-color: rgb(var(--v-theme-surface), 0.9);
+  background-color: rgb(var(--v-theme-surface), 0.8);
 }
diff --git a/src/layouts/components/Footer.vue b/src/layouts/components/Footer.vue
index 099571f1..f132e671 100644
--- a/src/layouts/components/Footer.vue
+++ b/src/layouts/components/Footer.vue
@@ -5,6 +5,19 @@ const display = useDisplay()
 const appMode = computed(() => {
   return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value
 })
+
+const route = useRoute()
+
+// 各按钮活动状态
+const activeState = computed(() => {
+  return {
+    home: route.path === '/dashboard',
+    ranking: route.path === '/ranking',
+    movie: route.path === '/subscribe-movie',
+    tv: route.path === '/subscribe-tv',
+    apps: route.path === '/apps',
+  }
+})
 </script>
 
 <template>
@@ -17,24 +30,24 @@ const appMode = computed(() => {
       style="block-size: calc(3.5rem + env(safe-area-inset-bottom))"
     >
       <VBtn to="/dashboard" :ripple="false">
-        <VIcon size="28">mdi-home-outline</VIcon>
-        <span>首页</span>
+        <VIcon v-if="activeState.home" size="40">mdi-home</VIcon>
+        <VIcon v-else size="40">mdi-home-outline</VIcon>
       </VBtn>
       <VBtn to="/ranking" :ripple="false">
-        <VIcon size="28">mdi-star-check-outline</VIcon>
-        <span>推荐</span>
+        <VIcon v-if="activeState.ranking" size="40">mdi-star</VIcon>
+        <VIcon v-else size="40">mdi-star-outline</VIcon>
       </VBtn>
       <VBtn to="/subscribe-movie?tab=mysub" :ripple="false">
-        <VIcon size="28">mdi-movie-roll</VIcon>
-        <span><span></span>电影</span>
+        <VIcon v-if="activeState.movie" size="40">mdi-movie-open</VIcon>
+        <VIcon v-else size="40">mdi-movie-open-outline</VIcon>
       </VBtn>
       <VBtn to="/subscribe-tv?tab=mysub" :ripple="false">
-        <VIcon size="28">mdi-television-classic</VIcon>
-        <span>电视剧</span>
+        <VIcon v-if="activeState.tv" size="40">mdi-youtube-tv</VIcon>
+        <VIcon v-else size="40">mdi-television</VIcon>
       </VBtn>
       <VBtn to="/apps" :ripple="false">
-        <VIcon size="28">mdi-dots-horizontal</VIcon>
-        <span>更多</span>
+        <VIcon v-if="activeState.apps" size="40">mdi-dots-horizontal-circle</VIcon>
+        <VIcon v-else size="40">mdi-dots-horizontal-circle-outline</VIcon>
       </VBtn>
     </VBottomNavigation>
   </div>
@@ -42,6 +55,10 @@ const appMode = computed(() => {
 <
 <style lang="scss">
 .footer-nav {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  background-color: rgb(var(--v-theme-surface), 0.8);
   padding-block-end: env(safe-area-inset-bottom);
 }
 
diff --git a/src/router/menu.ts b/src/router/menu.ts
index 63fc172d..1183426e 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -9,7 +9,7 @@ export const SystemNavMenus = [
   },
   {
     title: '推荐',
-    icon: 'mdi-star-check-outline',
+    icon: 'mdi-star-outline',
     to: '/ranking',
     header: '发现',
     admin: false,
@@ -24,7 +24,7 @@ export const SystemNavMenus = [
   {
     title: '电影',
     full_title: '电影订阅',
-    icon: 'mdi-movie-roll',
+    icon: 'mdi-movie-open-outline',
     to: '/subscribe-movie?tab=mysub',
     header: '订阅',
     admin: false,
@@ -32,7 +32,7 @@ export const SystemNavMenus = [
   {
     title: '电视剧',
     full_title: '电视剧订阅',
-    icon: 'mdi-television-classic',
+    icon: 'mdi-television',
     to: '/subscribe-tv?tab=mysub',
     header: '订阅',
     admin: false,