mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-11 18:10:49 +08:00
67 lines
2.1 KiB
Vue
67 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { useDisplay } from 'vuetify'
|
|
|
|
const display = useDisplay()
|
|
const appMode = inject('pwaMode') && 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>
|
|
<div v-if="appMode" class="w-100" style="block-size: calc(3.5rem + env(safe-area-inset-bottom))">
|
|
<VBottomNavigation
|
|
grow
|
|
horizontal
|
|
color="primary"
|
|
class="footer-nav border-t"
|
|
style="block-size: calc(3.5rem + env(safe-area-inset-bottom))"
|
|
>
|
|
<VBtn to="/dashboard" :ripple="false">
|
|
<VIcon v-if="activeState.home" size="28">mdi-home</VIcon>
|
|
<VIcon v-else size="28">mdi-home-outline</VIcon>
|
|
</VBtn>
|
|
<VBtn to="/ranking" :ripple="false">
|
|
<VIcon v-if="activeState.ranking" size="28">mdi-star</VIcon>
|
|
<VIcon v-else size="28">mdi-star-outline</VIcon>
|
|
</VBtn>
|
|
<VBtn to="/subscribe/movie" :ripple="false">
|
|
<VIcon v-if="activeState.movie" size="28">mdi-movie-open</VIcon>
|
|
<VIcon v-else size="28">mdi-movie-open-outline</VIcon>
|
|
</VBtn>
|
|
<VBtn to="/subscribe/tv" :ripple="false">
|
|
<VIcon v-if="activeState.tv" size="28">mdi-television-play</VIcon>
|
|
<VIcon v-else size="28">mdi-television</VIcon>
|
|
</VBtn>
|
|
<VBtn to="/apps" :ripple="false">
|
|
<VIcon v-if="activeState.apps" size="28">mdi-dots-horizontal-circle</VIcon>
|
|
<VIcon v-else size="28">mdi-dots-horizontal</VIcon>
|
|
</VBtn>
|
|
</VBottomNavigation>
|
|
</div>
|
|
</template>
|
|
|
|
<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);
|
|
}
|
|
|
|
.footer-nav .v-btn--variant-text .v-btn__overlay {
|
|
background-color: transparent !important;
|
|
}
|
|
</style>
|