<!-- App.vue - 应用程序根组件 -->
<template>
<div id="app">
<!-- 顶部导航栏 -->
<el-header height="60px">
<nav-bar />
</el-header>
<!-- 主要内容区域 -->
<el-main>
<router-view />
</el-main>
<!-- 底部页脚 -->
<el-footer height="60px">
<footer-bar />
</el-footer>
</div>
</template>
<script>
// 导入组件
import NavBar from './components/layout/NavBar.vue'
import FooterBar from './components/layout/FooterBar.vue'
export default {
name: 'App',
components: {
NavBar,
FooterBar
}
}
</script>
<style>
/* 全局样式 */
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #f5f7fa;
}
#app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.el-header {
background-color: #fff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 999;
}
.el-main {
flex: 1;
padding: 20px;
}
.el-footer {
background-color: #fff;
border-top: 1px solid #e6e6e6;
}
</style>