吸底按钮兼容刘海屏

components/footer-button.vue

 <template>
   <section class="footer-btn-wrap">
-    <div class="footer-btn">
+    <div class="footer-btn" :style="{height: `${50+homeIndicatorHeight}` + 'Px'}">
       <div class="btn" @click="handlerMethod">{{btnText}}</div>
     </div>
   </section>
@@ -39,8 +39,7 @@
 .footer-btn-wrap {
   .footer-btn {
     width: 100%;
-    height: 40px;
-    padding: 5px 0;
+    min-height: 50Px;
     box-shadow:0px -1px 0px 0px rgba(237,237,237,1);
     position: fixed;
     bottom: 0;
@@ -48,7 +47,7 @@
     .btn {
       width: 345px;
       height: 40px;
-      margin: 0 auto;
+      margin: 5Px auto;
       line-height: 40px;
       text-align: center;
       background: linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);

pages/hospital-ranking/index.vue

@@ -59,7 +59,7 @@
         <span class="marginL">{{activeBtnType?'机构名称':'机构成员'}}</span>
         <span class="marginAuto">{{activeBtnType?'机构勤奋分':'贡献勤奋分'}}</span>
       </div>
-      <div class="ranking-list">
+      <div class="ranking-list" :style="{marginBottom: `${50+homeIndicatorHeight}` + 'Px'}">
         <div class="item" v-if="activeBtnType" v-for="(itemH,index) in hospitalRanking.topRankList">
           <img v-if="index<=2" :src="dealRankIcon(index)" alt="" class="ranking-icon">
           <p v-else class="icon-num" >{{index+1}}</p>

pages/invite-details/index.less

 .invite-details-wrap {
   .main-container {
-  //  overflow: hidden;
+    overflow: hidden;
     .invite-explain {
       padding: 0 15px;
       margin: 20px 0 30px 0;
@@ -106,6 +106,7 @@
     }
     .record-details {
       width: 100%;
+      min-height: 294px;
       background: #fff;
       .tab-nav {
         width: 100%;
@@ -147,7 +148,6 @@
       }
       .record-list {
         padding: 15px;
-        margin-bottom: 50px;
         .sum {
           color: #676869;
           font-size: 14px;
@@ -218,7 +218,6 @@
       }
     }
     .no-data {
-      margin-bottom: 50px;
       img {
         width: 150px;
         height: 150px;

pages/invite-details/index.vue

@@ -37,7 +37,7 @@
         </div>
       </div>
       <div class="gray-line"></div>
-      <div class="record-details">
+      <div class="record-details" :style="{marginBottom: `${50+homeIndicatorHeight}Px`}">
         <div class="tab-nav">
           <div class="item left-item" :class="{activeItem:recordType==1}" @click="changeRecordType">
             领取记录
@@ -48,7 +48,7 @@
             <p class="active-line" v-if="recordType==2"></p>
           </div>
         </div>
-        <div class="record-list" v-if="inviteList.length">
+        <div class="record-list" v-if="inviteList.length" >
           <p class="sum">共{{recordTotal}}人</p>
           <div class="loadMore" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy"
                infinite-scroll-distance="10">
@@ -73,17 +73,17 @@
           </div>
 
         </div>
-        <div class="no-data" v-if="!inviteList.length">
+        <div class="no-data" v-if="!inviteList.length" >
           <img src="~/assets/img/icon-nodata.png" alt="">
           <p v-if="recordType==1">提醒您的医生好友领取课程您将获得奖励哦！</p>
           <p v-if="recordType==2" class="text-get">提醒您的医生好友领取课程后登录云鹊医APP您将再获得奖励哦！</p>
         </div>
-        <footer-button
-          :btnText="btnText"
-          :btnType="btnType">
-        </footer-button>
       </div>
     </div>
+    <footer-button
+      :btnText="btnText"
+      :btnType="btnType">
+    </footer-button>
   </section>
 </template>
 

pages/person-detail/index.vue

@@ -28,7 +28,7 @@
         </div>
         <div class="awards-details">血压计 1 支/温度计 1 支/小米电视4C 2 台/米家洗衣机 1 台/米家冰箱 2 台/华为荣耀Play3 2 部</div>
       </div>-->
-      <div class="detail-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
+      <div class="detail-list" v-if="personDetails.length" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
         <div class="item" v-for="item in personDetails">
           <div class="left">
             <img :src="detailTaskIcon(item.taskName)" alt="">

pages/person-ranking/index.vue

@@ -37,7 +37,7 @@
         <span class="marginL">用户名称</span>
         <span class="marginAuto">{{activeBtnType?'今日':'累计'}}勤奋分</span>
       </div>
-      <div class="ranking-list">
+      <div class="ranking-list" :style="{marginBottom: `${50+homeIndicatorHeight}Px`}">
         <div class="item" v-for="(item,index) in rankData.topRankList">
           <img v-if="index<=2" :src="dealRankIcon(index)" alt="" class="ranking-icon">
           <p v-else class="icon-num" >{{index+1}}</p>

pages/yesterday-prize/index.less

 .yesterday-prize-wrap {
   .prize-list {
     padding-left: 25px ;
-    margin-bottom: 50px;
     .item {
       display: flex;
       align-items: center;

pages/yesterday-prize/index.vue

@@ -5,7 +5,7 @@
       :rightText="rightText"
       :backType="1">
     </normal-header>
-    <div class="prize-list" :style="{ marginTop: `${44+statusBarHeight}Px`}">
+    <div class="prize-list" :style="{ marginTop: `${44+statusBarHeight}Px`,marginBottom: `${50+homeIndicatorHeight}Px`}">
       <div class="item" v-for="(item, index) in rewardsList">
         <img v-if="index<=2" :src="dealRankIcon(index)" alt="" class="ranking-icon">
         <p v-else class="icon-num" >{{index+1}}</p>