feat: 通用header

app/app.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <NuxtPage />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
   </div>
 </template>
 <script setup>

app/components/FooterH5.vue

@@ -0,0 +1,124 @@
+<template>
+  <footer class="h5-footer">
+    <div class="h5-footer-container">
+      <div class="footer-brand">
+        <h2 class="brand-title">DDAC</h2>
+      </div>
+      <nav class="footer-nav">
+        <div class="nav-column">
+          <h3 class="nav-title">安全产品</h3>
+          <div class="nav-link">SDK安全加速</div>
+          <div class="nav-link">Web安全加速</div>
+          <div class="nav-link">TCP安全加速</div>
+          <div class="nav-link">DNS安全加速</div>
+        </div>
+        <div class="nav-column">
+          <h3 class="nav-title">关于我们</h3>
+          <div class="nav-link">企业简介</div>
+          <div class="nav-link">资质认证</div>
+          <div class="nav-link">法律条款</div>
+        </div>
+      </nav>
+      <div class="footer-contact">
+        <span class="contact-label">联系我们</span>
+        <a href="mailto:support@yundun.com" class="contact-email">support@yundun.com</a>
+      </div>
+      <div class="footer-bottom">
+        <p class="copyright">Copyright@2025 SUYUN, All Rights Reserved</p>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped lang="scss">
+.h5-footer {
+  width: 100%;
+  background-color: #030014;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 40px 16px;
+  margin-top: auto;
+}
+
+.h5-footer-container {
+  max-width: 768px;
+  margin: 0 auto;
+}
+
+.footer-brand {
+  margin-bottom: 32px;
+
+  .brand-title {
+    font-family: 'Roboto', sans-serif;
+    font-size: 28px;
+    font-weight: 900;
+    color: #ffffff;
+    margin: 0;
+  }
+}
+
+.footer-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  margin-bottom: 32px;
+}
+
+.nav-column {
+  .nav-title {
+    font-family: 'Source Han Sans CN', sans-serif;
+    font-size: 18px;
+    font-weight: 500;
+    color: #ffffff;
+    margin: 0 0 16px 0;
+  }
+
+  .nav-link {
+    font-family: 'Source Han Sans CN', sans-serif;
+    font-size: 14px;
+    color: #bdbdbd;
+    margin-bottom: 12px;
+    cursor: pointer;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &:hover {
+      color: #ffffff;
+    }
+  }
+}
+
+.footer-contact {
+  margin-bottom: 24px;
+
+  .contact-label {
+    display: block;
+    font-family: 'Source Han Sans CN', sans-serif;
+    font-size: 16px;
+    color: #ffffff;
+    margin-bottom: 8px;
+  }
+
+  .contact-email {
+    font-family: 'Source Han Sans CN', sans-serif;
+    font-size: 14px;
+    color: #bdbdbd;
+    text-decoration: none;
+  }
+}
+
+.footer-bottom {
+  .copyright {
+    font-family: 'Source Han Sans CN', sans-serif;
+    font-size: 12px;
+    color: #666;
+    margin: 0;
+    text-align: center;
+  }
+}
+</style>

app/components/HeaderH5.vue

@@ -0,0 +1,147 @@
+<template>
+  <header class="h5-header">
+    <div class="h5-header-container">
+      <a href="/" class="brand">
+        <img src="/logo.png" alt="DDAC logo" class="brand-logo" width="24" height="24" />
+        <h1 class="brand-title">DDAC</h1>
+      </a>
+      <button class="menu-button" @click="toggleMenu">
+        <span class="menu-icon"></span>
+      </button>
+    </div>
+    <nav v-show="isMenuOpen" class="h5-nav">
+      <div class="nav-item">首页</div>
+      <div class="nav-item">产品</div>
+      <div class="nav-item">行业解决方案</div>
+      <div class="nav-item">文档中心</div>
+      <div class="nav-item">了解我们</div>
+      <div class="nav-actions">
+        <div class="nav-action-item">登录</div>
+        <div class="nav-action-item register">注册</div>
+      </div>
+    </nav>
+  </header>
+</template>
+
+<script setup>
+const isMenuOpen = ref(false)
+
+const toggleMenu = () => {
+  isMenuOpen.value = !isMenuOpen.value
+}
+</script>
+
+<style lang="scss" scoped>
+.h5-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: #030014;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.h5-header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+
+  .brand-logo {
+    margin-right: 8px;
+  }
+
+  .brand-title {
+    color: #FFF;
+    font-family: Roboto;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    margin: 0;
+  }
+}
+
+.menu-button {
+  width: 32px;
+  height: 32px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.menu-icon {
+  display: block;
+  width: 24px;
+  height: 2px;
+  background-color: #fff;
+  position: relative;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    width: 24px;
+    height: 2px;
+    background-color: #fff;
+    left: 0;
+  }
+
+  &::before {
+    top: -8px;
+  }
+
+  &::after {
+    top: 8px;
+  }
+}
+
+.h5-nav {
+  background: #030014;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 16px;
+}
+
+.nav-item {
+  padding: 12px 0;
+  color: #FFF;
+  font-family: "Source Han Sans CN";
+  font-size: 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+}
+
+.nav-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.nav-action-item {
+  flex: 1;
+  padding: 12px;
+  text-align: center;
+  color: #FFF;
+  font-family: "Source Han Sans CN";
+  font-size: 14px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.05);
+
+  &.register {
+    background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
+  }
+}
+</style>

app/layouts/h5.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="h5-layout">
+    <HeaderH5 />
+    <main class="h5-layout-main">
+      <slot />
+    </main>
+    <FooterH5 />
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped lang="scss">
+.h5-layout {
+  width: 100%;
+  min-height: 100vh;
+  background-color: #030014;
+  display: flex;
+  flex-direction: column;
+}
+
+.h5-layout-main {
+  flex: 1;
+  width: 100%;
+  padding: 60px 16px 16px;
+}
+</style>

app/layouts/pc.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="pc-layout">
+    <Header />
+    <main class="pc-layout-main">
+      <slot />
+    </main>
+    <Footer />
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped lang="scss">
+.pc-layout {
+  width: 100%;
+  min-height: 100vh;
+  background-color: #030014;
+  display: flex;
+  flex-direction: column;
+}
+
+.pc-layout-main {
+  flex: 1;
+  width: 100%;
+}
+</style>

app/pages/h5/about.vue

@@ -1,5 +1,23 @@
 <template>
-  <div>
+  <div class="h5-about">
     <h1>关于（H5）</h1>
   </div>
 </template>
+
+<script setup>
+definePageMeta({
+  layout: 'h5'
+})
+</script>
+
+<style scoped lang="scss">
+.h5-about {
+  color: #fff;
+  text-align: center;
+  padding-top: 40px;
+
+  h1 {
+    font-size: 32px;
+  }
+}
+</style>

app/pages/h5/index.vue

@@ -1,8 +1,34 @@
 <template>
-  <div>
+  <div class="h5-index">
     <h1>H5 首页</h1>
     <nav>
       <NuxtLink to="/h5/about">关于（H5）</NuxtLink>
     </nav>
   </div>
 </template>
+
+<script setup>
+definePageMeta({
+  layout: 'h5'
+})
+</script>
+
+<style scoped lang="scss">
+.h5-index {
+  color: #fff;
+  text-align: center;
+  padding-top: 40px;
+
+  h1 {
+    font-size: 32px;
+    margin-bottom: 24px;
+  }
+
+  nav {
+    a {
+      color: #7D46FF;
+      text-decoration: none;
+    }
+  }
+}
+</style>

app/pages/pc/about.vue

@@ -1,5 +1,27 @@
 <template>
-  <div>
+  <div class="about-page">
     <h1>关于（PC）</h1>
   </div>
 </template>
+
+<script setup>
+definePageMeta({
+  layout: 'pc'
+})
+</script>
+
+<style scoped lang="scss">
+.about-page {
+  width: 100%;
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 120px 20px 20px;
+  min-height: calc(100vh - 200px);
+
+  h1 {
+    color: #fff;
+    font-size: 48px;
+    text-align: center;
+  }
+}
+</style>

app/pages/pc/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="container">
-    <Header></Header>
     <section class="main-content">
       <!-- 标题区域和视频背景 -->
       <section class="hero-section">
@@ -231,11 +230,14 @@
         <ParticlesCanvas class="canvas-overlay" />
       </section>
     </section>
-    <Footer></Footer>
   </div>
 </template>
 
 <script setup>
+definePageMeta({
+  layout: 'pc'
+})
+
 import { ref } from 'vue'
 import StatsSection from '~/components/home/StatsSection.vue'
 import ProductTabs from '~/components/home/ProductTabs.vue'