diff --git a/src/view/article/comment/index.vue b/src/view/article/comment/repleyList.vue
similarity index 82%
rename from src/view/article/comment/index.vue
rename to src/view/article/comment/repleyList.vue
index 18500ea..100a8a2 100644
--- a/src/view/article/comment/index.vue
+++ b/src/view/article/comment/repleyList.vue
@@ -14,12 +14,12 @@
             </div>
           </div>
           <div v-show="item.showReply&&curIndex==item.id">
-            <reply-input :id="item.id" v-model="item.reply"></reply-input>
+            <reply-input :id="item.id" :article-id="articleId" v-model="item.reply"></reply-input>
           </div>
         </div>
       </div>
       <div class="item-children" v-if="item.list&&item.list.length">
-        <reply-list :curIndex="curIndex" :list="item.list" @change="change"></reply-list>
+        <reply-list :article-id="articleId" :curIndex="curIndex" :list="item.list" @change="change"></reply-list>
       </div>
     </div>
   </div>
@@ -30,6 +30,10 @@ import replyInput from './reply.vue'
 export default {
   name: 'ReplyList',
   props: {
+    articleId:{
+      type:Number,
+      required: true
+    },
     curIndex: {
       type: Number,
       required: true
@@ -46,6 +50,9 @@ export default {
     },
     change(obj){
       this.$emit('change',obj)
+    },
+    replace(){
+      this.$parent.replace()
     }
   }
 }
@@ -54,6 +61,9 @@ export default {
 <style scoped>
 .cont-wrap{
   display: flex;
+  width: 100%;
+  border: 1px solid #ccc;
+  border-radius: 16px;
 }
 .cont-wrap span {
   margin-right: 10px;
diff --git a/src/view/article/comment/reply.vue b/src/view/article/comment/reply.vue
index a4e0d3a..204d341 100644
--- a/src/view/article/comment/reply.vue
+++ b/src/view/article/comment/reply.vue
@@ -1,20 +1,33 @@
 <template>
   <div class="input-wrap">
     <div class="input">
-<!--      <el-avatar size="medium" :src="require('')"></el-avatar>-->
+      <el-avatar size="medium" :src="require('../../../assets/img/aside-bg.jpg')"></el-avatar>
       <el-input :id="'textarea'+id" type="textarea" :rows="4" resize="none" placeholder="请输入内容" v-model.trim="textarea" maxlength="150" show-word-limit></el-input>
     </div>
     <div class="btn-wrap">
-      <emoji :id="id" v-model="textarea"></emoji>
-      <el-button type="primary" size="small" round :disabled="!textarea">&nbsp;&nbsp;发表&nbsp;&nbsp;</el-button>
+<!--      <emoji :id="id" v-model="textarea"></emoji>-->
+      <el-button type="primary" size="small" round :disabled="!textarea" @click="reply()" >&nbsp;&nbsp;发表&nbsp;&nbsp;</el-button>
     </div>
   </div>
 </template>
 
 <script>
 import emoji from './emoji.vue'
+import {sendComment} from "@/api";
+import {Message} from "element-ui";
 export default {
-  props: ['id','value'],
+  props: {
+    id: {
+      type:Number,
+    },
+    articleId:{
+      type:Number,
+      required:true
+    },
+    value:{
+      type: String,
+    }
+  },
   components: {emoji},
   computed: {
     textarea: {
@@ -25,6 +38,23 @@ export default {
         this.$emit('input',newVal)
       }
     }
+  },
+  methods:{
+    reply(){
+      let data = {
+        "article_id" : this.articleId,
+        "content" : this.value,
+        "id" : this.id
+      }
+      sendComment(data).then(()=>{
+        Message({
+          message: "评论成功",
+          type: 'success',
+          duration: 5 * 1000
+        })
+        this.$parent.replace()
+      })
+    }
   }
 }
 </script>
diff --git a/src/view/article/index.vue b/src/view/article/index.vue
index bf335ac..7dab275 100644
--- a/src/view/article/index.vue
+++ b/src/view/article/index.vue
@@ -16,9 +16,7 @@
           </div>
         </a>
         <div class="loadmore" v-if="!isLoadingData">没有更多数据了</div>
-        <div class="loadmore" v-else>
-          <span v-if="isLoadingData">数据加载中...</span>
-        </div>
+        <div class="loadmore" v-if="isLoadingData">数据加载中...</div>
     </section>
 <!--    有需求再做固定分页-->
 <!--    <el-pagination-->
@@ -39,7 +37,7 @@ export default {
     return {
       queryParams: {
         page: 1,
-        limit: 5,
+        limit: 10,
         cid:"",
       },
       article: [],
diff --git a/src/view/article/info.vue b/src/view/article/info.vue
index 35c443c..93de186 100644
--- a/src/view/article/info.vue
+++ b/src/view/article/info.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="article-info-box">
+  <div class="article-info-box" ref="ArtcleInfo">
     <div class="article-box">
       <h1 class="article-nav">
         {{title}}
       </h1>
       <section class="content-box" ref="content">
-        <div class="article-content" v-html="content">
+        <div  class="article-content" v-html="content">
         </div>
       </section>
     </div>
     <div class="comment-box">
       <h6>发表评论</h6>
-      <reply-input :id="''" v-model="textarea"></reply-input>
-      <h6>评论列表({{replyList.length+1}})</h6>
-      <reply-list :curIndex="curIndex" :list="replyList" @change="change"></reply-list>
+      <reply-input :id="0" :article-id="Number(id)" v-model="textarea"></reply-input>
+      <h6>评论列表({{commentNum}})</h6>
+      <reply-list :articleId="Number(id)" :curIndex="curIndex" :list="replyList" @change="change"></reply-list>
     </div>
   </div>
 </template>
@@ -22,7 +22,7 @@
 import {getArticleInfo} from '@/api'
 import * as THREE from 'three'
 import Net from 'vanta/dist/vanta.net.min'
-import ReplyList from './comment/index'
+import ReplyList from './comment/repleyList'
 import ReplyInput from './comment/reply'
 export default {
   name: "info",
@@ -32,22 +32,25 @@ export default {
   },
   data() {
     return {
+      id:0,
       title:"",
       content:"",
 
       curIndex: 0,
-      textarea: 'sad',
+      textarea: '', //回复内容
       replyList: [],
+      commentNum:0,
 
       detailObj: {}
     }
   },
   methods:{
     getInfo(){
-      getArticleInfo(this.$route.params.id).then(res =>{
+      getArticleInfo(this.id).then(res =>{
         this.title = res.data.title
         this.content = res.data.content.content
         this.replyList = res.data.comment
+        this.commentNum = res.data.commentNum
         this.renderNet()
       })
     },
@@ -55,7 +58,7 @@ export default {
       let height = this.$refs.content.offsetHeight
       let width = this.$refs.content.offsetWidth
       this.vantaEffect = Net({
-        el: this.$refs.content,
+        el: this.$refs.ArtcleInfo,
         THREE: THREE,
         mouseControls: true,
         touchControls: true,
@@ -84,24 +87,13 @@ export default {
         }
       })
     },
-    // 遍历添加唯一标识
-    deepSetList(arr,level=1,parentLevel=''){
-      if(!Array.isArray(arr)){
-        return
-      }
-      return arr.map((item,i) => {
-        let levelKey = level == 1 ? (i + 1) : parentLevel + '-' + (i + 1)
-        return {
-          ...item,
-          showReply: false,
-          reply: '',
-          level: levelKey,
-          list: this.deepSetList(item.list,level+1,levelKey)
-        }
-      })
+    replace(){
+
+      this.getInfo()
     }
   },
   mounted() {
+    this.id = this.$route.params.id
     this.getInfo()
   },
   beforeDestroy() {
@@ -131,8 +123,19 @@ export default {
   margin: 0 auto;
   padding: 0 20%;
   font-size: 20px;
+
+
+  table-layout: fixed;
+  word-break: break-all;
+  max-width: 100%;
 }
 
+.article-content >>> pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+
 .content-box{
   width: 100%;
   height: 100%;
@@ -144,6 +147,7 @@ export default {
   margin-top: 40px;
   width: 60%;
   left: 20%;
+  bottom: 20px;
 }
 
 .comment-box h6{