93 lines
1.8 KiB
Vue
93 lines
1.8 KiB
Vue
<template>
|
|
<section v-if="!pending" class="carousel-section">
|
|
<el-carousel
|
|
class="homepage-carousel"
|
|
height="auto"
|
|
:interval="5000"
|
|
arrow="never"
|
|
autoplay
|
|
>
|
|
<el-carousel-item v-for="(item, index) in carousel" :key="index">
|
|
<div class="carousel-item">
|
|
<el-image
|
|
class="carousel-image"
|
|
:src="getImageUrl(item)"
|
|
:alt="`Carousel Image ${index + 1}`"
|
|
fit="contain"
|
|
lazy
|
|
/>
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</section>
|
|
<section v-else>
|
|
<el-skeleton :rows="5" animated />
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
homepageData: {
|
|
type: Object as PropType<HomepageView>,
|
|
default: null,
|
|
},
|
|
pending: {
|
|
type: Boolean,
|
|
},
|
|
});
|
|
|
|
const { getImageUrl } = useDirectusImage();
|
|
|
|
const carousel = computed(() => props.homepageData?.carousel || []);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.carousel-section {
|
|
padding: 0;
|
|
}
|
|
|
|
.homepage-carousel .el-carousel__item {
|
|
width: 100%;
|
|
height: 33vw;
|
|
/* 16:9 Aspect Ratio */
|
|
}
|
|
|
|
.el-carousel__item h3 {
|
|
display: flex;
|
|
color: #475669;
|
|
opacity: 0.8;
|
|
line-height: 300px;
|
|
margin: 0;
|
|
}
|
|
|
|
.homepage-carousel .carousel-item {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #f5f7fa;
|
|
}
|
|
|
|
.carousel-image {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.carousel-image-caption {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
color: white;
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.homepage-carousel .el-carousel__item {
|
|
height: 50vw;
|
|
}
|
|
}
|
|
</style>
|