ccdw-website/app.vue

<template>
  <div>
    <NuxtRouteAnnouncer /> <!-- Nuxt 路由宣告，用于可访问性 -->

    <!-- 页头区域 -->
    <header class="site-header">
      <!-- 
        将来在这里放置您的Logo。
        请将您的logo图片（例如 logo.png）放置在项目的 `public` 文件夹下。
        然后取消下面这行img标签的注释，并修改 src 指向您的logo文件。
        例如: <img src="/logo.png" alt="CCDW Logo" class="logo">
      -->
      <!-- <img src="/your-logo.png" alt="CCDW Logo" class="logo"> -->
      <h1>纯粹的玩 (CCDW)</h1>
      <!-- 导航菜单可以稍后添加到这里 -->
    </header>

    <!-- 主内容区域 -->
    <main class="site-main">
      <!-- 
        <NuxtPage /> 组件是 Nuxt 3 的核心部分，
        它会负责渲染 `pages` 目录中定义的页面组件。
        例如，您的主页内容 (pages/index.vue) 会在这里显示。
      -->
      <NuxtPage />
    </main>

    <!-- 页脚区域 -->
    <footer class="site-footer">
      <p>&copy; {{ new Date().getFullYear() }} 纯粹的玩 (CCDW). 保留所有权利.</p>
    </footer>
  </div>
</template>

<!-- 样式部分 -->
<style>
/* 全局样式和基本布局 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column; /* 使页脚可以固定在底部 */
  min-height: 100vh; /* 确保在内容不足时，页面也至少有视口高度 */
  color: #333; /* 默认文字颜色 */
  background-color: #f4f4f4; /* 页面背景色，可根据您的品牌调整 */
}

.site-header {
  background-color: #ffffff; /* 页头背景色 */
  padding: 1rem 2rem; /* 内边距 (上下 左右) */
  border-bottom: 1px solid #e0e0e0; /* 页头下边框，增加分割感 */
  display: flex; /* 使用flex布局以便对齐logo和标题 */
  align-items: center; /* 垂直居中对齐 */
  /* 如果有导航菜单，可以考虑使用 justify-content: space-between; */
  justify-content: center; /* 当前主要内容是标题，先居中 */
}

.logo {
  height: 50px; /* Logo高度，根据您的图片调整 */
  margin-right: 1rem; /* Logo和标题之间的间距 */
}

.site-header h1 {
  margin: 0; /* 去除h1默认的margin */
  font-size: 1.75rem; /* 标题字号 */
  color: #2c3e50; /* 标题颜色，深蓝灰色，Nuxt常用色调 */
}

.site-main {
  flex-grow: 1; /* 让主内容区域占据剩余的垂直空间 */
  padding: 2rem; /* 主内容区内边距 */
  max-width: 1200px; /* 内容最大宽度，防止在大屏幕上过宽 */
  width: 100%; /* 宽度占满容器 */
  margin: 0 auto; /* 水平居中内容 */
  box-sizing: border-box; /* padding和border不计入总宽度 */
}

.site-footer {
  background-color: #2c3e50; /* 页脚背景色 */
  color: white; /* 页脚文字颜色 */
  text-align: center; /* 文字居中 */
  padding: 1.5rem;
  margin-top: auto; /* 将页脚推到flex容器的底部 */
}

.site-footer p {
  margin: 0; /* 去除段落默认的margin */
}

/* 简单的响应式调整：针对小屏幕设备 */
@media (max-width: 768px) {
  .site-header {
    padding: 1rem; /* 调整小屏幕上的内边距 */
    flex-direction: column; /* 在小屏幕上，Logo和标题垂直排列 */
  }

  .logo {
    margin-right: 0; /* 移除水平间距 */
    margin-bottom: 0.5rem; /* Logo和标题之间的垂直间距 */
  }

  .site-header h1 {
    font-size: 1.5rem; /* 调整小屏幕上的标题字号 */
  }

  .site-main {
    padding: 1rem; /* 调整小屏幕上的主内容区内边距 */
  }
}
</style>