fix: 🐛 商品详情页骨架屏h5样式兼容

src/pages/goods/components/PageSkeleton.vue

@@ -18,29 +18,31 @@
           <view class="indicator indicator">
             <text class="current sk-transparent sk-opacity">1</text>
             <text class="split sk-transparent sk-opacity">/</text>
-            <text class="total sk-transparent sk-opacity">4</text>
+            <text class="total sk-transparent sk-opacity">5</text>
           </view>
         </view>
         <view class="meta meta">
           <view class="price price">
             <text class="symbol sk-transparent sk-opacity">¥</text>
-            <text class="number sk-transparent sk-text-14-2857-867 sk-text">128.00</text>
+            <text class="number sk-transparent sk-text-14-2857-753 sk-text">680.00</text>
           </view>
-          <view class="name ellipsis sk-transparent sk-text-14-2857-403 sk-text"
+          <view class="name ellipsis sk-transparent sk-text-14-2857-523 sk-text"
-            >钻石陶瓷涂层多用锅18cm 小奶锅</view
+            >朱炳仁·铜彩色生肖铜雕摆件</view
+          >
+          <view class="desc sk-transparent sk-text-0-0000-598 sk-text"
+            >十二生肖萌宝系列吉祥物，吉祥又好运app</view
           >
-          <view class="desc sk-transparent sk-text-0-0000-460 sk-text">安全耐用，易于清洗APP</view>
         </view>
         <view class="action action">
           <view class="item arrow sk-pseudo sk-pseudo-circle">
-            <text class="label sk-transparent sk-text-14-2857-126 sk-text">选择</text>
+            <text class="label sk-transparent sk-text-14-2857-553 sk-text">选择</text>
-            <text class="text ellipsis sk-transparent sk-text-14-2857-698 sk-text">
+            <text class="text ellipsis sk-transparent sk-text-14-2857-33 sk-text"
-              请选择商品规格
+              >请选择商品规格</text
-            </text>
+            >
           </view>
           <view class="item arrow sk-pseudo sk-pseudo-circle">
-            <text class="label sk-transparent sk-text-14-2857-337 sk-text">送至</text>
+            <text class="label sk-transparent sk-text-14-2857-845 sk-text">送至</text>
-            <text class="text ellipsis sk-transparent sk-text-14-2857-169 sk-text">
+            <text class="text ellipsis sk-transparent sk-text-14-2857-637 sk-text">
               请选择收货地址
             </text>
           </view>
@@ -59,19 +61,19 @@
         >
           <text class="icon-handset sk-pseudo sk-pseudo-circle"></text>客服
         </button>
-        <navigator :render-link="false" class="icons-button sk-transparent" open-type="switchTab">
+        <navigator class="icons-button sk-transparent" open-type="navigate">
-          <text class="icon-cart sk-pseudo sk-pseudo-circle"></text>购物车
+          <text class="icon-cart sk-pseudo sk-pseudo-circle"></text>
         </navigator>
       </view>
       <view class="buttons buttons">
         <view
-          class="addcart sk-transparent sk-text-31-9444-431 sk-text"
+          class="addcart sk-transparent sk-text-31-9444-934 sk-text"
           style="background-position-x: 50%"
         >
           加入购物车
         </view>
         <view
-          class="buynow sk-transparent sk-text-31-9444-819 sk-text"
+          class="payment sk-transparent sk-text-31-9444-376 sk-text"
           style="background-position-x: 50%"
         >
           立即购买
@@ -81,14 +83,18 @@
   </view>
 </template>
 
-<style>
+<style lang="scss">
+/* #ifdef H5 */
+@import '../goods.scss';
+/* #endif */
+
 .sk-transparent {
   color: transparent !important;
 }
 .sk-opacity {
   opacity: 0 !important;
 }
-.sk-text-14-2857-867 {
+.sk-text-14-2857-753 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
@@ -105,7 +111,7 @@
   color: transparent !important;
   background-repeat: repeat-y !important;
 }
-.sk-text-14-2857-403 {
+.sk-text-14-2857-523 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
@@ -115,7 +121,7 @@
   background-size: 100% 44.8rpx;
   position: relative !important;
 }
-.sk-text-0-0000-460 {
+.sk-text-0-0000-598 {
   background-image: linear-gradient(
     transparent 0%,
     #eeeeee 0%,
@@ -125,7 +131,7 @@
   background-size: 100% 24rpx;
   position: relative !important;
 }
-.sk-text-14-2857-126 {
+.sk-text-14-2857-553 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
@@ -135,7 +141,7 @@
   background-size: 100% 36.4rpx;
   position: relative !important;
 }
-.sk-text-14-2857-698 {
+.sk-text-14-2857-33 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
@@ -145,7 +151,7 @@
   background-size: 100% 36.4rpx;
   position: relative !important;
 }
-.sk-text-14-2857-337 {
+.sk-text-14-2857-845 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
@@ -155,7 +161,7 @@
   background-size: 100% 36.4rpx;
   position: relative !important;
 }
-.sk-text-14-2857-169 {
+.sk-text-14-2857-637 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
@@ -165,7 +171,7 @@
   background-size: 100% 36.4rpx;
   position: relative !important;
 }
-.sk-text-31-9444-431 {
+.sk-text-31-9444-934 {
   background-image: linear-gradient(
     transparent 31.9444%,
     #eeeeee 0%,
@@ -175,7 +181,7 @@
   background-size: 100% 72rpx;
   position: relative !important;
 }
-.sk-text-31-9444-819 {
+.sk-text-31-9444-376 {
   background-image: linear-gradient(
     transparent 31.9444%,
     #eeeeee 0%,

src/pages/goods/goods.scss

@@ -0,0 +1,279 @@
+page {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.viewport {
+  background-color: #f4f4f4;
+  flex: 1;
+  height: 100%;
+}
+
+/* 商品信息 */
+.goods {
+  background-color: #fff;
+  .preview {
+    height: 750rpx;
+    position: relative;
+    .swiper {
+      height: 750rpx;
+    }
+    .image {
+      width: 750rpx;
+      height: 750rpx;
+    }
+    .indicator {
+      height: 40rpx;
+      padding: 0 24rpx;
+      line-height: 40rpx;
+      border-radius: 30rpx;
+      color: #fff;
+      font-family: Arial, Helvetica, sans-serif;
+      background-color: rgba(0, 0, 0, 0.3);
+      position: absolute;
+      bottom: 30rpx;
+      right: 30rpx;
+      .current {
+        font-size: 26rpx;
+      }
+      .split {
+        font-size: 24rpx;
+        margin: 0 1rpx 0 2rpx;
+      }
+      .total {
+        font-size: 24rpx;
+      }
+    }
+  }
+  .meta {
+    position: relative;
+    border-bottom: 1rpx solid #eaeaea;
+    .price {
+      height: 130rpx;
+      padding: 25rpx 30rpx 0;
+      color: #fff;
+      font-size: 34rpx;
+      box-sizing: border-box;
+      background-color: #35c8a9;
+    }
+    .number {
+      font-size: 56rpx;
+    }
+    .brand {
+      width: 160rpx;
+      height: 80rpx;
+      overflow: hidden;
+      position: absolute;
+      top: 26rpx;
+      right: 30rpx;
+    }
+    .name {
+      max-height: 88rpx;
+      line-height: 1.4;
+      margin: 20rpx;
+      font-size: 32rpx;
+      color: #333;
+    }
+    .desc {
+      line-height: 1;
+      padding: 0 20rpx 30rpx;
+      font-size: 24rpx;
+      color: #cf4444;
+    }
+  }
+  .action {
+    padding-left: 20rpx;
+    .item {
+      height: 90rpx;
+      padding-right: 60rpx;
+      border-bottom: 1rpx solid #eaeaea;
+      font-size: 26rpx;
+      color: #333;
+      position: relative;
+      display: flex;
+      align-items: center;
+      &:last-child {
+        border-bottom: 0 none;
+      }
+    }
+    .label {
+      width: 60rpx;
+      color: #898b94;
+      margin: 0 16rpx 0 10rpx;
+    }
+    .text {
+      flex: 1;
+      -webkit-line-clamp: 1;
+    }
+  }
+}
+
+.panel {
+  margin-top: 20rpx;
+  background-color: #fff;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 90rpx;
+    line-height: 1;
+    padding: 30rpx 60rpx 30rpx 6rpx;
+    position: relative;
+    text {
+      padding-left: 10rpx;
+      font-size: 28rpx;
+      color: #333;
+      font-weight: 600;
+      border-left: 4rpx solid #27ba9b;
+    }
+    navigator {
+      font-size: 24rpx;
+      color: #666;
+    }
+  }
+}
+
+.arrow {
+  &::after {
+    position: absolute;
+    top: 50%;
+    right: 30rpx;
+    content: '\e6c2';
+    color: #ccc;
+    font-family: 'erabbit' !important;
+    font-size: 32rpx;
+    transform: translateY(-50%);
+  }
+}
+
+/* 商品详情 */
+.detail {
+  padding-left: 20rpx;
+  .content {
+    margin-left: -20rpx;
+    .image {
+      width: 100%;
+    }
+  }
+  .properties {
+    padding: 0 20rpx;
+    margin-bottom: 30rpx;
+    .item {
+      display: flex;
+      line-height: 2;
+      padding: 10rpx;
+      font-size: 26rpx;
+      color: #333;
+      border-bottom: 1rpx dashed #ccc;
+    }
+    .label {
+      width: 200rpx;
+    }
+    .value {
+      flex: 1;
+    }
+  }
+}
+
+/* 同类推荐 */
+.similar {
+  .content {
+    padding: 0 20rpx 200rpx;
+    background-color: #f4f4f4;
+    display: flex;
+    flex-wrap: wrap;
+    .goods {
+      width: calc(375rpx - 60rpx - 14rpx);
+      padding: 24rpx 20rpx 20rpx;
+      margin: 20rpx 7rpx;
+      border-radius: 10rpx;
+      background-color: #fff;
+    }
+    .image {
+      width: 100%;
+    }
+    .name {
+      height: 80rpx;
+      margin: 10rpx 0;
+      font-size: 26rpx;
+      color: #262626;
+    }
+    .price {
+      line-height: 1;
+      font-size: 20rpx;
+      color: #cf4444;
+    }
+    .number {
+      font-size: 26rpx;
+      margin-left: 2rpx;
+    }
+  }
+  navigator {
+    &:nth-child(even) {
+      margin-right: 0;
+    }
+  }
+}
+
+/* 底部工具栏 */
+.toolbar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: calc((var(--window-bottom)));
+  z-index: 1;
+  background-color: #fff;
+  height: 100rpx;
+  padding: 0 20rpx;
+  border-top: 1rpx solid #eaeaea;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: content-box;
+  .buttons {
+    display: flex;
+    & > view {
+      width: 220rpx;
+      text-align: center;
+      line-height: 72rpx;
+      font-size: 26rpx;
+      color: #fff;
+      border-radius: 72rpx;
+    }
+    .addcart {
+      background-color: #ffa868;
+    }
+    .payment {
+      background-color: #27ba9b;
+      margin-left: 20rpx;
+    }
+  }
+  .icons {
+    padding-right: 20rpx;
+    display: flex;
+    align-items: center;
+    flex: 1;
+    // 兼容 H5 端和 App 端的导航链接样式
+    .navigator-wrap,
+    .icons-button {
+      flex: 1;
+      text-align: center;
+      line-height: 1.4;
+      padding: 0;
+      margin: 0;
+      border-radius: 0;
+      font-size: 20rpx;
+      color: #333;
+      background-color: #fff;
+      &::after {
+        border: none;
+      }
+    }
+    text {
+      display: block;
+      font-size: 34rpx;
+    }
+  }
+}

src/pages/goods/goods.vue

@@ -286,283 +286,5 @@ const handlerBuyNow = (e: SkuPopupEvent) => {
 </script>
 
 <style lang="scss">
-page {
+@import './goods.scss';
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.viewport {
-  background-color: #f4f4f4;
-  flex: 1;
-  height: 100%;
-}
-
-/* 商品信息 */
-.goods {
-  background-color: #fff;
-  .preview {
-    height: 750rpx;
-    position: relative;
-    .swiper {
-      height: 750rpx;
-    }
-    .image {
-      width: 750rpx;
-      height: 750rpx;
-    }
-    .indicator {
-      height: 40rpx;
-      padding: 0 24rpx;
-      line-height: 40rpx;
-      border-radius: 30rpx;
-      color: #fff;
-      font-family: Arial, Helvetica, sans-serif;
-      background-color: rgba(0, 0, 0, 0.3);
-      position: absolute;
-      bottom: 30rpx;
-      right: 30rpx;
-      .current {
-        font-size: 26rpx;
-      }
-      .split {
-        font-size: 24rpx;
-        margin: 0 1rpx 0 2rpx;
-      }
-      .total {
-        font-size: 24rpx;
-      }
-    }
-  }
-  .meta {
-    position: relative;
-    border-bottom: 1rpx solid #eaeaea;
-    .price {
-      height: 130rpx;
-      padding: 25rpx 30rpx 0;
-      color: #fff;
-      font-size: 34rpx;
-      box-sizing: border-box;
-      background-color: #35c8a9;
-    }
-    .number {
-      font-size: 56rpx;
-    }
-    .brand {
-      width: 160rpx;
-      height: 80rpx;
-      overflow: hidden;
-      position: absolute;
-      top: 26rpx;
-      right: 30rpx;
-    }
-    .name {
-      max-height: 88rpx;
-      line-height: 1.4;
-      margin: 20rpx;
-      font-size: 32rpx;
-      color: #333;
-    }
-    .desc {
-      line-height: 1;
-      padding: 0 20rpx 30rpx;
-      font-size: 24rpx;
-      color: #cf4444;
-    }
-  }
-  .action {
-    padding-left: 20rpx;
-    .item {
-      height: 90rpx;
-      padding-right: 60rpx;
-      border-bottom: 1rpx solid #eaeaea;
-      font-size: 26rpx;
-      color: #333;
-      position: relative;
-      display: flex;
-      align-items: center;
-      &:last-child {
-        border-bottom: 0 none;
-      }
-    }
-    .label {
-      width: 60rpx;
-      color: #898b94;
-      margin: 0 16rpx 0 10rpx;
-    }
-    .text {
-      flex: 1;
-      -webkit-line-clamp: 1;
-    }
-  }
-}
-
-.panel {
-  margin-top: 20rpx;
-  background-color: #fff;
-  .title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 90rpx;
-    line-height: 1;
-    padding: 30rpx 60rpx 30rpx 6rpx;
-    position: relative;
-    text {
-      padding-left: 10rpx;
-      font-size: 28rpx;
-      color: #333;
-      font-weight: 600;
-      border-left: 4rpx solid #27ba9b;
-    }
-    navigator {
-      font-size: 24rpx;
-      color: #666;
-    }
-  }
-}
-
-.arrow {
-  &::after {
-    position: absolute;
-    top: 50%;
-    right: 30rpx;
-    content: '\e6c2';
-    color: #ccc;
-    font-family: 'erabbit' !important;
-    font-size: 32rpx;
-    transform: translateY(-50%);
-  }
-}
-
-/* 商品详情 */
-.detail {
-  padding-left: 20rpx;
-  .content {
-    margin-left: -20rpx;
-    .image {
-      width: 100%;
-    }
-  }
-  .properties {
-    padding: 0 20rpx;
-    margin-bottom: 30rpx;
-    .item {
-      display: flex;
-      line-height: 2;
-      padding: 10rpx;
-      font-size: 26rpx;
-      color: #333;
-      border-bottom: 1rpx dashed #ccc;
-    }
-    .label {
-      width: 200rpx;
-    }
-    .value {
-      flex: 1;
-    }
-  }
-}
-
-/* 同类推荐 */
-.similar {
-  .content {
-    padding: 0 20rpx 200rpx;
-    background-color: #f4f4f4;
-    display: flex;
-    flex-wrap: wrap;
-    .goods {
-      width: calc(375rpx - 60rpx - 14rpx);
-      padding: 24rpx 20rpx 20rpx;
-      margin: 20rpx 7rpx;
-      border-radius: 10rpx;
-      background-color: #fff;
-    }
-    .image {
-      width: 100%;
-    }
-    .name {
-      height: 80rpx;
-      margin: 10rpx 0;
-      font-size: 26rpx;
-      color: #262626;
-    }
-    .price {
-      line-height: 1;
-      font-size: 20rpx;
-      color: #cf4444;
-    }
-    .number {
-      font-size: 26rpx;
-      margin-left: 2rpx;
-    }
-  }
-  navigator {
-    &:nth-child(even) {
-      margin-right: 0;
-    }
-  }
-}
-
-/* 底部工具栏 */
-.toolbar {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: calc((var(--window-bottom)));
-  z-index: 1;
-  background-color: #fff;
-  height: 100rpx;
-  padding: 0 20rpx;
-  border-top: 1rpx solid #eaeaea;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-sizing: content-box;
-  .buttons {
-    display: flex;
-    & > view {
-      width: 220rpx;
-      text-align: center;
-      line-height: 72rpx;
-      font-size: 26rpx;
-      color: #fff;
-      border-radius: 72rpx;
-    }
-    .addcart {
-      background-color: #ffa868;
-    }
-    .payment {
-      background-color: #27ba9b;
-      margin-left: 20rpx;
-    }
-  }
-  .icons {
-    padding-right: 20rpx;
-    display: flex;
-    align-items: center;
-    flex: 1;
-    // 兼容 H5 端和 App 端的导航链接样式
-    .navigator-wrap,
-    .icons-button {
-      flex: 1;
-      text-align: center;
-      line-height: 1.4;
-      padding: 0;
-      margin: 0;
-      border-radius: 0;
-      font-size: 20rpx;
-      color: #333;
-      background-color: #fff;
-      &::after {
-        border: none;
-      }
-    }
-    text {
-      display: block;
-      font-size: 34rpx;
-    }
-  }
-}
 </style>