首页导航

src/assets/style/common.scss

@@ -11,6 +11,11 @@ html,body{
   overflow-y: auto;
 }
 
+.page{
+  height: 100%;
+  background-color: #f5f5f5;
+}
+
 .a-ov{
   @include ellipsis()
 }

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: 912px;
-    height: 667px;
+    width: 435px;
-    overflow-x: hidden;
+    overflow: hidden;
-    overflow-y: auto;
+    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>

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{
+    .page.detail{
-    padding: 0 20px;
+        display: flex;
-}
+        flex-direction: column;
+        .content{
+            flex: 1;
+            height: 0;
+            overflow-x: hidden;
+            overflow-y: auto;
+            padding: 0 20px;
+        }
+    }
+
 </style>

src/pages/Demo/Home/Home.scss

@@ -1,6 +1,4 @@
 .page.home{
-  height: 100%;
-  background-color: #f5f5f5;
   display: flex;
   flex-direction: column;
 

src/pages/Home/Home.vue

@@ -1,4 +1,72 @@
 <template>
+    <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>
 
-    <router-link to="/demo">Demo</router-link>
 </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>