diff --git a/src/IndexArticleDetail.vue b/src/IndexArticleDetail.vue
index ec0bcb1..0349274 100644
--- a/src/IndexArticleDetail.vue
+++ b/src/IndexArticleDetail.vue
@@ -1,5 +1,6 @@
 <template>
-  <div>
+  <div style="padding-top:0.88rem">
+    <heads></heads>
     <div class="line"></div>
     <p class="question">有哪些击中你内心阴暗处的句子？</p>
     <div class="line"></div>
@@ -14,10 +15,9 @@
     <articles></articles>
 
     <p class="title">热门推荐</p>
-  <privatets></privatets>
+    <privatets></privatets>
     <articles></articles>
     <articles></articles>
-    
   </div>
 </template>
 
@@ -25,7 +25,9 @@
 import follow from "./components/indexFollow";
 import privates from "./components/indexprivate";
 import articles from "./components/indexarticle";
-import privatets from "./components/indexprivatet"
+import privatets from "./components/indexprivatet";
+import heads from "./components/indexhead";
+
 export default {
   name: "IndexArticleDetail",
   data() {
@@ -35,7 +37,8 @@ export default {
     follow,
     privates,
     articles,
-    privatets
+    privatets,
+    heads
   }
 };
 </script>
diff --git a/src/components/indexhead.vue b/src/components/indexhead.vue
new file mode 100644
index 0000000..8c0e0e6
--- /dev/null
+++ b/src/components/indexhead.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <van-popup v-model="show" position="top" :style="{ height: '2.82rem' }">
+      <div style="height:0.88rem"></div>
+      <div class="mnuelist">
+        <div>首页</div>
+        <div>我的主页</div>
+        <div>退出登录</div>
+      </div>
+    </van-popup>
+    <div class="head">
+      <img class="logo" src alt srcset />
+      <div class="search">
+        <img src alt />
+        <input type="text" placeholder="搜索" />
+      </div>
+      <div class="mnue" @click="isshow">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+  .mnuelist{
+      padding:26px;
+      height: 194px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+      color: #333;
+      font-size: 24px;
+  }
+.head {
+  position: fixed;
+  top: 0;
+  z-index: 9999;
+  width: 100%;
+  height: 88px;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  .logo {
+    width: 115px;
+    height: 37px;
+    background-color: #000;
+    display: block;
+    margin-left: 30px;
+  }
+  .search {
+    margin-left: 24px;
+    width: 485px;
+    height: 60px;
+    background-color: #f0f0f0;
+    box-sizing: border-box;
+    border: 1px solid rgba(233, 233, 233, 1);
+    border-radius: 30px;
+    display: flex;
+    align-items: center;
+    > img {
+      margin-left: 23px;
+      width: 30px;
+      height: 30px;
+      background-color: #000;
+    }
+    > input {
+      margin-left: 21px;
+      color: #333;
+      font-size: 24px;
+      height: 26px;
+      border: none;
+      background-color: #f0f0f0;
+    }
+  }
+  .mnue {
+    display: flex;
+    flex-direction: column;
+    height: 15px;
+    width: 24px;
+    justify-content: space-between;
+    margin-left: 42px;
+    > div {
+      width: 100%;
+      height: 3px;
+      background-color: #95998f;
+    }
+  }
+}
+</style>
+<script>
+export default {
+  name: "indexhead",
+  data() {
+    return {
+      show: false
+    };
+  },
+  methods: {
+    isshow() {
+      this.show = !this.show;
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/index.vue b/src/index.vue
index d4d6e2f..fc65de1 100644
--- a/src/index.vue
+++ b/src/index.vue
@@ -1,30 +1,10 @@
 <template>
   <div class="box">
-    <van-popup v-model="show" position="top" :style="{ height: '2.82rem' }" >
-        <div style="height:0.88rem"></div>
-        <div class="mnuelist">
-            <div>首页</div>
-            <div>我的主页</div>
-            <div>退出登录</div>
-        </div>
-    </van-popup>
-    <div class="head">
-      <img class="logo" src alt srcset />
-      <div class="search">
-        <img src alt />
-        <input type="text" placeholder="搜索" />
-      </div>
-      <div class="mnue" @click="isshow">
-        <div></div>
-        <div></div>
-        <div></div>
-      </div>
-    </div>
+    <heads></heads>
     <div class="list">
-        <list></list>
-        <list></list>
-        <list></list>
-
+      <list></list>
+      <list></list>
+      <list></list>
     </div>
   </div>
 </template>
@@ -34,93 +14,24 @@
   background-color: #f6f6f6;
   padding-top: 88px;
   box-sizing: border-box;
-  .head {
-      position: fixed;
-      top: 0;
-      z-index: 9999;
-    width: 100%;
-    height: 88px;
-    background-color: #fff;
-    display: flex;
-    align-items: center;
-    .logo {
-      width: 115px;
-      height: 37px;
-      background-color: #000;
-      display: block;
-      margin-left: 30px;
-    }
-    .search {
-      margin-left: 24px;
-      width: 485px;
-      height: 60px;
-      background-color: #f0f0f0;
-      box-sizing: border-box;
-      border: 1px solid rgba(233, 233, 233, 1);
-      border-radius: 30px;
-      display: flex;
-      align-items: center;
-      > img {
-        margin-left: 23px;
-        width: 30px;
-        height: 30px;
-        background-color: #000;
-      }
-      > input {
-        margin-left: 21px;
-        color: #333;
-        font-size: 24px;
-        height: 26px;
-        border: none;
-        background-color: #f0f0f0;
-      }
-    }
-    .mnue {
-      display: flex;
-      flex-direction: column;
-      height: 15px;
-      width: 24px;
-      justify-content: space-between;
-      margin-left: 42px;
-      > div {
-        width: 100%;
-        height: 3px;
-        background-color: #95998f;
-      }
-    }
-  }
-  .mnuelist{
-      padding:26px;
-      height: 194px;
-      box-sizing: border-box;
-      display: flex;
-      justify-content: space-between;
-      flex-direction: column;
-      color: #333;
-      font-size: 24px;
-  }
-  .list{
-      width: 100%;
 
+  .list {
+    width: 100%;
   }
 }
 </style>
 <script>
-import list from "./components/IndexList"
+import list from "./components/IndexList";
+import heads from "./components/indexhead"
 export default {
   name: "index",
   data() {
-    return {
-        show:false
-    };
+    return {};
   },
-  methods:{
-      isshow(){
-          this.show = !this.show
-      }
-  },
-  components:{
-      list
+  methods: {},
+  components: {
+    list,
+    heads
   }
 };
 </script>
\ No newline at end of file