diff --git a/src/components/home/articleitem.vue b/src/components/home/articleitem.vue
new file mode 100644
index 0000000..7940d7a
--- /dev/null
+++ b/src/components/home/articleitem.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="articleitem">
+    <div class="title">这是标题这是标题这是标题这是标题</div>
+    <div class="neirong">
+      这是内容这是内容这是内容这是内容这是内容这是内容这是内容是内容这是
+      内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内
+      容这是内容...
+    </div>
+    <div class="other">
+        <p class="auth">猫猫子</p>
+        <p class="data">2021/09/09</p>
+        <p class="type">分类</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "articleitem",
+};
+</script>
+
+<style lang="scss" scoped>
+.articleitem {
+  width: 899px;
+//   height: 248px;
+  border: 1px solid #707070;
+  margin: 0 auto;
+  padding-left:38px;
+  .title {
+    width: 764px;
+    font-size: 25px;
+    font-weight:bold;
+    margin-bottom:20px;
+    margin-top:16px;
+  }
+  .neirong{
+      width:764px;
+      font-size:20px;
+  }
+  .other{
+        width:300px;
+        display: flex;
+        justify-content: space-between;
+        font-size:20px;
+        margin-top:40px;
+        margin-bottom:10px
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/home/topnav.vue b/src/components/home/topnav.vue
index af1bcdb..516b2e3 100644
--- a/src/components/home/topnav.vue
+++ b/src/components/home/topnav.vue
@@ -1,21 +1,48 @@
 <template>
   <div class="topnav">
-    <div class="left">dsadsa</div>
+    <div class="left">{{ blogname }}</div>
+    <div class="right">
+      <n-button class="btn">首页</n-button>
+      <n-button class="btn">发布</n-button>
+      <n-button class="btn">后台</n-button>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "topnav"
-}
+  name: "topnav",
+  setup() {
+    return {
+      blogname: "猫猫子的小窝",
+    };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-.topnav{
-  .left{
+.topnav {
+  display: flex;
+  justify-content: space-between;
+  padding-top:24px;
+  .left {
     width: 370px;
     height: 88px;
-    background: rgba(212, 223, 230, 0.66);;
+    border-radius: 50px;
+    background: rgba(212, 223, 230, 0.66);
+    text-align: center;
+    line-height: 88px;
+    font-size: 40px;
+    font-weight: bold;
+    margin-left:35px;
+  }
+  .right{
+    .btn{
+      width:149px;
+      height:60px;
+      font-size:25px;
+      margin-right:25px;
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/home/uinfo.vue b/src/components/home/uinfo.vue
new file mode 100644
index 0000000..ff12dbf
--- /dev/null
+++ b/src/components/home/uinfo.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="uinfo">
+      <div class="photo"></div>
+      <div class="info">猫猫子</div>
+      <div class="info">xxx@126.com</div>
+      <div class="info">xxxx.git</div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped> 
+.uinfo{
+    border:1px solid #707070;
+    .photo{
+        width:186px;
+        height: 174px;
+        border-radius: 90%;
+        background: blue;
+        margin:0 auto;
+        margin-bottom:46px;
+    }
+    .info{
+        font-size:25px;
+        color:#0f0f0f;
+        margin-bottom:79px;
+        text-align: center;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/page/add.vue b/src/page/add.vue
new file mode 100644
index 0000000..073aad4
--- /dev/null
+++ b/src/page/add.vue
@@ -0,0 +1,13 @@
+<template>
+  add
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/page/home.vue b/src/page/home.vue
index 3bbe45e..6d355f5 100644
--- a/src/page/home.vue
+++ b/src/page/home.vue
@@ -1,19 +1,37 @@
 <template>
 <div class="top">
   <topnav></topnav>
-  {{aaa}}
 </div>
+<div class="main">
+  <div class="list">
+    <articleitem class="item"></articleitem>
+    <articleitem class="item"></articleitem>
+    <articleitem class="item"></articleitem>
+    <articleitem class="item"></articleitem>
+    <articleitem class="item"></articleitem>
+    <articleitem class="item"></articleitem>
+  </div>
+
+  <div >
+    <uinfo></uinfo>
+  </div>
+</div>
+
 
 </template>
 
 <script>
 import {defineComponent} from 'vue'
 import topnav from "@/components/home/topnav.vue"
+import articleitem from "@/components/home/articleitem.vue"
+import uinfo from "@/components/home/uinfo.vue"
 export default defineComponent({
  name: 'home',
  props: {},
   components:{
-   topnav:topnav
+   topnav:topnav,
+   articleitem:articleitem,
+   uinfo
   },
   setup(props) {
     // console.log(props.title)
@@ -25,12 +43,26 @@ export default defineComponent({
 
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .top{
   width: 100vw;
   height: 100vh;
   background:url("../static/img/topbg.jpg")  no-repeat;
   background-size: cover;
-
+}
+.main{
+  width:1644px;
+  margin:0 auto;
+  display:flex;
+  justify-content: space-between;
+  .list{
+    .item{
+      margin-bottom:43px;
+    }
+  }
+  .uinfo{
+    width:333px;
+    height:577px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/page/login.vue b/src/page/login.vue
index 3a28ce8..ff5d594 100644
--- a/src/page/login.vue
+++ b/src/page/login.vue
@@ -1,5 +1,7 @@
 <template>
-  login
+  <div class="login">
+    
+  </div>
 </template>
 
 <script>
diff --git a/src/route/index.ts b/src/route/index.ts
index 0990f46..cb01aa5 100644
--- a/src/route/index.ts
+++ b/src/route/index.ts
@@ -17,6 +17,7 @@ for(let i in files){
   }
 
 }
+console.log(routes1)
 
 // for(let i in zujian){
 //   console.log(i)