57 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			57 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <div class="ma-auto w-1440px">
 | |
|     <SeoHead :title="tdkData?.title" :description="tdkData?.describeText" :keywords="tdkData?.keyword" />
 | |
|     <!-- 搜索 -->
 | |
|     <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 '~/components/kl-search/index.vue'
 | |
|   import KlMenuV2 from '~/components/kl-menus-v2/index.vue'
 | |
|   import SideMenu from '~/pages/home/components/SideMenu.vue'
 | |
|   import MainContent from '~/pages/home/components/MainContent.vue'
 | |
|   import RecommendedColumns from '~/pages/home/components/RecommendedColumns.vue'
 | |
|   import PopularDrawings from '~/pages/home/components/PopularDrawings.vue'
 | |
|   import Leaderboard from '~/pages/home/components/Leaderboard.vue'
 | |
|   import LearningRecommendations from '~/pages/home/components/LearningRecommendations.vue'
 | |
|   import { getTDK } from '~/api/home/index'
 | |
| 
 | |
|   const { data: tdkData } = useAsyncData('get-tdk-home', async () => {
 | |
|     const res = await getTDK()
 | |
|     return res.data
 | |
|   })
 | |
| </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>
 | 
