appheight适配

src/App.vue

@@ -34,7 +34,7 @@ export default {
         scrollStyle() {
             return {
                 boxSizing: 'border-box',
-                minHeight: `calc(100vh - ${(this.barHeight || '0') + 'px'})`
+                minHeight: `calc(var(--app-height) - ${(this.barHeight || '0') + 'px'})`
             };
         }
     },
@@ -85,7 +85,7 @@ export default {
 
 <style lang="less" scoped>
 .scroll-content {
-    min-height: 100vh;
+    min-height: var(--app-height);
     box-sizing: border-box;
     // padding-top: 46px;
 }

src/main.js

@@ -31,6 +31,14 @@ import { useCssVar } from '@vueuse/core';
 import { computed } from 'vue';
 
 const appHeight = useCssVar('--app-height', document.documentElement);
+const onWindowResize = () => {
+    if (navigator.userAgent.includes('#cordova#')) {
+        appHeight.value = `${window.screen.height}px`;
+    } else {
+        appHeight.value = `${window.innerHeight}px`;
+    }
+};
+window.addEventListener('resize', onWindowResize);
 Toast.setDefaultOptions('loading', { duration: 0 });
 require('dayjs/locale/zh-cn');
 

src/styles/app.less

@@ -81,7 +81,7 @@ body,
 .scroll-wrapper {
     padding: 0;
     margin: 0;
-    height: 100vh;
+    height: var(--app-height);
     overflow: hidden;
     -webkit-overflow-scrolling: touch;
     -webkit-font-smoothing: antialiased;
@@ -259,7 +259,7 @@ input:-webkit-autofill {
 .splash-screen {
     position: fixed;
     width: 100vw;
-    height: 100vh;
+    height: var(--app-height);
     top: 0;
     left: 0;
     right: 0;

src/views/Creator.vue

@@ -110,7 +110,7 @@ export default {
 .discover {
     background-color: @bg3;
     padding-bottom: 100px;
-    min-height: 100vh;
+    min-height: var(--app-height);
 }
 
 /deep/.van-tab {

src/views/Hall.vue

@@ -219,7 +219,7 @@ export default {
     padding-top: 7.72vh;
 }
 /deep/.swiper-wrapper {
-    height: calc(100vh - 7.72vh);
+    height: calc(var(--app-height) - 7.72vh);
 }
 
 .windowHorizontal {
@@ -254,7 +254,7 @@ export default {
     }
 
     /deep/.swiper-wrapper {
-        height: calc(100vh - 7.72vw);
+        height: calc(var(--app-height) - 7.72vw);
     }
 
     .bottom {
@@ -279,7 +279,7 @@ export default {
 
     .imgs {
         width: calc(12.6vw + 120px);
-        height: 100vh;
+        height: var(--app-height);
         box-sizing: border-box;
         .icon {
             padding: 6.3vw;
@@ -315,7 +315,7 @@ export default {
     }
 
     /deep/.swiper-wrapper {
-        height: 100vh;
+        height: var(--app-height);
         align-items: flex-end;
     }
 

src/views/Mine.vue

@@ -345,7 +345,7 @@ export default {
 <style lang="less" scoped>
 .content {
     width: 100%;
-    height: calc(100vh);
+    height: calc(var(--app-height));
     // position: absolute;
     // margin-top: 44px;
     background: @bg;

src/views/Store.vue

@@ -432,7 +432,7 @@ export default {
         padding: 0px 15px 16px;
         box-sizing: border-box;
         // background: #0F0F27;
-        min-height: calc(100vh - 100px);
+        min-height: calc(var(--app-height) - 100px);
         margin-bottom: 80px;
         .data_display_fanter {
             width: 100%;

src/views/account/Login.vue

@@ -273,7 +273,7 @@ export default {
     }
 }
 .loginHeight {
-    min-height: calc(100vh - 46px);
+    min-height: calc(var(--app-height) - 46px);
     min-height: calc(var(--app-height) - 46px);
 }
 /deep/input:-webkit-autofill {

src/views/account/Register.vue

@@ -225,7 +225,7 @@ export default {
     background-size: 100% 100%;
 }
 .loginHeight {
-    min-height: calc(100vh - 46px);
+    min-height: calc(var(--app-height) - 46px);
 }
 .tabs {
     display: flex;

src/views/asset/Search.vue

@@ -184,7 +184,7 @@ export default {
 
 .discover {
     background-color: @bg3;
-    min-height: 100vh;
+    min-height: var(--app-height);
     box-sizing: border-box;
 }
 

src/views/hall/Detail.vue

@@ -477,7 +477,7 @@ export default {
     padding-top: 7.72vh;
 }
 /deep/.swiper-wrapper {
-    height: calc(100vh - 7.72vh);
+    height: calc(var(--app-height) - 7.72vh);
 }
 
 .top {
@@ -551,7 +551,7 @@ export default {
     }
 
     /deep/.swiper-wrapper {
-        height: calc(100vh - 7.72vw);
+        height: calc(var(--app-height) - 7.72vw);
     }
 
     .bottom {
@@ -576,7 +576,7 @@ export default {
 
     .imgs {
         width: calc(12.6vw + 120px);
-        height: 100vh;
+        height: var(--app-height);
         box-sizing: border-box;
         .icon {
             padding: 6.3vw;
@@ -615,7 +615,7 @@ export default {
     }
 
     /deep/.swiper-wrapper {
-        height: 100vh;
+        height: var(--app-height);
         align-items: flex-end;
     }
 
@@ -639,7 +639,7 @@ export default {
         top: 0;
         bottom: 0;
         left: auto;
-        height: 100vh;
+        height: var(--app-height);
         width: 40px;
         flex-direction: column;
         right: 20px;

src/views/order/ActivityOrders.vue

@@ -149,7 +149,7 @@ export default {
 
 .discover {
     background-color: @bg3;
-    min-height: 100vh;
+    min-height: var(--app-height);
 }
 
 .list {

src/views/order/Orders.vue

@@ -323,7 +323,7 @@ export default {
 
 .discover {
     background-color: @bg3;
-    min-height: 100vh;
+    min-height: var(--app-height);
 }
 
 /deep/.van-tabs__nav--line.van-tabs__nav--complete {