Merge branch 'feature/ufo-activitys' into 'develop'

iphoneX适配



See merge request !9

 <template>
 <template>
-  <div id="app">
+  <div id="app" :style="{height: windowHeight }">
     <keep-alive :max="20">
     <keep-alive :max="20">
       <router-view :key="routerViewKey"></router-view>
       <router-view :key="routerViewKey"></router-view>
     </keep-alive>
     </keep-alive>
@@ -11,6 +11,11 @@ import { mapState, mapMutations, mapActions } from 'vuex';
 
 
 export default {
 export default {
   name: 'App',
   name: 'App',
+  data() {
+    return {
+      windowHeight: '100%',
+    };
+  },
   computed: {
   computed: {
     ...mapState(['yoho']),
     ...mapState(['yoho']),
     routerViewKey() {
     routerViewKey() {
@@ -19,7 +24,7 @@ export default {
       } else {
       } else {
         return this.$route.fullPath;
         return this.$route.fullPath;
       }
       }
-    },
+    }
   },
   },
   mounted() {
   mounted() {
     if (this.yoho.context.needLogin) {
     if (this.yoho.context.needLogin) {
@@ -41,13 +46,22 @@ export default {
     });
     });
 
 
     this.getZkConfig();
     this.getZkConfig();
+    if (typeof window !== 'undefined') {
+      if (window.screen.availHeight - window.innerHeight > 100) {
+        this.windowHeight = (window.screen.availHeight - 88) + 'px';
+      } else {
+        this.windowHeight = window.innerHeight + 'px';
+      }
+    } else {
+      this.windowHeight = '100%';
+    }
   },
   },
   watch: {
   watch: {
     'yoho.context.needLogin': function(newVal) {
     'yoho.context.needLogin': function(newVal) {
       if (newVal) {
       if (newVal) {
         this.$yoho.auth({ needLogin: newVal });
         this.$yoho.auth({ needLogin: newVal });
       }
       }
-    },
+    }
   },
   },
   methods: {
   methods: {
     ...mapMutations(['SET_LOGIN_INFO']),
     ...mapMutations(['SET_LOGIN_INFO']),

@@ -99,6 +99,7 @@ export default {
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   background-color: #fff;
   background-color: #fff;
+  box-sizing: border-box;
 
 
   .layout-context {
   .layout-context {
     flex: 1;
     flex: 1;

@@ -66,7 +66,6 @@ export default {
       rule: productData.imageList[0].rule,
       rule: productData.imageList[0].rule,
       more: productData.imageList[0].more
       more: productData.imageList[0].more
     };
     };
-    console.log(this.productList)
   }
   }
 };
 };
 </script>
 </script>
@@ -74,13 +73,15 @@ export default {
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 ul {
 ul {
   width: 100%;
   width: 100%;
+  height: 100%;
   list-style: none;
   list-style: none;
   margin: 0;
   margin: 0;
   padding: 0;
   padding: 0;
   background-image: url("//ad.yoho.cn/html5/2019/10/activity/008/base/repeat_bg.jpg?imageslim");
   background-image: url("//ad.yoho.cn/html5/2019/10/activity/008/base/repeat_bg.jpg?imageslim");
   background-repeat: repeat-y;
   background-repeat: repeat-y;
   background-size: 100% auto;
   background-size: 100% auto;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   -webkit-overflow-scrolling: touch;
 
 
   li {
   li {

@@ -102,4 +102,10 @@ export default {
   width: 100%;
   width: 100%;
   background-color: white;
   background-color: white;
 }
 }
+
+/*@supports (bottom: env(safe-area-inset-bottom)) {
+  .footer {
+    height: calc(env(safe-area-inset-bottom) + 100px);
+  }
+}*/
 </style>
 </style>

@@ -554,10 +554,6 @@ body {
     margin-bottom: env(safe-area-inset-bottom);
     margin-bottom: env(safe-area-inset-bottom);
   }
   }
 
 
-  #app {
-    height: calc(100% + env(safe-area-inset-bottom));
-  }
-
   .layout {
   .layout {
     padding-bottom: env(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
   }
   }
@@ -566,7 +562,6 @@ body {
     padding-bottom: 0;
     padding-bottom: 0;
   }
   }
 }
 }
-
 /* stylelint-disable */
 /* stylelint-disable */
 
 
 ::-webkit-scrollbar {
 ::-webkit-scrollbar {