mahee-auffret/pages/contact.vue

<template>
    <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>
    </main>
</template>

<script>
import Brush from '@/components/Brush.vue';

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);
        }

        return {
            globalData
        }
    },
    components: {
        Brush
    }
}
</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;
                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>