diff --git a/public/iphone.png b/public/iphone.png
new file mode 100644
index 0000000..f1e882e
Binary files /dev/null and b/public/iphone.png differ
diff --git a/public/iphone6.jpg b/public/iphone6.jpg
new file mode 100644
index 0000000..27d58fa
Binary files /dev/null and b/public/iphone6.jpg differ
diff --git a/src/assets/style/common.scss b/src/assets/style/common.scss
index 6b15b9c..5903881 100644
--- a/src/assets/style/common.scss
+++ b/src/assets/style/common.scss
@@ -11,6 +11,11 @@ html,body{
   overflow-y: auto;
 }
 
+.page{
+  height: 100%;
+  background-color: #f5f5f5;
+}
+
 .a-ov{
   @include ellipsis()
 }
diff --git a/src/components/Mobile.vue b/src/components/Mobile.vue
index 53df1fa..f887b78 100644
--- a/src/components/Mobile.vue
+++ b/src/components/Mobile.vue
@@ -1,17 +1,51 @@
 <template>
     <div class="moblie">
-        <slot></slot>
+        <div class="mobile-wrapper">
+            <slot></slot>
+        </div>
     </div>
 </template>
 
 <style lang="scss" scoped>
 .moblie{
-    // 使fixed降级
-    transform: scale(1,1);
+
     margin: 0 auto;
-    width: 375px;
-    height: 667px;
-    overflow-x: hidden;
-    overflow-y: auto;
+    height: 912px;
+    width: 435px;
+    overflow: hidden;
+    position: relative;
+    .mobile-wrapper{
+        position: absolute;
+        left: 30px;
+        right: 30px;
+        top: 62px;
+        bottom: 62px;
+        width: 375px;
+        height: 812px;
+        // 使fixed降级
+        transform: scale(1,1);
+        overflow-x: hidden;
+        overflow-y: auto;
+        border-radius: 20px;
+    }
+
+    @include media(xs) {
+        height: 100%;
+        .mobile-wrapper{
+            height: 100%;
+            margin-left:0;
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+        }
+    }
+    @include media(sm,md,lg) {
+        background-image: url("/iphone.png");
+        background-color: white;
+        background-size: 100% 100%;
+        background-position: center;
+    }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/Demo/Detail/Detail.vue b/src/pages/Demo/Detail/Detail.vue
index fa776cc..ba4e631 100644
--- a/src/pages/Demo/Detail/Detail.vue
+++ b/src/pages/Demo/Detail/Detail.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="page home">
+    <div class="page detail">
         <Header>
             文章详情
         </Header>
@@ -37,7 +37,16 @@
 </script>
 
 <style scoped lang="scss">
-.content{
-    padding: 0 20px;
-}
+    .page.detail{
+        display: flex;
+        flex-direction: column;
+        .content{
+            flex: 1;
+            height: 0;
+            overflow-x: hidden;
+            overflow-y: auto;
+            padding: 0 20px;
+        }
+    }
+
 </style>
diff --git a/src/pages/Demo/Home/Home.scss b/src/pages/Demo/Home/Home.scss
index 63ecae4..717c75e 100644
--- a/src/pages/Demo/Home/Home.scss
+++ b/src/pages/Demo/Home/Home.scss
@@ -1,6 +1,4 @@
 .page.home{
-  height: 100%;
-  background-color: #f5f5f5;
   display: flex;
   flex-direction: column;
 
diff --git a/src/pages/Home/Home.vue b/src/pages/Home/Home.vue
index c8d4f99..5fc7903 100644
--- a/src/pages/Home/Home.vue
+++ b/src/pages/Home/Home.vue
@@ -1,4 +1,72 @@
 <template>
-    
-    <router-link to="/demo">Demo</router-link>
-</template>
\ No newline at end of file
+    <Header :back="false">
+        彩虹Demo列表
+    </Header>
+
+    <div class="rainbow-list">
+        <div class="rainbow-item red">
+            <router-link to="/demo">Demo页面</router-link>
+        </div>
+        <div class="rainbow-item orange">
+            暂空
+        </div>
+        <div class="rainbow-item yellow">
+            暂空
+        </div>
+        <div class="rainbow-item green">
+            暂空
+        </div>
+        <div class="rainbow-item greenyellow">
+            暂空
+        </div>
+        <div class="rainbow-item blue">
+            暂空
+        </div>
+        <div class="rainbow-item purple">
+            暂空
+        </div>
+    </div>
+
+</template>
+<style lang="scss" scoped>
+.rainbow-list{
+    width: 500px;
+    @include media(xs) {
+        width: 100%;
+    }
+    margin: 0 auto;
+    margin-top: 20px;
+    .rainbow-item{
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        color: white;
+        font-size: 25px;
+        a{
+            text-decoration: none;
+            color: inherit;
+        }
+        &.red{
+            background-color: red;
+        }
+        &.orange{
+            background-color: orange;
+        }
+        &.yellow{
+            background-color: yellow;
+        }
+        &.green{
+            background-color: green;
+        }
+        &.greenyellow{
+            background-color: greenyellow;
+        }
+        &.blue{
+            background-color: blue;
+        }
+        &.purple{
+            background-color: purple;
+        }
+    }
+}
+</style>