fix. 머지 충돌 수정
Made-with: Cursor
This commit is contained in:
@@ -1,25 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
interface props {
|
||||
<<<<<<< HEAD
|
||||
type?: 'button' | 'link'
|
||||
to?: string
|
||||
target?: '_self' | '_blank'
|
||||
=======
|
||||
type?: 'internal' | 'external' | 'action'
|
||||
href?: string
|
||||
>>>>>>> feature/20250228_SWV-866
|
||||
backgroundColor?: string
|
||||
srOnly?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<props>(), {
|
||||
<<<<<<< HEAD
|
||||
type: 'button',
|
||||
to: '',
|
||||
target: '_self',
|
||||
=======
|
||||
type: 'action',
|
||||
>>>>>>> feature/20250228_SWV-866
|
||||
backgroundColor: '',
|
||||
srOnly: '',
|
||||
})
|
||||
|
||||
@@ -2,23 +2,23 @@
|
||||
import type { TrackingObject } from '#layers/types/api/common'
|
||||
|
||||
interface Props {
|
||||
variant?: 'videoPlay' | 'videoPlayImg'
|
||||
category?: 'system' | 'image'
|
||||
backgroundColor?: string
|
||||
tracking: TrackingObject
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), { variant: 'videoPlay' })
|
||||
const props = withDefaults(defineProps<Props>(), { category: 'system' })
|
||||
|
||||
const { locale } = useI18n()
|
||||
const { sendLog } = useAnalytics()
|
||||
|
||||
const buttonClasses = computed(() => [
|
||||
'btn-play',
|
||||
props.variant === 'videoPlay' ? 'play-icon' : 'play-image',
|
||||
props.category === 'system' ? 'play-icon' : 'play-image',
|
||||
])
|
||||
|
||||
const buttonStyle = computed(() =>
|
||||
props.variant === 'videoPlay' && props.backgroundColor
|
||||
props.category === 'system' && props.backgroundColor
|
||||
? { backgroundColor: props.backgroundColor }
|
||||
: {}
|
||||
)
|
||||
@@ -28,7 +28,7 @@ const onClick = () => sendLog(locale.value, props.tracking)
|
||||
|
||||
<template>
|
||||
<button :class="buttonClasses" :style="buttonStyle" @click="onClick">
|
||||
<span v-if="props.variant === 'videoPlay'" class="icon">
|
||||
<span v-if="props.category === 'system'" class="icon">
|
||||
<AtomsIconsArrowRightFill />
|
||||
</span>
|
||||
<span class="sr-only">Play</span>
|
||||
@@ -37,11 +37,12 @@ const onClick = () => sendLog(locale.value, props.tracking)
|
||||
|
||||
<style scoped>
|
||||
.btn-play {
|
||||
@apply relative flex items-center justify-center rounded-full w-[60px] h-[60px] md:w-[80px] md:h-[80px];
|
||||
@apply relative flex items-center justify-center;
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
@apply before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.5)] before:rounded-full
|
||||
@apply w-[60px] h-[60px] md:w-[80px] md:h-[80px] rounded-full
|
||||
before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.5)] before:rounded-full
|
||||
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-[50%] after:opacity-0 after:transition-opacity after:duration-300 after:ease-in-out
|
||||
hover:after:opacity-10;
|
||||
}
|
||||
@@ -53,13 +54,16 @@ const onClick = () => sendLog(locale.value, props.tracking)
|
||||
}
|
||||
|
||||
.play-image {
|
||||
@apply overflow-hidden;
|
||||
@apply w-[69px] h-[69px] md:w-[110px] md:h-[110px];
|
||||
}
|
||||
.play-image::before {
|
||||
@apply content-[''] absolute inset-0 z-0 rounded-full bg-no-repeat bg-center bg-cover bg-[url(/images/common/btn_play/btn_default_m.png)] md:bg-[url(/images/common/btn_play/btn_default.png)];
|
||||
@apply content-[''] absolute inset-0 z-0 bg-no-repeat bg-center bg-cover bg-[url(/images/common/btn_play/btn_default.png)] transition-opacity duration-300 ease-out;
|
||||
}
|
||||
.play-image::after {
|
||||
@apply content-[''] absolute inset-0 z-0 rounded-full bg-no-repeat bg-center bg-cover bg-[url(/images/common/btn_play/btn_hover_m.png)] md:bg-[url(/images/common/btn_play/btn_hover.png)] opacity-0 transition-opacity duration-300 ease-out;
|
||||
@apply content-[''] absolute inset-0 z-0 bg-no-repeat bg-center bg-cover bg-[url(/images/common/btn_play/btn_hover.png)] opacity-0 transition-opacity duration-300 ease-out;
|
||||
}
|
||||
.play-image:hover::before {
|
||||
@apply opacity-0;
|
||||
}
|
||||
.play-image:hover::after {
|
||||
@apply opacity-100;
|
||||
|
||||
Reference in New Issue
Block a user