paragraphe contact multi ligne + 2 colonnes magasin

pages/contact.vue

@@ -7,7 +7,7 @@
             />
         </div>
         <div>
-            <p>{{ globalData.contact_text }}</p>
+            <p v-html="globalData.contact_text"></p>
             <a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
         </div>
     </main>
@@ -19,6 +19,10 @@ export default {
 
         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
@@ -53,6 +57,7 @@ export default {
                 width: 30vw;
             }
             > div:last-of-type {
+                margin-top: 0;
                 width: 40vw;
                 margin-left: 2rem;
                 align-self: flex-end;

pages/index.vue

@@ -25,13 +25,10 @@ export default {
             }
         });
 
-        
-
         return {
             itemsAccueil,
         };
 
-
         function startSlider() {
             const imgs = document.querySelectorAll('.indexImg img');
             

pages/magasin.vue

@@ -1,7 +1,16 @@
 <template>
     <main>
         <p>{{ globalData.magasin_explication }}</p>
-        <Projects :contents="magasin" />
+        <div class="category">
+            <div>
+                <h3>Toiles</h3>
+                <Projects :contents="toiles" />
+            </div>
+            <div>
+                <h3>Impressions</h3>
+                <Projects :contents="prints" />
+            </div>
+        </div>
     </main>
 </template>
 
@@ -10,13 +19,18 @@ import Projects from '@/components/Projects.vue';
 
 export default {
     async setup() {
-        const magasin = ref([]);
+        const toiles = ref([]);
+        const prints = ref([]);
 
-        const { data: itemsData } = useFetch('/api/items/magasin', { server: true });
+        const { data: toilesData } = useFetch('/api/items/toiles', { server: true });
+        const { data: printsData } = useFetch('/api/items/prints', { server: true });
 
         onBeforeMount(async () => {
-            if (itemsData.value) {
-                magasin.value = itemsData.value.data;
+            if (toilesData.value) {
+                toiles.value = toilesData.value.data;
+            }
+            if (printsData.value) {
+                prints.value = printsData.value.data;
             }
         });
 
@@ -25,11 +39,30 @@ export default {
 
         return {
             globalData,
-            magasin
+            toiles,
+            prints
         };
     },
     components: {
         Projects
     }
 };
-</script>
+</script>
+
+<style scoped lang="scss">
+    h3:first-of-type {
+        margin-top: 2rem;
+    }
+    h3 {
+        text-transform: uppercase;
+    }
+
+    @media screen and (min-width: 800px) {
+        .category {
+            display: flex;
+            > div {
+                width: 50%;
+            }
+        }
+    }
+</style>