создаю телегу товаров

assets/scss/main.scss

@@ -24,6 +24,7 @@ h3 {
   @include h3('h3');
 }
 
+//скроллбар
 ::-webkit-scrollbar {
   width: 8px;
 }
@@ -53,3 +54,27 @@ h3 {
 body {
   -ms-overflow-style: -ms-autohiding-scrollbar;
 }
+
+//swiper
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-slide {
+  text-align: center;
+  font-size: 18px;
+  background: #444;
+
+  /* Center slide text vertically */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

components/ProductDescription.vue

@@ -95,6 +95,11 @@ function addToCartBtn() {
 .product-description {
   width: 100%;
   max-width: 335px;
+  padding-top: 30px;
+  padding-inline: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 
   @media (min-width: 768px) {
     position: sticky;
@@ -104,12 +109,6 @@ function addToCartBtn() {
     max-height: calc(100vh - 80px);
   }
 
-  padding-top: 30px;
-  padding-inline: 30px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
   &__sizes {
     display: grid;
     grid-template-columns: repeat(4, 1fr);

components/ProductImages.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="product-images">
+  <div v-if="!isMobile" class="product-images">
     <div
       v-for="image in currentVariantImages?.slice(0, 5)"
       :key="image?.id"
@@ -7,11 +7,33 @@
       <img width="100%" :src="image?.src" :alt="image?.src">
     </div>
   </div>
+
+  <Swiper
+    v-if="isMobile"
+    :pagination="true"
+    :loop="true"
+    :modules="modules"
+    class="mySwiper"
+  >
+    <SwiperSlide
+      v-for="image in currentVariantImages?.slice(0, 5)"
+      :key="image?.id"
+    >
+      <img width="100%" :src="image?.src" :alt="image?.src">
+    </SwiperSlide>
+  </Swiper>
 </template>
 
 <script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+import { Pagination } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/vue'
 import { useCurrentProduct } from '~/composables'
+import 'swiper/css'
+import 'swiper/css/pagination'
 
+const isMobile = useMediaQuery('(max-width: 1280px)')
+const modules = [Pagination]
 const { currentVariantImages } = useCurrentProduct()
 </script>
 
@@ -19,7 +41,7 @@ const { currentVariantImages } = useCurrentProduct()
 .product-images {
   position: relative;
   width: 100%;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
 }
 </style>

layouts/default.vue

@@ -32,9 +32,9 @@
       </UContainer>
     </main>
 
-    <footer class="footer">
-      Footer
-    </footer>
+    <!--    <footer class="footer"> -->
+    <!--      Footer -->
+    <!--    </footer> -->
   </div>
 </template>
 

package.json

@@ -25,6 +25,7 @@
     "dayjs": "^1.11.13",
     "decimal.js": "^10.5.0",
     "nuxt": "^3.17.6",
+    "swiper": "^12.0.2",
     "typescript": "^5.6.3",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"

pages/cart.vue

@@ -9,19 +9,23 @@
       </div>
     </div>
 
+    <div>
       <div class="cart__create-order">
         <div>{{ `Товары: ${cart?.line_items?.length}` }}</div>
+        <div>{{ `Сумма: ${cart?.line_items?.length}` }}</div>
 
         <UButton class="w-100 d-flex" @click="createOrder">
           Перейти к оформлению
         </UButton>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import type { IBspb } from '~/server/shared/types/bspb'
 import { usePostOrdersCreate } from '~/api/mutations/wp/usePostOrdersCreate'
+import { useCart } from '~/composables'
 
 const { cart } = useCart()
 const { mutateAsync } = usePostOrdersCreate()
@@ -66,7 +70,6 @@ const createOrder = async () => {
     display: inline-flex;
     flex-direction: column;
     gap: 20px;
-    max-height: 100px;
   }
 }
 </style>

pages/index.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="index">
-    <div
-      class="cards-list"
-    >
+    <div class="cards-list">
       <div
         v-for="product in productCardData"
         :key="product.id"
@@ -36,26 +34,43 @@ const router = useRouter()
 </script>
 
 <style lang="scss">
+@use '~/assets/scss/utils' as *;
+
 .cards-list {
   padding: 15px;
 
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-  gap: 4px;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 30px 4px;
+
+  @include mobile {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    padding: 10px;
+  }
 }
 
 .card {
-  min-width: 300px;
   display: flex;
   flex-direction: column;
   cursor: pointer;
 
+  @include mobile {
+    min-width: auto;
+  }
+
   &__image {
     width: 100%;
+    height: auto;
   }
 
   &__description {
-    padding-inline: 10px;
+    padding: 10px 5px;
+
+    @include mobile {
+      padding: 8px 4px;
+      font-size: 14px;
+    }
   }
 }
 </style>

pages/product/[id].vue

@@ -1,14 +1,54 @@
 <template>
-  <div class="product">
+  <div ref="target" class="product">
+    <UDrawer
+      v-model:open="open"
+      title="Drawer with title"
+      :class="{ animated: !isSwiping }"
+      :style="{ top }"
+    >
       <ProductImages />
+
+      <template #body>
         <ProductDescription />
+      </template>
+    </UDrawer>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { UseSwipeDirection } from '@vueuse/core'
+import { useSwipe } from '@vueuse/core'
+import { computed, shallowRef } from 'vue'
+
+const open = ref(false)
+const target = shallowRef<HTMLElement | null>(null)
+const targetHeight = computed(() => target.value?.offsetHeight)
+const top = shallowRef('0')
+
+const { isSwiping, lengthY } = useSwipe(
+  target,
+  {
+    passive: false,
+    onSwipe(e: TouchEvent) {
+      if (targetHeight.value) {
+        if (lengthY.value > 200) {
+          open.value = true
+        }
+      }
+    },
+    onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
+      console.log('lengthY.value', lengthY.value)
+      if (lengthY.value > 200 && targetHeight.value && (Math.abs(lengthY.value) / targetHeight.value) >= 0.5) {
+        open.value = true
+      }
+    },
+  },
+)
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
+@use '~/assets/scss/utils' as *;
+
 .product {
   width: 100%;
   display: flex;

yarn.lock

@@ -8660,6 +8660,11 @@ swagger2openapi@^7.0.8:
     yaml "^1.10.0"
     yargs "^17.0.1"
 
+swiper@^12.0.2:
+  version "12.0.2"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-12.0.2.tgz#aa52251d125fc6e9986af09ae3769fe836e68780"
+  integrity sha512-y8F6fDGXmTVVgwqJj6I00l4FdGuhpFJn0U/9Ucn1MwWOw3NdLV8aH88pZOjyhBgU/6PyBlUx+JuAQ5KMWz906Q==
+
 "synckit@^0.6.2 || ^0.7.3 || ^0.11.5":
   version "0.11.11"
   resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.11.11.tgz#c0b619cf258a97faa209155d9cd1699b5c998cb0"