<template>
    <div>
        <div class="top-container">
            <NoticeBoard />
            <WelcomeCalendar />
        </div>
         
        <div class="post-container">
            <PostPage />
        </div>
        <!-- <UserPage />  -->
        
        <!-- <PostDetail /> -->
        
    </div>
</template>

<script setup lang="js" name="MainPage">
import NoticeBoard from '@/components/NoticeBoard.vue';
import WelcomeCalendar from '@/components/WelcomeCalendar.vue';
import PostPage from '@/components/PostPage.vue';
// import UserPage from './UserPage.vue';
// import PostDetail from './PostDetail.vue';
</script>

<style scoped>
.top-container {
    display: flex;
    justify-content: center; /* 居中排列 */
    align-items: center; /* 顶部对齐 */
    padding: 10px;
    gap: 10px; /* 设置较小的间距 */
    width: 820px; /* 固定宽度 */
    height: 350px; /* 固定高度 */
    margin:20px auto 0; /* 上边距20px，左右居中 */
    overflow: hidden; /* 防止溢出 */
    box-sizing: border-box; /* 包括内边距在宽高内 */
}
.top-container > * {
    flex-shrink: 0;
}
.post-container {
    display: flex;
    justify-content: center; /* 居中排列 */
    align-items: center; /* 顶部对齐 */
    padding: 10px;
    width: 820px; /* 固定宽度 */
    margin: 20px auto; /* 上边距20px，左右居中 */
    box-sizing: border-box; /* 包括内边距在宽高内 */
}
</style>