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

pages/cart.vue

@@ -8,12 +8,14 @@
         <CartItem :cart-item="cartItem" />
       </div>
     </div>
-  </div>
 
-  <div>
-    <UButton @click="createOrder">
-      Оформить заказ
-    </UButton>
+    <div class="cart__create-order">
+      <div>{{ `Товары: ${cart?.line_items?.length}` }}</div>
+
+      <UButton class="w-100 d-flex" @click="createOrder">
+        Перейти к оформлению
+      </UButton>
+    </div>
   </div>
 </template>
 
@@ -24,19 +26,41 @@ const { cart } = useCart()
 const { mutateAsync } = usePostOrdersCreate()
 
 const createOrder = () => {
-  mutateAsync(cart)
+  mutateAsync({ line_items: cart.value.line_items })
 }
 </script>
 
 <style lang="scss">
+@use '~/assets/scss/utils' as *;
+
 .cart {
+  margin-top: 120px;
+  margin-inline: auto;
+  max-width: 1200px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 
+  @include mobile {
+    margin-top: 20px;
+    flex-direction: column;
+  }
+
   &__items {
     display: flex;
     flex-direction: column;
   }
+
+  &__create-order {
+    box-shadow: 1px 1px 8px 0 black;
+    border-radius: 10px;
+    padding: 10px;
+    max-width: 360px;
+
+    display: inline-flex;
+    flex-direction: column;
+    gap: 20px;
+    max-height: 100px;
+  }
 }
 </style>