<template>
  <div id="app">
    <header class="header">
      <h1>猪场管理系统</h1>
      <nav class="navigation">
        <el-menu mode="horizontal" :router="true">
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/devices">设备管理</el-menu-item>
        </el-menu>
      </nav>
    </header>
    <main class="main-content">
      <router-view />
    </main>
    <footer class="footer">
      <p>© 2025 猪场管理系统. All rights reserved.</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style scoped>
.header {
  background-color: #409EFF;
  color: white;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

.header h1 {
  text-align: center;
  margin-bottom: 1rem;
}

.navigation {
  max-width: 1200px;
  margin: 0 auto;
}

.main-content {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
  min-height: calc(100vh - 100px);
}

.footer {
  text-align: center;
  padding: 1rem;
  background-color: #f5f5f5;
  border-top: 1px solid #ebeef5;
}
</style>