fix. [PWT-159] 공식 영상 > 영상 클릭 범위 수정

This commit is contained in:
clkim
2025-12-02 13:12:48 +09:00
parent c888c4bf0c
commit 3348c21696
2 changed files with 16 additions and 9 deletions

View File

@@ -148,10 +148,10 @@ const handleLoadMoreRecent = () => {
<SplideSlide
v-for="(item, index) in recommendedVideos"
:key="`recommended-${item.url}-${index}`"
@click="handleVideoClick(item.url)"
>
<div
class="overflow-hidden aspect-[16/9] flex-shrink-0 w-full rounded-[4px] 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 sm:w-[60.3%] sm:rounded-[8px] md:w-[56%] lg:w-[710px] lg:rounded-[12px]"
@click="handleVideoClick(item.url)"
>
<img
:src="getYouTubeThumbnail(item.url, 'maxres')"
@@ -160,9 +160,13 @@ const handleLoadMoreRecent = () => {
decoding="async"
class="w-full h-full object-cover"
/>
<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]"
/>
</div>
<div
class="w-full mx-[8px] pb-[20px] border-b border-[rgba(0,0,0,0.08)] 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]"
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)"
>
<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]"
@@ -197,7 +201,7 @@ const handleLoadMoreRecent = () => {
@click="handleVideoClick(item.url)"
>
<div
class="overflow-hidden aspect-[16/9] w-full rounded-[4px] sm:rounded-[8px] lg:rounded-[12px]"
class="overflow-hidden relative aspect-[16/9] w-full rounded-[4px] sm:rounded-[8px] lg:rounded-[12px]"
>
<img
:src="getYouTubeThumbnail(item.url)"
@@ -206,6 +210,9 @@ const handleLoadMoreRecent = () => {
decoding="async"
class="w-full h-full object-cover"
/>
<AtomsIconsPlayRoundFill
class="drop-shadow-[0_0_6px_rgba(0,0,0,0.25)] absolute bottom-[14px] right-[14px] w-[20px] h-[20px]"
/>
</div>
<div class="p-2 pt-5 md:p-3 md:pt-5">
<h4
@@ -261,7 +268,7 @@ const handleLoadMoreRecent = () => {
lg:left-[850px];
}
.splide__slide {
@apply flex flex-col p-3 gap-4 sm:flex-row sm:gap-6 md:gap-10 md:p-4 lg:gap-[60px] lg:p-5 cursor-pointer;
@apply flex flex-col items-start p-3 gap-4 sm:flex-row sm:gap-6 md:gap-10 md:p-4 lg:gap-[60px] lg:p-5;
}
.splide-pagination {
@apply absolute bottom-[28px] left-[80px] right-[80px] text-center font-[500] text-[16px] leading-[24px] tracking-[-0.48px] text-[#999]