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 0000000..2022121
Binary files /dev/null and b/src/assets/share.png differ
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