29 lines
954 B
Vue
29 lines
954 B
Vue
<template>
|
|
<NuxtLink :to="'/compilations/' + props.data.id" class="compilation mx-auto p-4 inline-flex">
|
|
<atropos-component class="my-atropos" active-offset="80" shadow-scale="1.05">
|
|
<img :src="props.data.id + '/bkg.jpg'" data-atropos-offset="-8" />
|
|
<img :src="props.data.id + '/object.png'" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
|
|
<img :src="props.data.id + '/name.png'" data-atropos-offset="0" class="absolute inset-0 object-cover" />
|
|
<img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0" />
|
|
<img src="/play.svg" width="20%" class="absolute play" />
|
|
</atropos-component>
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps(['data', 'template'])
|
|
</script>
|
|
|
|
<style scoped>
|
|
.logo {
|
|
filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.5));
|
|
left: 14%;
|
|
top: 10%;
|
|
}
|
|
.play {
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
</style>
|