mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-30 12:49:55 +08:00
77 lines
2.2 KiB
Vue
77 lines
2.2 KiB
Vue
<script lang="ts" setup>
|
|
import { MediaInfo } from "@/api/types";
|
|
|
|
// 输入参数
|
|
const props = defineProps({
|
|
media: Object as PropType<MediaInfo>
|
|
});
|
|
|
|
const getChipColor = (type: string) => {
|
|
if (type === "电影") {
|
|
return "border-blue-500 bg-blue-600";
|
|
} else if (type === "电视剧") {
|
|
return "border-purple-600 bg-purple-600";
|
|
} else {
|
|
return "gray";
|
|
}
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<VHover v-bind="props">
|
|
<template #default="hover" >
|
|
<VCard
|
|
v-bind="hover.props"
|
|
class="outline-none ring-1 transition duration-300 shadow ring-gray-500"
|
|
:class="hover.isHovering ? 'scale-105 shadow-lg' : ''"
|
|
>
|
|
<VImg
|
|
aspect-ratio="2/1"
|
|
:src="props.media?.poster_path"
|
|
class="h-full w-full object-cover"
|
|
:class="hover.isHovering ? 'on-hover' : ''"
|
|
cover
|
|
>
|
|
<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"
|
|
class="absolute right-2 top-2 bg-opacity-80 shadow-md bg-green-500 border-green-600 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;
|
|
}
|
|
</style>
|