feat(mobile): 添加平板设备适配支持

- 在移动端布局中增加平板设备（768px-1024px）的响应式适配
- 根据设备类型动态调整根字体大小和Header高度
- 为平板设备优化布局间距和最大宽度限制
- 通过provide/inject在Header组件中注入动态高度值

app/assets/scss/main.scss

@@ -12,11 +12,31 @@ html {
   font-family: 'Source Han Sans CN', sans-serif;
 }
 
-@media (max-width: 768px) {
+// 断点定义
+// - mobile: ≤ 767px (手机)
+// - tablet: 768px - 1024px (平板)
+// - desktop: > 1024px (桌面端)
+
+// 手机端断点 (≤ 767px)
+@media (max-width: 767px) {
   html {
     font-size: clamp(32px, 10vw, 46px);
   }
 }
+
+// 平板断点 (768px - 1024px)
+@media (min-width: 768px) and (max-width: 1024px) {
+  html {
+    font-size: clamp(37.5px, 5vw, 45px);
+  }
+}
+
+// 平板横屏适配 (1025px - 1280px)
+@media (min-width: 1025px) and (max-width: 1280px) {
+  html {
+    font-size: 42px;
+  }
+}
 html,
 body,
 ul,

app/components/mobile/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <header class="mb-header">
-    <div class="mb-header-container">
+    <div class="mb-header-container" :style="{ height: headerHeight }">
       <a href="/" class="brand">
         <NuxtImg src="/logo.png" alt="DDAC logo" class="brand-logo" width="14" height="14" />
         <h1 class="brand-title">DDAC</h1>
@@ -60,6 +60,8 @@
 const isMenuOpen = ref(false)
 const isProductsOpen = ref(false)
 
+const headerHeight = inject('headerHeight')
+
 const toggleMenu = () => {
   isMenuOpen.value = !isMenuOpen.value
   // 关闭菜单时也关闭产品子菜单

app/layouts/mobile.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile-layout">
+  <div class="mobile-layout" :class="{ 'is-tablet': isTablet }">
     <Header />
     <main class="mobile-layout-main">
       <slot />
@@ -12,26 +12,21 @@
 import Header from '~/components/mobile/Header.vue'
 import Footer from '~/components/mobile/Footer.vue'
 
-// const { width } = useWindowSize()
-
-// const updateRootFontSize = (value) => {
-//   const baseWidth = 375
-//   const baseFont = 37.5
-//   const minFont = 32
-//   const maxFont = 46
-//   const nextFont = (value / baseWidth) * baseFont
-//   const finalFont = Math.min(Math.max(nextFont, minFont), maxFont)
-
-//   if (typeof document !== 'undefined') {
-//     document.documentElement.style.fontSize = `${finalFont}px`
-//   }
-// }
-
-// watchEffect(() => {
-//   if (width.value > 0) {
-//     updateRootFontSize(width.value)
-//   }
-// })
+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">
@@ -47,6 +42,15 @@ import Footer from '~/components/mobile/Footer.vue'
 .mobile-layout-main {
   flex: 1;
   width: 100%;
-  padding: 60px 16px 16px;
+  padding: v-bind(mainPadding);
+  box-sizing: border-box;
+}
+
+// 平板模式样式
+.mobile-layout.is-tablet {
+  .mobile-layout-main {
+    max-width: 1024px;
+    margin: 0 auto;
+  }
 }
 </style>