Merge branch 'xuebaoxin' of pplokijuhyg/falvpingtai into master

src/components/IndexList.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="PersonafFollow">
+    
+    <div class="center">舆论之于司法利大于弊还是弊大于利？</div>
+    <div class="answer">
+     
+      <div class="content">
+        <img src alt srcset />
+        <p>
+            这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明这取决于司法是否独立。舆论能影响司法判决结果的，只能说明司法肯定不仅仅收到舆论的影响，还会收到同样的来自其他多方面的强力的影响。这种情况只能说明
+        </p>
+      </div>
+      <div class="operation">
+          <div>
+              <img src="../assets/share.png" alt="" srcset="">
+              分享
+          </div>
+          <div>
+              <img src="../assets/share.png" alt="" srcset="">
+              888评论
+          </div>
+          <div>
+              
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.PersonafFollow {
+//   padding: 0px 0 39px 0;
+//   border-bottom: 1px solid #dfdfdf;
+box-shadow:0px 2px 2px 0px rgba(237,237,237,0.4);
+  width: 690px;
+  padding: 53px 30px 40px 30px;
+  background-color: #fff;
+  margin-bottom: 20px;
+  .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: 40px;
+      > img {
+        width: 58px;
+        height: 58px;
+        border-radius: 4px;
+      }
+      > div {
+        display: flex;
+        flex-direction: column;
+        > p {
+          font-size: 24px;
+          color: #000;
+        }
+        > p:last-child {
+          margin-top: 10px;
+          font-size: 24px;
+          color: #999;
+        }
+      }
+    }
+    .agree {
+      margin-top: 29px;
+      font-size: 26px;
+      color: #95998f;
+    }
+    .content {
+      > img {
+        width: 690px;
+        height: 374px;
+        background-color: #000;
+        display: block;
+        margin-top: 39px;
+        margin-bottom: 32px;
+      }
+      > p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        line-height: 40px;
+        font-size: 26px;
+      }
+    }
+    .operation{
+        display: flex;
+        margin-top: 30px;
+        >div{
+            margin-right: 60px;
+            font-size: 22px;
+            color: #95998F;
+            >img{
+                width: 17px;
+                height: 17px;
+                margin-right: 11px;
+                
+            }
+        }
+    }
+  }
+}
+</style>
+<script>
+export default {
+  name: "PersonafFollow",
+  data() {
+    return {};
+  }
+};
+</script>

src/index.vue

@@ -2,7 +2,7 @@
   <div class="box">
     <van-popup v-model="show" position="top" :style="{ height: '2.82rem' }" >
         <div style="height:0.88rem"></div>
-        <div class="list">
+        <div class="mnuelist">
             <div>首页</div>
             <div>我的主页</div>
             <div>退出登录</div>
@@ -12,7 +12,7 @@
       <img class="logo" src alt srcset />
       <div class="search">
         <img src alt />
-        <input type="text" />
+        <input type="text" placeholder="搜索" />
       </div>
       <div class="mnue" @click="isshow">
         <div></div>
@@ -20,6 +20,12 @@
         <div></div>
       </div>
     </div>
+    <div class="list">
+        <list></list>
+        <list></list>
+        <list></list>
+
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -83,7 +89,7 @@
       }
     }
   }
-  .list{
+  .mnuelist{
       padding:26px;
       height: 194px;
       box-sizing: border-box;
@@ -93,9 +99,14 @@
       color: #333;
       font-size: 24px;
   }
+  .list{
+      width: 100%;
+
+  }
 }
 </style>
 <script>
+import list from "./components/IndexList"
 export default {
   name: "index",
   data() {
@@ -107,6 +118,9 @@ export default {
       isshow(){
           this.show = !this.show
       }
+  },
+  components:{
+      list
   }
 };
 </script>