diff --git a/public/index.html b/public/index.html
index 3e71955..8f0a4fc 100755
--- a/public/index.html
+++ b/public/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <meta name="viewport"
-          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
     <meta name="screen-orientation" content="portrait"/>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="format-detection" content="telephone=no">
     <meta name="full-screen" content="yes">
@@ -12,8 +11,10 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>抖音</title>
     <style>
-        body{
+        body,html{
             height: 0!important;
+            padding: 0;
+            margin: 0;
         }
     </style>
 </head>
diff --git a/src/App.vue b/src/App.vue
index 33f53e6..08109dd 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="app">
+    <div id="app" v-bind:style="{'min-height':height + 'px'}">
         <!--<Home/>-->
         <router-view></router-view>
     </div>
@@ -12,13 +12,34 @@
         name: 'app',
         components: {
             // Home
+        },
+        data() {
+            return {
+                height: 0,
+                width: 0
+            }
+        },
+        created() {
+            this.height = window.screen.height;
+            // this.width = window.screen.width;
+            // let availWidth = window.screen.availWidth;
+            // let clientWidth = document.body.clientWidth;
+            // let offsetWidth = document.body.offsetWidth;
+            // let scrollWidth = document.body.scrollWidth;
+            // console.log(this.height);
+            // console.log(this.width);
+            // console.log(availWidth);
+            // console.log(clientWidth);
+            // console.log(offsetWidth);
+            // console.log(scrollWidth);
+
         }
     }
 </script>
 
 <style lang="scss">
     #app {
-        width: 100%;
+        background: #2e3244;
         height: 100%;
         font-size: 14px;
         padding: 0;
@@ -75,8 +96,6 @@
         $margin: $margin - 1;
     }
 
-
-
     $padding: 50;
     @while $padding > 0 {
         .pl#{$padding}p {
diff --git a/src/assets/img/person.svg b/src/assets/img/person.svg
new file mode 100644
index 0000000..c322cad
--- /dev/null
+++ b/src/assets/img/person.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="1539930858055" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1047" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M315.7 832h-112c-1.1-0.6-4.7-3.7-7.8-11.6-5-12.9-5-28.9-0.1-41.8l47.7-124.4c13.4-34.8 36.9-57.4 59.9-57.4h94c6.1 0 11.8-3 14.9-8.2 5.5-9.2 11.5-17.7 18-25.4 8.1-9.7 3.3-24.5-8.9-27.5-7.9-1.9-15.9-2.9-24.1-2.9h-93.9c-50.5 0-96.3 37.7-119.7 98.4L136 755.6c-10.8 28-10.7 60.1 0.2 88 5.7 14.7 14.3 27.2 24.7 36.1 12.4 10.6 27 16.2 42.4 16.2h121.3c12.2 0 20.3-12.4 15.6-23.6-0.3-0.8-0.6-1.6-1-2.4-3-7.7-5.3-15.8-6.8-24.1-1.5-8-8.6-13.8-16.7-13.8zM350.2 510.4c43.7 0 83.4-17.2 112.7-45.1 8.8-8.4 8.3-22.7-1-30.5-4.1-3.5-8.1-7.1-11.9-10.9-7.9-7.9-20.6-8.1-28.7-0.5l-0.4 0.4c-19.1 17.7-44.3 27.5-70.3 27.6-28.5 0.1-55.3-11.2-75.1-31.7-18.4-19-28.9-44.5-29.2-70.9-0.4-28.8 10.8-55.9 31.4-76 19.8-19.4 46.8-30 74.5-29.5 8.4 0.1 16.7 1.3 24.7 3.4 10.8 2.8 21.9-3.3 25.1-14 1.6-5.2 3.3-10.3 5.3-15.2 4.5-11.4-1.8-24.2-13.7-27.5-13.8-3.8-28.3-5.8-43.2-5.8-89.6 0-162.4 72.3-163.2 161.7-0.9 89.9 73 164.5 163 164.5zM870.8 770.5l-56.2-146.3C788 555 736.1 512 679.1 512H568.7c-30.2 0-59 12.1-83.4 33.7-15.5 13.8-29.2 31.5-40.3 52.4-4.4 8.2-8.3 16.9-11.8 26L377 770.5c-7.4 19.2-10.2 40.6-8.4 61.5 1.1 13.1 4 26 8.7 38 3.8 9.6 8.6 18.4 14.3 26 4 5.4 8.4 10.2 13.2 14.3 13.5 11.6 29.5 17.7 46.2 17.7h346c16.7 0 32.7-6.1 46.2-17.7 11.6-9.9 21.1-23.9 27.5-40.3 11.9-31.1 12-68.3 0.1-99.5z m-59.9 76.2c-4.7 11.9-11 17.3-14 17.3h-346c-3 0-9.4-5.4-14-17.3-1.8-4.6-3.1-9.6-3.9-14.7-2-12.9-0.8-26.8 3.8-38.6l55.9-145.6 0.3-0.7c9.7-25.3 24-45.4 40.1-57.7 11.3-8.6 23.5-13.4 35.7-13.4h110.4c29.4 0 59.2 27.9 75.8 71.1l56 146.3c6.3 16.5 6.3 36.9-0.1 53.3z" p-id="1048" fill="#ffffff"></path><path d="M516.9 447.6c30.5 20.5 67.3 32.4 106.8 32.4 106 0 192-86 192-192s-86-192-192-192c-73.5 0-137.3 41.3-169.6 101.9-9.2 17.3-15.9 36.2-19.4 56.2-2 11-3 22.4-3 34 0 45.1 15.5 86.5 41.5 119.3 12.4 15.5 27.2 29.1 43.7 40.2z m16.3-250.1c24.2-24.2 56.3-37.5 90.5-37.5s66.3 13.3 90.5 37.5c24.2 24.2 37.5 56.3 37.5 90.5s-13.3 66.3-37.5 90.5C690 402.7 657.9 416 623.7 416c-28.5 0-55.6-9.3-77.9-26.4-4.4-3.4-8.7-7.1-12.7-11.1-24.2-24.2-37.5-56.3-37.5-90.5 0-18.5 3.9-36.4 11.3-52.7 6.4-13.9 15.2-26.7 26.3-37.8z" p-id="1049" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/components/attention/Attention.vue b/src/components/attention/Attention.vue
index a73e664..4d4488e 100755
--- a/src/components/attention/Attention.vue
+++ b/src/components/attention/Attention.vue
@@ -30,6 +30,7 @@
                 <div class="toolbar mb10p">
                     <div class="item">
                         <img src="../../assets/img/love.svg" alt="">
+                        <img src="../../assets/img/loved.svg" alt="" class="love-image" v-if="false">
                         <span class="count">555</span>
                     </div>
                     <div class="item">
@@ -45,7 +46,7 @@
                         <span class="count">555</span>
                     </div>
                 </div>
-                <div class="hot-comment pl5p pr15p mb5p  oh">
+                <div class="hot-comment pr15p mb5p  oh">
                     <div class="content pull-left ">
                         <img src="../../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
                         <div class="pull-right comment-container">
@@ -55,6 +56,7 @@
                     </div>
                     <div class="love pull-right">
                         <img src="../../assets/img/love-gray.svg" alt="" class="love-image">
+                        <img src="../../assets/img/loved.svg" alt="" class="love-image" v-if="false">
                         <span class="f14 block">3453</span>
                     </div>
                 </div>
@@ -171,19 +173,16 @@
                     }
                 }
                 .hot-comment {
-                    .head-image {
-                        width: 40px;
-                        border-radius: 50%;
-                        float: left;
-                    }
                     .content {
                         float: left;
                         width: 85%;
                         .head-image {
-                            width: 15%;
+                            width: 40px;
+                            border-radius: 50%;
+                            float: left;
                         }
                         .comment-container {
-                            width: 80%;
+                            width: 85%;
                             .time {
                                 color: gray;
                             }
diff --git a/src/components/common/Footer.vue b/src/components/common/Footer.vue
index 68f45ed..c19c52c 100755
--- a/src/components/common/Footer.vue
+++ b/src/components/common/Footer.vue
@@ -11,11 +11,11 @@
 <script>
     export default {
         name: "Footer",
-        props:['initTab'],
-        data(){
-          return{
-              currentTab:this.initTab
-          }
+        props: ['initTab'],
+        data() {
+            return {
+                currentTab: this.initTab
+            }
         },
         methods: {
             tab(index) {
@@ -31,8 +31,10 @@
                     case 3:
                         break;
                     case 4:
+                        this.$router.push('/message');
                         break;
                     case 5:
+                        this.$router.push('/me');
                         break;
                 }
             }
diff --git a/src/components/me/Me.vue b/src/components/me/Me.vue
new file mode 100644
index 0000000..35b886b
--- /dev/null
+++ b/src/components/me/Me.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="me">
+        <Footer v-bind:init-tab="5"/>
+    </div>
+</template>
+
+<script>
+    import Footer from '../common/Footer';
+
+    export default {
+        name: "Me",
+        components: {
+            Footer
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/message/Message.vue b/src/components/message/Message.vue
new file mode 100644
index 0000000..f9ad1fe
--- /dev/null
+++ b/src/components/message/Message.vue
@@ -0,0 +1,172 @@
+<template>
+    <div class="message">
+        <div class="container p15p">
+            <div class="header">
+                <div class="title">
+                    <p class="tac">消息</p>
+                    <span>联系人</span>
+                </div>
+            </div>
+            <div class="toolbar mt20p">
+                <div>
+                    <img src="../../assets/img/person.svg" alt="">
+                    <span>粉丝</span>
+                </div>
+                <div>
+                    <img src="../../assets/img/love.svg" alt="">
+                    <span>赞</span>
+                </div>
+                <div>
+                    <img src="../../assets/img/person.svg" alt="">
+                    <span>@我的</span>
+                </div>
+                <div>
+                    <img src="../../assets/img/message.svg" alt="">
+                    <span>评论</span>
+                </div>
+            </div>
+            <div class="messages mt20p">
+                <div class="message oh mt15p">
+                    <div class="content pull-left ">
+                        <img src="../../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
+                        <div class="pull-right comment-container">
+                            <div class="name">游戏小助手</div>
+                            <div class="detail">抖出好游戏</div>
+                        </div>
+                    </div>
+                    <div class="love pull-right">
+                        <span class="f14 block">20:54</span>
+                    </div>
+                </div>
+                <div class="message oh mt15p">
+                    <div class="content pull-left ">
+                        <img src="../../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
+                        <div class="pull-right comment-container">
+                            <div class="name">抖音小助手</div>
+                            <div class="detail">抖音美好奇妙夜小贴士</div>
+                        </div>
+                    </div>
+                    <div class="love pull-right">
+                        <span class="f14 block">20:54</span>
+                    </div>
+                </div>
+                <div class="message oh mt15p">
+                    <div class="content pull-left ">
+                        <img src="../../assets/img/head-image.jpeg" alt="" class="head-image pull-left">
+                        <div class="pull-right comment-container">
+                            <div class="name">TTentau</div>
+                            <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
+                        </div>
+                    </div>
+                    <div class="love pull-right">
+                        <span class="f14 block">20:54</span>
+                    </div>
+                </div>
+            </div>
+            <p class="tac">无更多消息</p>
+        </div>
+        <Footer v-bind:init-tab="4"/>
+    </div>
+</template>
+
+<script>
+    import Footer from '../common/Footer';
+
+    export default {
+        name: "Message",
+        components: {
+            Footer
+        },
+        data() {
+            return {}
+        },
+        created() {
+            let height = window.screen.height;
+            console.log(height);
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .message {
+        background: #2e3244;
+        color: #b8b9c1;
+        height: 100%;
+        .header {
+            .title {
+                position: relative;
+                span {
+                    position: absolute;
+                    right: 10px;
+                    top: 0;
+                }
+            }
+        }
+        .toolbar {
+            display: flex;
+            justify-content: space-around;
+            div {
+                text-align: center;
+                &:nth-child(1) {
+                    img {
+                        background: rgb(79, 136, 251);
+                    }
+                }
+                &:nth-child(2) {
+                    img {
+                        background: rgb(248, 53, 95);
+                    }
+                }
+                &:nth-child(3) {
+                    img {
+                        background: rgb(28, 194, 98);
+                    }
+                }
+                &:nth-child(4) {
+                    img {
+                        background: rgb(195, 106, 250);
+                    }
+                }
+                img {
+                    padding: 10px;
+                    border-radius: 3px;
+                    width: 25px;
+                    height: 25px;
+
+                }
+                span {
+                    display: block;
+                }
+            }
+
+        }
+        .messages {
+            border-top: 1px solid #494950;
+            .message {
+                .content {
+                    float: left;
+                    width: 85%;
+                    .head-image {
+                        width: 40px;
+                        border-radius: 50%;
+                        float: left;
+                    }
+                    .comment-container {
+                        width: 85%;
+                        .time {
+                            color: gray;
+                        }
+                    }
+
+                }
+                .love {
+                    text-align: center;
+                    .love-image {
+                        width: 30px;
+                        border-radius: 50%;
+                    }
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f2bc158..dc8ae50 100755
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,8 @@ import App from './App.vue'
 import VueRouter from 'vue-router'
 import Home from './components/home/Home.vue'
 import Attention from './components/attention/Attention.vue'
+import Message from './components/message/Message.vue'
+import Me from './components/me/Me.vue'
 
 Vue.config.productionTip = false
 
@@ -15,6 +17,8 @@ const router = new VueRouter({
         {path: '/', component: Home},
         {path: '/home', component: Home},
         {path: '/attention', component: Attention},
+        {path: '/message', component: Message},
+        {path: '/me', component: Me},
     ]
 });
 new Vue({
