fix MediaCard

This commit is contained in:
jxxghp
2023-06-29 17:15:17 +08:00
parent 65f1eda0f4
commit aa00106cfe
2 changed files with 6 additions and 4 deletions

View File

@@ -29,6 +29,8 @@ const getChipColor = (type: string) => {
<VImg
aspect-ratio="2/1"
:src="props.media?.poster_path"
class="h-full w-full object-cover"
:class="hover.isHovering ? 'on-hover' : ''"
cover
>
<VChip
@@ -49,7 +51,7 @@ const getChipColor = (type: string) => {
v-show="hover.isHovering"
>
<span class="font-bold">{{ props.media?.year }}</span>
<h1 class="text-white font-extrabold text-xl line-clamp-2 overflow-hidden text-ellipsis ...">
<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 ...">
@@ -68,7 +70,7 @@ const getChipColor = (type: string) => {
</template>
<style type="scss">
.card-img-overlay {
box-shadow: 0 0 0 1px #ddd;
.on-hover img {
@apply brightness-50;
}
</style>

View File

@@ -29,7 +29,7 @@ onMounted(fetchData);
</script>
<template>
<div class="grid gap-3 grid-media-card">
<div class="grid gap-4 grid-media-card">
<MediaCard v-for="data in dataList"
:key="data.tmdb_id"
:media="data">