Showing
2 changed files
with
38 additions
and
9 deletions
components/ui-components/BackdropImage.vue
0 → 100644
| 1 | +<script lang="ts" setup> | ||
| 2 | +//#region --Props--. | ||
| 3 | +defineProps({ | ||
| 4 | + src: { | ||
| 5 | + type: String, | ||
| 6 | + required: true, | ||
| 7 | + nullable: false, | ||
| 8 | + }, | ||
| 9 | + title: { | ||
| 10 | + type: String, | ||
| 11 | + required: true, | ||
| 12 | + nullable: false, | ||
| 13 | + }, | ||
| 14 | +}); | ||
| 15 | +//#endregion | ||
| 16 | + | ||
| 17 | +//#region --Declaration--. | ||
| 18 | +const w: Window = window; | ||
| 19 | +//#endregion | ||
| 20 | +</script> | ||
| 21 | + | ||
| 22 | +<template> | ||
| 23 | + <section class="absolute inset-0 h-[500px] overflow-hidden z-0"> | ||
| 24 | + <v-img | ||
| 25 | + v-if="src" | ||
| 26 | + :alt="title" | ||
| 27 | + :src="`https://image.tmdb.org/t/p/original${src}`" | ||
| 28 | + :width="w.screen.width" | ||
| 29 | + aspect-ratio="16/9" | ||
| 30 | + class="w-full h-full object-cover opacity-30" | ||
| 31 | + cover | ||
| 32 | + max-height="500" | ||
| 33 | + /> | ||
| 34 | + </section> | ||
| 35 | +</template> | ||
| 36 | + | ||
| 37 | +<style scoped></style> |
| @@ -125,15 +125,7 @@ onMounted(() => { | @@ -125,15 +125,7 @@ onMounted(() => { | ||
| 125 | <!-- Contenu du film --> | 125 | <!-- Contenu du film --> |
| 126 | <div v-else-if="movie" class="relative"> | 126 | <div v-else-if="movie" class="relative"> |
| 127 | <!-- Backdrop image --> | 127 | <!-- Backdrop image --> |
| 128 | - <div class="absolute inset-0 h-[500px] overflow-hidden z-0"> | 128 | + <ui-components-backdrop-image v-if="movie.backdrop_path" :src="movie.poster_path" :title="movie.title" /> |
| 129 | - <div class="absolute inset-0 bg-gradient-to-b from-transparent to-gray-900" /> | ||
| 130 | - <img | ||
| 131 | - v-if="movie.backdrop_path" | ||
| 132 | - :alt="movie.title" | ||
| 133 | - :src="`https://image.tmdb.org/t/p/original${movie.backdrop_path}`" | ||
| 134 | - class="w-full h-full object-cover opacity-30" | ||
| 135 | - /> | ||
| 136 | - </div> | ||
| 137 | 129 | ||
| 138 | <!-- Contenu principal --> | 130 | <!-- Contenu principal --> |
| 139 | <div class="container mx-auto px-4 py-8 relative z-10 pt-20"> | 131 | <div class="container mx-auto px-4 py-8 relative z-10 pt-20"> |
-
Please register or login to post a comment