init

components/MainCarusel.vue

@@ -3,34 +3,30 @@
     <UCarousel
       v-slot="{ item }"
       arrows
-      :items="items"
+      :items="previewItems"
       :ui="{ item: 'basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6' }"
       class="w-full variant"
     >
-      <img
+      <NuxtLink :to="`/post/${item.id}`">
-        :src="item.img"
+        <img
-        alt="item.img"
+          :src="item?.previewImage?.src"
-        class="rounded-lg w-full h-auto object-cover"
+          :alt="item?.previewImage?.src"
-      >
+          class="rounded-lg w-full h-auto object-cover"
+        >
+      </NuxtLink>
     </UCarousel>
   </div>
 </template>
 
 <script setup lang="ts">
-const items = [
+interface PreviewItem {
-  {
+  id: number
-    id: 1,
+  previewImage: {
-    img: 'https://picsum.photos/468/468?random=1',
+    src: string
-  },
+  }
-  {
+}
-    id: 2,
+
-    img: 'https://picsum.photos/468/468?random=2',
+defineProps<{ previewItems: PreviewItem[] }>()
-  },
-  {
-    id: 3,
-    img: 'https://picsum.photos/468/468?random=3',
-  },
-]
 </script>
 
 <style lang="scss">

composables/useMock.ts

@@ -0,0 +1,74 @@
+export const useMock = () => {
+  const allCarts = [
+    {
+      id: 13242314,
+      title: 'Lexus LX: 2008 г., 5.7 л, Автомат, Бензиновая, Внедорожник',
+      description: 'Основные характеристики и детали по фото: - Кузов: полноразмерный SUV, черный металлик, оригинальный фирменный обвес, хромированная решетка радиатора Lexus, рейлинги на крыше, подножки. - Оптика: биксенон/LED фары с омывателями, противотуманные фары в переднем бампере. - Колеса: легкосплавные диски темного цвета, всесезонные шины. - Салон: бежняя перфорированная кожа, второй ряд с капитанскими креслами и широким центральным подлокотником/консолью, черные защитные чехлы на передних спинках, фирменные коврики, отдельные воздуховоды и блок управления климатом для задних пассажиров. - Оснащение и удобства: мультируль, электрорегулировки сидений, подогревы, много-зонный климат-контроль, тонировка, камера/датчики (по наличию на бампере), электропривод стекол и зеркал. - Экстерьерные элементы: повторители поворота в зеркалах, хром-молдинги, спойлер, антенна-плавник. - Полный привод, высокий дорожный просвет, мощный V8 (характерно для LX 570). Автомобиль с кыргызскими номерами (KG, регион 05) по фото. Стильный черный цвет, богатая комплектация, просторный комфортный салон для дальних поездок и города. #lexus570 Скрыть',
+      category: 'transport',
+      previewImage: {
+        src: '/lexus_1.jpeg',
+      },
+      images: [
+        {
+          src: '/lexus_2.jpeg',
+        },
+        {
+          src: '/lexus_3.jpeg',
+        },
+        {
+          src: '/lexus_4.jpeg',
+        },
+        {
+          src: '/lexus_5.jpeg',
+        },
+        {
+          src: '/lexus_6.jpeg',
+        },
+        {
+          src: '/lexus_7.jpeg',
+        },
+      ],
+    },
+    {
+      id: 1314,
+      title: 'LexMercedes-Benz G-Class: 2022 г., 4 л, Автомат, Бензиновая, Внедорожник',
+      description: 'Машина в наличии в Бишкеке🇰🇬 90 пробег 2022 год G$ Без вложений Без ДТП',
+      category: 'transport',
+      previewImage: {
+        src: '/gle_1.webp',
+      },
+      images: [
+        {
+          src: '/gle_2.jpeg',
+        },
+        {
+          src: '/gle_3.jpeg',
+        },
+        {
+          src: '/gle_4.jpeg',
+        },
+        {
+          src: '/gle_5.jpeg',
+        },
+        {
+          src: '/gle_6.jpeg',
+        },
+        {
+          src: '/gle_7.jpeg',
+        },
+      ],
+    },
+  ]
+
+  const cartById = (id?: string) =>
+    allCarts.find(cart => cart.id.toString() === id?.toString())
+
+  const cartByCategory = (category?: string) =>
+    allCarts.filter(cart => cart.category === category)
+
+  return {
+    allCarts,
+    cartById,
+    cartByCategory,
+  }
+}

composables/useScreen.ts

@@ -1,12 +0,0 @@
-import { useMediaQuery } from '@vueuse/core'
-
-export default function useScreen() {
-  const isMobile = useMediaQuery('(max-width: 1279px)')
-
-  const isDesktop = computed(() => !isMobile.value)
-
-  return {
-    isMobile,
-    isDesktop,
-  }
-}

pages/nedvizhimost.vue

@@ -27,7 +27,7 @@
     <UContainer class="flex flex-col gap-32 mt-32">
       <MainServices :services="services" />
 
-      <MainCarusel />
+      <MainCarusel :preview-items="previewItems" />
 
       <Contacts />
     </UContainer>
@@ -85,6 +85,41 @@ 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',
+  },
+]
 </script>
 
 <style lang="scss">

pages/post/Gallery.vue

@@ -0,0 +1,75 @@
+<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

@@ -0,0 +1,32 @@
+<template>
+  <UContainer>
+    <div class="post-page">
+      <h1>{{ cart?.title }}</h1>
+
+      <Gallery :preview-image="cart?.previewImage" :images="cart?.images" />
+
+      <div>
+        Описание
+        <p>{{ cart?.description }}</p>
+      </div>
+    </div>
+  </UContainer>
+</template>
+
+<script setup lang="ts">
+import Gallery from '~/pages/post/Gallery.vue'
+
+const route = useRoute()
+
+const { cartById } = useMock()
+const cart = cartById(route.params.id)
+</script>
+
+<style lang="scss">
+.post-page {
+  margin-top: calc(64px + 26px);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>

pages/transport.vue

@@ -27,7 +27,7 @@
     <UContainer class="flex flex-col gap-32 mt-32">
       <MainServices :services="services" />
 
-      <MainCarusel />
+      <MainCarusel :preview-items="previewItems" />
 
       <Contacts />
     </UContainer>
@@ -81,6 +81,9 @@ const services = [
     ],
   },
 ]
+
+const { cartByCategory } = useMock()
+const previewItems = computed(() => cartByCategory('transport'))
 </script>
 
 <style lang="scss">