GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-12 02:21:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

test cards

Browse Source
This commit is contained in:
jxxghp
2023-06-29 12:52:32 +08:00
parent d565ed1272
commit 27fa2c631d
2 changed files with 47 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,51 +9,46 @@ const props = defineProps({
</script>
<template>
<VHover>
<template v-slot="{ isHovering }">
<VCard
class="card-img-overlay"
:class="isHovering ? 'bg-opacity-50' : ''"
<VCard
class="card-img-overlay"
>
<VImg
aspect-ratio="2/1"
:src="props.media?.poster_path"
cover
>
<VImg
aspect-ratio="2/1"
:src="props.media?.poster_path"
cover
<VChip
color="success"
variant="elevated"
size="small"
class="absolute left-2 top-2">
{{ props.media?.type }}
</VChip>
<VChip
color="primary"
variant="elevated"
size="small"
class="absolute right-2 top-2">
{{ props.media?.vote_average }}
</VChip>
<VCardText
class="flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer"
>
<VChip
color="success"
variant="elevated"
size="small"
class="absolute left-2 top-2">
{{ props.media?.type }}
</VChip>
<VChip
color="primary"
variant="elevated"
size="small"
class="absolute right-2 top-2">
{{ props.media?.vote_average }}
</VChip>
<VCardText
class="flex flex-col flex-wrap justify-end align-left text-white absolute bottom-0 cursor-pointer"
>
<span class="text-white font-bold">{{ props.media?.year }}</span>
<h1 class="text-white font-bold text-lg line-clamp-2 overflow-hidden text-ellipsis ...">
{{ props.media?.title }}
</h1>
<p class="text-white line-clamp-3 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>
<span class="text-white font-bold">{{ props.media?.year }}</span>
<h1 class="text-white font-bold text-lg line-clamp-2 overflow-hidden text-ellipsis ...">
{{ props.media?.title }}
</h1>
<p class="text-white line-clamp-3 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>
<style type="scss">

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

@@ -34,15 +34,16 @@ onMounted(fetchData);
>
<VSlideGroupItem v-for="data in dataList"
:key="data.tmdb_id"
v-slot="{ isSelected, toggle }"
>
<MediaCard
:media="data"
@click="toggle"
class="mx-1 media-slide-card"
:color="isSelected ? 'primary' : 'grey-lighten-1'"
>
</MediaCard>
<template v-slot="{ isSelected, toggle }" >
<MediaCard
:media="data"
@click="toggle"
class="mx-2 media-slide-card"
:color="isSelected ? 'primary' : 'grey-lighten-1'"
>
</MediaCard>
</template>
</VSlideGroupItem>
</VSlideGroup>
</template>