diff --git a/src/articledetail.vue b/src/articledetail.vue
new file mode 100644
index 0000000..1268a68
--- /dev/null
+++ b/src/articledetail.vue
@@ -0,0 +1,275 @@
+<template>
+  <div style="padding-top:0.88rem">
+    <heads></heads>
+    <div class="picbox">
+      <img src="./assets/logo.png" alt="" class="toppic">
+    </div>
+    
+    <follow :indexs="0"  class="follow"></follow>
+    <div class="line"></div>
+    <!-- <follow :indexs="1" class="follow"></follow> -->
+    <!-- <div class="line"></div> -->
+    <p class="title">相关推荐</p>
+    <privates></privates>
+    <articles></articles>
+
+    <articles></articles>
+
+    <p class="title" @click="show = true">热门推荐</p>
+    <privatets></privatets>
+    <articles></articles>
+    <articles></articles>
+    <van-popup v-model="show" position="bottom" :style="{ height: '100%' }" class="linshi">
+      <div class="top">
+        <p class="tiao">389条评论</p>
+        <p class="qie">
+          <img class="qiehuan" src="./assets/qiehuan.png" alt srcset /> 切换为时间排序
+        </p>
+        <img class="quit" src="./assets/quit.png" alt @click="show = !show" />
+      </div>
+      <div class="bodys">
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+        <comment></comment>
+      </div>
+      <div class="reply">
+        <img @click="biaoqing = !biaoqing" src="./assets/baoqing.png" alt srcset />
+        <textarea placeholder="写下你的评论..." v-model="content"></textarea>
+        <p>发布</p>
+        <div v-show="biaoqing"><Emotion @emotion="handleEmotion" :height="4" ></Emotion></div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import follow from "./components/indexFollow1";
+import privates from "./components/indexprivate";
+import articles from "./components/indexarticle";
+import privatets from "./components/indexprivatet";
+import heads from "./components/indexhead";
+import comment from "./components/indexcomment";
+import Emotion from './components/Emotion/index'
+export default {
+  name: "ArticleDetail",
+  data() {
+    return {
+      show: false,
+      content:"",
+      biaoqing:false
+    };
+  },
+  components: {
+    follow,
+    privates,
+    articles,
+    privatets,
+    heads,
+    comment,
+    Emotion
+  },
+  methods:{
+    handleEmotion (i) {
+      this.content += i
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+.follow{
+  padding: 23px;
+}
+.linshi {
+  z-index: 999999 !important;
+  .top {
+    background-color: #fff;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 98px;
+    border-bottom: #f6f6f6 solid 1px;
+    display: flex;
+    align-items: center;
+    .tiao {
+      font-size: 30px;
+      color: #000;
+      font-weight: 500;
+      margin-left: 31px;
+    }
+    .qie {
+      font-size: 28px;
+      color: #95998f;
+      margin-left: 208px;
+      padding-right: 28px;
+      border-right: #f6f6f6 solid 2px;
+      height: 42px;
+      line-height: 42px;
+      display: flex;
+      align-items: center;
+      .qiehuan {
+        width: 26px;
+        height: 22px;
+        display: block;
+        margin-right: 9px;
+      }
+    }
+    .quit {
+      width: 28px;
+      height: 29px;
+      font-size: 29px;
+      margin-left: 34px;
+      display: flex;
+      > img {
+        width: 33px;
+        height: 33px;
+      }
+      // background-image: url("./assets/quit.png")
+    }
+  }
+  .bodys {
+    width: 100%;
+    height: 100%;
+    // background-color: #000;
+    overflow: hidden;
+    overflow-y: auto;
+    padding: 98px 0;
+    box-sizing: border-box;
+  }
+  .reply {
+    width: 100%;
+    height: 98px;
+    position: absolute;
+    bottom: 0;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    >img{
+      width: 33px;
+      height: 33px;
+      margin-left: 30px
+    }
+    >textarea{
+      margin-left: 21px;
+      border: none;
+      font-size: 30px;
+      height: 35px;
+      width: 550px;
+      // word-break: break-all;
+      // text-align: center;
+    }
+    >p{
+      margin-left: 30px;
+      font-size: 30px;
+      color: #6B9147;
+    }
+    >div{
+      position: absolute;
+      bottom: 98px;
+      background-color: #fff;
+      width: 100%;
+    }
+  }
+}
+.line {
+  height: 0.2rem;
+  width: 100%;
+  background-color: #f6f6f6;
+}
+.question {
+  height: 1rem;
+  width: 100%;
+  color: #333333;
+  font-size: 0.36rem;
+  text-indent: 0.3rem;
+  line-height: 1rem;
+  font-weight: 500;
+}
+.title {
+  color: #333333;
+  font-size: 0.34rem;
+  margin-top: 0.48rem;
+  text-indent: 0.31rem;
+}
+.recommend {
+  width: 6.9rem;
+  margin-top: 0.13rem;
+  margin: 0 auto;
+  border-bottom: 0.01rem solid #95998f;
+  display: flex;
+  justify-content: space-between;
+  .articlename {
+    color: #333333;
+    font-size: 0.3rem;
+    line-height: 0.4rem;
+    width: 4.65rem;
+    margin-top: 0.4rem;
+  }
+  .articlecontent {
+    color: #333333;
+    font-size: 0.26rem;
+    margin-top: 0.15rem;
+    margin-bottom: 0.14rem;
+    width: 6.74rem;
+  }
+  .author {
+    color: #999999;
+    font-size: 0.22rem;
+    margin: 0 auto;
+    margin-top: 0.14rem;
+    margin-bottom: 0.35rem;
+  }
+  .pic {
+    width: 1.82rem;
+    height: 1.2rem;
+    margin: auto 0;
+  }
+  .pics {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 0.31rem;
+    > img {
+      width: 2.23rem;
+      height: 1.47rem;
+      margin-right: 0.1rem;
+    }
+  }
+}
+.picbox{
+  display: flex;
+  justify-content: center;
+    .toppic{
+    width: 640px;
+    height: 322.12px;
+    margin: 0 auto;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/assets/index.png b/src/assets/index.png
new file mode 100644
index 0000000..8a8d589
Binary files /dev/null and b/src/assets/index.png differ
diff --git a/src/assets/logo1.png b/src/assets/logo1.png
new file mode 100644
index 0000000..a53991a
Binary files /dev/null and b/src/assets/logo1.png differ
diff --git a/src/assets/logout.png b/src/assets/logout.png
new file mode 100644
index 0000000..a14c1ed
Binary files /dev/null and b/src/assets/logout.png differ
diff --git a/src/assets/mine.png b/src/assets/mine.png
new file mode 100644
index 0000000..2bd542b
Binary files /dev/null and b/src/assets/mine.png differ
diff --git a/src/assets/zoom.png b/src/assets/zoom.png
new file mode 100644
index 0000000..e2bc5a7
Binary files /dev/null and b/src/assets/zoom.png differ
diff --git a/src/components/indexFollow1.vue b/src/components/indexFollow1.vue
new file mode 100644
index 0000000..9ff1e37
--- /dev/null
+++ b/src/components/indexFollow1.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="PersonafFollow">
+    <div class="answer">
+      <div class="user">
+        <div class="left">
+            <img src="http://q1.qlogo.cn/g?b=qq&nk=1162963624&s=5" alt srcset class="photo" />
+        <div class="userinfo">
+          <p>啦啦啦</p>
+          <p>律师</p>
+        </div>
+        </div>
+      
+          <div class="right">
+            <!-- <div class="add"> -->
+            <img src="../assets/add.png" alt class="add" />
+            <!-- </div> -->
+            <p>关注</p>
+          </div>
+      </div>
+          <!-- <div class="line"></div> -->
+    <p class="question">有哪些击中你内心阴暗处的句子？</p>
+    <!-- <div class="line"></div> -->
+      <!-- <div class="agree">1345人赞同了该回答</div> -->
+      <div class="agree">2019-05-05</div>
+      <div class="content">
+        <img src alt srcset />
+        <p>这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明</p>
+        <!-- <div v-show="show" @click="shows">展开阅读全文</div> -->
+      </div>
+      <div class="operation">
+        <div>
+          <img src="../assets/share.png" alt srcset />
+          分享
+        </div>
+        <div>
+          <img src="../assets/share.png" alt srcset />
+          888评论
+        </div>
+        <div v-show="!show && lang" @click="hadd">收起</div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.line {
+  height: 0.2rem;
+  width: 100%;
+  background-color: #f6f6f6;
+}
+.question {
+  height: 1rem;
+  width: 100%;
+  color: #333333;
+  font-size: 0.36rem;
+  text-indent: 0.3rem;
+  line-height: 1.5rem;
+  font-weight: 500;
+}
+.title {
+  color: #333333;
+  font-size: 0.34rem;
+  margin-top: 0.48rem;
+  text-indent: 0.31rem;
+}
+.PersonafFollow {
+  padding: 0 36px 39px 30px;
+  border-bottom: 1px solid #dfdfdf;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    font-size: 26px;
+    color: #95998f;
+    margin-bottom: 28px;
+  }
+  .center {
+    font-size: 30px;
+    color: #000;
+    line-height: 46px;
+  }
+  .answer {
+    .user {
+      display: flex;
+      align-items: center;
+      margin-top: 34px;
+      justify-content: space-between;
+      .left{
+        display: flex;
+      }
+      .photo {
+        width: 68px;
+        height: 68px;
+        border-radius: 4px;
+        margin-right: 20px;
+      }
+      .userinfo {
+        display: flex;
+        flex-direction: column;
+        > p {
+          font-size: 30px;
+          color: #000;
+        }
+        > p:last-child {
+          width:360px;
+          margin-top: 10px;
+          font-size: 24px;
+          color: #999;
+              overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+        }
+      }
+    }
+    .agree {
+      margin-top: 29px;
+      font-size: 26px;
+      color: #95998f;
+    }
+    .content {
+      position: relative;
+
+      // overflow: hidden;
+      > img {
+        width: 690px;
+        height: 374px;
+        background-color: #000;
+        display: block;
+        margin-top: 39px;
+        margin-bottom: 32px;
+      }
+      > p {
+        line-height: 40px;
+        font-size: 26px;
+      }
+      > div {
+        position: absolute;
+        width: 750px;
+        height: 45px;
+        background-color: #fff;
+        bottom: 0px;
+        line-height: 35px;
+        font-size: 24px;
+        color: #465a33;
+        text-align: center;
+        left: -30px;
+        box-shadow: 0px 0px 30px #fff;
+      }
+    }
+    .operation {
+      display: flex;
+      margin-top: 30px;
+      > div {
+        margin-right: 60px;
+        font-size: 22px;
+        color: #95998f;
+        > img {
+          width: 17px;
+          height: 17px;
+          margin-right: 11px;
+        }
+      }
+      > div:last-child {
+        margin-left: 300px;
+        margin-right: 0;
+      }
+    }
+  }
+}
+  .right {
+    width: 143px;
+    height: 62px;
+    background: rgba(247, 247, 247, 1);
+    border-radius: 10px;
+    margin: auto 0;
+    margin-right: 30px;
+    // float: right;
+    // text-align: center;
+    line-height: 68px;
+    display: flex!important;
+    flex-direction: row!important;
+    justify-content: center!important;
+    color: #6b9147;
+    font-size: 28px;
+    float: right;
+    .add {
+      width: 24px;
+      height: 24px;
+      margin-top: 19px;
+      margin-right: 21px;
+    }
+  }
+</style>
+<script>
+export default {
+  name: "PersonafFollow",
+  data() {
+    return {
+      show: false,
+      lang: true
+    };
+  },
+  props: {
+    indexs: {
+      default: 0
+    }
+  },
+
+  methods: {
+    shows() {
+      var a = window.document.getElementsByClassName("content")[this.indexs];
+      a.style.setProperty("max-height", "", "important");
+      this.show = false;
+    },
+    hadd() {
+      var a = window.document.getElementsByClassName("content")[this.indexs];
+      a.style.setProperty("max-height", "6.1rem", "important");
+      this.show = true;
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      window.console.log(122);
+      var a = window.document.getElementsByClassName("content")[this.indexs];
+
+      var rem = parseFloat(
+        window.getComputedStyle(window.document.documentElement)["fontSize"]
+      );
+      window.console.log(a.offsetHeight, 5.9 * rem);
+      if (a.offsetHeight > 5.9 * rem) {
+        this.show = true;
+      } else {
+        this.lang = false;
+      }
+    });
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/components/indexhead.vue b/src/components/indexhead.vue
index dd1d0d6..db68ec7 100644
--- a/src/components/indexhead.vue
+++ b/src/components/indexhead.vue
@@ -3,16 +3,22 @@
     <van-popup v-model="show" position="top" :style="{ height: '2.82rem' }">
       <div style="height:0.88rem"></div>
       <div class="mnuelist">
-        <div @click="tab(0)">首页</div>
-        <div @click="tab(1)">我的主页</div>
-        <div @click="tab(2)">退出登录</div>
+        <div @click="tab(0)">
+          <img src="../assets/index.png" alt="" class="icon">
+          首页</div>
+        <div @click="tab(1)">
+              <img src="../assets/mine.png" alt="" class="icon">
+          我的主页</div>
+        <div @click="tab(2)">
+              <img src="../assets/logout.png" alt="" class="icon">
+          退出登录</div>
       </div>
     </van-popup>
     <div class="head">
-    <img class="logo" src alt srcset  />
+    <img class="logo"  src="../assets/logo1.png" alt srcset  />
   
       <div class="search">
-        <img src alt />
+        <img src="../assets/zoom.png" alt />
         <input type="text" placeholder="搜索" v-on:change="shuru" v-model="serch" />
       </div>
       <div class="mnue" @click="isshow">
@@ -33,6 +39,11 @@
   flex-direction: column;
   color: #333;
   font-size: 24px;
+  .icon{
+    width: 26px;
+    height: 30px;
+    margin-right: 15px;
+  }
 }
 .head {
   position: fixed;
@@ -64,7 +75,7 @@
       margin-left: 23px;
       width: 30px;
       height: 30px;
-      background-color: #000;
+      // background-color: #000;
     }
     > input {
       margin-left: 21px;
diff --git a/src/router.js b/src/router.js
index 7bc237a..80e3dac 100644
--- a/src/router.js
+++ b/src/router.js
@@ -16,8 +16,13 @@ import IndexReport1 from "./IndexReport1"
 import IndexReport2 from "./IndexReport2"
 import Answer from "./Answer"
 import sign from "./sign"
+import ArticleDetail from "./articledetail"
 const router=new Router({
   routes: [
+    {
+      path: '/',
+      component: ArticleDetail
+    },
     {
       path: '/sign',
       component: sign