iyushy/WebWorld

1<script setup lang="ts">2import { RouterLink, RouterView } from 'vue-router'3</script>4 5<template>6  <header>7    <div class="header-content">8      <div class="logo-container">9        <h1>WebWorld</h1>10      </div>11      <nav>12        <RouterLink to="/">首页</RouterLink>13        <RouterLink to="/snake">贪吃蛇</RouterLink>14        <RouterLink to="/about">关于</RouterLink>15      </nav>16    </div>17  </header>18 19  <main>20    <RouterView />21  </main>22 23  <footer>24    <p>&copy; 2024 WebWorld. All rights reserved.</p>25  </footer>26</template>27 28<style scoped>29header {30  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);31  color: white;32  padding: 1rem 0;33  box-shadow: 0 2px 10px rgba(0,0,0,0.1);34}35 36.header-content {37  max-width: 1200px;38  margin: 0 auto;39  padding: 0 2rem;40  display: flex;41  justify-content: space-between;42  align-items: center;43}44 45.logo-container h1 {46  margin: 0;47  font-size: 2rem;48  font-weight: 700;49}50 51nav {52  display: flex;53  gap: 2rem;54}55 56nav a {57  color: white;58  text-decoration: none;59  font-weight: 500;60  padding: 0.5rem 1rem;61  border-radius: 0.5rem;62  transition: all 0.3s ease;63}64 65nav a:hover {66  background: rgba(255, 255, 255, 0.1);67}68 69nav a.router-link-exact-active {70  background: rgba(255, 255, 255, 0.2);71}72 73main {74  max-width: 1200px;75  margin: 0 auto;76  padding: 2rem;77  min-height: calc(100vh - 140px);78}79 80footer {81  background: #1a202c;82  color: white;83  text-align: center;84  padding: 1rem 0;85  margin-top: auto;86}87 88@media (max-width: 768px) {89  .header-content {90    flex-direction: column;91    gap: 1rem;92  }93  94  nav {95    justify-content: center;96    flex-wrap: wrap;97  }98  99  main {100    padding: 1rem;101  }102}103</style>104