xiaoe_mp_npm 0.5.42-test2 → 0.5.42-test21

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,439 @@
   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: 630px) and (orientation: landscape) {
+  .goods-recommend-container {
+    width: 100%;
+    background-color: #ffffff;
+    padding-bottom: 7.93651vmin;
+  }
+  .goods-recommend-container .recommend-title {
+    font-size: 2.53968vmin;
+    padding-left: 2.53968vmin;
+    padding-top: 2.53968vmin;
+  }
+  .goods-recommend-container .goods-item {
+    display: flex;
+    padding: 2.53968vmin 1.90476vmin 0rpx 1.90476vmin;
+    height: 14.28571vmin;
+  }
+  .goods-recommend-container .goods-item .cover-picture {
+    margin-right: 1.26984vmin;
+    position: relative;
+  }
+  .goods-recommend-container .goods-item .cover-picture .picture {
+    width: 19.04762vmin;
+    height: 14.28571vmin;
+    border-radius: 1.26984vmin;
+  }
+  .goods-recommend-container .goods-item .cover-picture .marketing-type {
+    position: absolute;
+    font-size: 1.5873vmin;
+    left: 0;
+    color: #807157;
+    padding: 0.31746vmin 0.63492vmin;
+    top: 0;
+    border-radius: 0.63492vmin 0 0.63492vmin 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.5873vmin;
+    right: 0.95238vmin;
+    bottom: 0.95238vmin;
+    padding: 0.31746vmin 0.63492vmin;
+    color: #ffffff;
+    border-radius: 0.63492vmin;
+    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: 2.22222vmin;
+    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.90476vmin;
+    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.53968vmin;
+    color: #ff5024;
+  }
+  .goods-recommend-container .goods-item .goods-info .price-watch .goods-price .greenback {
+    font-size: 1.90476vmin;
+    color: #ff5024;
+  }
+  .goods-recommend-container .goods-item .goods-info .price-watch .goods-price .discount {
+    font-size: 1.90476vmin;
+    margin-left: 0.63492vmin;
+    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.5873vmin;
+    color: #b2b2b2;
+  }
+  .goods-recommend-container .empty {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 6.34921vmin 0;
+  }
+  .goods-recommend-container .empty .empty-text {
+    color: #9e9e9e;
+    font-size: 2.53968vmin;
+    margin-top: 2.53968vmin;
+  }
+  .goods-recommend-container .empty image {
+    width: 13.96825vmin;
+    height: 13.96825vmin;
+  }
+}
+
+@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,79 @@
+$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;
+    }
+}
+// PC 放大适配
+@media screen and (min-height: 630px) and (orientation: landscape) {
+  $deviceWidth: 1260 !global;
+
+  .popup-header {
+    @include popup-header;
+  }
+}
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+    $deviceWidth: 1536 !global;
+
+    .popup-header {
+        @include popup-header;
+    }
+}