diff --git a/src/IndexArticleDetail.vue b/src/IndexArticleDetail.vue
index 0bf3030..7efadae 100644
--- a/src/IndexArticleDetail.vue
+++ b/src/IndexArticleDetail.vue
@@ -1,68 +1,68 @@
 <template>
-  <div style="padding-top:0.88rem">
+  <div style="padding-top:0.88rem" class="box">
     <heads></heads>
     <div class="line"></div>
-    <p class="question">有哪些击中你内心阴暗处的句子？</p>
-    <div class="line"></div>
-    <follow :indexs="0"></follow>
-    <div class="line"></div>
-    <follow :indexs="1"></follow>
+    <p class="question">{{list.data.title}}</p>
+    <div v-for="(item,index) in huida" :key="index">
+      <div class="line"></div>
+      <follow
+        @pinglu="pinglu"
+        :sid="item.id"
+        :indexs="index"
+        :userimg="'http://lawpro.earnest.pro' + item.avatar"
+        :nickname="item.nickname"
+        :text="item.articlecontent"
+        :comment="item.comment"
+        :num="item.islike"
+        
+      ></follow>
+    </div>
+
+    <!-- <div class="line"></div>
+    <follow :indexs="1"></follow>-->
     <div class="line"></div>
     <p class="title">相关推荐</p>
-    <privates></privates>
-    <articles></articles>
+    <!-- <privates></privates> -->
+    <articles
+      v-for="(item,index) in list.correlation"
+      :key="index"
+      :title="item.title"
+      :img="'http://lawpro.earnest.pro' +item.img"
+      :sid="item.id"
+    ></articles>
 
-    <articles></articles>
+    <!-- <articles></articles> -->
 
     <p class="title" @click="show = true">热门推荐</p>
-    <privatets></privatets>
-    <articles></articles>
-    <articles></articles>
+    <!-- <privatets></privatets> -->
+    <privates
+      v-for="(item,index) in list.correlation"
+      :key="index"
+      :title="item.title"
+      :sid="item.id"
+    ></privates>
+
+    <!-- <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="tiao">{{plist.length}}条评论</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>
+        <comment v-for="(item,index) in plist" :key="index"></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>
+        <p @click="pfb">发布</p>
+        <div v-show="biaoqing">
+          <Emotion @emotion="handleEmotion" :height="4"></Emotion>
+        </div>
       </div>
     </van-popup>
   </div>
@@ -72,37 +72,96 @@
 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";
 import comment from "./components/indexcomment";
-import Emotion from './components/Emotion/index'
+import Emotion from "./components/Emotion/index";
 export default {
   name: "IndexArticleDetail",
   data() {
     return {
       show: false,
-      content:"",
-      biaoqing:false
+      content: "",
+      biaoqing: false,
+      list: {},
+      huida: [],
+      plist:[],
+      pid:0
     };
   },
   components: {
     follow,
     privates,
     articles,
-    privatets,
+    // privatets,
     heads,
     comment,
     Emotion
   },
-  methods:{
-    handleEmotion (i) {
-      this.content += i
+  methods: {
+    pfb(){
+      window.console.log(this.content)
+      this.axios.post("http://lawpro.earnest.pro/api/login_main/appendComment",{
+        text:this.content,
+        token:localStorage.getItem('token'),
+        type_id:this.pid,
+        type:3
+      }).then((res)=>{
+        if(res.data.code == 200){
+this.pinglu(this.pid);
+
+        this.content = ""
+        }
+        
+      })
     },
+    handleEmotion(i) {
+      this.content += i;
+    },
+    pinglu(id) {
+      this.pid= id
+      this.axios
+        .post("http://lawpro.earnest.pro/api/login_main/CommentList", {
+          token: localStorage.getItem("token"),
+          type: 2,
+          type_id: id
+        })
+        .then(res => {
+          window.console.log(res)
+          this.plist = res.data.data.data
+          // this.list = res.data.data;
+          this.show = true
+        });
+    }
+  },
+  mounted() {
+    this.axios
+      .post("http://lawpro.earnest.pro/api/login_main/mainDetails", {
+        token: localStorage.getItem("token"),
+        type: 2,
+        id: 17
+      })
+      .then(res => {
+        // window.console.log(res)
+        this.list = res.data.data;
+      });
+    this.axios
+      .post("http://lawpro.earnest.pro/api/login_main/answerList", {
+        token: localStorage.getItem("token"),
+        page: 1,
+        article_id: 17
+      })
+      .then(res => {
+        window.console.log(res);
+        this.huida = res.data.data;
+        // this.list= res.data.data
+      });
   }
 };
 </script>
 
 <style lang="scss">
+.box{
 .linshi {
   z-index: 999999 !important;
   .top {
@@ -167,12 +226,12 @@ export default {
     background-color: #fff;
     display: flex;
     align-items: center;
-    >img{
+    > img {
       width: 33px;
       height: 33px;
-      margin-left: 30px
+      margin-left: 30px;
     }
-    >textarea{
+    > textarea {
       margin-left: 21px;
       border: none;
       font-size: 30px;
@@ -181,12 +240,12 @@ export default {
       // word-break: break-all;
       // text-align: center;
     }
-    >p{
+    > p {
       margin-left: 30px;
       font-size: 30px;
-      color: #6B9147;
+      color: #6b9147;
     }
-    >div{
+    > div {
       position: absolute;
       bottom: 98px;
       background-color: #fff;
@@ -200,12 +259,14 @@ export default {
   background-color: #f6f6f6;
 }
 .question {
-  height: 1rem;
+  height: auto;
   width: 100%;
   color: #333333;
   font-size: 0.36rem;
   text-indent: 0.3rem;
-  line-height: 1rem;
+  line-height: 0.5rem;
+  padding: 0.25rem;
+  box-sizing: border-box;
   font-weight: 500;
 }
 .title {
@@ -258,4 +319,6 @@ export default {
     }
   }
 }
+}
+
 </style>
\ No newline at end of file
diff --git a/src/components/indexFollow.vue b/src/components/indexFollow.vue
index 9380e9c..86ea3f9 100644
--- a/src/components/indexFollow.vue
+++ b/src/components/indexFollow.vue
@@ -2,26 +2,26 @@
   <div class="PersonafFollow">
     <div class="answer">
       <div class="user">
-        <img src="http://q1.qlogo.cn/g?b=qq&nk=1162963624&s=5" alt srcset />
+        <img :src="userimg" alt srcset />
         <div>
-          <p>啦啦啦</p>
-          <p>律师</p>
+          <p>{{nickname}}</p>
+          <p>{{role}}</p>
         </div>
       </div>
-      <div class="agree">1345人赞同了该回答</div>
+      <div class="agree">{{num}}人赞同了该回答</div>
+
       <div class="content" style="max-height: 6.1rem;">
-        <img src alt srcset />
-        <p>这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明</p>
-        <div v-show="show" @click="shows">展开阅读全文</div>
+        <div v-html="text"></div>
+        <div class="gengduo" v-show="show" @click="shows">展开阅读全文</div>
       </div>
       <div class="operation">
         <div>
           <img src="../assets/share.png" alt srcset />
           分享
         </div>
-        <div>
+        <div @click="pinglun">
           <img src="../assets/share.png" alt srcset />
-          888评论
+          {{comment}}评论
         </div>
         <div v-show="!show && lang" @click="hadd">收起</div>
       </div>
@@ -76,21 +76,21 @@
     }
     .content {
       position: relative;
-
+      line-height: 40px;
+      font-size: 26px;
       overflow: hidden;
-      > img {
-        width: 690px;
-        height: 374px;
-        background-color: #000;
+      img {
+        max-width: 690px;
+        // height: 374px;
+        // background-color: #000;
         display: block;
         margin-top: 39px;
         margin-bottom: 32px;
       }
-      > p {
-        line-height: 40px;
-        font-size: 26px;
-      }
-      > div {
+      // p {
+
+      // }
+      .gengduo {
         position: absolute;
         width: 750px;
         height: 45px;
@@ -131,13 +131,20 @@ export default {
   data() {
     return {
       show: false,
-      lang:true
+      lang: true
     };
   },
   props: {
     indexs: {
       default: 0
-    }
+    },
+    userimg: {},
+    nickname: {},
+    role: {},
+    num: {},
+    comment: {},
+    text: {},
+    sid:{}
   },
 
   methods: {
@@ -150,11 +157,14 @@ export default {
       var a = window.document.getElementsByClassName("content")[this.indexs];
       a.style.setProperty("max-height", "6.1rem", "important");
       this.show = true;
+    },
+    pinglun(){
+      this.$emit("pinglu",this.sid)
     }
   },
   mounted() {
     this.$nextTick(() => {
-      window.console.log(122)
+      window.console.log(122);
       var a = window.document.getElementsByClassName("content")[this.indexs];
 
       var rem = parseFloat(
@@ -163,8 +173,8 @@ export default {
       window.console.log(a.offsetHeight, 5.9 * rem);
       if (a.offsetHeight > 5.9 * rem) {
         this.show = true;
-      }else{
-        this.lang=false
+      } else {
+        this.lang = false;
       }
     });
   }
diff --git a/src/components/indexarticle.vue b/src/components/indexarticle.vue
index 3e31872..14dae1c 100644
--- a/src/components/indexarticle.vue
+++ b/src/components/indexarticle.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="recommend">
     <div>
-      <p class="articlename">阅读时间有限，还要把精力花在摘抄上吗？</p>
+      <p class="articlename">{{title}}</p>
       <!-- <p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p> -->
-      <div class="author">汉王的文章 · 556 赞同</div>
+      <div class="author"></div>
     </div>
-    <img src="../assets/tuijian.png" alt class="pic" />
+    <img :src="img" alt class="pic" />
   </div>
 </template>
 <style lang="scss" scoped>
@@ -33,6 +33,7 @@
   .author {
     color: #999999;
     font-size: 0.22rem;
+    height: 0.22rem;
     margin: 0 auto;
     margin-top: 0.14rem;
     margin-bottom: 0.35rem;
@@ -59,6 +60,7 @@ export default {
   name: "indexarticel",
   data() {
     return {};
-  }
+  },
+  props:['title','img']
 };
 </script>
\ No newline at end of file
diff --git a/src/components/indexcomment.vue b/src/components/indexcomment.vue
index b5fff06..3d85e62 100644
--- a/src/components/indexcomment.vue
+++ b/src/components/indexcomment.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="box">
     <div class="user">
-        <img src="http://q1.qlogo.cn/g?b=qq&nk=1162963624&s=5" alt="">
-        <p>啦啦啦</p>
+        <img :src="img" alt="">
+        <p>{{name}}</p>
     </div>
     <div class="centers">
-        大一法学生瑟瑟发抖但感触良多
+        {{text}}
     </div>
-    <div class="zan">
+    <!-- <div class="zan">
         赞 439 · 回复 · 更多 · 1 年前
-    </div>
+    </div> -->
   </div>
 </template>
 <style lang="scss" scoped>
@@ -45,6 +45,7 @@
 </style>
 <script>
 export default {
-  name: "indexcomment"
+  name: "indexcomment",
+  props:['name','img','text']
 };
 </script>
\ No newline at end of file
diff --git a/src/components/indexprivate.vue b/src/components/indexprivate.vue
index 4129406..359d50e 100644
--- a/src/components/indexprivate.vue
+++ b/src/components/indexprivate.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="recommend">
     <div>
-      <p class="articlename">丧后即燃：李松蔚认知升级 16 讲</p>
-      <p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p>
-      <div class="author">李松蔚的私家课 · 共18</div>
+      <p class="articlename" style="width:100%">{{title}}</p>
+      <!-- <p class="articlecontent">在信息唾手可得的时代，拉开人与人差距的，不是知识含</p> -->
+      <div class="author"></div>
     </div>
   </div>
 </template>
@@ -32,6 +32,7 @@
   .author {
     color: #999999;
     font-size: 0.22rem;
+    height: 0.02rem;
     margin: 0 auto;
     margin-top: 0.14rem;
     margin-bottom: 0.35rem;
@@ -60,6 +61,7 @@ export default {
       return {
           
       }
-  }
+  },
+  props:['title']
 };
 </script>
\ No newline at end of file