79 lines
1.3 KiB
Vue
Raw Normal View History

2025-07-22 14:39:45 +08:00
<template>
2025-07-28 09:51:21 +08:00
<n-message-provider>
<n-layout class="app-layout">
<!-- 顶部导航 -->
<n-layout-header class="header" bordered>
<AppHeader />
</n-layout-header>
2025-07-22 14:39:45 +08:00
2025-07-28 09:51:21 +08:00
<!-- 主要内容区域 -->
<n-layout-content class="content">
<slot />
</n-layout-content>
2025-07-22 14:39:45 +08:00
2025-07-28 09:51:21 +08:00
<!-- 底部 -->
<n-layout-footer class="footer" bordered>
<AppFooter />
</n-layout-footer>
</n-layout>
</n-message-provider>
2025-07-22 14:39:45 +08:00
</template>
<script setup lang="ts">
import AppHeader from './AppHeader.vue'
import AppFooter from './AppFooter.vue'
</script>
<style scoped>
.app-layout {
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
}
.header {
height: 64px;
width: 100%;
display: flex;
align-items: center;
padding: 0;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
flex-shrink: 0;
}
.content {
flex: 1;
width: 100%;
padding: 0;
background: #f5f5f5;
overflow-x: hidden;
}
.footer {
width: 100%;
background: #fff;
border-top: 1px solid #e8e8e8;
flex-shrink: 0;
}
/* 响应式调整 */
@media (max-width: 768px) {
.header {
height: 56px;
}
}
@media (max-width: 480px) {
.header {
height: 52px;
}
}
/* 全屏模式样式现在在App.vue中统一管理 */
</style>