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