73 lines
1.6 KiB
Vue
73 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import OutlinedButton from '@/components/basics/outlinedButton.vue';
|
|
import { useConcertStore } from '@/data/stores/concertStore';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const concertStore = useConcertStore()
|
|
const router = useRouter()
|
|
</script>
|
|
|
|
<template>
|
|
<v-carousel
|
|
hide-delimiters
|
|
hide-delimiter-background
|
|
height="700"
|
|
show-arrows
|
|
>
|
|
<template #prev="{ props }">
|
|
<v-btn
|
|
variant="text"
|
|
@click="props.onClick"
|
|
icon="mdi-chevron-left"
|
|
/>
|
|
</template>
|
|
|
|
<template #next="{ props }">
|
|
<v-btn
|
|
variant="text"
|
|
@click="props.onClick"
|
|
icon="mdi-chevron-right"
|
|
/>
|
|
</template>
|
|
|
|
<v-carousel-item
|
|
v-for="band in concertStore.bands"
|
|
:src="'http://localhost:3000/static/' + band.imageMembers"
|
|
cover
|
|
>
|
|
<v-card
|
|
class="position-absolute bottom-0"
|
|
:title="band.name"
|
|
width="100%"
|
|
:rounded="false"
|
|
background-opacity="50%"
|
|
>
|
|
<v-card-text>
|
|
<div>
|
|
{{ band.descriptionDe }}
|
|
</div>
|
|
|
|
<outlined-button
|
|
append-icon="mdi-arrow-right"
|
|
class="mt-2"
|
|
color="primary"
|
|
@click="router.push('bands/' + band.name.replaceAll(' ', '-').toLowerCase())"
|
|
>
|
|
{{ $t('tickets', 2) }}
|
|
</outlined-button>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-carousel-item>
|
|
</v-carousel>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.v-card {
|
|
background: rgba(255, 255, 255, .7);
|
|
color: black;
|
|
}
|
|
|
|
.v-card-text {
|
|
font-weight: bold;
|
|
}
|
|
</style> |