29 lines
794 B
Vue
29 lines
794 B
Vue
<script setup lang="ts">
|
|
import type { PageDataResourceGroup } from '#layers/types/api/pageData'
|
|
|
|
const props = defineProps<{ resourcesData: PageDataResourceGroup }>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'click'): void
|
|
}>()
|
|
|
|
const bgStyles = getResponsiveSrc(props.resourcesData?.res_path, {
|
|
resourcesType: 'bg',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
v-if="resourcesData && bgStyles"
|
|
class="relative group bg-cover bg-center bg-no-repeat w-[66px] h-[66px] md:w-[100px] md:h-[100px]"
|
|
:class="getResponsiveClass()"
|
|
:style="bgStyles"
|
|
@click="emit('click')"
|
|
>
|
|
<span
|
|
class="absolute inset-0 m-[10px] bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300 ease-in-out rounded-[50%]"
|
|
/>
|
|
<span class="sr-only">Play</span>
|
|
</button>
|
|
</template>
|