diff --git a/src/App.vue b/src/App.vue
index 08109dd..74a075f 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,6 +46,10 @@
         margin: 0;
         font-family: "Microsoft Sans Serif";
     }
+    p{
+        padding: 0;
+        margin: 0;
+    }
 
     $width: 1000;
     @while $width > 0 {
diff --git a/src/assets/img/add-friend-white.svg b/src/assets/img/add-friend-white.svg
new file mode 100644
index 0000000..ab3b5df
--- /dev/null
+++ b/src/assets/img/add-friend-white.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539944654613" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5726" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M346.357937 350.900905c-0.021489 0.01228-0.042979 0.024559-0.064468 0.037862C346.327238 350.98277 346.352821 350.986863 346.357937 350.900905zM721.022059 171.497932c0.11461 0.194428 0.161682 0.402159 0.252757 0.597611C721.98806 173.255972 722.080158 173.497473 721.022059 171.497932zM126.51902 885.3328c-5.862521-3.76986 3.482311-32.921807 15.897062-44.36851 60.769039-56.022944 88.777953-49.734728 228.248448-69.964468 30.03506-8.987698 88.069825-38.538735 102.426811-68.540026l0.257873-76.356039c0 0-6.373151-11.666714-9.503445-13.017478-41.658795-17.963117-81.294514-81.131809-95.303576-125.691677-35.71134-2.025123-76.382645-44.125987-72.806189-89.391936 1.797949-22.753213 31.371498-35.942607 49.535183-47.061852-0.772596-1.011027-7.694239-36.236296-8.463766-56.662511-9.513678-92.850711 44.983517-127.205147 44.983517-127.205147s-9.961886-43.895743-8.744151-44.26311c0 0 31.628348-2.454912 86.884836-18.198477 157.641343-44.912909 224.333278 74.28282 230.217289 84.214007 42.374086 89.348957 16.910135 148.406005 15.876596 161.532977 17.519002 11.263531 38.635949 25.435299 41.127699 47.642067 4.812609 42.8796-32.66905 88.838328-66.36857 92.241844-9.658987 39.666418-53.262064 110.744243-98.771561 126.354779-4.386914 1.505283-12.583596 10.527774-12.583596 10.527774l-0.252757 71.083965c12.918217 17.58654 47.166229 53.79009 75.878155 62.111616 4.759397 0.320295 15.942087-29.011754 15.942087-29.011754-29.676903-9.518794-45.913703-26.171056-59.084677-44.124963l0.447185-48.722678c54.162574-26.1598 81.722256-74.343195 107.3571-127.540791 38.736233-3.906983 72.103178-72.689532 72.103178-111.585401 0-25.700335-16.678868-47.90608-36.792974-60.826344 1.172709-15.09172 2.551102-45.918819-1.725294-81.401961-3.103688-25.780153-6.848988-56.127322-22.022573-85.010139-6.757914-11.426237-97.376795-156.896376-273.435603-98.712209C388.11804 93.106538 330.221422 91.313705 330.221422 91.313705c-1.38965 0.425695 18.138102 65.850777 18.138102 65.850777s-48.219211 18.597567-48.219211 123.298164c0 14.413268 5.381567 50.987255 4.956895 56.999179-20.863167 12.793374-50.933019 35.300994-46.865377 67.865667 7.831362 62.692854 32.565696 89.10848 80.09213 105.156992 25.347295 52.367695 50.220798 89.402169 101.70231 126.96467l0 56.528458c-13.96506 20.113083-37.310767 35.310204-71.815629 45.654806C209.612507 759.128447 140.22416 775.907599 94.913185 850.389964c-10.080589 16.575514-5.872754 61.769832-5.056156 78.782298l569.982576 0-2.666736-36.679387L126.51902 892.492874 126.51902 885.3328zM693.504332 200.658066c0.597611 1.023306 0.714268 3.436262-0.230244 1.689479C693.369256 202.520483 693.414281 200.48615 693.504332 200.658066zM809.539069 790.001595 809.539069 648.024l-46.918589 0 0 141.977595L622.666984 790.001595l0 46.137807 139.955542 0L762.622526 977.472314l46.918589 0L809.541115 836.139401l141.630694 0 0-46.137807L809.539069 790.001595 809.539069 790.001595z" p-id="5727" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/collect-white.svg b/src/assets/img/collect-white.svg
new file mode 100644
index 0000000..8b8d792
--- /dev/null
+++ b/src/assets/img/collect-white.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539944516004" class="icon" style="" viewBox="0 0 1040 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1932" xmlns:xlink="http://www.w3.org/1999/xlink" width="203.125" height="200"><defs><style type="text/css"></style></defs><path d="M177.812755 934.420799l46.095851-257.966283c2.695389-15.143908-2.527566-30.567179-14.003945-41.262776L14.733563 452.469162c-28.840862-26.952862-12.94687-73.967642 26.897603-79.524195l269.74863-37.622876c15.836687-2.223644 29.509081-11.753695 36.59343-25.507954l120.647801-234.709603c17.810644-34.650171 69.270666-34.650171 87.082334 0l120.647801 234.709603c7.086395 13.754259 20.75572 23.283286 36.5658 25.507954l269.775236 37.622876c39.819914 5.556553 55.711859 52.571333 26.926256 79.524195L814.393121 635.19174c-11.44875 10.695596-16.671705 26.118867-13.978363 41.262776l46.098921 257.966283c6.807033 38.09462-34.845623 67.131957-70.465888 49.152467l-241.295602-121.81437c-14.141068-7.111978-31.035854-7.111978-45.179992 0l-241.295602 121.81437C212.655308 1001.551732 171.002652 972.514395 177.812755 934.420799L177.812755 934.420799zM534.75219 812.217572l238.684124 120.478955c11.864212 6.001691 25.75764-3.695159 23.50739-16.365736L751.34518 661.141762c-2.694365-15.115256 2.529613-30.56411 13.948687-41.289382l193.115276-180.692339c9.613962-9.003048 4.306072-24.676006-8.974395-26.5374l-266.858814-37.232996c-15.810081-2.196015-29.482475-11.727089-36.5658-25.481348L526.667048 117.729332c-5.947456-11.532661-23.090904-11.532661-29.037337 0L378.316302 349.909321c-7.086395 13.754259-20.756743 23.285333-36.566824 25.481348L74.891687 412.623665c-13.280468 1.861394-18.560728 17.534352-8.974395 26.507724l193.0856 180.720991c11.447726 10.724249 16.670681 26.174126 13.975293 41.289382l-45.569872 255.18903c-2.276856 12.670577 11.587919 22.367427 23.480784 16.365736l238.682078-120.478955C503.716336 805.074895 520.610098 805.074895 534.75219 812.217572L534.75219 812.217572zM534.75219 812.217572" p-id="1933" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/More.svg b/src/assets/img/more.svg
similarity index 100%
rename from src/assets/img/More.svg
rename to src/assets/img/more.svg
diff --git a/src/assets/img/ic_more.svg b/src/assets/img/next.svg
old mode 100755
new mode 100644
similarity index 100%
rename from src/assets/img/ic_more.svg
rename to src/assets/img/next.svg
diff --git a/src/assets/img/qr-code-white.svg b/src/assets/img/qr-code-white.svg
new file mode 100644
index 0000000..adbed20
--- /dev/null
+++ b/src/assets/img/qr-code-white.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539944714603" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6776" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M369.536 440.8h-224.32a65.216 65.216 0 0 1-65.12-65.184V151.36c0-35.904 29.184-65.12 65.12-65.12h224.32c35.936 0 65.152 29.216 65.152 65.12v224.256a65.248 65.248 0 0 1-65.152 65.184zM145.184 143.712a7.552 7.552 0 0 0-7.616 7.552v224.288c0 4.256 3.456 7.68 7.616 7.68h224.32a7.68 7.68 0 0 0 7.68-7.68V151.296a7.616 7.616 0 0 0-7.68-7.552h-224.32zM374.912 935.872h-224.32a65.184 65.184 0 0 1-65.152-65.12v-224.32c0-35.936 29.248-65.152 65.152-65.152h224.32c35.936 0 65.088 29.216 65.088 65.152v224.32a65.12 65.12 0 0 1-65.088 65.12z m-224.352-297.088a7.616 7.616 0 0 0-7.68 7.648v224.192a7.68 7.68 0 0 0 7.68 7.744h224.352a7.68 7.68 0 0 0 7.584-7.744v-224.192a7.648 7.648 0 0 0-7.584-7.648H150.56zM869.312 937.76h-224.32v-57.504h224.32a7.68 7.68 0 0 0 7.744-7.552v-224.352h57.44v224.352c0 35.84-29.248 65.056-65.184 65.056zM878.88 443.744h-224.32a65.28 65.28 0 0 1-65.248-65.056V154.4c0-35.936 29.312-65.184 65.248-65.184h224.32c35.872 0 64.992 29.248 64.992 65.184v224.288c0 35.84-29.12 65.056-64.992 65.056z m-224.32-297.056a7.616 7.616 0 0 0-7.744 7.712v224.288c0 4.224 3.36 7.552 7.744 7.552h224.32a7.424 7.424 0 0 0 7.488-7.552V154.4a7.68 7.68 0 0 0-7.488-7.712h-224.32z" p-id="6777" fill="#ffffff"></path><path d="M292.256 263.456a34.88 34.88 0 0 1-34.912 34.816c-19.232 0-34.88-15.552-34.88-34.816 0-19.232 15.648-34.912 34.88-34.912a35.008 35.008 0 0 1 34.912 34.912zM801.44 266.56a34.88 34.88 0 0 1-34.688 34.848 34.88 34.88 0 1 1 0-69.728c19.072 0 34.688 15.552 34.688 34.88zM796.64 759.872a34.88 34.88 0 1 1-69.76 0c0-19.2 15.616-34.88 34.944-34.88 19.04 0 34.816 15.68 34.816 34.88zM297.568 758.496a34.912 34.912 0 0 1-69.792 0 34.88 34.88 0 0 1 34.88-34.816c19.232 0 34.912 15.68 34.912 34.816z" p-id="6778" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/top-bg.jpg b/src/assets/img/top-bg.jpg
new file mode 100644
index 0000000..bd706f1
Binary files /dev/null and b/src/assets/img/top-bg.jpg differ
diff --git a/src/components/home/Share.vue b/src/components/home/Share.vue
index 144510e..03e557a 100755
--- a/src/components/home/Share.vue
+++ b/src/components/home/Share.vue
@@ -33,7 +33,7 @@
                         <span>ttentau</span>
                     </div>
                     <div class="friend pr10p">
-                        <img src="../../assets/img/ic_more.svg" alt="">
+                        <img src="../../assets/img/next.svg" alt="">
                         <span>更多</span>
                     </div>
                 </div>
@@ -62,7 +62,7 @@
                         <span>微博</span>
                     </div>
                     <div class="share-to pr10p">
-                        <img src="../../assets/img/More.svg">
+                        <img src="../../assets/img/more.svg">
                         <span>更多</span>
                     </div>
                 </div>
diff --git a/src/components/me/Me.vue b/src/components/me/Me.vue
index 35b886b..45f30a7 100644
--- a/src/components/me/Me.vue
+++ b/src/components/me/Me.vue
@@ -1,5 +1,54 @@
 <template>
     <div class="me">
+        <div class="container">
+            <div class="header" v-bind:style="{height:height/2+'px'}">
+                <div class="top pt20p pl10p pr10p">
+                    <img src="../../assets/img/next.svg" alt="">
+                    <img src="../../assets/img/more.svg" alt="">
+                </div>
+                <div class="bottom">
+                    <div class="container p10p">
+                        <div class="head">
+                            <img src="../../assets/img/head-image.jpeg" class="head-image">
+                            <div class="other-buttons" v-if="false">
+                                <div class="attention">
+                                    关注
+                                </div>
+                                <div class="more-attention">
+                                    -
+                                </div>
+                            </div>
+                            <div class="my-buttons ">
+                                <div class="collect">
+                                    <img src="../../assets/img/collect-white.svg" alt="">
+                                    <span class="mr5p">收藏</span>
+                                </div>
+                                <div class="add-friend">
+                                    <img src="../../assets/img/add-friend-white.svg" alt="">
+                                </div>
+                                <div class="qr-code">
+                                    <img src="../../assets/img/qr-code-white.svg" alt="">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="description">
+                            <p class="name f22 mt5p mb5p">ttentau</p>
+                            <div class="number">
+                                <span>抖音号：605128307</span>
+                                <div class="jrtt">
+                                    <img src="../../assets/img/sina.svg" alt="">
+                                    <span>头条主页</span>
+                                    <img src="../../assets/img/next.svg" alt="">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="content">
+
+            </div>
+        </div>
         <Footer v-bind:init-tab="5"/>
     </div>
 </template>
@@ -11,10 +60,97 @@
         name: "Me",
         components: {
             Footer
+        },
+        data() {
+            return {
+                height: 0
+            }
+        },
+        created() {
+            this.height = window.screen.height;
         }
     }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+    .me {
+        .header {
+            background: gray;
+            .top {
+                height: 40%;
+                display: flex;
+                justify-content: space-between;
+                background: url("../../assets/img/top-bg.jpg");
+                img {
+                    border-radius: 50%;
+                    padding: 5px;
+                    background: #524a4a;
+                    height: 20px;
+                    width: 20px;
+                    &:nth-child(1) {
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+            .bottom {
+                background-image: url("../../assets/img/head-image.jpeg");
+                background-position: center;
+                background-size: cover;
+                background-repeat: no-repeat;
+                height: 60%;
+                .container {
+                    height: 100%;
+                    background-color: rgba(0, 0, 0, 0.89);
+                    .head {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        .head-image {
+                            background: black;
+                            padding: 5px;
+                            border-radius: 50%;
+                            width: 60px;
+                            height: 60px;
+                        }
+                        .my-buttons {
+                            div {
+                                display: flex;
+                                align-items: center;
+                                float: left;
+                                border-radius: 2px;
+                                background: #676767;
+                                margin-right: 5px;
+                                img {
+                                    padding: 6px;
+                                    height: 20px;
+                                }
+                                span{
+                                    color: #cdcdcd;
+                                }
+                            }
 
+                        }
+                    }
+                    .description{
+                        color: white;
+                        .number{
+                            padding-bottom: 10px;
+                            border-bottom: 1px solid gray;
+                            .jrtt{
+                                float: right;
+                                img {
+                                    height: 10px;
+                                    width: 10px;
+                                }
+                                span {
+                                    margin:0 5px;
+                                }
+                            }
+                        }
+                    }
+                }
+
+            }
+        }
+    }
 </style>
\ No newline at end of file