<template>
  <main class="main-content">
    <div class="main-content-container">
      <TheClock />
      <TheSearchBar />
      <GridCanvas />
    </div>
  </main>
</template>

<script setup lang="ts">

import TheClock from '@/components/TheClock/index.vue';

import TheSearchBar from '@/components/TheSearchBar/index.vue';

import GridCanvas from '@/components/GridCanvas/index.vue';

</script>

<style lang="scss" scoped>
.main-content {
  padding-left: var(--sidebar-width); // 与侧栏宽度保持一致
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start; // 内容顶部对齐
  overflow-y: auto;
}

.main-content-container {
  width: 100%;
  max-width: var(--content-max-width); // 内容区域最大宽度
  padding: var(--content-padding); // 内容区内边距
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
