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

pages/cart.vue

@@ -9,12 +9,15 @@
       </div>
     </div>
 
-    <div class="cart__create-order">
-      <div>{{ `Товары: ${cart?.line_items?.length}` }}</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>
+        <UButton class="w-100 d-flex" @click="createOrder">
+          Перейти к оформлению
+        </UButton>
+      </div>
     </div>
   </div>
 </template>
@@ -22,6 +25,7 @@
 <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">
-    <ProductImages />
-    <ProductDescription />
+  <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;