xiaoe_mp_npm 0.5.39 → 0.5.40-alpha2

package/src/GoodsRecommend/index.scss

@@ -0,0 +1,154 @@
+
+$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;
+  }
+}
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  $deviceWidth: 1536 !global;
+  .goods-recommend-container {
+    @include goods-recommend-container;
+  }
+}
+

package/src/GoodsRecommend/index.wxss

@@ -1,64 +1,73 @@
 .goods-recommend-container {
   width: 100%;
   background-color: #ffffff;
-  padding-bottom: 100rpx;
+  padding-bottom: 13.33333vmin;
 }
+
 .goods-recommend-container .recommend-title {
-  font-size: 32rpx;
-  padding-left: 32rpx;
-  padding-top: 32rpx;
+  font-size: 4.26667vmin;
+  padding-left: 4.26667vmin;
+  padding-top: 4.26667vmin;
 }
+
 .goods-recommend-container .goods-item {
   display: flex;
-  padding: 32rpx 24rpx 0rpx 24rpx;
-  height: 180rpx;
+  padding: 4.26667vmin 3.2vmin 0rpx 3.2vmin;
+  height: 24vmin;
 }
+
 .goods-recommend-container .goods-item .cover-picture {
-  margin-right: 16rpx;
+  margin-right: 2.13333vmin;
   position: relative;
 }
+
 .goods-recommend-container .goods-item .cover-picture .picture {
-  width: 240rpx;
-  height: 180rpx;
-  border-radius: 16rpx;
+  width: 32vmin;
+  height: 24vmin;
+  border-radius: 2.13333vmin;
 }
+
 .goods-recommend-container .goods-item .cover-picture .marketing-type {
   position: absolute;
-  font-size: 20rpx;
+  font-size: 2.66667vmin;
   left: 0;
   color: #807157;
-  padding: 4rpx 8rpx;
+  padding: 0.53333vmin 1.06667vmin;
   top: 0;
-  border-radius: 8rpx 0 8rpx 0;
+  border-radius: 1.06667vmin 0 1.06667vmin 0;
 }
+
 .goods-recommend-container .goods-item .cover-picture .super-member {
   background: linear-gradient(-45deg, #333333 0%, #525252 68%, #333333 100%);
   color: #ffc166;
 }
+
 .goods-recommend-container .goods-item .cover-picture .else-activity {
   color: #fff;
   border: 0 solid #010101;
   background: linear-gradient(270deg, #fe6500 0%, #ff4102 100%);
 }
+
 .goods-recommend-container .goods-item .cover-picture .goods-type {
   position: absolute;
-  font-size: 20rpx;
-  right: 12rpx;
-  bottom: 12rpx;
-  padding: 4rpx 8rpx;
+  font-size: 2.66667vmin;
+  right: 1.6vmin;
+  bottom: 1.6vmin;
+  padding: 0.53333vmin 1.06667vmin;
   color: #ffffff;
-  border-radius: 8rpx;
+  border-radius: 1.06667vmin;
   border: 0 solid #010101;
   background: rgba(0, 0, 0, 0.25);
-  backdrop-filter: blur(10.1746254 0.56rem);
+  backdrop-filter: blur(10.17463 0.56rem);
 }
+
 .goods-recommend-container .goods-item .goods-info {
-  font-size: 28rpx;
-  width: calc(100% - 256rpx);
+  font-size: 3.73333vmin;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
+
 .goods-recommend-container .goods-item .goods-info .goods-title {
   font-weight: 600;
   display: -webkit-box;
@@ -67,17 +76,19 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
+
 .goods-recommend-container .goods-item .goods-info .price-watch {
   display: flex;
-  margin-top: 60rpx;
   justify-content: space-between;
   align-items: center;
 }
+
 .goods-recommend-container .goods-item .goods-info .price-watch .goods-type {
-  font-size: 24rpx;
+  font-size: 3.2vmin;
   color: #ff5024;
   font-weight: 700;
 }
+
 .goods-recommend-container .goods-item .goods-info .price-watch .goods-price {
   width: 75%;
   color: #b2b2b2;
@@ -88,42 +99,309 @@
   display: flex;
   align-items: baseline;
 }
+
 .goods-recommend-container .goods-item .goods-info .price-watch .goods-price .greenback-one {
-  font-size: 32rpx;
+  font-size: 4.26667vmin;
   color: #ff5024;
 }
+
 .goods-recommend-container .goods-item .goods-info .price-watch .goods-price .greenback {
-  font-size: 24rpx;
+  font-size: 3.2vmin;
   color: #ff5024;
 }
+
 .goods-recommend-container .goods-item .goods-info .price-watch .goods-price .discount {
-  font-size: 24rpx;
-  margin-left: 8rpx;
+  font-size: 3.2vmin;
+  margin-left: 1.06667vmin;
   text-decoration: line-through;
 }
+
 .goods-recommend-container .goods-item .goods-info .price-watch .goods-watch {
   text-align: right;
   width: 25%;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  font-size: 20rpx;
+  font-size: 2.66667vmin;
   color: #b2b2b2;
 }
+
 .goods-recommend-container .empty {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  padding: 80rpx 0;
+  padding: 10.66667vmin 0;
 }
+
 .goods-recommend-container .empty .empty-text {
   color: #9e9e9e;
-  font-size: 32rpx;
-  margin-top: 32rpx;
+  font-size: 4.26667vmin;
+  margin-top: 4.26667vmin;
 }
+
 .goods-recommend-container .empty image {
-  width: 176rpx;
-  height: 176rpx;
+  width: 23.46667vmin;
+  height: 23.46667vmin;
+}
+
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  .goods-recommend-container {
+    width: 100%;
+    background-color: #ffffff;
+    padding-bottom: 6.51042vmin;
+  }
+  .goods-recommend-container .recommend-title {
+    font-size: 2.08333vmin;
+    padding-left: 2.08333vmin;
+    padding-top: 2.08333vmin;
+  }
+  .goods-recommend-container .goods-item {
+    display: flex;
+    padding: 2.08333vmin 1.5625vmin 0rpx 1.5625vmin;
+    height: 11.71875vmin;
+  }
+  .goods-recommend-container .goods-item .cover-picture {
+    margin-right: 1.04167vmin;
+    position: relative;
+  }
+  .goods-recommend-container .goods-item .cover-picture .picture {
+    width: 15.625vmin;
+    height: 11.71875vmin;
+    border-radius: 1.04167vmin;
+  }
+  .goods-recommend-container .goods-item .cover-picture .marketing-type {
+    position: absolute;
+    font-size: 1.30208vmin;
+    left: 0;
+    color: #807157;
+    padding: 0.26042vmin 0.52083vmin;
+    top: 0;
+    border-radius: 0.52083vmin 0 0.52083vmin 0;
+  }
+  .goods-recommend-container .goods-item .cover-picture .super-member {
+    background: linear-gradient(-45deg, #333333 0%, #525252 68%, #333333 100%);
+    color: #ffc166;
+  }
+  .goods-recommend-container .goods-item .cover-picture .else-activity {
+    color: #fff;
+    border: 0 solid #010101;
+    background: linear-gradient(270deg, #fe6500 0%, #ff4102 100%);
+  }
+  .goods-recommend-container .goods-item .cover-picture .goods-type {
+    position: absolute;
+    font-size: 1.30208vmin;
+    right: 0.78125vmin;
+    bottom: 0.78125vmin;
+    padding: 0.26042vmin 0.52083vmin;
+    color: #ffffff;
+    border-radius: 0.52083vmin;
+    border: 0 solid #010101;
+    background: rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(10.17463 0.56rem);
+  }
+  .goods-recommend-container .goods-item .goods-info {
+    font-size: 1.82292vmin;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .goods-recommend-container .goods-item .goods-info .goods-title {
+    font-weight: 600;
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+  .goods-recommend-container .goods-item .goods-info .price-watch {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .goods-recommend-container .goods-item .goods-info .price-watch .goods-type {
+    font-size: 1.5625vmin;
+    color: #ff5024;
+    font-weight: 700;
+  }
+  .goods-recommend-container .goods-item .goods-info .price-watch .goods-price {
+    width: 75%;
+    color: #b2b2b2;
+    font-weight: 700;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: flex;
+    align-items: baseline;
+  }
+  .goods-recommend-container .goods-item .goods-info .price-watch .goods-price .greenback-one {
+    font-size: 2.08333vmin;
+    color: #ff5024;
+  }
+  .goods-recommend-container .goods-item .goods-info .price-watch .goods-price .greenback {
+    font-size: 1.5625vmin;
+    color: #ff5024;
+  }
+  .goods-recommend-container .goods-item .goods-info .price-watch .goods-price .discount {
+    font-size: 1.5625vmin;
+    margin-left: 0.52083vmin;
+    text-decoration: line-through;
+  }
+  .goods-recommend-container .goods-item .goods-info .price-watch .goods-watch {
+    text-align: right;
+    width: 25%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: 1.30208vmin;
+    color: #b2b2b2;
+  }
+  .goods-recommend-container .empty {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 5.20833vmin 0;
+  }
+  .goods-recommend-container .empty .empty-text {
+    color: #9e9e9e;
+    font-size: 2.08333vmin;
+    margin-top: 2.08333vmin;
+  }
+  .goods-recommend-container .empty image {
+    width: 11.45833vmin;
+    height: 11.45833vmin;
+  }
+}
+
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  .goods-recommend-container {
+    width: 100%;
+    background-color: #ffffff;
+    padding-bottom: 6.51042vmin;
+  }
+  .goods-recommend-container .recommend-title {
+    font-size: 2.08333vmin;
+    padding-left: 2.08333vmin;
+    padding-top: 2.08333vmin;
+  }
+  .goods-recommend-container .goods-item {
+    display: flex;
+    padding: 2.08333vmin 1.5625vmin 0rpx 1.5625vmin;
+    height: 11.71875vmin;
+  }
+  .goods-recommend-container .goods-item .cover-picture {
+    margin-right: 1.04167vmin;
+    position: relative;
+  }
+  .goods-recommend-container .goods-item .cover-picture .picture {
+    width: 15.625vmin;
+    height: 11.71875vmin;
+    border-radius: 1.04167vmin;
+  }
+  .goods-recommend-container .goods-item .cover-picture .marketing-type {
+    position: absolute;
+    font-size: 1.30208vmin;
+    left: 0;
+    color: #807157;
+    padding: 0.26042vmin 0.52083vmin;
+    top: 0;
+    border-radius: 0.52083vmin 0 0.52083vmin 0;
+  }
+  .goods-recommend-container .goods-item .cover-picture .super-member {
+    background: linear-gradient(-45deg, #333333 0%, #525252 68%, #333333 100%);
+    color: #ffc166;
+  }
+  .goods-recommend-container .goods-item .cover-picture .else-activity {
+    color: #fff;
+    border: 0 solid #010101;
+    background: linear-gradient(270deg, #fe6500 0%, #ff4102 100%);
+  }
+  .goods-recommend-container .goods-item .cover-picture .goods-type {
+    position: absolute;
+    font-size: 1.30208vmin;
+    right: 0.78125vmin;
+    bottom: 0.78125vmin;
+    padding: 0.26042vmin 0.52083vmin;
+    color: #ffffff;
+    border-radius: 0.52083vmin;
+    border: 0 solid #010101;
+    background: rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(10.17463 0.56rem);
+  }
+  .goods-recommend-container .goods-item .goods-info {
+    font-size: 1.82292vmin;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .goods-recommend-container .goods-item .goods-info .goods-title {
+    font-weight: 600;
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+  .goods-recommend-container .goods-item .goods-info .price-watch {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .goods-recommend-container .goods-item .goods-info .price-watch .goods-type {
+    font-size: 1.5625vmin;
+    color: #ff5024;
+    font-weight: 700;
+  }
+  .goods-recommend-container .goods-item .goods-info .price-watch .goods-price {
+    width: 75%;
+    color: #b2b2b2;
+    font-weight: 700;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: flex;
+    align-items: baseline;
+  }
+  .goods-recommend-container .goods-item .goods-info .price-watch .goods-price .greenback-one {
+    font-size: 2.08333vmin;
+    color: #ff5024;
+  }
+  .goods-recommend-container .goods-item .goods-info .price-watch .goods-price .greenback {
+    font-size: 1.5625vmin;
+    color: #ff5024;
+  }
+  .goods-recommend-container .goods-item .goods-info .price-watch .goods-price .discount {
+    font-size: 1.5625vmin;
+    margin-left: 0.52083vmin;
+    text-decoration: line-through;
+  }
+  .goods-recommend-container .goods-item .goods-info .price-watch .goods-watch {
+    text-align: right;
+    width: 25%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: 1.30208vmin;
+    color: #b2b2b2;
+  }
+  .goods-recommend-container .empty {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 5.20833vmin 0;
+  }
+  .goods-recommend-container .empty .empty-text {
+    color: #9e9e9e;
+    font-size: 2.08333vmin;
+    margin-top: 2.08333vmin;
+  }
+  .goods-recommend-container .empty image {
+    width: 11.45833vmin;
+    height: 11.45833vmin;
+  }
 }

package/src/LiveGoodsList/Header/index.scss

@@ -0,0 +1,71 @@
+$deviceWidth: 750;
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+@mixin popup-header{
+    padding: vmin(24) vmin(32);
+    height: vmin(48);
+    top: auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .head-right-txt {
+      display: inline-block;
+      text-align: right;
+      min-width: vmin(104);
+      font-size: vmin(40);
+    }
+    .popup-header-title{
+      color: rgba(51,51,51,1);
+      font-size: vmin(32);
+      font-weight: 500;
+      font-family: "PingFang SC";
+    }
+    .van-action-sheet__left {
+      color: #c8c9cc;
+      font-size: vmin(22);
+      line-height: inherit;
+      display: flex;
+      align-items: center;
+      min-width: vmin(104);
+  
+    .order-icon {
+      display: inline-block;
+      width: vmin(40);
+      height: vmin(40);
+      -moz-background-size: 100% 100%;
+      background-size: 100% 100%;
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANHSURBVHgB7ZzPcdpQEId/yAwXH0IJdBCoINCBXYHlYRAcSQekAnPk34yVCuxUYDowJagEc4ADM0D2xTplkvDEaldE3m+GEYeHkD6e3q7eWwQYhvEfU4ESg8GgcTweh/T2E2RZVyqV8WQySaCAisBer9ekzQudWB06vNGP1ZnP5ysIE0ABEveoKM9RD4LgAQqoCCSaUIZ6YBsKaAksLWePgRQU2vQr38AjKFC7EAVAw0bs0WxNx7eczWbPOIPMAl1AoAN7orcNlIuERN5mDTyZBLpedzgcXpATrodMp9N7MIiiKKbNHXKCgk+HUqCld3vfhi6PI3mPKDl0jk9hGHpnDN4C9/u9S4IbKD/1Wq029G1c9W1Il9sX5IxLNfr9PqtX0z5yPy68Dwkjn4beAiGTyzWKitAnaPg2zCLwj/gEAhrojygASk3+GSTzCECWSDNREUiX6Rv0SaCA1mTCN+jzHQqoCKSxaEwbJzGBPAm9vtJ3jqAAO4j4kp7QCCXDgggTE8jEBDIxgUxMIBMTyMQEMjGBTEwgE/E7kbQq4YHuh9vQZUXrG7fSJR6iPdCto+C9pKMNfZq0vvGaHoMYogLdOopyScfv1NO1HDFEBRYs7xd0GYtWg0kHEfHqqFO4qgMIIipwt9vFKFbiiqbRRCdWRaNwHMduKr9FkTikS0li+fGvUABZXV9fi89Kq0yozufzmDYxSogl0kxMIBMTyMQEMjGBTMSj8HA4rG82mztKY3IpTkrLcVUWzX0QF7jdbl/pls5VYSEnwiiKhpSkd9I8s1BEL2GXQEOmKLNZq9VCXADSkwltCEH7/owLQFSgZFUW3aqtcQGICry6uhpLSHT7dPvGBSAq0E2n04m26HJbIifS6amO1r8xTyEehdMT7aCkWCLNxAQyMYFMTCATE8jEBDIxgUxMIBMTyMQEMjGBTEwgExPIxAQyMYFMTCATE8jEBDIxgUzYayLuuS9RFIX4oGTpgQk+Dt513VkEXkxBjwI/fBt6C9ztduOCnv+iTRIEQezb2Fugq4RyDyhEiXEd5HA43GdZtM8UhReLxZK+pIVyjocJvTruHDN85vxnqHa73ZtqtdqG/IO1pVnv9/vnrOIMwygFPwHK0g4OEWNPBgAAAABJRU5ErkJggg==");
+    }
+    .head-left-txt {
+      opacity: 1;
+      color: #666666;
+      font-size: vmin(28);
+      font-weight: 500;
+      font-family: "PingFang SC";
+      margin-left: vmin(8);
+    }
+  }
+}
+ 
+
+.popup-header {
+    @include popup-header;
+}
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+    $deviceWidth: 1536 !global;
+
+    .popup-header {
+        @include popup-header;
+    }
+}
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+    $deviceWidth: 1536 !global;
+
+    .popup-header {
+        @include popup-header;
+    }
+}