mahee-auffret/pages/contact.vue

86 lines
2.0 KiB
Vue
Raw Normal View History

2024-02-21 00:30:14 +01:00
<template>
2024-05-28 00:18:18 +02:00
<main>
<Brush />
<main id="contact">
<div>
<img
:src="`/imgs/small/${globalData.contact_image}.webp`"
:alt="globalData.contact_image_titre"
/>
</div>
<div>
<p v-html="globalData.contact_text"></p>
<a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
</div>
</main>
2024-02-21 00:30:14 +01:00
</main>
</template>
2024-04-12 00:23:57 +02:00
<script>
2024-05-28 00:18:18 +02:00
import Brush from '@/components/Brush.vue';
2024-04-12 00:23:57 +02:00
export default {
async setup() {
let globalData = await useFetchGlobalData();
globalData = globalData.globalData._object.$sglobalData;
if (globalData.contact_text.includes('\n')) {
console.log("BABABABA");
globalData.contact_text = JSON.stringify(globalData.contact_text).replace(/\\n/g, '<br>').slice(1, -1);
}
2024-04-12 00:23:57 +02:00
return {
globalData
}
2024-05-28 00:18:18 +02:00
},
components: {
Brush
2024-04-12 00:23:57 +02:00
}
}
2024-02-21 00:30:14 +01:00
</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 {
margin-top: 0;
2024-02-21 00:30:14 +01:00
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>