init

pages/nedvizhimost.vue

@@ -86,40 +86,8 @@ const services = [
   },
 ]
 
-const previewItems = [
-  {
-    id: 13242314,
-    img: 'https://picsum.photos/468/468?random=1',
-  },
-  {
-    id: 123321,
-    img: 'https://picsum.photos/468/468?random=2',
-  },
-  {
-    id: 7654567,
-    img: 'https://picsum.photos/468/468?random=3',
-  },
-  {
-    id: 3203030,
-    img: 'https://picsum.photos/468/468?random=4',
-  },
-  {
-    id: 1818822,
-    img: 'https://picsum.photos/468/468?random=5',
-  },
-  {
-    id: 12355432,
-    img: 'https://picsum.photos/468/468?random=6',
-  },
-  {
-    id: 3495823,
-    img: 'https://picsum.photos/468/468?random=7',
-  },
-  {
-    id: 1123,
-    img: 'https://picsum.photos/468/468?random=8',
-  },
-]
+const { cartByCategory } = useMock()
+const previewItems = computed(() => cartByCategory('transport'))
 </script>
 
 <style lang="scss">

pages/post/Gallery.vue

@@ -1,75 +0,0 @@
-<template>
-  <div class="gallery">
-    <div class="gallery__main">
-      <img :src="previewImage?.src" :alt="previewImage?.src">
-    </div>
-
-    <div class="gallery__side">
-      <div
-        v-for="img in smallImages"
-        :key="img?.src"
-        class="gallery__small"
-      >
-        <img :src="img?.src" :alt="img?.src">
-      </div>
-
-      <UButton size="xl" class="gallery__button">
-        ⋮⋮ Показать все фото
-      </UButton>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{ previewImage: { src }, images: { src }[] }>()
-
-const smallImages = computed(() => props?.images?.slice(1, 5))
-</script>
-
-<style lang="scss">
-.gallery {
-  position: relative;
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: 12px;
-
-  &__main img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 20px;
-    cursor: pointer;
-    transition: ease-in 0.1s;
-
-    &:hover {
-      opacity: 0.7;
-    }
-  }
-
-  &__side {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(300px, 500px));
-    gap: 12px;
-  }
-
-  &__small img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 12px;
-    cursor: pointer;
-    transition: ease-in 0.1s;
-
-    &:hover {
-      opacity: 0.7;
-    }
-  }
-
-  &__button {
-    position: absolute;
-    right: 6px;
-    bottom: 6px;
-    cursor: pointer;
-  }
-}
-</style>

pages/post/[id].vue

@@ -1,5 +1,11 @@
 <template>
-  <UContainer>
+  <!--  Mobile -->
+  <div v-if="isMobile" class="post-page">
+    <Gallery :preview-image="cart?.previewImage" :images="cart?.images" />
+  </div>
+
+  <!--  Desktop -->
+  <UContainer v-else>
     <div class="post-page">
       <h1>{{ cart?.title }}</h1>
 
@@ -14,12 +20,18 @@
 </template>
 
 <script setup lang="ts">
-import Gallery from '~/pages/post/Gallery.vue'
+import { useMediaQuery } from '@vueuse/core'
+import Gallery from '~/components/Gallery.vue'
 
+const isMobile = useMediaQuery('(max-width: 1024px)')
 const route = useRoute()
 
 const { cartById } = useMock()
 const cart = cartById(route.params.id)
+
+definePageMeta({
+  layout: 'cart',
+})
 </script>
 
 <style lang="scss">
@@ -28,5 +40,10 @@ const cart = cartById(route.params.id)
   display: flex;
   flex-direction: column;
   gap: 16px;
+
+  @include mobile {
+    margin-top: 0;
+    overflow: hidden;
+  }
 }
 </style>