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/asset/app.css b/src/asset/app.css
new file mode 100644
index 0000000000000000000000000000000000000000..38550cbfd1d09d5b28d6d3f78029fd2dbca1bb69
--- /dev/null
+++ b/src/asset/app.css
@@ -0,0 +1,16 @@
+* {
+    margin:0;
+    padding:0;
+}
+
+body,
+html{
+    background-color: bisque;
+    color:black;
+    width:100%;
+    font-size:14px;
+    letter-spacing:0.03em;
+}
+.el-card{
+    margin-bottom: 16px;
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 3ac0fe9b26d04552196b0b496b876cff9006fd59..54edf629381ca69d3e2fea4816a2897d4572c7c4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,8 @@ import 'buefy/dist/buefy.css'
 
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
+import '@/asset/app.css'
+
 
 import router from './router'
 // import store from './store'
diff --git a/src/view/Home.vue b/src/view/Home.vue
index c0f7fa2ced5b61b29f47f85fe96ecfb5d386d563..30428f3ba0d6999b35dacb4b56618c8e20d02a63 100644
--- a/src/view/Home.vue
+++ b/src/view/Home.vue
@@ -1,7 +1,14 @@
 <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>
@@ -9,13 +16,19 @@
 <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: {
             content: ''
           }
+
       }
   },
   created() {
diff --git a/src/view/card/CardBar.vue b/src/view/card/CardBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f71781e1f95793d26fab23552e970dd8f1d7f536
--- /dev/null
+++ b/src/view/card/CardBar.vue
@@ -0,0 +1,26 @@
+<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 scoped>
+</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..e74f2cbd6456ca07b5d0bc3ead782034e3b55228
--- /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: 'LoginWelcome',
+  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..958a5cefb0f0d10583b0bd8eb79835dd7f0e7a57
--- /dev/null
+++ b/src/view/card/Promotion.vue
@@ -0,0 +1,31 @@
+<template>
+    <el-card class="box-card" shadow="never">
+        <div slot="header">
+            <span>🎉推广🎉</span>
+        </div>
+        <div>
+            ---无内容---
+        </div>
+    </el-card>
+</template>
+
+<script>
+
+
+export default {
+  name: 'Promotion',
+  data() {
+      return {
+
+      }
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+
+</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..621c5fc8064d0f353035f7f96d3b050777f49d94
--- /dev/null
+++ b/src/view/card/Tip.vue
@@ -0,0 +1,46 @@
+<template>
+    <el-card class="box-card" shadow="never">
+        <div slot="header">
+            <span>每日一句</span>
+        </div>
+        <div>
+            <div class="has-text-left block">
+                {{tip.content }}
+            </div>
+            <!--mt-5 距离五个像素-->
+            <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().then(response=>{
+          const{ data }=response
+          this.tip=data
+        })
+      }
+  }
+}
+
+</script>
+
+
+<style scoped>
+
+</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..bcade7e8c59d041e7dc04f5d574a644c66ab1954
--- /dev/null
+++ b/src/view/post/Index.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+      <el-card>
+          <div class="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