DDAC/app/layouts/mobile.vue

<template>
  <div class="mobile-layout" :class="{ 'is-tablet': isTablet }">
    <Header />
    <main class="mobile-layout-main">
      <slot />
    </main>
    <Footer />
  </div>
</template>

<script setup>
import Header from '~/components/mobile/Header.vue'
import Footer from '~/components/mobile/Footer.vue'

const { width } = useWindowSize()

// 平板断点: 768px - 1024px
const isTablet = computed(() => width.value >= 768 && width.value <= 1024)

// 平板模式下增加内边距 (与 header 高度匹配)
const mainPadding = computed(() => {
  const topPadding = isTablet.value ? '70px' : '54px' // header + gap
  return `${topPadding} ${isTablet.value ? '32px' : '16px'} ${isTablet.value ? '32px' : '16px'}`
})

// 平板模式下 Header 高度
const headerHeight = computed(() => isTablet.value ? '60px' : '44px')

provide('headerHeight', headerHeight)
</script>

<style scoped lang="scss">
.mobile-layout {
  width: 100%;
  min-height: 100vh;
  background-color: #030014;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.mobile-layout-main {
  flex: 1;
  width: 100%;
  padding: v-bind(mainPadding);
  box-sizing: border-box;
}

// 平板模式样式
.mobile-layout.is-tablet {
  .mobile-layout-main {
    max-width: 1024px;
    margin: 0 auto;
  }
}
</style>