优化：用户端页面适配ios底部安全区域

pages/address/index.vue

@@ -188,7 +188,8 @@
 
 <style lang="scss" scoped>
   .addres-list {
-    padding-bottom: 130rpx;
+    padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
+    padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
   }
 
   // 项目内容
@@ -250,7 +251,7 @@
 
       .event-item {
         font-size: 28rpx;
-        margin-right: 22rpx;
+        margin-right: 26rpx;
         color: #4c4c4c;
 
         &:last-child {
@@ -272,23 +273,27 @@
     bottom: var(--window-bottom);
     left: 0;
     right: 0;
-    height: 96rpx;
+    min-height: 120rpx;
     z-index: 11;
-    box-shadow: 0 -4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
+    box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
     background: #fff;
 
+    // 设置ios刘海屏底部横线安全区域
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+
     .btn-wrapper {
-      height: 100%;
+      height: 120rpx;
       display: flex;
       align-items: center;
-      padding: 0 20rpx;
+      padding: 0 40rpx;
     }
 
     .btn-item {
       flex: 1;
       font-size: 28rpx;
-      height: 72rpx;
-      line-height: 72rpx;
+      height: 80rpx;
+      line-height: 80rpx;
       text-align: center;
       color: #fff;
       border-radius: 50rpx;

pages/goods/detail.scss

@@ -1,9 +1,11 @@
 .container {
-  padding-bottom: 112rpx;
+  // 设置ios刘海屏底部横线安全区域
+  // 110 - 18 + 4
+  padding-bottom: calc(constant(safe-area-inset-bottom) + 106rpx + 6rpx);
+  padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx);
 }
 
-/* 商品信息 */
-
+// 商品信息
 .goods-info {
   background: #fff;
   padding: 25rpx 30rpx;
@@ -31,8 +33,7 @@
   color: #FA2209;
 }
 
-/* 商品价 */
-
+// 商品价
 .floor-price {
   color: #FA2209;
   margin-right: 15rpx;
@@ -85,8 +86,7 @@
   margin-bottom: 5rpx;
 }
 
-/* 商品卖点 */
-
+// 商品卖点
 .info-item_selling-point {
   margin-top: 8rpx;
   font-size: 24rpx;
@@ -108,30 +108,32 @@
   }
 }
 
-/* 商品详情 */
-
+// 商品详情
 .goods-content .item-title {
   padding: 26rpx 30rpx;
   font-size: 28rpx;
 }
 
-/* 底部操作栏 */
-
+// 底部操作栏
 .footer-fixed {
   position: fixed;
   bottom: var(--window-bottom);
   left: 0;
   right: 0;
   display: flex;
-  height: 96rpx;
   z-index: 11;
-  box-shadow: 0 -4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
+  box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
   background: #fff;
+
+  // 设置ios刘海屏底部横线安全区域
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
 }
 
 .footer-container {
   width: 100%;
   display: flex;
+  height: 106rpx;
 }
 
 // 快捷菜单
@@ -164,18 +166,18 @@
     // 角标
     .fast-badge {
       display: inline-block;
-          box-sizing: border-box;
-          min-width: 16px;
-          padding: 0 3px;
-          color: #fff;
-          font-weight: 500;
-          font-size: 12px;
-          font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
-          line-height: 1.2;
-          text-align: center;
-          background-color: #ee0a24;
-          border: 1px solid #fff;
-          border-radius: 999px;
+      box-sizing: border-box;
+      min-width: 16px;
+      padding: 0 3px;
+      color: #fff;
+      font-weight: 500;
+      font-size: 12px;
+      font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
+      line-height: 1.2;
+      text-align: center;
+      background-color: #ee0a24;
+      border: 1px solid #fff;
+      border-radius: 999px;
     }
     .fast-badge--fixed {
       position: absolute;
@@ -191,10 +193,7 @@
     .fast-text {
       font-size: 24rpx;
     }
-    
   }
-
-
 }
 
 // 操作按钮

pages/order/comment/index.vue

@@ -30,19 +30,22 @@
         </view>
         <!-- 选择评价 -->
         <view class="score-row">
-          <view class="score-item score-praise" :class="{ active: formData[index].score == 10 }" @click="setScore(index, 10)">
+          <view class="score-item score-praise" :class="{ active: formData[index].score == 10 }"
+            @click="setScore(index, 10)">
             <view class="score">
               <text class="score-icon iconfont icon-haoping"></text>
               <text class="score-text">好评</text>
             </view>
           </view>
-          <view class="score-item score-review" :class="{ active: formData[index].score == 20 }" @click="setScore(index, 20)">
+          <view class="score-item score-review" :class="{ active: formData[index].score == 20 }"
+            @click="setScore(index, 20)">
             <view class="score">
               <text class="score-icon iconfont icon-zhongping"></text>
               <text class="score-text">中评</text>
             </view>
           </view>
-          <view class="score-item score-negative" :class="{ active: formData[index].score == 30 }" @click="setScore(index, 30)">
+          <view class="score-item score-negative" :class="{ active: formData[index].score == 30 }"
+            @click="setScore(index, 30)">
             <view class="score">
               <text class="score-icon iconfont icon-chaping"></text>
               <text class="score-text">差评</text>
@@ -52,7 +55,8 @@
 
         <!-- 评价内容 -->
         <view class="form-content">
-          <textarea class="textarea" v-model="formData[index].content" maxlength="500" placeholder="请输入评价内容 (留空则不评价)"></textarea>
+          <textarea class="textarea" v-model="formData[index].content" maxlength="500"
+            placeholder="请输入评价内容 (留空则不评价)"></textarea>
         </view>
 
         <!-- 图片列表 -->
@@ -61,8 +65,8 @@
             <text class="image-delete iconfont icon-shanchu" @click="deleteImage(index, imageIndex)"></text>
             <image class="image" mode="aspectFill" :src="image.path"></image>
           </view>
-          <view v-if="!formData[index].imageList || formData[index].imageList.length < maxImageLength" class="image-picker"
-            @click="chooseImage(index)">
+          <view v-if="!formData[index].imageList || formData[index].imageList.length < maxImageLength"
+            class="image-picker" @click="chooseImage(index)">
             <text class="choose-icon iconfont icon-camera"></text>
             <text class="choose-text">上传图片</text>
           </view>
@@ -257,7 +261,8 @@
 
 <style lang="scss" scoped>
   .container {
-    padding-bottom: 100rpx;
+    padding-bottom: constant(env(safe-area-inset-bottom) + 130rpx);
+    padding-bottom: calc(env(safe-area-inset-bottom) + 130rpx);
   }
 
   .goods-list {
@@ -528,9 +533,13 @@
     right: 0;
     height: 96rpx;
     z-index: 11;
-    box-shadow: 0 -4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
+    box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
     background: #fff;
 
+    // 设置ios刘海屏底部横线安全区域
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+
     .btn-wrapper {
       height: 100%;
       display: flex;
@@ -541,8 +550,8 @@
     .btn-item {
       flex: 1;
       font-size: 28rpx;
-      height: 72rpx;
-      line-height: 72rpx;
+      height: 80rpx;
+      line-height: 80rpx;
       text-align: center;
       color: #fff;
       border-radius: 50rpx;

pages/order/detail.vue

@@ -450,7 +450,8 @@
 </style>
 <style lang="scss" scoped>
   .container {
-    padding-bottom: 140rpx;
+    padding-bottom: constant(env(safe-area-inset-bottom) + 106rpx + 6rpx);
+    padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx);
   }
 
   // 页面顶部
@@ -790,13 +791,16 @@
     bottom: var(--window-bottom);
     left: 0;
     right: 0;
-    height: 96rpx;
     z-index: 11;
-    box-shadow: 0 -4rpx 40rpx 0 rgba(97, 97, 97, 0.1);
+    box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
     background: #fff;
 
+    // 设置ios刘海屏底部横线安全区域
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+
     .btn-wrapper {
-      height: 100%;
+      height: 106rpx;
       display: flex;
       align-items: center;
       justify-content: flex-end;
@@ -820,7 +824,6 @@
       }
     }
 
-
   }
 
   // 弹出层-支付方式

pages/refund/apply.vue

@@ -221,7 +221,8 @@
 
 <style lang="scss" scoped>
   .container {
-    padding-bottom: 100rpx;
+    padding-bottom: constant(env(safe-area-inset-bottom) + 130rpx);
+    padding-bottom: calc(env(safe-area-inset-bottom) + 130rpx);
   }
 
   .row-title {
@@ -380,8 +381,6 @@
         }
       }
     }
-
-
   }
 
 
@@ -391,13 +390,16 @@
     bottom: var(--window-bottom);
     left: 0;
     right: 0;
-    height: 96rpx;
     z-index: 11;
-    box-shadow: 0 -4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
+    box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
     background: #fff;
 
+    // 设置ios刘海屏底部横线安全区域
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+
     .btn-wrapper {
-      height: 100%;
+      height: 120rpx;
       display: flex;
       align-items: center;
       padding: 0 20rpx;
@@ -406,8 +408,8 @@
     .btn-item {
       flex: 1;
       font-size: 28rpx;
-      height: 72rpx;
-      line-height: 72rpx;
+      height: 80rpx;
+      line-height: 80rpx;
       text-align: center;
       color: #fff;
       border-radius: 50rpx;