81 lines
1.7 KiB
Vue
81 lines
1.7 KiB
Vue
<script setup>
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div class="container">
|
||
<div class="container-home">
|
||
<header class="header">Header</header>
|
||
<aside class="sidebar">Sidebar</aside>
|
||
<main class="main-content">Main Content</main>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
justify-items: center;
|
||
}
|
||
/* 设置grid布局 */
|
||
.container-home {
|
||
display: grid;
|
||
grid-template-columns: 1fr 3fr; /* 默认2列，侧边栏占1份，内容区占3份 */
|
||
grid-template-rows: auto 1fr; /* 头部行高度自适应，内容行占满剩余空间 */
|
||
grid-template-areas:
|
||
"header header"
|
||
"sidebar main-content";
|
||
gap: 20px; /* 设置行列间距 */
|
||
align-content: center;
|
||
width: 50rem;
|
||
height: 65vh; /* 使容器高度为视口高度 */
|
||
margin-bottom: 80px;
|
||
}
|
||
|
||
/* 设置头部 */
|
||
.header {
|
||
grid-area: header;
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
padding: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 设置侧边栏 */
|
||
.sidebar {
|
||
grid-area: sidebar;
|
||
background-color: #f4f4f4;
|
||
padding: 20px;
|
||
border-right: 2px solid #ccc;
|
||
}
|
||
|
||
/* 设置内容区域 */
|
||
.main-content {
|
||
grid-area: main-content;
|
||
background-color: #ffffff;
|
||
padding: 20px;
|
||
border-left: 2px solid #ccc;
|
||
}
|
||
|
||
/* 响应式设计：小屏幕时，侧边栏会变为顶部 */
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
grid-template-columns: 1fr; /* 变成单列布局 */
|
||
grid-template-areas:
|
||
"header"
|
||
"sidebar"
|
||
"main-content"; /* 侧边栏在头部下面 */
|
||
}
|
||
|
||
.sidebar {
|
||
border-right: none; /* 去掉侧边栏的右边框 */
|
||
border-bottom: 2px solid #ccc; /* 小屏幕时侧边栏的底部有个边框 */
|
||
}
|
||
}
|
||
|
||
</style> |