样式优化宽屏兼容性

App.vue

@@ -63,4 +63,13 @@
 <style>
   /* 项目基础样式 */
   @import "./app.scss";
+
+  .uni-app--showlayout+uni-tabbar.uni-tabbar-bottom,
+  .uni-app--showlayout+uni-tabbar.uni-tabbar-bottom .uni-tabbar,
+  .uni-app--showlayout+uni-tabbar.uni-tabbar-top,
+  .uni-app--showlayout+uni-tabbar.uni-tabbar-top .uni-tabbar {
+    left: var(--window-left);
+    right: var(--window-right);
+  }
+
 </style>

app.scss

@@ -24,3 +24,21 @@ page {
     transform: rotate(360deg) scale(1);
   }
 }
+
+/* #ifdef H5*/
+
+uni-page {
+  box-shadow: 0 1px 22px rgb(169, 169, 169, .3);
+}
+
+.footer-fixed {
+  left: var(--window-left) !important;
+  right: var(--window-right) !important;
+}
+
+.u-mask,.u-drawer {
+  left: var(--window-left) !important;
+  right: var(--window-right) !important;
+}
+
+/* #endif */

components/goods-sku-popup/index.vue

@@ -1064,9 +1064,9 @@
   /*  sku弹出层 */
   .goods-sku-popup {
     position: fixed;
-    left: 0;
+    left: var(--window-left);
+    right: var(--window-right);
     top: 0;
-    right: 0;
     bottom: 0;
     z-index: 21;
     overflow: hidden;
@@ -1100,8 +1100,9 @@
 
     .mask {
       position: fixed;
+      left: var(--window-left);
+      right: var(--window-right);
       top: 0;
-      width: 100%;
       height: 100%;
       z-index: 1;
       background-color: rgba(0, 0, 0, 0.65);
@@ -1109,14 +1110,12 @@
 
     .layer {
       display: flex;
-      width: 100%;
-      // height: 1014rpx;
       flex-direction: column;
-      // min-height: 40vh;
-      // max-height: 1014rpx;
       position: fixed;
-      z-index: 99;
+      left: var(--window-left);
+      right: var(--window-right);
       bottom: 0;
+      z-index: 99;
       border-radius: 10rpx 10rpx 0 0;
       background-color: #fff;
 
@@ -1300,7 +1299,9 @@
         }
 
         .sure {
-          width: 698rpx;
+          margin: 0 auto;
+          width: 95%;
+          max-width: 1200rpx;
           height: 80rpx;
           border-radius: 38rpx;
           color: #fff;

components/page/diyComponents/service/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <!-- 在线客服 -->
+  <view v-if="!(params.type === 'chat' && !isMpWeiXin)" class="diy-service"
+    :style="{ right: `${itemStyle.right}%`, bottom: `${itemStyle.bottom}%` }">
+    <!-- 拨打电话 -->
+    <block v-if="params.type === 'phone'">
+      <view class="service-icon" @click="onMakePhoneCall">
+        <image class="image" :src="params.image"></image>
+      </view>
+    </block>
+    <!-- 在线聊天 -->
+    <block v-else-if="params.type == 'chat'">
+      <button open-type="contact" class="btn-normal">
+        <view class="service-icon">
+          <image class="image" :src="params.image"></image>
+        </view>
+      </button>
+    </block>
+  </view>
+</template>
+
+<script>
+  export default {
+
+    /**
+     * 组件的属性列表
+     * 用于组件自定义设置
+     */
+    props: {
+      itemStyle: Object,
+      params: Object
+    },
+
+    /**
+     * 私有数据,组件的初始数据
+     * 可用于模版渲染
+     */
+    data() {
+      return {
+        isMpWeiXin: false,
+        isShow: true
+      }
+    },
+
+    created() {
+      // #ifdef MP-WEIXIN
+      this.isMpWeiXin = true
+      // #endif
+    },
+
+    /**
+     * 组件的方法列表
+     * 更新属性和数据的方法与更新页面数据的方法类似
+     */
+    methods: {
+
+      /**
+       * 点击拨打电话
+       */
+      onMakePhoneCall(e) {
+        uni.makePhoneCall({
+          phoneNumber: this.params.tel
+        })
+      }
+
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* #ifdef H5 */
+  uni-page-wrapper {
+    position: relative;
+  }
+
+  /* #endif */
+
+  .diy-service {
+    position: fixed;
+    // left: var(--window-left);
+    // right: var(--window-right);
+    z-index: 999;
+
+    /* #ifdef H5 */
+    position: absolute;
+    /* #endif */
+
+    .service-icon {
+      padding: 10rpx;
+
+      .image {
+        display: block;
+        width: 90rpx;
+        height: 90rpx;
+      }
+    }
+
+  }
+</style>

components/shortcut/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="shortcut" :style="{ right: right, bottom: bottom }">
+  <view class="shortcut" :style="{ right: `calc(var(--window-right) + ${right})`, bottom: `calc(var(--window-bottom) + ${bottom})` }">
 
     <!-- 首页 -->
     <view class="nav-item" :class="[isShow ? 'show_80' : (transparent ? '' : 'hide_80')]" @click="onTargetPage(0)">
@@ -84,8 +84,8 @@
   /* 快捷导航 */
   .shortcut {
     position: fixed;
-    right: 24rpx;
-    bottom: 250rpx;
+    right: calc(var(--window-right) + 24rpx);
+    bottom: calc(var(--window-bottom) + 250rpx);
     width: 76rpx;
     line-height: 1;
     z-index: 5;

pages.json

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

pages/category/index.vue

@@ -46,10 +46,12 @@
               <view class="cate-cont-box">
                 <view class="flex-three" v-for="(item, idx) in list[curIndex].children" :key="idx"
                   @click="onTargetGoodsList(item.category_id)">
-                  <view class="cate-img">
-                    <image v-if="item.image" :src="item.image.preview_url"></image>
+                  <view class="cate-img-padding">
+                    <view v-if="item.image" class="cate-img">
+                      <image class="image" mode="scaleToFill" :src="item.image.preview_url"></image>
+                    </view>
                   </view>
-                  <text>{{ item.name }}</text>
+                  <text class="name oneline-hide">{{ item.name }}</text>
                 </view>
               </view>
             </view>
@@ -288,7 +290,7 @@
   .cate-left {
     flex-direction: column;
     display: flex;
-    width: 200rpx;
+    flex: 0 0 23%;
     color: #444;
     height: 100%;
     background: #f8f8f8;
@@ -297,7 +299,6 @@
   .cate-right {
     display: flex;
     flex-direction: column;
-    width: 550rpx;
     height: 100%;
     overflow: hidden;
   }
@@ -307,7 +308,7 @@
     display: flex;
     flex-flow: row wrap;
     align-content: flex-start;
-    padding-top: 26rpx;
+    padding-top: 15rpx;
   }
 
   .type-nav {
@@ -332,25 +333,34 @@
     padding-bottom: 10rpx;
     background: #fff;
     overflow: hidden;
-  }
 
-  .cate-cont-box .cate-img {
-    padding: 13rpx 10rpx 4rpx 10rpx;
-  }
+    .name {
+      display: block;
+      padding-bottom: 30rpx;
+      text-align: center;
+      font-size: 26rpx;
+      color: #444444;
+    }
 
-  .cate-cont-box .cate-img image {
-    width: 100%;
-    height: 150rpx;
-    border-radius: 10rpx;
-  }
+    .cate-img-padding {
+      padding: 16rpx 16rpx 4rpx 16rpx;
+    }
+
+    .cate-img {
+      position: relative;
+      width: 100%;
+      padding-top: 100%;
+
+      .image {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-radius: 10rpx;
+      }
+    }
 
-  .cate-cont-box text {
-    text-align: center;
-    display: block;
-    font-size: 26rpx;
-    padding-bottom: 14rpx;
-    color: #444;
-    padding: 0 15rpx 30rpx 15rpx;
   }
 
   .cate-two-box {

pages/checkout/style.scss

@@ -96,6 +96,9 @@
       color: #888;
       border: 1rpx solid #e3e3e3;
       border-radius: 10rpx;
+         /* #ifdef H5 */
+            max-width: 1120rpx;
+            /* #endif */
     }
   }
   
@@ -103,9 +106,15 @@
     text-align: center;
     margin-bottom: 30rpx;
   }
-  
+
+  .coupon-list {
+    /* #ifdef H5 */
+     max-width: 1120rpx;
+     margin: 0 auto;
+    /* #endif */
+  }
+
   .coupon-item {
-    position: relative;
     overflow: hidden;
     margin-bottom: 22rpx;
   }
@@ -309,7 +318,9 @@
 .flow-fixed-footer {
   position: fixed;
   bottom: var(--window-bottom);
-  width: 100%;
+  left: var(--window-left);
+  right: var(--window-right);
+  // width: 100%;
   background: #fff;
   border-top: 1px solid #eee;
   z-index: 11;

pages/goods/components/Service.vue

@@ -125,7 +125,7 @@
 
     .content-scroll {
       min-height: 400rpx;
-      max-height: 750rpx;
+      max-height: 760rpx;
     }
 
     .s-list {

pages/goods/components/SlideImage.vue

@@ -1,9 +1,12 @@
 <template>
   <!-- 商品图片 -->
   <view class="images-swiper">
-    <swiper class="swiper-box" :autoplay="autoplay" :duration="duration" :indicator-dots="indicatorDots" :interval="interval" :circular="true" @change="setCurrent">
+    <swiper class="swiper-box" :autoplay="autoplay" :duration="duration" :indicator-dots="indicatorDots"
+      :interval="interval" :circular="true" @change="setCurrent">
       <swiper-item v-for="(item, index) in images" :key="index" @click="onPreviewImages(index)">
-        <image class="slide-image" mode="aspectFill" :src="item.preview_url"></image>
+        <view class="slide-image">
+          <image class="image" :src="item.preview_url"></image>
+        </view>
       </swiper-item>
     </swiper>
     <view class="swiper-count">
@@ -64,14 +67,25 @@
   }
 
   .swiper-box {
-    width: 750rpx;
-    height: 750rpx;
+    width: 100%;
+    height: 100vw;
+
+    /* #ifdef H5 */
+    max-width: 480px;
+    max-height: 480px;
+    margin: 0 auto;
+    /* #endif */
 
     .slide-image {
+      position: relative;
       width: 100%;
       height: 100%;
-      margin: 0 auto;
-      display: block;
+
+      .image {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
     }
   }
 

pages/refund/detail.vue

@@ -291,6 +291,7 @@
     height: 140rpx;
 
     .header-backdrop {
+      width: 100%;
       position: absolute;
       top: 0;
       left: 0;
@@ -298,7 +299,7 @@
 
       .image {
         display: block;
-        width: 750rpx;
+        width: 100%;
         height: 140rpx;
       }
     }

pages/user/index.vue

@@ -609,13 +609,14 @@
     margin-top: 50rpx;
 
     .logout-btn {
+      width: 50%;
       margin: 0 auto;
-      display: inline-block;
       font-size: 26rpx;
       color: #616161;
       border-radius: 20rpx;
       border: 1px solid #dcdcdc;
-      padding: 14rpx 170rpx;
+      padding: 14rpx 0;
+      text-align: center;
     }
   }
 </style>