IOS端小程序底部安全高度适配

src/assets/style/index.less

@@ -26,7 +26,10 @@ html,body,#app{
 }
 
 .footer_body{
-    height: 2rem;
+    height: 50px;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+    box-sizing: content-box;
 }
 
 .no_data{

src/components/footer-enforcement-nav/index.vue

@@ -45,12 +45,16 @@ let data = reactive({
 </script>
 <style lang="less" scoped>
 .footer_nav{
-  height: 2.0rem;
+  height: 50px;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  box-sizing: content-box;
   background-color: #fff;
   /*box-shadow: 0 0 0.27rem #e5e5e5;*/
   .footer-bar{
     position: absolute;
-    bottom: 0.6rem;
+    bottom: constant(safe-area-inset-bottom);
+    bottom: env(safe-area-inset-bottom);
   }
 }
 

src/components/footer-nav/index.vue

@@ -28,16 +28,17 @@ let data = reactive({
 
 </script>
 <style lang="less" scoped>
-.footer_body{
-  height: 2rem;
-}
 	.footer_nav{
-		height: 2.0rem;
+		heighheight: 50px;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+    box-sizing: content-box;
     background-color: #fff;
     /*box-shadow: 0 0 0.27rem #e5e5e5;*/
 		.footer-bar{
 			position: absolute;
-			bottom: 0.6rem;
+      bottom: constant(safe-area-inset-bottom);
+      bottom: env(safe-area-inset-bottom);
 		}
 	}
 

src/views/Home.vue

@@ -299,8 +299,7 @@
         .boutique_box {
             position: absolute;
             width: 100%;
-            bottom: calc(0.5rem + constant(safe-area-inset-bottom));
-            bottom: calc(0.5rem + env(safe-area-inset-bottom));
+            bottom: 0.5rem;
 
             .boutique_body {
                 padding: 0 0 0.27rem 0;

src/views/HomeWx.vue

@@ -250,8 +250,7 @@
         .boutique_box {
             position: absolute;
             width: 100%;
-            bottom: calc(0.5rem + constant(safe-area-inset-bottom));
-            bottom: calc(0.5rem + env(safe-area-inset-bottom));
+            bottom: 0.5rem;
 
             .boutique_body {
                 padding: 0 0 0.27rem 0;

src/views/enforceHome.vue

@@ -354,8 +354,7 @@
         .boutique_box {
             position: absolute;
             width: 100%;
-            bottom: calc(0.5rem + constant(safe-area-inset-bottom));
-            bottom: calc(0.5rem + env(safe-area-inset-bottom));
+            bottom: 0.5rem;
 
             .boutique_body {
                 padding: 0 0 0.27rem 0;