fix footer ui

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);
 }

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>
+        <VIcon v-if="activeState.home" size="40">mdi-home</VIcon>
-        <span>首页</span>
+        <VIcon v-else size="40">mdi-home-outline</VIcon>
       </VBtn>
       <VBtn to="/ranking" :ripple="false">
-        <VIcon size="28">mdi-star-check-outline</VIcon>
+        <VIcon v-if="activeState.ranking" size="40">mdi-star</VIcon>
-        <span>推荐</span>
+        <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>
+        <VIcon v-if="activeState.movie" size="40">mdi-movie-open</VIcon>
-        <span><span></span>电影</span>
+        <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>
+        <VIcon v-if="activeState.tv" size="40">mdi-youtube-tv</VIcon>
-        <span>电视剧</span>
+        <VIcon v-else size="40">mdi-television</VIcon>
       </VBtn>
       <VBtn to="/apps" :ripple="false">
-        <VIcon size="28">mdi-dots-horizontal</VIcon>
+        <VIcon v-if="activeState.apps" size="40">mdi-dots-horizontal-circle</VIcon>
-        <span>更多</span>
+        <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);
 }
 

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,