Merge branch 'develop' of git.yoho.cn:fe/xianyu-ufo-app-web into develop

 <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']),

@@ -2,6 +2,7 @@
   <div
   <div
     ref="layout"
     ref="layout"
     class="layout"
     class="layout"
+    :class="noSafeArea ? 'no-safe-area': ''"
     @touchstart="webviewScrollStart"
     @touchstart="webviewScrollStart"
     @touchmove="webviewScrollMove"
     @touchmove="webviewScrollMove"
     @touchend="webviewScrollEnd">
     @touchend="webviewScrollEnd">
@@ -50,7 +51,8 @@ export default {
     isStop: {
     isStop: {
       type: Boolean,
       type: Boolean,
       default: false
       default: false
-    }
+    },
+    noSafeArea: Boolean
   },
   },
   data() {
   data() {
     return {
     return {
@@ -97,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;

 <template>
 <template>
-  <LayoutApp :title="title" >
+  <LayoutApp :title="title" :no-safe-area="true" >
     <div ref="wrapper" class="activity-wrapper">
     <div ref="wrapper" class="activity-wrapper">
       <div class="activity-container">
       <div class="activity-container">
         <ul id="page_ul">
         <ul id="page_ul">

 <template>
 <template>
-  <LayoutApp title="秒杀AJ" :show-back="true" :back-action="goBack">
+  <LayoutApp title="秒杀AJ" :show-back="true" :no-safe-area="true" :back-action="goBack">
     <ul>
     <ul>
       <li v-for="(item, index) in productList" :key="index">
       <li v-for="(item, index) in productList" :key="index">
         <div v-if="item.urls && item.urls.length > 0" class="link-container">
         <div v-if="item.urls && item.urls.length > 0" class="link-container">
@@ -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 {

 <template>
 <template>
-    <LayoutApp :show-back="true" :hideHeader="hideHeader">
+    <LayoutApp :show-back="true" :hideHeader="hideHeader" :no-safe-area="true">
         <div class="root-content">
         <div class="root-content">
             <div class="left-content">
             <div class="left-content">
                 <Scroll>
                 <Scroll>

 <template>
 <template>
-  <LayoutApp class="yohoufo-channel-page" :show-back="true" :hide-header="hideHeader" :title="title">
+  <LayoutApp class="yohoufo-channel-page" :show-back="true" :hide-header="hideHeader" :title="title" :no-safe-area="true">
       <div class="fixed-nav scroll-nav-wrap" :class="{'hidden': !isShow}" v-if="navList.length">
       <div class="fixed-nav scroll-nav-wrap" :class="{'hidden': !isShow}" v-if="navList.length">
         <ScrollNav :list="navList" :current="active" @transfer="getIndex"></ScrollNav>
         <ScrollNav :list="navList" :current="active" @transfer="getIndex"></ScrollNav>
       </div>
       </div>
@@ -169,7 +169,7 @@ export default {
       const {url = ''} = firstNav;
       const {url = ''} = firstNav;
       this.selectedCategory = queryString.parse(url);
       this.selectedCategory = queryString.parse(url);
     }
     }
-
+    
     this.refreshProductList(this.active);
     this.refreshProductList(this.active);
   },
   },
   methods: {
   methods: {
@@ -442,12 +442,21 @@ export default {
 }
 }
 .scroll-nav-wrap {
 .scroll-nav-wrap {
   position: relative;
   position: relative;
-  background-color: #fefefe;
+
+  &:after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100px;
+    box-shadow: 0 0 120px 100px #f2f2f2 !important;
+    z-index: -1;
+  }
 
 
   &.fixed-nav {
   &.fixed-nav {
     width: 100%;
     width: 100%;
     position: absolute;
     position: absolute;
     z-index: 10;
     z-index: 10;
+    background-color: #fefefe;
     overflow: hidden;
     overflow: hidden;
   }
   }
 }
 }

@@ -103,13 +103,9 @@ export default {
   background-color: white;
   background-color: white;
 }
 }
 
 
-@supports (bottom: env(safe-area-inset-bottom)) {
-  .content {
-    height: calc(env(safe-area-inset-bottom) + 100% + 88px);
-  }
-
+/*@supports (bottom: env(safe-area-inset-bottom)) {
   .footer {
   .footer {
     height: calc(env(safe-area-inset-bottom) + 100px);
     height: calc(env(safe-area-inset-bottom) + 100px);
   }
   }
-}
+}*/
 </style>
 </style>

 <template>
 <template>
-  <LayoutApp :show-back="true" title="我的" :hideHeader="hideHeader">
+  <LayoutApp :show-back="true" title="我的" :no-safe-area="true" :hideHeader="hideHeader">
     <div class="body" ref="body">
     <div class="body" ref="body">
       <div v-for="(value, key) in getMineList" :key="key">
       <div v-for="(value, key) in getMineList" :key="key">
         <tab-item v-if="key === 'board'" :data="value" noLine icon="cubeic-notification" small grey>
         <tab-item v-if="key === 'board'" :data="value" noLine icon="cubeic-notification" small grey>

 <template>
 <template>
-  <LayoutApp :show-back="true" :hideHeader="hideHeader">
+  <LayoutApp :show-back="true" :hideHeader="hideHeader" :no-safe-area="true">
     <div class="scroll-list-wrap">
     <div class="scroll-list-wrap">
       <LayoutScroll
       <LayoutScroll
         ref="scroll"
         ref="scroll"

 <template>
 <template>
-  <LayoutApp title="闲鱼潮玩转攻略" :show-back="true" :back-action="goBack">
+  <LayoutApp title="闲鱼潮玩转攻略" :show-back="true" :no-safe-area="true" :back-action="goBack">
     <div class="body-warpper">
     <div class="body-warpper">
       <ul>
       <ul>
         <li v-for="(item, index) in dataList" :key="index">
         <li v-for="(item, index) in dataList" :key="index">

@@ -554,11 +554,14 @@ 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 {
+    padding-bottom: env(safe-area-inset-bottom);
   }
   }
-}
 
 
+  .layout.no-safe-area {
+    padding-bottom: 0;
+  }
+}
 /* stylelint-disable */
 /* stylelint-disable */
 
 
 ::-webkit-scrollbar {
 ::-webkit-scrollbar {