You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.5 KiB
71 lines
1.5 KiB
<template>
|
|
<section
|
|
class="featured-exhibiton-themes tw-grid tw-grid-cols-1 tw-gap-[20px] md:tw-gap-[30px] xl:tw-grid-cols-2 xl:tw-max-w-[1246px] xl:tw-mx-auto">
|
|
<div class="card tw-rounded-[20px] tw-overflow-hidden tw-h-full" v-for="(item, index) in themes" :key="index">
|
|
<a :href="localePath(item.url)" class="tw-relative tw-w-full tw-h-full tw-text-center">
|
|
<img :src="item.image"
|
|
class="tw-transition tw-duration-200 tw-ease-in-out tw-accent-base-hint xl:hover:tw-scale-110" />
|
|
<div
|
|
class="tw-absolute tw-m-auto tw-left-0 tw-right-0 tw-top-0 tw-bottom-0 t16 tw-font-normal tw-text-white tw-pointer-events-none md:t24">
|
|
{{ item.name }}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
themes: {
|
|
type: Array,
|
|
},
|
|
title: {
|
|
type: String,
|
|
},
|
|
},
|
|
created() {
|
|
if (this.$props.themes.length > 4) {
|
|
this.$props.themes = this.$props.themes.slice(0, 4);
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.featured-exhibiton-themes .card {
|
|
-webkit-mask-image: -webkit-radial-gradient(white, black);
|
|
}
|
|
|
|
img {
|
|
filter: brightness(0.5);
|
|
}
|
|
|
|
.row1 {
|
|
position: relative;
|
|
}
|
|
|
|
.right-arrow {
|
|
position: absolute;
|
|
top: 20%;
|
|
right: -20px;
|
|
border: 2px solid;
|
|
padding: 10px 15px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.card-text {
|
|
position: absolute;
|
|
color: white;
|
|
width: 100%;
|
|
top: 40%;
|
|
}
|
|
|
|
.zoom {
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.zoom-event:hover .zoom {
|
|
transform: scale(1.5);
|
|
}
|
|
</style>
|