Merge branch 'master' into xuebaoxin

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>

src/components/indexhead.vue

@@ -3,15 +3,22 @@
     <van-popup v-model="show" position="top" :style="{ height: '2.82rem' }">
       <div style="height:0.88rem"></div>
       <div class="mnuelist">
-        <div>首页</div>
-        <div>我的主页</div>
-        <div>退出登录</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">
@@ -32,6 +39,11 @@
   flex-direction: column;
   color: #333;
   font-size: 24px;
+  .icon{
+    width: 26px;
+    height: 30px;
+    margin-right: 15px;
+  }
 }
 .head {
   position: fixed;
@@ -63,7 +75,7 @@
       margin-left: 23px;
       width: 30px;
       height: 30px;
-      background-color: #000;
+      // background-color: #000;
     }
     > input {
       margin-left: 21px;
@@ -105,8 +117,27 @@ export default {
     shuru() {
       window.console.log(this.serch);
       this.$router.push({
-        path: `/indexfind?word=`+this.serch
+        path: `/indexfind?word=` + this.serch
       });
+    },
+    tab(e) {
+      switch (e) {
+        case 0:
+          this.$router.push({
+            path: `/index`
+          });
+          break;
+        case 1:
+          this.$router.push({
+            path: `/PersonalHomepage`
+          });
+          break;
+        case 2:
+          this.$router.push({
+            path: `/login`
+          });
+          break;
+      }
     }
   }
 };