mahee-auffret/pages/contact.vue

73 lines
1.6 KiB
Vue

<template>
<main id="contact">
<div>
<img
:src="`/api/assets/${globalData.contact_image}.webp`"
:alt="globalData.contact_image_titre"
/>
</div>
<div>
<p>{{ globalData.contact_texte }}</p>
<a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
</div>
</main>
</template>
<script>
export default {
async setup() {
let globalData = await useFetchGlobalData();
globalData = globalData.globalData._object.$sglobalData;
return {
globalData
}
}
}
</script>
<style lang="scss">
#contact {
display: flex;
flex-direction: column;
> div:first-of-type {
width: 40vw;
> img {
width: 100%;
}
}
> div:last-of-type {
margin-top: 2rem;
> p {
line-height: 1.2;
margin-bottom: 1.5rem;
}
}
}
@media screen and (min-width: 800px) {
#contact {
flex-direction: row;
> div:first-of-type {
width: 30vw;
}
> div:last-of-type {
width: 40vw;
margin-left: 2rem;
align-self: flex-end;
}
}
}
@media screen and (min-width: 1200px) {
#contact {
> div:first-of-type {
width: 15vw;
}
> div:last-of-type {
width: 30vw;
}
}
}
</style>