Aran Roig
9748de4286
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 34s
49 lines
955 B
Vue
49 lines
955 B
Vue
<template>
|
|
<img ref="sprite" v-show="loaded"
|
|
class="sprite pixelated"
|
|
:src="props.path">
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
path: string,
|
|
top?: string,
|
|
right?: string,
|
|
left?: string,
|
|
bottom?: string
|
|
}>();
|
|
|
|
const sprite = ref(null);
|
|
const loaded = ref(false);
|
|
|
|
onMounted(() => {
|
|
sprite.value.style.top = props.top;
|
|
sprite.value.style.left = props.left;
|
|
sprite.value.style.bottom = props.bottom;
|
|
sprite.value.style.right = props.right;
|
|
|
|
loaded.value = true;
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.sprite {
|
|
position: absolute;
|
|
z-index: 1;
|
|
width: 1300px;
|
|
|
|
@media screen and (max-width: 1200px) and (min-width: 900px) {
|
|
width: 975px;
|
|
}
|
|
|
|
@media screen and (max-width: 900px) and (min-width: 600px) {
|
|
width: 650px;
|
|
}
|
|
|
|
@media screen and (max-width: 600px){
|
|
width: 425px;
|
|
}
|
|
}
|
|
</style> |