diff --git a/src/App.vue b/src/App.vue
index b0c844ecb475b4fe5d5af2c2ccfb81702d120800..01ac28d5e69a706b0109d8ba1f9c8b829c6a24e5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,9 @@
-<template>
+npm<template>
   <div id="app">
     <div class="container">
       <router-view />
+     
+      
     </div>
   </div>
 </template>
diff --git a/src/view/Home.vue b/src/view/Home.vue
index c0f7fa2ced5b61b29f47f85fe96ecfb5d386d563..7872b5de27b2fe152a62cd5cf76872a523bb3e93 100644
--- a/src/view/Home.vue
+++ b/src/view/Home.vue
@@ -1,35 +1,51 @@
 <template>
   <div>
-      <div class="box">
-          {{billboard.content}}
+    <div class="box">
+      {{ billboard.content }}
+      <!--获取content 的内容 -->
+    </div>
+    <div class="columns">
+      <div class="column is-three-quarters">
+        <TopicList>
+
+        </TopicList>
+      </div>
+      <div class="column">
+        <CardBar>
+
+        </CardBar>
       </div>
+    </div>
   </div>
 </template>
 
 <script>
-import {getBillboard} from '@/api/billboard'
-
+import { getBillboard } from "@/api/billboard";
+import CardBar from "@/view/card/CardBar";
+import PostList from "@/view/post/index";
 export default {
-  name: 'Home',
+  name: "Home",
+  components: {CardBar,TopicList:PostList},
   data() {
-      return {
-          billboard: {
-            content: ''
-          }
-      }
+    return {
+      billboard: {
+        content: "加载中",
+      },
+    };
   },
   created() {
-    this.fetchBillboard()
+    this.fetchBillboard();
   },
   methods: {
     async fetchBillboard() {
+      //asysc 用来同步
       getBillboard().then((value) => {
-        const {data} = value
-        this.billboard = data
-      })
-    }
-  }
-}
+        const { data } = value;
+        this.billboard = data;
+      });
+    },
+  },
+};
 </script>
 
 <style>