diff --git a/src/api/tip.js b/src/api/tip.js
new file mode 100644
index 0000000000000000000000000000000000000000..8a836006f9bdf682ec69a035bc5bc18907bb8f8f
--- /dev/null
+++ b/src/api/tip.js
@@ -0,0 +1,8 @@
+import request from '@/util/request'
+
+export function getTodayTip() {
+    return request({
+        url: '/tip/today',
+        method: 'get'
+    })
+}
\ No newline at end of file
diff --git a/src/view/Home.vue b/src/view/Home.vue
index c0f7fa2ced5b61b29f47f85fe96ecfb5d386d563..c61c0a25aac09791c645179b314fe9d67079a27e 100644
--- a/src/view/Home.vue
+++ b/src/view/Home.vue
@@ -1,16 +1,27 @@
 <template>
   <div>
-      <div class="box">
-          {{billboard.content}}
+        <div class="box">
+            {{billboard.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 CardBar from "@/view/card/CardBar"
+import PostList from "@/view/post/Index"
 
 export default {
   name: 'Home',
+  components: {CardBar, TopicList:PostList},
   data() {
       return {
           billboard: {
diff --git a/src/view/card/CardBar.vue b/src/view/card/CardBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..44d6195f31d744a377fc7060f33f00bbd35c3a54
--- /dev/null
+++ b/src/view/card/CardBar.vue
@@ -0,0 +1,24 @@
+<template>
+<section>
+    <login-welcome />
+
+    <tip-card />
+
+    <PromotionCard />
+</section>
+</template>
+
+<script>
+import TipCard from '@/view/card/Tip'
+import PromotionCard from '@/view/card/Promotion'
+import LoginWelcome from '@/view/card/LoginWelcome'
+
+export default {
+    name: 'CardBar',
+    components: { LoginWelcome, PromotionCard, TipCard }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/view/card/LoginWelcome.vue b/src/view/card/LoginWelcome.vue
new file mode 100644
index 0000000000000000000000000000000000000000..499ef2dd5471e2fdf3c68c5d35d6df5a2206d321
--- /dev/null
+++ b/src/view/card/LoginWelcome.vue
@@ -0,0 +1,30 @@
+<template>
+    <el-card class="box-card" shadow="never">
+        <div slot="header">
+            <span>🎐 发帖</span>
+        </div>
+        <div>
+          暂不支持发帖功能！
+        </div>
+    </el-card>
+</template>
+
+<script>
+
+export default {
+  name: 'CardBar',
+  data() {
+      return {
+      }
+  },
+  created() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/view/card/Promotion.vue b/src/view/card/Promotion.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6313947a3dd6e0c2dc6bf0ba55fda01d5aaddf43
--- /dev/null
+++ b/src/view/card/Promotion.vue
@@ -0,0 +1,30 @@
+<template>
+    <el-card class="box-card" shadow="never">
+        <div slot="header">
+            <span>🎁 推广</span>
+        </div>
+        <div>
+          未收到有关推广！
+        </div>
+    </el-card>
+</template>
+
+<script>
+
+export default {
+  name: 'CardBar',
+  data() {
+      return {
+      }
+  },
+  created() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/view/card/Tip.vue b/src/view/card/Tip.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ec8c434acc1ec83cd1a0b89968cd0374e2ad57e2
--- /dev/null
+++ b/src/view/card/Tip.vue
@@ -0,0 +1,41 @@
+<template>
+    <el-card class="box-card" shadow="never">
+        <div slot="header">
+            <span>✨ 每日一句</span>
+        </div>
+        <div>
+            <div class="has-text-left block">
+                {{tip.content}}
+            </div>
+            <div class="has-text-right mt-5 block">
+                ——{{tip.author}}
+            </div>
+        </div>
+    </el-card>
+</template>
+
+<script>
+import {getTodayTip} from '@/api/tip'
+export default {
+  name: 'Tip',
+  data() {
+      return {
+          tip: {}
+      }
+  },
+  created() {
+      this.fetchTodayTip()
+  },
+  methods: {
+      fetchTodayTip() {
+          getTodayTip(this.type).then(response => {
+              const {data} = response
+              this.tip = data
+          })
+      }
+  }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/view/post/Index.vue b/src/view/post/Index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d5f74a5e30e6c7cd0d88eac35b1b1d6dcf53e9e4
--- /dev/null
+++ b/src/view/post/Index.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <el-card>
+        <div slot="header">
+            📝 帖子列表    
+        </div>
+        <div>
+            暂时没有帖子！
+        </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'TopicList',
+  data() {
+      return {
+      }
+  },
+  created() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file