63 lines
1.7 KiB
Vue
63 lines
1.7 KiB
Vue
<script setup>
|
|
import {ref} from "vue";
|
|
import FlightHeaderInfo from "components/flights/FlightHeaderInfo.vue";
|
|
import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
|
|
|
|
const props = defineProps({
|
|
items: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const slide = ref(0);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-blue-1 q-py-lg">
|
|
<h3 class="text-center">Poslední lety</h3>
|
|
|
|
<q-carousel
|
|
v-model="slide"
|
|
swipeable
|
|
animated
|
|
control-color="primary"
|
|
navigation
|
|
padding
|
|
arrows
|
|
height="500px"
|
|
class="bg-blue-1 text-white"
|
|
>
|
|
<q-carousel-slide :name="idx" v-for="(flight, idx) in items" :key="idx" class="column no-wrap flex-center text-center">
|
|
<q-img
|
|
:src="flight.titlePhoto.url"
|
|
fit="cover"
|
|
ratio="16/9"
|
|
style="max-width: 1000px;"
|
|
height="400px"
|
|
v-if="flight.titlePhoto"
|
|
>
|
|
<div class="absolute-full">
|
|
<FlightHeaderInfo
|
|
:route-detail="{name: 'publicFlightDetailNew', params: {username: flight.pilot.publicUsername, flightSlug: flight.urlSlug}}"
|
|
:pilot="flight.pilot"
|
|
:flight="flight"
|
|
>
|
|
|
|
<div class="absolute-bottom-right">
|
|
<router-link
|
|
class="q-pa-lg"
|
|
:to="{name: 'publicProfileDetail', params: {username: flight.pilot.publicUsername}}"
|
|
>
|
|
{{ flight.pilot.publicUsername }}
|
|
</router-link>
|
|
</div>
|
|
|
|
</FlightHeaderInfo>
|
|
</div>
|
|
</q-img>
|
|
</q-carousel-slide>
|
|
</q-carousel>
|
|
</div>
|
|
</template>
|