37 lines
845 B
Vue
37 lines
845 B
Vue
|
<template>
|
||
|
|
<div class="gallery-image">
|
||
|
|
<img :src='src' @click="shown = !shown">
|
||
|
|
<div :class="shown ? 'gallery-popup' : 'gallery-popup-hidden'" @click.self="shown = !shown">
|
||
|
|
<img :src='src'>
|
||
|
|
<a class="gallery-popup-exit" @click="shown = !shown" href="#">x</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: [ 'src' ],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
shown: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.gallery-popup-hidden {
|
||
|
|
@apply fixed h-0 w-screen opacity-0 transition-opacity;
|
||
|
|
}
|
||
|
|
.gallery-popup {
|
||
|
|
@apply fixed w-screen h-screen left-0 top-0 py-16 px-16 z-20 flex flex-row items-center justify-center transition-opacity;
|
||
|
|
background: rgba(0,0,0,0.7);
|
||
|
|
}
|
||
|
|
.gallery-popup img {
|
||
|
|
@apply h-full;
|
||
|
|
}
|
||
|
|
.gallery-popup-exit {
|
||
|
|
@apply fixed right-0 top-0 z-30 mx-8 my-4 text-2xl;
|
||
|
|
}
|
||
|
|
</style>
|