fix:容器居中优化

src/assets/css/base.scss

@@ -18,12 +18,7 @@ button {
 
 html,
 body {
-  margin: 0 auto;
-  background: $color-f;
-  max-width: 750px;
-  height: 100%;
-  overflow: hidden;
-  color: $color-1;
+  height: 100vh;
 }
 
 .scroll-view {
@@ -40,8 +35,4 @@ body {
   html {
     font-size: 16px;
   }
-  body {
-    border-left: 1px solid $color-6;
-    border-right: 1px solid $color-6;
-  }
 }

src/assets/css/ui.scss

@@ -243,3 +243,34 @@ input, textarea {
   opacity: 0;
   transform: translateY(60px);
 }
+
+// 转场动画
+.slide-right-enter-active,
+.slide-right-leave-active,
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all 0.3s ease;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: #fff;
+  pointer-events: none;
+}
+
+.slide-right-leave-to {
+  transform: translate3d(-100%, 0, 0);
+}
+
+.slide-right-enter {
+  transform: translate3d(100%, 0, 0);
+}
+
+.slide-left-enter {
+  transform: translate3d(-100%, 0, 0);
+}
+
+.slide-left-leave-to {
+  transform: translate3d(100%, 0, 0);
+}

src/pages/Entry.vue

@@ -54,12 +54,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  @import '@/common/scss/base.scss';
   .m-entry {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     height: 100%;
+    max-width: 750px;
+    margin: 0 auto;
+    background: $color-f;
+    color: $color-1;
   }
   .router-container {
     width: 100%;
@@ -82,30 +87,10 @@ export default {
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
-
-  .slide-right-enter-active, 
-  .slide-right-leave-active,
-  .slide-left-enter-active, 
-  .slide-left-leave-active {
-    transition: all 0.3s ease;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: #fff;
-    pointer-events: none;
-  }
-  .slide-right-leave-to {
-    transform: translate3d(-100%, 0, 0);
-  }
-  .slide-right-enter {
-    transform: translate3d(100%, 0, 0);
-  }
-  .slide-left-enter {
-    transform: translate3d(-100%, 0, 0);
-  }
-  .slide-left-leave-to {
-    transform: translate3d(100%, 0, 0);
+  @media screen and (min-width: 750px) {
+    .m-entry {
+      border-left: 1px solid $color-6;
+      border-right: 1px solid $color-6;
+    }
   }
 </style>

src/pages/FormVolume/Layout1/style.scss

@@ -66,6 +66,9 @@
   .footer {
     padding: $sp-md $sp-lg;
     background: $color-f;
+    box-shadow: 0 -2px 4px 1px $color-5;
+    position: relative;
+    z-index: 3;
   }
   .slider-layout {
     flex: 1;