init

assets/scss/main.scss

@@ -36,13 +36,12 @@ html {
 //swiper
 .swiper {
   width: 100%;
-  height: calc(100dvh - 54px);
+  height: calc(100dvh);
 }
 
 .swiper-slide {
   text-align: center;
   font-size: 18px;
-  background: #444;
 
   /* Center slide text vertically */
   display: flex;
@@ -53,7 +52,7 @@ html {
 .swiper-slide img {
   display: block;
   width: 100%;
-  height: calc(100dvh - 54px);
+  height: calc(100dvh);
   object-fit: cover;
 }
 

components/Gallery.vue

@@ -1,19 +1,35 @@
 <template>
-  <div class="gallery">
+  <div v-if="isMobile" class="gallery-mobile">
-    <div class="gallery__main">
+    <Swiper
+      :pagination="true"
+      :loop="true"
+      :modules="modules"
+      class="mySwiper gallery-mobile__swiper"
+    >
+      <SwiperSlide
+        v-for="image in smallImages"
+        :key="image?.src"
+      >
+        <img width="100%" :src="image?.src" :alt="image?.src">
+      </SwiperSlide>
+    </Swiper>
+  </div>
+
+  <div v-else class="gallery-desktop">
+    <div class="gallery-desktop__main">
       <img :src="previewImage?.src" :alt="previewImage?.src">
     </div>
 
-    <div class="gallery__side">
+    <div class="gallery-desktop__side">
       <div
         v-for="img in smallImages"
         :key="img?.src"
-        class="gallery__small"
+        class="gallery-desktop__small"
       >
         <img :src="img?.src" :alt="img?.src">
       </div>
 
-      <UButton size="xl" class="gallery__button">
+      <UButton size="xl" class="gallery-desktop__button">
         ⋮⋮ Показать все фото
       </UButton>
     </div>
@@ -21,13 +37,23 @@
 </template>
 
 <script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+import { Pagination } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import 'swiper/css'
+import 'swiper/css/pagination'
+
 const props = defineProps<{ previewImage: { src }, images: { src }[] }>()
 
+const modules = [Pagination]
+
+const isMobile = useMediaQuery('(max-width: 1024px)')
 const smallImages = computed(() => props?.images?.slice(1, 5))
 </script>
 
 <style lang="scss">
-.gallery {
+//Desktop
+.gallery-desktop {
   position: relative;
   display: grid;
   grid-template-columns: 2fr 1fr;

components/MainServices.vue

@@ -58,7 +58,7 @@ defineProps<{ services: Service[] }>()
 
   @include mobile {
     gap: 10px;
-    grid-template-columns: repeat(1, minmax(150px, 350px));
+    grid-template-columns: repeat(1, minmax(150px, 500px));
   }
 }
 

layouts/cart.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="layout">
+    <UHeader
+      title="Rental"
+      :toggle="false"
+      :ui="{
+        root: 'fixed bg-transparent w-full',
+        left: 'relative flex items-center w-full',
+        container: 'gap-0',
+        right: 'hidden',
+      }"
+    >
+      <template #left>
+        <Icon class="cursor-pointer w-6 h-6" name="lucide:arrow-left" @click="routerBack()" />
+
+        <NuxtLink to="/" class="absolute left-1/2 transform -translate-x-1/2 text-lg">
+          Rental
+        </NuxtLink>
+      </template>
+    </UHeader>
+
+    <UMain>
+      <slot />
+    </UMain>
+
+    <UFooter class="footer">
+      <div class="flex flex-col md:flex-row items-center text-sm opacity-70">
+        <div>
+          © {{ new Date().getFullYear() }} Rental. Все права защищены.
+        </div>
+      </div>
+    </UFooter>
+  </div>
+</template>
+
+<script setup lang="ts">
+const router = useRouter()
+const route = useRoute()
+
+const { cartById } = useMock()
+const cart = cartById(route?.params?.id)
+
+function routerBack() {
+  const newRoute = `/${cart?.category}#variations`
+  router.push(newRoute)
+}
+</script>
+
+<style lang="scss" scoped>
+.footer {
+  @include mobile {
+    display: none;
+  }
+}
+</style>

layouts/default.vue

@@ -69,15 +69,15 @@ const tabs = computed<TabsItem[]>(() => [
   },
 ])
 
-const activeTab = ref(route.path.split('/')[1] || '/')
+const activeTab = ref(route?.path.split('/')[1] || '/')
 
 watch(() => activeTab.value, () => {
   const tab = tabs.value.find(tab => tab.value === activeTab.value)
-  router.push(tab.route)
+  router.push(tab?.route)
 })
 
-watch(() => route.path, () => {
+watch(() => route?.path, () => {
-  const routerPath = route.path.split('/')[1]
+  const routerPath = route?.path?.split('/')[1]
 
   if (routerPath === activeTab.value) {
     return

pages/nedvizhimost.vue

@@ -86,40 +86,8 @@ const services = [
   },
 ]
 
-const previewItems = [
+const { cartByCategory } = useMock()
-  {
+const previewItems = computed(() => cartByCategory('transport'))
-    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',
-  },
-]
 </script>
 
 <style lang="scss">

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>