app端tabbar覆盖页面其他位置。

src/App.vue

@@ -7,15 +7,15 @@
  * 版权所有，侵权必究！
  *
 -->
-
 <template>
-  <div id="app" :style="{height:appHeight}">
+    <div id="app">
+        <div :style="{ height: showTab ?appHeight:'100%' }" id="app-content">
             <transition :name="transitionName">
                 <keep-alive :include="cachePage">
                     <router-view class="router-view" />
                 </keep-alive>
             </transition>
-    <div :style="{height:tabH}"></div>
+        </div>
         <tab-bar v-if="showTab"></tab-bar>
     </div>
 </template>
@@ -31,8 +31,8 @@ export default {
         return {
             appHeight: "",
             tabH: "",
-      rempx:0,
-      headH:'',
+            rempx: 0,
+            headH: "",
             screenH: "",
             transitionName: "slide-left",
             cachePage: [
@@ -49,20 +49,27 @@ export default {
             ],
         };
     },
+
     mounted() {
         let tabH =
-      document.getElementsByTagName("html")[0].style.fontSize.split("px")[0] *
-      1.33333;
-    let sH = window.screen.height;
-    this.headH=document.getElementsByTagName("html")[0].style.fontSize.split("px")[0] *
-      1.5;+'px'
+            document
+                .getElementsByTagName("html")[0]
+                .style.fontSize.split("px")[0] * 1.33333;
+        let sH = document.documentElement.clientHeight;
+        this.headH =
+            document
+                .getElementsByTagName("html")[0]
+                .style.fontSize.split("px")[0] * 1.5;
+        +"px";
         this.appHeight = sH - tabH + "px";
         this.tabH = tabH + "px";
         this.screenH = sH + "px";
     },
     computed: {
         showTab() {
-      return !["login", "login2","choose-people"].includes(this.$route.name);
+            return !["login", "login2", "choose-people"].includes(
+                this.$route.name
+            );
         },
     },
     watch: {
@@ -95,8 +102,19 @@ export default {
     overflow: hidden;
     position: relative;
     overflow: hidden;
+    height: 100vh;
     // z-index:999999999999
 }
+#app-content {
+    box-sizing: border-box;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    overflow: hidden;
+    z-index: 99999999;
+}
 
 .router-view {
     width: 100%;