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

fix: 优化媒体详情按钮布局

Browse Source
This commit is contained in:
jxxghp
2026-07-05 11:56:11 +08:00
parent e1ba13abf2
commit e16870859d
1 changed files with 31 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/discover/MediaDetailView.vue
+31 -8
View File
@@ -804,7 +804,7 @@ onUnmounted(() => {
" "
variant="tonal" variant="tonal"
color="primary" color="primary"
class="mb-2" class="media-action-button"
> >
<template #prepend> <template #prepend>
<VIcon icon="mdi-magnify" /> <VIcon icon="mdi-magnify" />
@@ -828,7 +828,7 @@ onUnmounted(() => {
" "
variant="tonal" variant="tonal"
color="info" color="info"
class="ms-2 mb-2" class="media-action-button"
@click="handleSubtitleSearch" @click="handleSubtitleSearch"
> >
<template #prepend> <template #prepend>
@@ -838,7 +838,7 @@ onUnmounted(() => {
</VBtn> </VBtn>
<VBtn <VBtn
v-if="canSubscribe && (mediaDetail.type === '电影' || mediaDetail.tmdb_id || mediaDetail.douban_id || mediaDetail.bangumi_id)" v-if="canSubscribe && (mediaDetail.type === '电影' || mediaDetail.tmdb_id || mediaDetail.douban_id || mediaDetail.bangumi_id)"
class="ms-2 mb-2" class="media-action-button"
:color="getSubscribeColor" :color="getSubscribeColor"
variant="tonal" variant="tonal"
@click="handleSubscribe()" @click="handleSubscribe()"
@@ -848,7 +848,7 @@ onUnmounted(() => {
</template> </template>
{{ getSubscribeText }} {{ getSubscribeText }}
</VBtn> </VBtn>
<VBtn v-if="existsItemId" class="ms-2 mb-2" variant="tonal" @click="handlePlay()"> <VBtn v-if="existsItemId" class="media-action-button" variant="tonal" @click="handlePlay()">
<template #prepend> <template #prepend>
<VIcon icon="mdi-play" /> <VIcon icon="mdi-play" />
</template> </template>
@@ -1469,15 +1469,30 @@ a.crew-name {
} }
.media-actions { .media-actions {
--media-action-gap: 0.75rem;
position: relative; position: relative;
display: flex; display: grid;
flex-shrink: 0; flex-shrink: 0;
flex-wrap: wrap; grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center; gap: var(--media-action-gap);
inline-size: min(100%, 22rem);
justify-content: center; justify-content: center;
margin-block-start: 1rem; margin-block-start: 1rem;
} }
.media-action-button {
inline-size: 100%;
min-inline-size: 0;
}
.media-actions > .media-action-button:only-child,
.media-actions > .media-action-button:last-child:nth-child(odd):not(:first-child) {
grid-column: 1 / -1;
inline-size: calc((100% - var(--media-action-gap)) / 2);
justify-self: center;
}
@media (width >= 1280px) { @media (width >= 1280px) {
.media-actions { .media-actions {
margin-block-start: 0; margin-block-start: 0;
@@ -1486,9 +1501,17 @@ a.crew-name {
@media (width >= 640px) { @media (width >= 640px) {
.media-actions { .media-actions {
flex-wrap: nowrap; display: flex;
gap: 0.5rem;
inline-size: auto;
justify-content: flex-end; justify-content: flex-end;
} }
.media-action-button,
.media-actions > .media-action-button:only-child,
.media-actions > .media-action-button:last-child:nth-child(odd):not(:first-child) {
inline-size: auto;
}
} }
.media-overview-left { .media-overview-left {