109 lines
2.8 KiB
Vue
109 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
title: string
|
|
description: string | number
|
|
imgPath: string | null
|
|
linkTarget?: '_blank' | '_self'
|
|
url?: string
|
|
alt?: string
|
|
class?: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
const { locale } = useI18n()
|
|
const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
|
|
|
|
const isNoImage = computed(() => {
|
|
return !props.imgPath || props.imgPath === null
|
|
})
|
|
const isShowOverlay = computed(() => {
|
|
return props.title || props.description
|
|
})
|
|
|
|
const handleLinkClick = (title: string) => {
|
|
const trackingData = {
|
|
tracking: {
|
|
click_item: title,
|
|
action_type: 'click',
|
|
click_sarea: '',
|
|
},
|
|
}
|
|
sendLog(locale.value, useAnalyticsLogDataDirect(trackingData, 1))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="[
|
|
'card-news',
|
|
{ 'no-image': isNoImage },
|
|
{ 'is-clickable': props.url },
|
|
props.class,
|
|
]"
|
|
>
|
|
<img
|
|
v-if="props.imgPath"
|
|
:src="props.imgPath"
|
|
:alt="props.title || props.alt"
|
|
class="card-image"
|
|
loading="lazy"
|
|
/>
|
|
<span v-else class="card-stove">
|
|
<AtomsIconsStove />
|
|
</span>
|
|
<div v-if="isShowOverlay" class="card-overlay">
|
|
<h3 v-if="props.title" class="card-title">
|
|
{{ props.title }}
|
|
</h3>
|
|
<p v-if="props.description" class="card-description">
|
|
{{ props.description }}
|
|
</p>
|
|
</div>
|
|
<AtomsLocaleLink
|
|
v-if="props.url"
|
|
:to="props.url"
|
|
:target="props.linkTarget || '_self'"
|
|
class="card-link"
|
|
@click="handleLinkClick(props.title)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card-news {
|
|
@apply overflow-hidden relative flex flex-col items-center justify-center h-full rounded-lg
|
|
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
|
|
after:border after:border-white/10 after:rounded-lg;
|
|
}
|
|
.card-news.is-clickable:hover .card-image,
|
|
.card-news.is-clickable:hover .card-stove {
|
|
@apply scale-110;
|
|
}
|
|
.card-image {
|
|
@apply transition-transform duration-300 w-full h-full object-cover;
|
|
}
|
|
.card-overlay {
|
|
@apply absolute bottom-0 left-0 w-full pt-[14px] px-[18px] pb-[16px] flex flex-col justify-end border-t border-white/10 bg-black/40 shadow-[0_-10px_10px_0_rgba(0,0,0,0.25)] backdrop-blur-[25px] md:pt-[20px] text-left md:px-[26px] md:pb-[26px];
|
|
}
|
|
.card-title {
|
|
@apply text-[14px] leading-[20px] font-medium text-white line-clamp-1 md:text-[18px] md:leading-[26px];
|
|
}
|
|
.card-description {
|
|
@apply mt-[6px] text-[12px] leading-[18px] text-white/50 md:mt-1 md:text-[14px] md:leading-[24px];
|
|
}
|
|
.card-link {
|
|
@apply absolute top-0 left-0 w-full h-full z-[5];
|
|
}
|
|
|
|
.card-stove {
|
|
@apply relative w-full h-full bg-[#333333] transition-transform duration-300;
|
|
}
|
|
.card-stove svg {
|
|
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
|
|
}
|
|
|
|
.no-image .card-overlay {
|
|
@apply relative bg-[#1f1f1f];
|
|
}
|
|
</style>
|