fix app mode ui

This commit is contained in:
jxxghp
2024-06-13 19:11:00 +08:00
parent 1fc964ec16
commit 12dfc5b407
6 changed files with 30 additions and 14 deletions
+8 -1
View File
@@ -9,7 +9,7 @@ const appMode = computed(() => {
<template> <template>
<div v-if="appMode" class="w-100" style="block-size: 3.5rem"> <div v-if="appMode" class="w-100" style="block-size: 3.5rem">
<VBottomNavigation grow horizontal color="primary"> <VBottomNavigation grow horizontal color="primary" class="footer-nav border-t">
<VBtn to="/dashboard"> <VBtn to="/dashboard">
<VIcon size="28">mdi-home-outline</VIcon> <VIcon size="28">mdi-home-outline</VIcon>
<span>首页</span> <span>首页</span>
@@ -33,3 +33,10 @@ const appMode = computed(() => {
</VBottomNavigation> </VBottomNavigation>
</div> </div>
</template> </template>
<
<style lang="scss" scoped>
.footer-nav {
padding-block-end: env(safe-area-inset-bottom);
}
</style>
}
+1 -1
View File
@@ -116,7 +116,7 @@ watch(isCompactMode, value => {
</VListItem> </VListItem>
<!-- 👉 FAQ --> <!-- 👉 FAQ -->
<VListItem href="https://github.com/jxxghp/MoviePilot/blob/main/README.md" target="_blank"> <VListItem href="https://wiki.movie-pilot.org" target="_blank">
<template #prepend> <template #prepend>
<VIcon class="me-2" icon="mdi-help-circle-outline" size="22" /> <VIcon class="me-2" icon="mdi-help-circle-outline" size="22" />
</template> </template>
+5 -5
View File
@@ -24,14 +24,11 @@
} }
.v-dialog > .v-overlay__content { .v-dialog > .v-overlay__content {
inline-size: calc(100% - 1rem);
margin-block-start: calc(env(safe-area-inset-top) + 1rem); margin-block-start: calc(env(safe-area-inset-top) + 1rem);
max-block-size: calc(100% - env(safe-area-inset-top) - 1rem); max-block-size: calc(100% - env(safe-area-inset-top) - 1rem);
} }
.v-dialog > .v-overlay__content{
inline-size: calc(100% - 1rem);
}
.v-dialog--fullscreen > .v-overlay__content{ .v-dialog--fullscreen > .v-overlay__content{
inline-size: 100%; inline-size: 100%;
margin-block-start: env(safe-area-inset-top); margin-block-start: env(safe-area-inset-top);
@@ -65,7 +62,6 @@
color: transparent; color: transparent;
--tw-gradient-from: #818cf8; --tw-gradient-from: #818cf8;
--tw-gradient-to: rgba(129,140,248,0%);
--tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to); --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
--tw-gradient-to: #c084fc; --tw-gradient-to: #c084fc;
} }
@@ -188,3 +184,7 @@
.v-tabs:not(.v-tabs-pill).v-tabs--horizontal { .v-tabs:not(.v-tabs-pill).v-tabs--horizontal {
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)); border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
} }
.v-fab--bottom {
padding-block-end: env(safe-area-inset-bottom);
}
+12 -3
View File
@@ -1,6 +1,15 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { Context } from '@/api/types' import type { Context } from '@/api/types'
import TorrentItem from '@/components/cards/TorrentItem.vue' import TorrentItem from '@/components/cards/TorrentItem.vue'
import { useDisplay } from 'vuetify'
// 显示器宽度
const display = useDisplay()
// APP
const appMode = computed(() => {
return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value
})
// 定义输入参数 // 定义输入参数
const props = defineProps({ const props = defineProps({
@@ -115,7 +124,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<VRow> <VRow :style="appMode ? 'margin-bottom: 56px' : ''">
<VCol> <VCol>
<VList v-if="dataList.length === 0" lines="three" class="rounded p-0 shadow-lg"> <VList v-if="dataList.length === 0" lines="three" class="rounded p-0 shadow-lg">
<VListItem> <VListItem>
@@ -263,8 +272,8 @@ onMounted(() => {
} }
@media (width <= 768px) { @media (width <= 768px) {
.orrent-list-vscroll { .torrent-list-vscroll {
block-size: calc(100vh - 10rem); block-size: calc(100vh - 8rem - env(safe-area-inset-bottom));
} }
} }
</style> </style>
+3 -3
View File
@@ -358,7 +358,7 @@ onMounted(fetchData)
</script> </script>
<template> <template>
<VCard> <VCard :style="appMode ? 'margin-bottom: 56px' : ''">
<VCardItem> <VCardItem>
<VCardTitle> <VCardTitle>
<VRow> <VRow>
@@ -533,12 +533,12 @@ onMounted(fetchData)
} }
.data-table-div { .data-table-div {
block-size: calc(100vh - 14rem); block-size: calc(100vh - 14rem - env(safe-area-inset-bottom));
} }
@media (width <= 768px) { @media (width <= 768px) {
.data-table-div { .data-table-div {
block-size: calc(100vh - 17rem); block-size: calc(100vh - 16rem - env(safe-area-inset-bottom));
} }
} }
</style> </style>
+1 -1
View File
@@ -170,7 +170,7 @@ onMounted(() => {
rel="noreferrer" rel="noreferrer"
class="text-indigo-500 transition duration-300 hover:underline" class="text-indigo-500 transition duration-300 hover:underline"
> >
https://github.com/jxxghp/MoviePilot/blob/main/README.md https://wiki.movie-pilot.org
</a> </a>
</span> </span>
</dd> </dd>