<template>
  <div class="ma-auto w-1440px">
    <!-- 搜索 -->
    <KlSearch></KlSearch>
    <!-- 菜单 -->
    <!-- <KlMenuV2 /> -->
    <!-- banner -->
    <div class="banner-container">
      <!-- <SideMenu class="side-menu" /> -->
      <!-- <MainContent class="main-content" /> -->
    </div>
    <!-- 学习方法推荐 -->
    <!-- <LearningRecommendations></LearningRecommendations> -->
    <!-- 推荐栏目 -->
    <!-- <RecommendedColumns></RecommendedColumns> -->
    <!-- 热门图纸 -->
    <!-- <PopularDrawings></PopularDrawings> -->
    <!-- 排行榜 -->
    <!-- <Leaderboard></Leaderboard> -->
  </div>
</template>

<script setup lang="ts">
  import KlSearch from '~/layout/kl-search/index.vue'
  import KlMenuV2 from '~/layout/kl-menus-v2/index.vue'
  import SideMenu from './components/SideMenu.vue'
  import MainContent from './components/MainContent.vue'
  import RecommendedColumns from './components/RecommendedColumns.vue'
  import PopularDrawings from './components/PopularDrawings.vue'
  import Leaderboard from './components/Leaderboard.vue'
  import LearningRecommendations from './components/LearningRecommendations.vue'
</script>

<style scoped>
  .banner-container {
    display: flex;
    height: 480px;
    background-color: #f0f2f5;
    border: 1px solid #eeeeee;
  }

  .side-menu {
    flex-shrink: 0;
  }

  .main-content {
    flex: 1;
  }
</style>
