GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-05 15:36:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 调整布局和样式，增加卡片网格的内边距以避免溢出

Browse Source
This commit is contained in:
jxxghp
2026-06-05 08:24:16 +08:00
parent 1046cb276f
commit 3620b2a979
4 changed files with 62 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/@layouts/styles/_default-layout.scss
+2 -2
View File
@@ -11,9 +11,9 @@ html {
} }
body { body {
overflow: visible !important;
background: rgb(var(--v-theme-background)); background: rgb(var(--v-theme-background));
overscroll-behavior-y: contain; overscroll-behavior-y: contain;
overflow: visible !important;
--webkit-overflow-scrolling: touch; --webkit-overflow-scrolling: touch;
} }
@@ -36,8 +36,8 @@ body,
.layout-page-content { .layout-page-content {
@include mixins.boxed-content(true); @include mixins.boxed-content(true);
overflow: visible;
flex-grow: 1; flex-grow: 1;
overflow: clip visible;
// TODO: Use grid gutter variable here; // TODO: Use grid gutter variable here;
padding-block: 1.5rem; padding-block: 1.5rem;
src/views/dashboard/MediaServerLatest.vue
+20 -12
View File
@@ -68,20 +68,28 @@ onActivated(() => {
<VCardTitle>{{ t('dashboard.latest') }} - {{ name }}</VCardTitle> <VCardTitle>{{ t('dashboard.latest') }} - {{ name }}</VCardTitle>
</VCardItem> </VCardItem>
<ProgressiveCardGrid <div class="dashboard-card-grid-wrap">
:items="data" <ProgressiveCardGrid
:get-item-key="item => item.id || item.link || item.title" :items="data"
:min-item-width="144" :get-item-key="item => item.id || item.link || item.title"
:item-aspect-ratio="1.5" :min-item-width="144"
class="mx-3 mb-3" :item-aspect-ratio="1.5"
tabindex="0" tabindex="0"
> >
<template #default="{ item }"> <template #default="{ item }">
<PosterCard :media="item" /> <PosterCard :media="item" />
</template> </template>
</ProgressiveCardGrid> </ProgressiveCardGrid>
</div>
</VCard> </VCard>
</template> </template>
</VHover> </VHover>
</div> </div>
</template> </template>
<style scoped>
.dashboard-card-grid-wrap {
/* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
padding: 0 0.75rem 0.75rem;
}
</style>
src/views/dashboard/MediaServerLibrary.vue
+20 -12
View File
@@ -70,19 +70,27 @@ onActivated(() => {
</template> </template>
<VCardTitle>{{ t('dashboard.library') }}</VCardTitle> <VCardTitle>{{ t('dashboard.library') }}</VCardTitle>
</VCardItem> </VCardItem>
<ProgressiveCardGrid <div class="dashboard-card-grid-wrap">
:items="libraryList" <ProgressiveCardGrid
:get-item-key="item => item.id || item.name" :items="libraryList"
:min-item-width="240" :get-item-key="item => item.id || item.name"
:estimated-item-height="160" :min-item-width="240"
class="mx-3 mb-3" :estimated-item-height="160"
tabindex="0" tabindex="0"
> >
<template #default="{ item }"> <template #default="{ item }">
<LibraryCard :media="item" height="10rem" /> <LibraryCard :media="item" height="10rem" />
</template> </template>
</ProgressiveCardGrid> </ProgressiveCardGrid>
</div>
</VCard> </VCard>
</template> </template>
</VHover> </VHover>
</template> </template>
<style scoped>
.dashboard-card-grid-wrap {
/* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
padding: 0 0.75rem 0.75rem;
}
</style>
src/views/dashboard/MediaServerPlaying.vue
+20 -12
View File
@@ -71,19 +71,27 @@ onActivated(() => {
<VCardTitle>{{ t('dashboard.playing') }}</VCardTitle> <VCardTitle>{{ t('dashboard.playing') }}</VCardTitle>
</VCardItem> </VCardItem>
<ProgressiveCardGrid <div class="dashboard-card-grid-wrap">
:items="playingList" <ProgressiveCardGrid
:get-item-key="item => item.id || item.link || item.title" :items="playingList"
:min-item-width="240" :get-item-key="item => item.id || item.link || item.title"
:estimated-item-height="160" :min-item-width="240"
class="mx-3 mb-3" :estimated-item-height="160"
tabindex="0" tabindex="0"
> >
<template #default="{ item }"> <template #default="{ item }">
<BackdropCard :media="item" height="10rem" /> <BackdropCard :media="item" height="10rem" />
</template> </template>
</ProgressiveCardGrid> </ProgressiveCardGrid>
</div>
</VCard> </VCard>
</template> </template>
</VHover> </VHover>
</template> </template>
<style scoped>
.dashboard-card-grid-wrap {
/* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
padding: 0 0.75rem 0.75rem;
}
</style>