处理100vh兼容问题

src/App.vue

@@ -16,6 +16,20 @@ export default {
   },
   data() {
     return {};
+  },
+  mounted() {
+    // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
+    let vh = window.innerHeight * 0.01;
+    // Then we set the value in the --vh custom property to the root of the document
+    document.documentElement.style.setProperty("--vh", `${vh}px`);
+
+    // We listen to the resize event
+    window.addEventListener("resize", () => {
+      // We execute the same script as before
+      let vh = window.innerHeight * 0.01;
+      console.log(vh);
+      document.documentElement.style.setProperty("--vh", `${vh}px`);
+    });
   }
 };
 </script>

src/views/complete.vue

@@ -139,6 +139,9 @@ export default {
     z-index: 1;
     &.noBaby {
       height: 420px;
+      .bottom {
+        margin-top: 100px;
+      }
     }
     .nickname {
       font-size: 46px;
@@ -150,10 +153,10 @@ export default {
       }
     }
     .title {
-      height: 53px;
       margin-top: 41px;
       color: #fb7c76;
       font-size: 46px;
+      height: 53px;
       font-weight: bolder;
       .icon {
         width: 69px;
@@ -194,7 +197,7 @@ export default {
 .mobile {
   .main_content {
     width: 10rem;
-    height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
     background: #ffffff;
     position: relative;
     display: flex;
@@ -224,6 +227,9 @@ export default {
     z-index: 1;
     &.noBaby {
       height: 5.6rem;
+      .bottom {
+        margin-top: 1.3333rem;
+      }
     }
     .nickname {
       font-size: 0.6133rem;
@@ -235,10 +241,10 @@ export default {
       }
     }
     .title {
-      height: 0.7067rem;
       margin-top: 0.5467rem;
       color: #fb7c76;
       font-size: 0.6133rem;
+      line-height: 0.7067rem;
       font-weight: bolder;
       .icon {
         width: 0.92rem;

src/views/index.vue

@@ -894,7 +894,7 @@ export default {
       left: 0;
       top: 0;
       width: 100vw;
-      height: 100vh;
+      height: calc(var(--vh, 1vh) * 100);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -903,7 +903,7 @@ export default {
         left: 0;
         top: 0;
         width: 100vw;
-        height: 100vh;
+        height: calc(var(--vh, 1vh) * 100);
         background: rgba(0, 0, 0, 0.5);
         z-index: 0;
       }
@@ -958,7 +958,7 @@ export default {
 .mobile {
   .main_content {
     width: 10rem;
-    height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
     background: #ffffff;
     position: relative;
     display: flex;
@@ -1160,7 +1160,7 @@ export default {
       left: 0;
       top: 0;
       width: 100vw;
-      height: 100vh;
+      height: calc(var(--vh, 1vh) * 100);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -1169,7 +1169,7 @@ export default {
         left: 0;
         top: 0;
         width: 100vw;
-        height: 100vh;
+        height: calc(var(--vh, 1vh) * 100);
         background: rgba(0, 0, 0, 0.5);
         z-index: 0;
       }