Capital/components/product/Carousel.vue

48 lines
1.6 KiB
Vue
Raw Normal View History

2024-07-02 15:07:22 +00:00
<template>
2024-08-11 16:54:49 +00:00
<v-carousel show-arrows="hover" cycle hide-delimiters>
2024-07-02 15:07:22 +00:00
<v-carousel-item v-for="(item, i) in props.products" :key="i" :src="item?.thumbnail" cover>
<v-sheet color="rgba(0, 0, 0, .4)" height="calc(100% + 24px)" class="p-5">
2024-07-02 15:07:22 +00:00
<v-row class="fill-height" align="center" justify="center">
<v-col class="text-center">
<h1 class="text-4xl font-bold text-white" :class="item?.archived ? 'line-through' : null">
{{ item?.title }}
</h1>
<p class="text-lg text-white">{{ item?.description }}</p>
<div class="flex justify-center mt-3">
<v-btn variant="text" color="white" prepend-icon="mdi-school" :text="t('learnMore')" :to="item._path" />
2024-07-02 15:07:22 +00:00
<v-btn
v-if="item?.url"
variant="text"
color="white"
prepend-icon="mdi-launch"
:text="t('open')"
2024-07-02 15:07:22 +00:00
:href="item?.url"
target="_blank"
/>
</div>
<div class="flex justify-center">
<v-chip
v-if="item?.archived"
label
prepend-icon="mdi-archive"
variant="text"
color="warning"
size="small"
>
{{ t("productArchived") }}
2024-07-02 15:07:22 +00:00
</v-chip>
</div>
</v-col>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</template>
<script setup lang="ts">
const props = defineProps<{ products: any[] }>()
const { t } = useI18n()
2024-07-02 15:07:22 +00:00
</script>