适配问题

src/App.vue

@@ -3,7 +3,7 @@
         <app-bar ref="bar"></app-bar>
         <router-view v-slot="{ Component }">
             <keep-alive :include="keeps">
-                <component :is="Component" class="scroll-content" ref="content" />
+                <component :is="Component" class="scroll-content" ref="content" :style="scrollStyle" />
             </keep-alive>
         </router-view>
         <phone-ver></phone-ver>
@@ -29,9 +29,16 @@ export default {
             changeTab: this.changeTab
         };
     },
+    inject: ['barHeight'],
     computed: {
         barValue() {
             return this.$refs.bar;
+        },
+        scrollStyle() {
+            return {
+                boxSizing: 'border-box',
+                minHeight: `calc(100vh - ${(this.barHeight || '0') + 'px'})`
+            };
         }
     },
     data() {
@@ -87,8 +94,6 @@ export default {
 
 <style lang="less" scoped>
 .scroll-content {
-    min-height: calc(100vh - 46px);
-    min-height: calc(var(--app-height) - 46px);
     box-sizing: border-box;
     // padding-top: 46px;
 }

src/styles/common/common.less

@@ -189,12 +189,10 @@
 }
 
 .bottom(@height:0px) {
-    padding-bottom: calc(@height + constant(safe-area-inset-bottom));
-    padding-bottom: calc(@height + env(safe-area-inset-bottom));
+    padding-bottom: calc(@height + var(--safe-bottom));
 }
 .fixedBottom(@height:0px) {
-    bottom: calc(@height + constant(safe-area-inset-bottom));
-    bottom: calc(@height + env(safe-area-inset-bottom));
+    bottom: calc(@height + var(--safe-bottom));
 }
 @keyframes zoomOutUp {
     40% {

src/views/Mine.vue

@@ -354,10 +354,10 @@ export default {
 
 <style lang="less" scoped>
 .mine {
-    padding-bottom: 100px;
     background-color: #272b2e;
     padding-top: 0 !important;
     position: relative;
+    height: 100vh;
 }
 
 .top {

src/views/account/Login.vue

@@ -267,10 +267,6 @@ export default {
     background-repeat: no-repeat;
     background-size: 100% 100%;
 }
-.loginHeight {
-    min-height: calc(100vh - 46px);
-    min-height: calc(var(--app-height) - 46px);
-}
 /deep/input:-webkit-autofill {
     box-shadow: 0 0 0px 1000px #101010 inset;
     -webkit-text-fill-color: #898989;

src/views/account/Register.vue

@@ -230,10 +230,6 @@ export default {
     background-repeat: no-repeat;
     background-size: 100% 100%;
 }
-.loginHeight {
-    min-height: calc(100vh - 46px);
-    min-height: calc(var(--app-height) - 46px);
-}
 .tabs {
     display: flex;
     justify-content: center;

src/views/user/Rank.vue

@@ -110,8 +110,6 @@ export default {
         z-index: 0;
     }
     padding: 48vw 10px 0;
-    min-height: calc(100vh - 46px);
-    min-height: calc(var(--app-height) - 46px);
 
     .top-text {
         position: absolute;

src/views/user/Wallet.vue

@@ -525,6 +525,7 @@ export default {
 .wallet {
     background: @bg3;
     padding-top: 16px;
+    position: relative;
     .flex-col();
     .wallet-card {
         height: 138px;

src/views/user/WalletAgreement.vue

@@ -1,5 +1,5 @@
 <template>
-    <div style="padding: 16px 16px 82px 16px">
+    <div style="padding: 16px 16px calc(var(--safe-bottom) + 50px) 16px">
         <p style="text-align: center">
             <strong><span style="font-family: 微软雅黑; font-weight: bold; font-size: 21px">RAEX</span></strong
             ><strong><span style="font-family: 微软雅黑; font-weight: bold; font-size: 21px">绿洲宇宙</span></strong>
@@ -138,11 +138,11 @@ export default {
 </script>
 <style lang="less" scoped>
 .btn-wrapper {
-    position: absolute;
+    position: fixed;
     left: 16px;
     right: 16px;
     bottom: 0;
     padding-bottom: 10px;
-    padding-bottom: calc(10px + env(safe-area-inset-bottom));
+    padding-bottom: calc(10px + var(--safe-bottom));
 }
 </style>