细节优化: 兼容pc访问H5

components/goods-sku-popup/index.vue

@@ -1105,8 +1105,8 @@
       position: fixed;
       left: var(--window-left);
       right: var(--window-right);
-      top: 0;
-      width: 100%;
+      top: var(--window-top);
+      // width: 100%;
       height: 100%;
       z-index: 1;
       background-color: rgba(0, 0, 0, 0.65);

components/page/diyComponents/banner/index.vue

@@ -40,6 +40,10 @@
     created() {
       const { windowWidth } = uni.getWindowInfo()
       this.windowWidth = windowWidth > 750 ? 750 : windowWidth
+      // #ifdef H5
+      // 此处取决于pages.json中的maxWidth
+      this.windowWidth = windowWidth > 450 ? 450 : windowWidth
+      // #endif
     },
     methods: {
       // 计算图片高度

components/share-sheet/index.vue

@@ -164,7 +164,7 @@
 
   .sharesheet__mask {
     position: fixed;
-    top: 0;
+    top: var(--window-top);
     left: var(--window-left);
     right: var(--window-right);
     bottom: var(--window-bottom);

index.html

@@ -2,16 +2,22 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-    />
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
     <title></title>
     <!--preload-links-->
     <!--app-context-->
+    <style>
+      #app,
+      uni-app,
+      uni-page,
+      uni-page-wrapper {
+        min-height: 100%;
+        height: auto !important;
+      }
+    </style>
   </head>
   <body>
     <div id="app"><!--app-html--></div>
     <script type="module" src="/main.js"></script>
   </body>
-</html>
+</html>

pages.json

@@ -248,9 +248,9 @@
   "globalStyle": {
     // #ifdef H5
     // "navigationStyle": "custom",
-    "maxWidth": 750,
-    "rpxCalcMaxDeviceWidth": 750, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
-    "rpxCalcBaseDeviceWidth": 560, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375
+    "maxWidth": 450,
+    "rpxCalcMaxDeviceWidth": 450, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
+    "rpxCalcBaseDeviceWidth": 450, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375
     "rpxCalcIncludeWidth": 9999, // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750
     // #endif
     "navigationBarBackgroundColor": "#ffffff",

pages/address/index.vue

@@ -274,8 +274,8 @@
   .footer-fixed {
     position: fixed;
     bottom: var(--window-bottom);
-    left: 0;
-    right: 0;
+    left: var(--window-left);
+    right: var(--window-right);
     z-index: 11;
 
     // 设置ios刘海屏底部横线安全区域

pages/cart/index.vue

@@ -431,8 +431,8 @@
     padding: 0 30rpx;
     position: fixed;
     bottom: var(--window-bottom);
-    left: 0;
-    right: 0;
+    left: var(--window-left);
+    right: var(--window-right);
     z-index: 11;
 
     .all-radio {

pages/checkout/cashier/index.vue

@@ -423,8 +423,8 @@
   .footer-fixed {
     position: fixed;
     bottom: var(--window-bottom);
-    left: 0;
-    right: 0;
+    left: var(--window-left);
+    right: var(--window-right);
     z-index: 11;
     box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
     background: #fff;

pages/goods/detail.scss

@@ -118,8 +118,8 @@
 .footer-fixed {
   position: fixed;
   bottom: var(--window-bottom);
-  left: 0;
-  right: 0;
+  left: var(--window-left);
+  right: var(--window-right);
   display: flex;
   z-index: 11;
   box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
@@ -155,7 +155,6 @@
 
     &--cart {
       margin-left: 6rpx;
-
       .fast-icon {
         margin-left: -12rpx;
       }

pages/order/center.vue

@@ -110,8 +110,8 @@
   .footer {
     position: fixed;
     bottom: var(--window-bottom);
-    left: 0;
-    right: 0;
+    left: var(--window-left);
+    right: var(--window-right);
     z-index: 11;
     box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
     background: #fff;

pages/order/comment/index.vue

@@ -474,7 +474,7 @@
     .goods-content {
       flex: 1;
       padding-left: 16rpx;
-      padding-top: 16rpx;
+      // padding-top: 16rpx;
 
       .goods-title {
         font-size: 26rpx;
@@ -522,8 +522,8 @@
   .footer-fixed {
     position: fixed;
     bottom: var(--window-bottom);
-    left: 0;
-    right: 0;
+    left: var(--window-left);
+    right: var(--window-right);
     z-index: 11;
 
     // 设置ios刘海屏底部横线安全区域
@@ -559,4 +559,4 @@
     }
 
   }
-</style>
+</style>

pages/order/detail.vue

@@ -832,8 +832,8 @@
   .footer-fixed {
     position: fixed;
     bottom: var(--window-bottom);
-    left: 0;
-    right: 0;
+    left: var(--window-left);
+    right: var(--window-right);
     z-index: 11;
     box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
     background: #fff;

pages/refund/apply.vue

@@ -252,18 +252,18 @@
       padding-left: 20rpx;
     }
 
-      .goods-props {
-        margin-top: 14rpx;
-        color: #ababab;
-        font-size: 24rpx;
-        overflow: hidden;
-
-        .goods-props-item {
-          padding: 4rpx 16rpx;
-          border-radius: 12rpx;
-          background-color: #fcfcfc;
-        }
+    .goods-props {
+      margin-top: 14rpx;
+      color: #ababab;
+      font-size: 24rpx;
+      overflow: hidden;
+
+      .goods-props-item {
+        padding: 4rpx 16rpx;
+        border-radius: 12rpx;
+        background-color: #fcfcfc;
       }
+    }
   }
 
   /* 服务类型 */
@@ -390,8 +390,8 @@
   .footer-fixed {
     position: fixed;
     bottom: var(--window-bottom);
-    left: 0;
-    right: 0;
+    left: var(--window-left);
+    right: var(--window-right);
     z-index: 11;
 
     // 设置ios刘海屏底部横线安全区域
@@ -427,4 +427,4 @@
     }
 
   }
-</style>
+</style>