карты пвз

layouts/checkout.vue

@@ -12,19 +12,28 @@
       </div>
     </header>
 
-    <main class="main">
+    <main class="main" :style="showFooter ? 'margin-bottom: 54px' : 'margin-bottom: 0'">
       <UContainer class="container">
         <slot />
       </UContainer>
     </main>
+
+    <footer class="footer" :class="{ 'footer--hidden': !showFooter }" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { useCheckout } from '../composables/useCheckout'
+import { useMediaQuery } from '@vueuse/core'
+import { useCheckout } from '~/composables/useCheckout'
+
+const route = useRoute()
+const { t } = useI18n()
+const isMobile = useMediaQuery('(max-width: 1280px)', {
+  ssrWidth: 768,
+})
+const showFooter = computed(() => route.path !== '/checkout/delivery' && isMobile.value)
 
 const { previewStep, currentCheckoutStep, checkoutSteps } = useCheckout()
-const { t } = useI18n()
 </script>
 
 <style lang="scss" scoped>
@@ -63,8 +72,27 @@ const { t } = useI18n()
   }
 }
 
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  height: 70px;
+  background-color: #0f172b;
+
+  &--hidden {
+    display: none;
+  }
+}
+
 .main {
   flex: 1;
   margin-top: 54px;
+  margin-bottom: 64px;
+
+  &__hide-footer {
+    margin-bottom: 0 !important;
+  }
 }
 </style>

layouts/default.vue

@@ -32,15 +32,20 @@
       </UContainer>
     </main>
 
-    <!--    <footer class="footer"> -->
-    <!--      Footer -->
-    <!--    </footer> -->
+    <footer class="footer" :class="{ 'footer--hidden': !(route.path === '/cart' && isMobile) }" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+
+const route = useRoute()
 const router = useRouter()
 const { cart } = useCart()
+
+const isMobile = useMediaQuery('(max-width: 1280px)', {
+  ssrWidth: 768,
+})
 </script>
 
 <style lang="scss" scoped>
@@ -106,12 +111,22 @@ const { cart } = useCart()
   }
 }
 
-.main {
-  flex: 1;
-  margin-top: 54px;
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  height: 70px;
+  background-color: #0f172b;
+
+  &--hidden {
+    display: none;
+  }
 }
 
-.footer {
-  margin-top: auto;
+.main {
+  flex: 1;
+  margin-block: 54px 64px;
 }
 </style>