cyber/src/pages/Home.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>