Files
jinshen-website/app/layouts/default.vue
R2m1liA 06c30a7ea3
All checks were successful
deploy to server / build-and-deploy (push) Successful in 2m50s
feat: 页面布局的移动端适配
- 当竖屏时隐藏footer
2025-10-31 17:04:12 +08:00

44 lines
723 B
Vue

<template>
<el-container class="app-container">
<el-header height="auto" class="page-header">
<jinshen-header />
</el-header>
<el-main class="main-content">
<slot />
</el-main>
<el-footer height="auto" class="page-footer">
<jinshen-footer />
</el-footer>
</el-container>
</template>
<style scoped>
.app-container {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 0;
}
.page-header {
padding: 0px;
margin-bottom: auto;
}
.main-content {
flex: 1;
padding: 0;
overflow-y: auto;
}
.page-footer {
padding: 0px;
}
@media (max-width: 768px) {
.page-footer {
display: none;
}
}
</style>