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

优化卡片组件样式

Browse Source
This commit is contained in:
jxxghp
2025-07-10 22:00:06 +08:00
parent bc1849f0a0
commit 6691f40c49
11 changed files with 30 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/cards/BackdropCard.vue
View File

@@ -53,11 +53,11 @@ const getImgUrl = computed(() => {
class="w-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
>
<h1
class="mb-1 text-white text-shadow font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ..."
class="mb-1 text-white text-shadow font-bold text-lg line-clamp-2 overflow-hidden text-ellipsis ..."
>
{{ props.media?.title }}
</h1>
<span class="text-shadow">{{ props.media?.subtitle }}</span>
<span class="text-shadow text-sm">{{ props.media?.subtitle }}</span>
</VCardText>
</template>
</VImg>

14
src/components/cards/MediaCard.vue
View File

@@ -468,11 +468,11 @@ onBeforeUnmount(() => {
class="w-full h-full flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
style="background: linear-gradient(rgba(45, 55, 72, 40%) 0%, rgba(45, 55, 72, 90%) 100%)"
>
<span class="font-bold">{{ props.media?.year }}</span>
<h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
<span class="font-semibold text-sm">{{ props.media?.year }}</span>
<h1 class="mb-1 text-white font-bold text-lg line-clamp-1 overflow-hidden text-ellipsis ...">
{{ props.media?.title }}
</h1>
<p class="leading-4 line-clamp-4 overflow-hidden text-ellipsis ...">
<p class="line-clamp-3 overflow-hidden text-sm text-ellipsis ...">
{{ props.media?.overview }}
</p>
<div v-if="props.media?.collection_id" class="mb-3" @click.stop=""></div>
@@ -481,10 +481,16 @@ onBeforeUnmount(() => {
v-if="hasPermission({ is_superuser: userStore.superUser, ...userStore.permissions }, 'search')"
icon="mdi-magnify"
color="white"
size="small"
@click.stop="clickSearch"
/>
<VSpacer />
<IconBtn icon="mdi-heart" :color="isSubscribed ? 'error' : 'white'" @click.stop="handleSubscribe" />
<IconBtn
icon="mdi-heart"
:color="isSubscribed ? 'error' : 'white'"
size="small"
@click.stop="handleSubscribe"
/>
</div>
</VCardText>
<!-- 类型角标 -->

2
src/components/cards/PersonCard.vue
View File

@@ -90,7 +90,7 @@ function goPersonDetail() {
<div class="absolute inset-0 flex h-full w-full flex-col items-center p-2">
<div class="relative mt-2 mb-4 flex h-1/2 w-full justify-center">
<VAvatar
size="120"
size="90"
:class="{
'ring-1 ring-gray-700': isImageLoaded,
}"

4
src/components/cards/PosterCard.vue
View File

@@ -80,8 +80,8 @@ function goPlay(isHovering: boolean | null = false) {
style="background: linear-gradient(rgba(45, 55, 72, 40%) 0%, rgba(45, 55, 72, 90%) 100%)"
@click.stop="goPlay(hover.isHovering)"
>
<span class="font-bold">{{ props.media?.subtitle }}</span>
<h1 class="mb-1 text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
<span class="font-semibold text-sm">{{ props.media?.subtitle }}</span>
<h1 class="mb-1 text-white font-bold text-lg line-clamp-2 overflow-hidden text-ellipsis ...">
{{ props.media?.title }}
</h1>
</VCardText>

2
src/components/cards/SubscribeCard.vue
View File

@@ -445,6 +445,6 @@ function onSubscribeEditRemove() {
</template>
<style lang="scss" scoped>
.subscribe-card-background {
background-image: linear-gradient(90deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
background-image: linear-gradient(180deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
}
</style>

2
src/components/cards/SubscribeShareCard.vue
View File

@@ -189,6 +189,6 @@ function doDelete() {
</template>
<style lang="scss" scoped>
.subscribe-card-background {
background-image: linear-gradient(90deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
background-image: linear-gradient(180deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
}
</style>

6
src/components/slide/SlideView.vue
View File

@@ -179,15 +179,15 @@ onActivated(() => {
<style lang="scss" scoped>
.slider-container {
position: relative;
margin-block-end: 24px;
margin-block-end: 8px;
}
.slider-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-block-end: 12px;
gap: 8px;
margin-block-end: 8px;
padding-block: 0;
padding-inline: 8px;

9
src/pages/recommend.vue
View File

@@ -248,7 +248,13 @@ onActivated(async () => {
</div>
<!-- 设置面板 -->
<DialogWrapper v-model="dialog" width="35rem" class="settings-dialog" scrollable :fullscreen="!display.mdAndUp.value">
<DialogWrapper
v-model="dialog"
width="35rem"
class="settings-dialog"
scrollable
:fullscreen="!display.mdAndUp.value"
>
<VCard class="settings-card">
<VCardItem class="settings-card-header">
<VCardTitle>
@@ -332,7 +338,6 @@ onActivated(async () => {
}
.content-group {
margin-block-end: 24px;
transition: opacity 0.3s ease;
}

3
src/styles/custom.scss
View File

@@ -102,7 +102,6 @@ body {
.slider-header {
position: relative;
display: flex;
margin-block: 1.5rem 1rem;
}
.slider-title {
@@ -183,7 +182,7 @@ body {
}
.grid-media-card {
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
.grid-backdrop-card {

2
src/views/discover/MediaCardSlideView.vue
View File

@@ -49,7 +49,7 @@ onActivated(() => {
<SlideView v-if="componentLoaded">
<template #content>
<template v-for="data in dataList" :key="data.tmdb_id || data.douban_id || data.bangumi_id">
<MediaCard :media="data" height="15rem" width="10rem" />
<MediaCard :media="data" width="8rem" />
</template>
</template>
</SlideView>

2
src/views/discover/PersonCardSlideView.vue
View File

@@ -39,7 +39,7 @@ onMounted(fetchData)
<SlideView v-if="componentLoaded">
<template #content>
<template v-for="data in dataList" :key="data.id">
<PersonCard :person="data" height="15rem" width="10rem" />
<PersonCard :person="data" width="8rem" />
</template>
</template>
</SlideView>