From 4eb31ea11f3d789d2cb248f39439af2d552aff1f Mon Sep 17 00:00:00 2001
From: pplokijuhyg <1162963624@qq.com>
Date: Mon, 25 Nov 2019 14:15:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/normalize.css              |   4 +-
 src/PersonalHomepage.vue          | 122 +++++++++++++++++++++++++---
 src/assets/share.png              | Bin 0 -> 490 bytes
 src/components/PersonafFollow.vue | 129 ++++++++++++++++++++++++++++++
 src/components/PersonalAnswer.vue |  38 +++++++++
 5 files changed, 282 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/share.png
 create mode 100644 src/components/PersonafFollow.vue
 create mode 100644 src/components/PersonalAnswer.vue

diff --git a/public/normalize.css b/public/normalize.css
index 58efa68..a5cab8b 100644
--- a/public/normalize.css
+++ b/public/normalize.css
@@ -12,7 +12,9 @@ html {
   line-height: 1; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
-
+p{
+margin: 0;
+}
 /* Sections
    ========================================================================== */
 
diff --git a/src/PersonalHomepage.vue b/src/PersonalHomepage.vue
index ea90a5e..4a238fa 100644
--- a/src/PersonalHomepage.vue
+++ b/src/PersonalHomepage.vue
@@ -1,20 +1,122 @@
 <template>
-    <div class="box">
-        
+  <div class="box">
+    <div class="header">
+      <img class="portrait" src="http://q1.qlogo.cn/g?b=qq&nk=1162963624&s=5" alt />
+      <div class="introduce">
+        <p class="name">啦啦啦</p>
+        <div class="follow">
+          <p>
+            <span>0</span>
+            关注我的
+          </p>
+          <p>
+            <span>0</span>
+            我关注的
+          </p>
+        </div>
+      </div>
     </div>
+    <div class="classification">
+      <div class="page">
+        <div class="select">动态</div>
+        <div>回答</div>
+        <div>文章</div>
+        <div>提问</div>
+        <div>收藏</div>
+      </div>
+      <div class="list">
+          <follow></follow>
+          <answer></answer>
+      </div>
+    </div>
+  </div>
 </template>
 <style lang="scss" scoped>
-.box{
+.box {
+  background-color: #f6f6f6;
+  min-height: 100vh;
+  .header {
+    width: 100%;
+    height: 2.27rem;
+    background-color: #fff;
+    box-sizing: border-box;
+    padding: 0.51rem 0.3rem;
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.2rem;
+    .portrait {
+      width: 1.26rem;
+      height: 1.26rem;
+      border-radius: 50%;
+      margin-right: 0.31rem;
+    }
+    .introduce {
+      height: 0.9rem;
+      display: flex;
+      flex-direction: column;
 
+      .name {
+        margin: 0;
+        font-size: 0.36rem;
+        color: #333;
+        font-weight: 400;
+        margin-bottom: 0.29rem;
+      }
+      .follow {
+        display: flex;
+        color: #999;
+        font-size: 0.28rem;
+
+        > p {
+          display: flex;
+          margin-right: 0.69rem;
+          > span {
+            color: #333;
+            display: block;
+            min-width: 0.23rem;
+          }
+        }
+      }
+    }
+  }
+  .classification {
+    width: 100%;
+    background-color: #fff;
+    // min-height: 3rem;
+    box-sizing: border-box;
+    padding: 0.3rem 0.3rem;
+    .page {
+      width: 100%;
+      display: flex;
+      height: 0.62rem;
+      border-bottom: 0.01rem solid #dfdfdf;
+      > div {
+        width: 100%;
+        font-size: 0.32rem;
+        text-align: center;
+
+      }
+      .select{
+          border-bottom: 0.04rem solid #6B9147;
+      }
+    }
+    .list{
+        width: 100%;
+    }
+  }
 }
 </style>
 <script>
+import follow from "./components/PersonafFollow"
+import answer from "./components/PersonalAnswer"
 export default {
-    name:"Personal homepage",
-    data(){
-        return {
-
-        }
-    }
-}
+  name: "Personal homepage",
+  data() {
+    return {};
+  },
+  components:{
+      follow,
+      answer
+  }
+};
 </script>
\ No newline at end of file
diff --git a/src/assets/share.png b/src/assets/share.png
new file mode 100644
index 0000000000000000000000000000000000000000..202212160d5853de82d7654e60fda9e5a86a6e92
GIT binary patch
literal 490
zcmV<G0Tup<P)<h;3K|Lk000e1NJLTq000pH000pP1^@s6J8eh$00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru;|m!AB_cS|ujK#$0e4A6
zK~y-)m6N|OLs1mRKj*zRm<+^VGf9jjW@2MCXqwco@I>3l`wz?_F7c>aA!3jiBsPhq
zmG}otObjFjiI^<acMNSx=#SU4-g`dxeDC*rgf?r>njA_BA&zoWiZdte0Cug(yULPQ
zy95Z~$!Q1T@B;wQ3TPlQWIt!d8=b{kH3xaq1#F_MHo7AKyLr>?mPv%Jc8JP#+Vk(L
zfGJTffDVN#QE~|Dz%YO)A7z(>Y#*DUc!>hgSJNu2i82DDfKP>F#`7<0(hkg&I&_9g
zA?x|?vS-bMD1%zxr$bfJnH9g(OmeIdK!usivVR`QH5ESV4xzk6w*Jdy7Onf^w}CYq
z^;5gm8(7o-$DOSSH<X1?a0ERCc?OPvQIyxvA(>tF3jl#NCj!$z94MAu=9|VouqGkO
zS>-A6C@#WcZ32bR;j!iJ1lIHj>;TE8VT)3MHDdyW20In4GM-;lxcN7MwgCYs$4H2B
g_bUc(Uoj@X0q!`2Gie&jApigX07*qoM6N<$f+a1;j{pDw

literal 0
HcmV?d00001

diff --git a/src/components/PersonafFollow.vue b/src/components/PersonafFollow.vue
new file mode 100644
index 0000000..7a9d8ad
--- /dev/null
+++ b/src/components/PersonafFollow.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="PersonafFollow">
+    <div class="title">
+      <p>收藏了该回答</p>
+      <p>3天前</p>
+    </div>
+    <div class="center">舆论之于司法利大于弊还是弊大于利？</div>
+    <div class="answer">
+      <div class="user">
+        <img src="http://q1.qlogo.cn/g?b=qq&nk=1162963624&s=5" alt srcset />
+        <div>
+          <p>啦啦啦</p>
+          <p>律师</p>
+        </div>
+      </div>
+      <div class="agree">1345人赞同了该回答</div>
+      <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: 0.49rem 0 0.39rem 0;
+  border-bottom: 1px solid #dfdfdf;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.26rem;
+    color: #95998f;
+    margin-bottom: 0.28rem;
+  }
+  .center {
+    font-size: 0.3rem;
+    color: #000;
+    line-height: 0.46rem;
+  }
+  .answer {
+    .user {
+      display: flex;
+      align-items: center;
+      margin-top: 0.34rem;
+      > img {
+        width: 0.58rem;
+        height: 0.58rem;
+        border-radius: 0.04rem;
+        margin-right: 0.2rem;
+      }
+      > div {
+        display: flex;
+        flex-direction: column;
+        > p {
+          font-size: 0.24rem;
+          color: #000;
+        }
+        > p:last-child {
+          margin-top: 0.1rem;
+          font-size: 0.24rem;
+          color: #999;
+        }
+      }
+    }
+    .agree {
+      margin-top: 0.29rem;
+      font-size: 0.26rem;
+      color: #95998f;
+    }
+    .content {
+      > img {
+        width: 6.9rem;
+        height: 3.74rem;
+        background-color: #000;
+        display: block;
+        margin-top: 0.39rem;
+        margin-bottom: 0.32rem;
+      }
+      > p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        line-height: 0.4rem;
+        font-size: 0.26rem;
+      }
+    }
+    .operation{
+        display: flex;
+        margin-top: 0.3rem;
+        >div{
+            margin-right: 0.6rem;
+            font-size: 0.22rem;
+            color: #95998F;
+            >img{
+                width: 0.17rem;
+                height: 0.17rem;
+                margin-right: 0.11rem;
+                
+            }
+        }
+    }
+  }
+}
+</style>
+<script>
+export default {
+  name: "PersonafFollow",
+  data() {
+    return {};
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/components/PersonalAnswer.vue b/src/components/PersonalAnswer.vue
new file mode 100644
index 0000000..6619993
--- /dev/null
+++ b/src/components/PersonalAnswer.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="PersonalAnswer">
+    <div class="title">
+      <p>关注了该问题</p>
+      <p>3天前</p>
+    </div>
+    <div class="center">
+      如何看待正当防卫争议：丽江醉酒男午夜持刀砸门
+      90后女子带刀“反杀”?
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.PersonalAnswer {
+  padding: 0.49rem 0 0.39rem 0;
+  border-bottom: 1px solid #dfdfdf;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.26rem;
+    color: #95998f;
+    margin-bottom: 0.28rem;
+  }
+  .center {
+    font-size: 0.3rem;
+    color: #000;
+    line-height: 0.46rem;
+  }
+}
+</style>
+<script>
+export default {
+  name: "PersonalAnswer",
+  data() {
+    return {};
+  }
+};
+</script>
\ No newline at end of file