GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-07-07 07:21:29 +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> </script>
<template> <template>
<VHover> <VCard
<template v-slot="{ isHovering }"> class="card-img-overlay"
<VCard >
class="card-img-overlay" <VImg
:class="isHovering ? 'bg-opacity-50' : ''" aspect-ratio="2/1"
:src="props.media?.poster_path"
cover
> >
<VImg <VChip
aspect-ratio="2/1" color="success"
:src="props.media?.poster_path" variant="elevated"
cover 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 <span class="text-white font-bold">{{ props.media?.year }}</span>
color="success" <h1 class="text-white font-bold text-lg line-clamp-2 overflow-hidden text-ellipsis ...">
variant="elevated" {{ props.media?.title }}
size="small" </h1>
class="absolute left-2 top-2"> <p class="text-white line-clamp-3 overflow-hidden text-ellipsis ...">
{{ props.media?.type }} {{ props.media?.overview }}
</VChip> </p>
<VChip <div class="flex align-center justify-between">
color="primary" <IconBtn icon="mdi-magnify" color="white"
variant="elevated" />
size="small" <IconBtn icon="mdi-heart" color="white" />
class="absolute right-2 top-2"> </div>
{{ props.media?.vote_average }} </VCardText>
</VChip> </VImg>
<VCardText </VCard>
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>
</template> </template>
<style type="scss"> <style type="scss">

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

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