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>
|