xiaoe_mp_npm 0.5.42-test2 → 0.5.42-test21

package/src/GoodsRecommend/index.scss

@@ -0,0 +1,162 @@
+
+$deviceWidth: 750;
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+
+@mixin goods-recommend-container {
+  width: 100%;
+  background-color: #ffffff;
+  padding-bottom: vmin(100);
+
+  .recommend-title {
+    font-size: vmin(32);
+    padding-left: vmin(32);
+    padding-top: vmin(32);
+  }
+  .goods-item {
+    display: flex;
+    padding: vmin(32) vmin(24) 0rpx vmin(24);
+    height: vmin(180);
+    .cover-picture {
+      margin-right: vmin(16);
+      position: relative;
+      .picture {
+        width: vmin(240);
+        height: vmin(180);
+        border-radius: vmin(16);
+      }
+      .marketing-type {
+        position: absolute;
+        font-size: vmin(20);
+        left: 0;
+        color: #807157;
+        padding: vmin(4) vmin(8);
+        top: 0;
+        border-radius: vmin(8) 0 vmin(8) 0;
+      }
+      .super-member {
+        background: linear-gradient(-45deg, rgba(51, 51, 51, 1) 0%, rgba(82, 82, 82, 1) 68%, rgba(51, 51, 51, 1) 100%);
+        color: #ffc166;
+      }
+      .else-activity {
+        color: #fff;
+        border: 0 solid rgba(0.5920000076293945, 0.5920000076293945, 0.5920000076293945, 1);
+        background: linear-gradient(270deg, rgba(254, 101, 0, 1) 0%, rgba(255, 65, 2, 1) 100%);
+      }
+      .goods-type {
+        position: absolute;
+        font-size: vmin(20);
+        right: vmin(12);
+        bottom: vmin(12);
+        padding: vmin(4) vmin(8);
+        color: #ffffff;
+        border-radius: vmin(8);
+        border: 0 solid rgba(0.5920000076293945, 0.5920000076293945, 0.5920000076293945, 1);
+        background: rgba(0, 0, 0, 0.25);
+        backdrop-filter: blur(10.17462539672851.56rem);
+      }
+    }
+    .goods-info {
+      font-size: vmin(28);
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .goods-title {
+        font-weight: 600;
+        display: -webkit-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+      }
+      .price-watch {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .goods-type {
+          font-size: vmin(24);
+          color: #ff5024;
+          font-weight: 700;
+        }
+        .goods-price {
+          width: 75%;
+          color: #b2b2b2;
+          font-weight: 700;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          display: flex;
+          align-items: baseline;
+          .greenback-one {
+            font-size: vmin(32);
+            color: #ff5024;
+          }
+          .greenback {
+            font-size: vmin(24);
+            color: #ff5024;
+          }
+          .discount {
+            font-size: vmin(24);
+            margin-left: vmin(8);
+            text-decoration: line-through;
+          }
+        }
+        .goods-watch {
+          text-align: right;
+          width: 25%;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          font-size: vmin(20);
+          color: #b2b2b2;
+        }
+      }
+    }
+  }
+  .empty {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: vmin(80) 0;
+    .empty-text {
+      color: #9e9e9e;
+      font-size: vmin(32);
+      margin-top: vmin(32);
+    }
+    image {
+      width: vmin(176);
+      height: vmin(176);
+    }
+  }
+}
+
+.goods-recommend-container {
+  @include goods-recommend-container;
+}
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  $deviceWidth: 1536 !global;
+  .goods-recommend-container {
+    @include goods-recommend-container;
+  }
+}
+// PC 放大适配
+@media screen and (min-height: 630px) and (orientation: landscape) {
+  $deviceWidth: 1260 !global;
+
+  .goods-recommend-container {
+    @include goods-recommend-container;
+  }
+}
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  $deviceWidth: 1536 !global;
+  .goods-recommend-container {
+    @include goods-recommend-container;
+  }
+}
+