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

fix safari card style

Browse Source
This commit is contained in:
jxxghp
2023-06-30 12:50:39 +08:00
parent 2a97fd54a9
commit 27259d5862
9 changed files with 110 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,9 @@ import { MediaInfo } from "@/api/types";
// 输入参数
const props = defineProps({
media: Object as PropType<MediaInfo>
media: Object as PropType<MediaInfo>,
width: String,
height: String,
});
// 图片加载状态
@@ -18,71 +20,86 @@ const getChipColor = (type: string) => {
return "border-purple-600 bg-purple-600";
}
};
</script>
<template>
<VHover v-bind="props">
<template #default="hover" >
<VCard
v-bind="hover.props"
class="outline-none shadow ring-gray-500"
:class="{ 'scale-105 shadow-lg': hover.isHovering, 'ring-1 transition duration-300 ': isImageLoaded }"
>
<VImg
aspect-ratio="3/2"
:src="props.media?.poster_path"
class="h-full w-full object-cover"
:class="hover.isHovering ? 'on-hover' : ''"
cover
@load="isImageLoaded = true"
<template #default="hover">
<VCard
v-bind="hover.props"
:height="props.height"
:width="props.width"
class="outline-none shadow ring-gray-500"
:class="{
'scale-105 shadow-lg': hover.isHovering,
'ring-1 transition duration-300 ': isImageLoaded,
}"
>
<template #placeholder>
<div class="relative animate-pulse bg-gray-300 w-full"><div class="w-full" style="padding-bottom: 150%;"></div></div>
</template>
<!-- 类型角标 -->
<VChip
variant="elevated"
size="small"
:class="getChipColor(props.media?.type||'')"
class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold">
{{ props.media?.type }}
</VChip>
<!-- 评分角标 -->
<VChip
variant="elevated"
size="small"
v-if="props.media?.vote_average"
:class="getChipColor('')"
class="absolute right-2 top-2 bg-opacity-80 shadow-md text-white font-bold">
{{ props.media?.vote_average }}
</VChip>
<!-- 详情 -->
<VCardText
class="flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
v-show="hover.isHovering"
<VImg
aspect-ratio="2/3"
:src="props.media?.poster_path"
class="object-cover aspect-w-2 aspect-h-3"
:class="hover.isHovering ? 'on-hover' : ''"
@load="isImageLoaded = true"
cover
>
<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 ...">
{{ props.media?.title }}
</h1>
<p class="leading-4 line-clamp-4 overflow-hidden text-ellipsis ...">
{{ props.media?.overview }}
</p>
<div class="flex align-center justify-between">
<IconBtn icon="mdi-magnify" color="white"
/>
<IconBtn icon="mdi-heart" color="white" />
</div>
</VCardText>
</VImg>
</VCard>
</template>
</VHover>
<template #placeholder>
<div class="relative animate-pulse bg-gray-300 w-full">
<div class="w-full h-full"></div>
</div>
</template>
<!-- 类型角标 -->
<VChip
variant="elevated"
size="small"
:class="getChipColor(props.media?.type || '')"
class="absolute left-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
>
{{ props.media?.type }}
</VChip>
<!-- 评分角标 -->
<VChip
variant="elevated"
size="small"
v-if="props.media?.vote_average"
:class="getChipColor('')"
class="absolute right-2 top-2 bg-opacity-80 shadow-md text-white font-bold"
>
{{ props.media?.vote_average }}
</VChip>
<!-- 详情 -->
<VCardText
class="flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer pa-2"
v-show="hover.isHovering"
>
<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 ..."
>
{{ props.media?.title }}
</h1>
<p class="leading-4 line-clamp-4 overflow-hidden text-ellipsis ...">
{{ props.media?.overview }}
</p>
<div class="flex align-center justify-between">
<IconBtn icon="mdi-magnify" color="white" />
<IconBtn icon="mdi-heart" color="white" />
</div>
</VCardText>
</VImg>
</VCard>
</template>
</VHover>
</template>
<style type="scss">
.on-hover img {
@apply brightness-50;
}
.media-slide-card {
position: relative;
flex: 0 0 auto;
max-inline-size: 11rem;
}
</style>