gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat. GR_BOARD_01 템플릿 제작

Browse Source
This commit is contained in:
clkim
2025-10-28 19:02:14 +09:00
parent dbe751e032
commit ccdac87c52
10 changed files with 359 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
layers/components/blocks/CardNews.vue
View File

@@ -3,7 +3,7 @@ interface Props {
title: string
description: string | number
imgPath: string
linkTarget?: string
linkTarget?: '_blank' | '_self'
url?: string
alt?: string
class?: string
@@ -13,6 +13,10 @@ const props = defineProps<Props>()
const { locale } = useI18n()
const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
const isShowOverlay = computed(() => {
return props.title || props.description
})
const handleLinkClick = (title: string) => {
const trackingData = {
tracking: {
@@ -26,17 +30,18 @@ const handleLinkClick = (title: string) => {
</script>
<template>
<div
v-if="props.title || props.description"
:class="`card-news ${props.class || ''}`"
>
<div :class="['card-news', { 'no-image': !props.imgPath }, props.class]">
<img
v-if="props.imgPath"
:src="props.imgPath"
:alt="props.title || props.alt"
class="card-image"
loading="lazy"
/>
<div class="card-overlay">
<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>
@@ -47,7 +52,7 @@ const handleLinkClick = (title: string) => {
<a
v-if="props.url"
:href="props.url"
:target="props.linkTarget"
:target="props.linkTarget || '_self'"
class="card-link"
@click="handleLinkClick(props.title)"
/>
@@ -56,7 +61,7 @@ const handleLinkClick = (title: string) => {
<style scoped>
.card-news {
@apply overflow-hidden relative flex items-center justify-center h-full rounded-lg
@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;
}
@@ -64,10 +69,10 @@ const handleLinkClick = (title: string) => {
@apply transition-transform duration-300 w-full h-full object-cover;
}
.card-overlay {
@apply absolute bottom-0 left-0 right-0 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];
@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 md:text-lg md:leading-[26px];
@apply text-[14px] leading-[20px] font-medium text-white 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];
@@ -75,4 +80,15 @@ const handleLinkClick = (title: string) => {
.card-link {
@apply absolute top-0 left-0 w-full h-full z-[5];
}
.card-stove {
@apply relative w-full h-full bg-[#333333];
}
.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>