完成

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;
       }
     });
   }

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>

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>

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>