GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-06-16 21:20:45 +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

4
src/@layouts/styles/_default-layout.scss
View File

@@ -11,9 +11,9 @@ html {
}
body {
overflow: visible !important;
background: rgb(var(--v-theme-background));
overscroll-behavior-y: contain;
overflow: visible !important;
--webkit-overflow-scrolling: touch;
}
@@ -36,8 +36,8 @@ body,
.layout-page-content {
@include mixins.boxed-content(true);
overflow: visible;
flex-grow: 1;
overflow: clip visible;
// TODO: Use grid gutter variable here;
padding-block: 1.5rem;

32
src/views/dashboard/MediaServerLatest.vue
View File

@@ -68,20 +68,28 @@ onActivated(() => {
<VCardTitle>{{ t('dashboard.latest') }} - {{ name }}</VCardTitle>
</VCardItem>
<ProgressiveCardGrid
:items="data"
:get-item-key="item => item.id || item.link || item.title"
:min-item-width="144"
:item-aspect-ratio="1.5"
class="mx-3 mb-3"
tabindex="0"
>
<template #default="{ item }">
<PosterCard :media="item" />
</template>
</ProgressiveCardGrid>
<div class="dashboard-card-grid-wrap">
<ProgressiveCardGrid
:items="data"
:get-item-key="item => item.id || item.link || item.title"
:min-item-width="144"
:item-aspect-ratio="1.5"
tabindex="0"
>
<template #default="{ item }">
<PosterCard :media="item" />
</template>
</ProgressiveCardGrid>
</div>
</VCard>
</template>
</VHover>
</div>
</template>
<style scoped>
.dashboard-card-grid-wrap {
/* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
padding: 0 0.75rem 0.75rem;
}
</style>

32
src/views/dashboard/MediaServerLibrary.vue
View File

@@ -70,19 +70,27 @@ onActivated(() => {
</template>
<VCardTitle>{{ t('dashboard.library') }}</VCardTitle>
</VCardItem>
<ProgressiveCardGrid
:items="libraryList"
:get-item-key="item => item.id || item.name"
:min-item-width="240"
:estimated-item-height="160"
class="mx-3 mb-3"
tabindex="0"
>
<template #default="{ item }">
<LibraryCard :media="item" height="10rem" />
</template>
</ProgressiveCardGrid>
<div class="dashboard-card-grid-wrap">
<ProgressiveCardGrid
:items="libraryList"
:get-item-key="item => item.id || item.name"
:min-item-width="240"
:estimated-item-height="160"
tabindex="0"
>
<template #default="{ item }">
<LibraryCard :media="item" height="10rem" />
</template>
</ProgressiveCardGrid>
</div>
</VCard>
</template>
</VHover>
</template>
<style scoped>
.dashboard-card-grid-wrap {
/* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
padding: 0 0.75rem 0.75rem;
}
</style>

32
src/views/dashboard/MediaServerPlaying.vue
View File

@@ -71,19 +71,27 @@ onActivated(() => {
<VCardTitle>{{ t('dashboard.playing') }}</VCardTitle>
</VCardItem>
<ProgressiveCardGrid
:items="playingList"
:get-item-key="item => item.id || item.link || item.title"
:min-item-width="240"
:estimated-item-height="160"
class="mx-3 mb-3"
tabindex="0"
>
<template #default="{ item }">
<BackdropCard :media="item" height="10rem" />
</template>
</ProgressiveCardGrid>
<div class="dashboard-card-grid-wrap">
<ProgressiveCardGrid
:items="playingList"
:get-item-key="item => item.id || item.link || item.title"
:min-item-width="240"
:estimated-item-height="160"
tabindex="0"
>
<template #default="{ item }">
<BackdropCard :media="item" height="10rem" />
</template>
</ProgressiveCardGrid>
</div>
</VCard>
</template>
</VHover>
</template>
<style scoped>
.dashboard-card-grid-wrap {
/* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
padding: 0 0.75rem 0.75rem;
}
</style>