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

fix: [디자인QA] 슬라이드 이미지 hover 효과 적용

Browse Source
This commit is contained in:
clkim
2025-12-03 12:30:57 +09:00
parent f43977c86c
commit 73adfc9769
2 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
layers/templates/FxVideo01/index.vue
View File

@@ -41,6 +41,8 @@ const { tm, locale } = useI18n({
messages: Object(resultGetMultilingual?.value?.multilingual),
})
const recommendHover = ref(false)
const backgroundData = computed(() =>
getComponentGroup(props.components, 'background')
)
@@ -152,7 +154,7 @@ const handleLoadMoreRecent = () => {
:key="`recommended-${item.url}-${index}`"
>
<div
class="overflow-hidden relative aspect-[16/9] flex-shrink-0 w-full rounded-[4px] cursor-pointer sm:w-[60.3%] sm:rounded-[8px] md:w-[56%] lg:w-[710px] lg:rounded-[12px]"
class="overflow-hidden relative aspect-[16/9] flex-shrink-0 w-full rounded-[4px] cursor-pointer group sm:w-[60.3%] sm:rounded-[8px] md:w-[56%] lg:w-[710px] lg:rounded-[12px]"
@click="handleVideoClick(item.url)"
>
<img
@@ -160,7 +162,10 @@ const handleLoadMoreRecent = () => {
:alt="item.title || 'Video thumbnail'"
loading="lazy"
decoding="async"
class="w-full h-full object-cover"
:class="[
'w-full h-full object-cover group-hover:scale-110 transition-transform duration-300',
{ 'is-hover': recommendHover },
]"
/>
<AtomsIconsPlayRoundFill
class="drop-shadow-[0_0_6px_rgba(0,0,0,0.25)] absolute bottom-[14px] right-[14px] w-[20px] h-[20px] sm:bottom-[18px] sm:right-[18px] md:bottom-[23px] md:right-[23px] md:w-[33px] md:h-[33px]"
@@ -169,6 +174,8 @@ const handleLoadMoreRecent = () => {
<div
class="w-full mx-[8px] pb-[20px] border-b border-[rgba(0,0,0,0.08)] cursor-pointer sm:mx-[0] sm:pt-[12px] sm:pr-[16px] sm:pb-[0] sm:border-none md:pt-[20px] md:pr-[28px] lg:pt-[40px] lg:pr-[48px]"
@click="handleVideoClick(item.url)"
@mouseenter="recommendHover = true"
@mouseleave="recommendHover = false"
>
<h4
class="h-[52px] text-[18px] font-[700] leading-[26px] tracking-[-0.54px] text-[#1F1F1F] line-clamp-2 sm:h-[auto] sm:text-[20px] sm:leading-[30px] sm:tracking-[-0.6px] sm:line-clamp-3 md:text-[32px] md:leading-[44px] md:tracking-[-0.96px]"
@@ -199,7 +206,7 @@ const handleLoadMoreRecent = () => {
<li
v-for="(item, index) in visibleVideos"
:key="`recent-${item.url}-${index}`"
class="p-3 rounded-[12px] bg-white md:p-4 md:rounded-[16px] lg:p-5 cursor-pointer"
class="p-3 rounded-[12px] bg-white md:p-4 md:rounded-[16px] lg:p-5 group cursor-pointer"
@click="handleVideoClick(item.url)"
>
<div
@@ -210,7 +217,7 @@ const handleLoadMoreRecent = () => {
:alt="item.title || 'Video thumbnail'"
loading="lazy"
decoding="async"
class="w-full h-full object-cover"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
/>
<AtomsIconsPlayRoundFill
class="drop-shadow-[0_0_6px_rgba(0,0,0,0.25)] absolute bottom-[14px] right-[14px] w-[20px] h-[20px]"
@@ -278,4 +285,7 @@ const handleLoadMoreRecent = () => {
md:bottom-[47px] md:left-[calc(56%+167px)] md:right-[unset] md:text-[18px] md:leading-[26px] md:tracking-[-0.54px]
lg:bottom-[71px] lg:left-[918px];
}
.is-hover {
@apply scale-110;
}
</style>