diff --git a/src/IndexArticleDetail.vue b/src/IndexArticleDetail.vue
index 0c7d1ee..29a2237 100644
--- a/src/IndexArticleDetail.vue
+++ b/src/IndexArticleDetail.vue
@@ -67,66 +67,66 @@ export default {};
 
 <style lang="scss">
 .line {
-  height: 0.2rem;
+  height: 20px;
   width: 100%;
   background-color: #f6f6f6;
 }
 .question {
-  height: 1rem;
+  height: 100px;
   width: 100%;
   color: #333333;
-  font-size: 0.36rem;
-  text-indent: 0.3rem;
-  line-height: 1rem;
+  font-size: 36px;
+  text-indent: 30px;
+  line-height: 100px;
   font-weight: 500;
 }
 .title {
   color: #333333;
-  font-size: 0.34rem;
-  margin-top: 0.48rem;
-  text-indent: 0.31rem;
+  font-size: 34px;
+  margin-top: 48px;
+  text-indent: 31px;
 }
 .recommend {
-  width: 6.9rem;
-  margin-top: 0.13rem;
+  width: 6.90px;
+  margin-top: 13px;
   margin: 0 auto;
-  border-bottom: 0.01rem solid #95998f;
+  border-bottom: 1px solid #95998f;
   display: flex;
   justify-content: space-between;
   .articlename {
     color: #333333;
-    font-size: 0.3rem;
-    line-height: 0.4rem;
-    width: 4.65rem;
-    margin-top: 0.4rem;
+    font-size: 30px;
+    line-height: 40px;
+    width: 465px;
+    margin-top: 40px;
   }
   .articlecontent {
     color: #333333;
-    font-size: 0.26rem;
-    margin-top: 0.15rem;
-    margin-bottom: 0.14rem;
-    width: 6.74rem;
+    font-size: 26px;
+    margin-top: 15px;
+    margin-bottom: 14px;
+    width: 674px;
   }
   .author {
     color: #999999;
-    font-size: 0.22rem;
+    font-size: 22px;
     margin: 0 auto;
-    margin-top: 0.14rem;
-    margin-bottom: 0.35rem;
+    margin-top: 14px;
+    margin-bottom: 35px;
   }
   .pic{
-      width: 1.82rem;
-      height: 1.2rem;
+      width: 182px;
+      height: 120px;
       margin: auto 0;
   }
   .pics{
       display: flex;
       justify-content: center;
-      margin-bottom: 0.31rem;
+      margin-bottom: 31px;
       >img{
-          width: 2.23rem;
-          height: 1.47rem;
-          margin-right: 0.1rem
+          width: 223px;
+          height: 147px;
+          margin-right: 10px;
       }
   }
 }
diff --git a/src/ManualAppeal.vue b/src/ManualAppeal.vue
index 855f0e7..4d99684 100644
--- a/src/ManualAppeal.vue
+++ b/src/ManualAppeal.vue
@@ -31,24 +31,24 @@ export default {};
 <style lang="scss">
 .top {
   width: 100%;
-  height: 0.88rem;
-  box-shadow: 0rem 0.01rem 0.01rem 0rem rgba(237, 237, 237, 0.4);
+  height: 88px;
+  box-shadow: 0 1px 1px 0 rgba(237, 237, 237, 0.4);
   .title {
     color: #333333;
-    font-size: 0.34rem;
-    text-indent: 0.155rem;
-    line-height: 0.88rem;
+    font-size: 34px;
+    text-indent: 15.5px;
+    line-height: 88px;
   }
 }
 .shuru {
-  height: 0.85rem;
-  width: 6.9rem;
-  line-height: 0.85rem;
+  height: 85px;
+  width: 690px;
+  line-height: 85px;
   color: #999999;
-  font-size: 0.26rem;
+  font-size: 26px;
   margin: 0 auto;
-  margin-top: 0.29rem;
-  margin-bottom: 1.2rem;
+  margin-top: 29px;
+  margin-bottom: 120px;
 
   }
 
@@ -65,60 +65,60 @@ export default {};
 	-webkit-user-select: text ;
 	outline-color: transparent ;
 	box-shadow: none;
-  border-bottom: 0.01rem solid #DFDFDF;
+  border-bottom: 1px solid #DFDFDF;
     }
 .btn {
-  width: 6.9rem;
-  height: 0.88rem;
+  width: 690px;
+  height: 88px;
   background-color: #6b9147;
-  line-height: 0.44rem;
+  line-height: 44px;
   text-align: center;
   color: white;
-  font-size: 0.18rem;
-  margin-left: 0.3rem;
+  font-size: 18px;
+  margin-left: 30px;
     border: none;
                 outline: none;
                 -webkit-appearance: none;
                 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .ale {
-  margin-left: 0.31rem;
+  margin-left: 31px;
   font-weight: 400;
   color: #666666;
-  font-size: 0.13rem;
-  margin-top: 0.49rem;
+  font-size: 13px;
+  margin-top: 49px;
   // font-weight: bold;
   .aletitle {
     color: #666666;
-    font-size: 0.28rem;
+    font-size: 28px;
   }
   .alecontent {
     color: #666666;
-    font-size: 0.26rem;
+    font-size: 26px;
     font-weight: 400;
     color: rgba(102, 102, 102, 1);
-    line-height: 0.42rem;
-    margin-top: 0.37rem;
+    line-height: 42px;
+    margin-top: 37px;
   }
 }
 .serve{
-    width: 6.57rem;
+    width: 657px;
     color: #666666;
-    font-size: 0.26rem;
-    margin-top: 0.57rem;
-    line-height:0.42rem;
-    margin-left: 0.3rem;
+    font-size: 26px;
+    margin-top: 57px;
+    line-height:42px;
+    margin-left: 30px;
     // margin: 0 auto;
 }
 .agreement{
   color: #666666;
-  font-size: 0.26rem;
-  width: 4.5rem;
+  font-size:26px;
+  width: 450px;
   margin: 0 auto;
   // text-align: center;
-  margin-top: 3.77rem;
-  line-height:0.42rem;
-  // margin-bottom: 0.9rem;
+  margin-top: 377px;
+  line-height:42px;
+  // margin-bottom: 90px;
   >p{
     text-align: center
   }
diff --git a/src/PersonalHomepage.vue b/src/PersonalHomepage.vue
index ec544dc..6b7e1df 100644
--- a/src/PersonalHomepage.vue
+++ b/src/PersonalHomepage.vue
@@ -37,43 +37,43 @@
   min-height: 100vh;
   .header {
     width: 100%;
-    height: 2.27rem;
+    height: 227px;
     background-color: #fff;
     box-sizing: border-box;
-    padding: 0.51rem 0.3rem;
+    padding: 51px 30px;
     display: flex;
     align-items: center;
-    margin-bottom: 0.2rem;
+    margin-bottom: 20px;
     .portrait {
-      width: 1.26rem;
-      height: 1.26rem;
+      width: 126px;
+      height: 126px;
       border-radius: 50%;
-      margin-right: 0.31rem;
+      margin-right: 31px;
     }
     .introduce {
-      height: 0.9rem;
+      height: 90px;
       display: flex;
       flex-direction: column;
 
       .name {
         margin: 0;
-        font-size: 0.36rem;
+        font-size: 36px;
         color: #333;
         font-weight: 400;
-        margin-bottom: 0.29rem;
+        margin-bottom: 29px;
       }
       .follow {
         display: flex;
         color: #999;
-        font-size: 0.28rem;
+        font-size: 28px;
 
         > p {
           display: flex;
-          margin-right: 0.69rem;
+          margin-right: 69px;
           > span {
             color: #333;
             display: block;
-            min-width: 0.23rem;
+            min-width: 23px;
           }
         }
       }
@@ -82,22 +82,22 @@
   .classification {
     width: 100%;
     background-color: #fff;
-    // min-height: 3rem;
+    // min-height: 300px;
     box-sizing: border-box;
-    padding: 0.3rem 0.3rem;
+    padding: 30px 30px;
     .page {
       width: 100%;
       display: flex;
-      height: 0.62rem;
-      border-bottom: 0.01rem solid #dfdfdf;
+      height: 62px;
+      border-bottom: 1px solid #dfdfdf;
       > div {
         width: 100%;
-        font-size: 0.32rem;
+        font-size: 32px;
         text-align: center;
 
       }
       .select{
-          border-bottom: 0.04rem solid #6B9147;
+          border-bottom: 4px solid #6B9147;
       }
     }
     .list{
diff --git a/src/components/PersonafFollow.vue b/src/components/PersonafFollow.vue
index 7a9d8ad..39953da 100644
--- a/src/components/PersonafFollow.vue
+++ b/src/components/PersonafFollow.vue
@@ -38,58 +38,58 @@
 </template>
 <style lang="scss" scoped>
 .PersonafFollow {
-  padding: 0.49rem 0 0.39rem 0;
+  padding: 49px 0 39px 0;
   border-bottom: 1px solid #dfdfdf;
   .title {
     display: flex;
     justify-content: space-between;
-    font-size: 0.26rem;
+    font-size: 26px;
     color: #95998f;
-    margin-bottom: 0.28rem;
+    margin-bottom: 28px;
   }
   .center {
-    font-size: 0.3rem;
+    font-size: 30px;
     color: #000;
-    line-height: 0.46rem;
+    line-height: 46px;
   }
   .answer {
     .user {
       display: flex;
       align-items: center;
-      margin-top: 0.34rem;
+      margin-top: 34px;
       > img {
-        width: 0.58rem;
-        height: 0.58rem;
-        border-radius: 0.04rem;
-        margin-right: 0.2rem;
+        width: 58px;
+        height: 58px;
+        border-radius: 4px;
+        margin-right: 20px;
       }
       > div {
         display: flex;
         flex-direction: column;
         > p {
-          font-size: 0.24rem;
+          font-size: 24px;
           color: #000;
         }
         > p:last-child {
-          margin-top: 0.1rem;
-          font-size: 0.24rem;
+          margin-top: 10px;
+          font-size: 24px;
           color: #999;
         }
       }
     }
     .agree {
-      margin-top: 0.29rem;
-      font-size: 0.26rem;
+      margin-top: 29px;
+      font-size: 26px;
       color: #95998f;
     }
     .content {
       > img {
-        width: 6.9rem;
-        height: 3.74rem;
+        width: 690px;
+        height: 374px;
         background-color: #000;
         display: block;
-        margin-top: 0.39rem;
-        margin-bottom: 0.32rem;
+        margin-top: 39px;
+        margin-bottom: 32px;
       }
       > p {
         overflow: hidden;
@@ -97,21 +97,21 @@
         display: -webkit-box;
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
-        line-height: 0.4rem;
-        font-size: 0.26rem;
+        line-height: 40px;
+        font-size: 26px;
       }
     }
     .operation{
         display: flex;
-        margin-top: 0.3rem;
+        margin-top: 30px;
         >div{
-            margin-right: 0.6rem;
-            font-size: 0.22rem;
+            margin-right: 60px;
+            font-size: 22px;
             color: #95998F;
             >img{
-                width: 0.17rem;
-                height: 0.17rem;
-                margin-right: 0.11rem;
+                width: 17px;
+                height: 17px;
+                margin-right: 11px;
                 
             }
         }
diff --git a/src/components/PersonalAnswer.vue b/src/components/PersonalAnswer.vue
index 6619993..0fefb90 100644
--- a/src/components/PersonalAnswer.vue
+++ b/src/components/PersonalAnswer.vue
@@ -12,19 +12,19 @@
 </template>
 <style lang="scss" scoped>
 .PersonalAnswer {
-  padding: 0.49rem 0 0.39rem 0;
+  padding: 49px 0 39px 0;
   border-bottom: 1px solid #dfdfdf;
   .title {
     display: flex;
     justify-content: space-between;
-    font-size: 0.26rem;
+    font-size: 26px;
     color: #95998f;
-    margin-bottom: 0.28rem;
+    margin-bottom: 28px;
   }
   .center {
-    font-size: 0.3rem;
+    font-size: 30px;
     color: #000;
-    line-height: 0.46rem;
+    line-height: 46px;
   }
 }
 </style>
diff --git a/src/index.vue b/src/index.vue
index 5777d96..caedf73 100644
--- a/src/index.vue
+++ b/src/index.vue
@@ -1,10 +1,36 @@
 <template>
-  <div class="box"></div>
+  <div class="box">
+      <div class="head">
+          <img class="logo" src="" alt="" srcset="">
+          <div class="search"></div>
+      </div>
+  </div>
 </template>
 <style lang="scss" scoped>
 .box {
   min-height: 100vh;
   background-color: #f6f6f6;
+  .head{
+      width: 100%;
+      height: 88px;
+      background-color: #fff;
+      display: flex;
+      align-items: center;
+      .logo{
+          width: 115px;
+          height: 37px;
+          background-color: #000;
+          display: block;
+      }
+      .search{
+          width: 485px;
+          height: 60px;
+          background-color: #F0F0F0;
+          box-sizing: border-box;
+          border:1px solid rgba(233,233,233,1);
+          border-radius: 30px;
+      }
+  }
 }
 </style>
 <script>