mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-05 15:36:49 +08:00
fix app mode ui
This commit is contained in:
@@ -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>
|
||||||
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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);
|
||||||
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user