xiaoe_mp_npm 0.5.39 → 0.5.40-alpha2

package/miniprogram_dist/CouponList/components/CouponItem/index.scss

@@ -1,24 +1,35 @@
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+$deviceWidth: 750;
+
 // 互动页优惠券卡片样式
-.styleType1_wrapper {
+@mixin styleType1_wrapper {
+  &.pop-card {
+    width: vmin(484);
+    margin-bottom: 0;
+  }
+
   &.vertical-screen {
-    width: 63.47vmin;
+    width: vmin(476);
     margin: 0 auto;
 
     &.not-pop-card {
-      margin-bottom: 4.27vmin;
+      margin-bottom: vmin(32);
     }
 
     .coupon_style1 {
-      height: 24.53vmin;
+      height: vmin(184);
     }
   }
 
   &.full-screen-list {
-    width: 92.47vmin;
-    margin: 3.2vmin 4.27vmin 0 4.27vmin;
+    width: vmin(694);
+    margin: vmin(24) vmin(32) 0 vmin(32);
 
     .coupon_style1 {
-      height: 27vmin;
+      height: vmin(202);
     }
   }
 
@@ -27,20 +38,20 @@
     position: relative;
     width: 100%;
 
-    // height: 24.53vmin;
+    // height: vmin(184);
     .couponValue {
-      padding: 2.13vmin;
-      min-width: 24.8vmin;
+      padding: vmin(16);
+      min-width: vmin(186);
       height: 100%;
       background: rgba(255, 120, 31, 1);
       color: #fff;
-      // padding: 2.13vmin;
+      // padding: vmin(16);
       display: flex;
       flex-direction: column;
       justify-content: space-around;
       align-items: center;
       box-sizing: border-box;
-      border-radius: 2.13vmin 0 0 2.13vmin;
+      border-radius: vmin(16) 0 0 vmin(16);
 
       .couponPriceWrap {
         position: relative;
@@ -50,28 +61,28 @@
         font-weight: 700;
 
         .coupon-symbol {
-          margin-right: 0.53vmin;
-          font-size: 4.27vmin;
+          margin-right: vmin(4);
+          font-size: vmin(32);
         }
 
         .coupon-price {
           display: flex;
-          font-size: 10.67vmin;
+          font-size: vmin(80);
         }
 
         .discountFont {
-          font-size: 4.27vmin;
+          font-size: vmin(32);
           font-weight: 500;
         }
       }
 
       .couponUseCondition {
         color: rgba(255, 255, 255, 1);
-        font-size: 3.2vmin;
+        font-size: vmin(24);
         font-weight: 500;
         font-family: "PingFang SC";
         text-align: center;
-        line-height: 4.27vmin;
+        line-height: vmin(32);
       }
     }
 
@@ -79,33 +90,33 @@
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
-      width: 68.07vmin;
+      width: vmin(510);
       height: 100%;
       box-sizing: border-box;
       background: rgba(255, 255, 255, 1);
-      padding: 2.13vmin 0 2.13vmin 2.13vmin;
+      padding: vmin(16) 0 vmin(16) vmin(16);
       color: rgba(153, 153, 153, 1);
-      font-size: 2.67vmin;
-      line-height: 3.2vmin;
+      font-size: vmin(20);
+      line-height: vmin(24);
       font-weight: 400;
       text-align: left;
-      border-radius: 0 2.13vmin 2.13vmin 0;
+      border-radius: 0 vmin(16) vmin(16) 0;
 
       .couponName {
         color: rgba(51, 51, 51, 1);
-        font-size: 3.2vmin;
-        line-height: 4.27vmin;
-        height: 4.27vmin;
-        width: 32.8vmin;
+        font-size: vmin(24);
+        line-height: vmin(32);
+        height: vmin(32);
+        width: vmin(246);
         font-weight: 700;
-        margin-bottom: 1.07vmin;
+        margin-bottom: vmin(8);
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
       }
 
       .couponUseHint {
-        margin-bottom: 0.53vmin;
+        margin-bottom: vmin(4);
       }
 
       .couponUseTime {
@@ -118,9 +129,9 @@
         align-items: center;
 
         .operateBtn {
-          width: 3.2vmin;
-          height: 3.2vmin;
-          margin-left: 0.8vmin;
+          width: vmin(24);
+          height: vmin(24);
+          margin-left: vmin(6);
           background-size: 100% 100%;
         }
       }
@@ -128,25 +139,25 @@
 
     .couponState {
       position: absolute;
-      right: 2.13vmin;
-      bottom: 2.13vmin;
-      height: 6.4vmin;
-      line-height: 6.4vmin;
-      border-radius: 3.73vmin;
+      right: vmin(16);
+      bottom: vmin(16);
+      height: vmin(48);
+      line-height: vmin(48);
+      border-radius: vmin(28);
       border: 0;
       background: rgba(255, 120, 31, 1);
 
       &.fullscreen-btn {
-        width: 18.13vmin;
+        width: vmin(136);
       }
 
       &.vertical-btn {
-        width: 14.93vmin;
+        width: vmin(112);
       }
 
       .couponBtn {
         color: rgba(255, 255, 255, 1);
-        font-size: 3.2vmin;
+        font-size: vmin(24);
         font-weight: 700;
         text-align: center;
         font-family: "PingFang SC";
@@ -157,8 +168,8 @@
       position: absolute;
       top: 0vmin;
       right: 0vmin;
-      width: 13.07vmin;
-      height: 15.2vmin;
+      width: vmin(98);
+      height: vmin(114);
     }
   }
 
@@ -167,17 +178,17 @@
     display: flex;
     background-color: rgba(255, 245.82, 239.7, 1);
     box-sizing: border-box;
-    border-radius: 0 0 0.53vmin 0.53vmin;
-    padding: 2.13vmin;
-    padding-top: 5vmin;
+    border-radius: 0 0 vmin(4) vmin(4);
+    padding: vmin(16);
+    padding-top: vmin(37.5);
     color: rgba(102, 102, 102, 1);
-    font-size: 2.67vmin;
+    font-size: vmin(20);
     margin-top: -2vmin;
     text-align: left;
 
     .disabledHint {
-      width: 3.73vmin;
-      margin-right: 1.33vmin;
+      width: vmin(28);
+      margin-right: vmin(10);
     }
 
     .instructions {
@@ -185,41 +196,16 @@
 
       .remark {
         color: rgba(51, 51, 51, 1);
-        margin-bottom: 1.07vmin;
+        margin-bottom: vmin(8);
       }
     }
   }
 }
 
-// 优惠券不可用样式
-.disabledState {
-  background-color: #eeeeee !important;
-
-  .couponValue {
-    background: #cdcdcd !important;
-  }
-}
-
-// 详细信息不可用优惠券时的字段
-.whiteBg {
-  background-color: #fff !important;
-}
-
-.disabledHint {
-  width: 3.73vmin;
-  margin-right: 1.33vmin;
-}
-
-// 非高亮态样式
-.unselectState {
-  background: #cdcdcd !important;
-}
-
-
 // 一行单个优惠券样式
-.styleType2_wrapper {
-  margin-bottom: 3.2vmin;
-  margin-right: 2.13vmin;
+@mixin styleType2_wrapper {
+  margin-bottom: vmin(24);
+  margin-right: vmin(16);
 
   .coupon_style2 {
     display: flex;
@@ -227,8 +213,8 @@
     color: rgba(255, 120, 31, 1);
     position: relative;
     overflow: hidden;
-    width: 44.8vmin;
-    height: 21.33vmin;
+    width: vmin(336);
+    height: vmin(160);
     flex-shrink: 0;
 
     .coupons-styles2-bg {
@@ -244,19 +230,19 @@
       display: inline-flex;
       flex-direction: column;
       box-sizing: border-box;
-      padding-left: 2.13vmin;
-      width: 36.27vmin;
+      padding-left: vmin(16);
+      width: vmin(272);
       height: 100%;
       font-family: "PingFang SC";
-      font-size: 2.67vmin;
-      line-height: 3.2vmin;
+      font-size: vmin(20);
+      line-height: vmin(24);
 
       .couponInfoTop {
-        padding-top: 2.13vmin;
+        padding-top: vmin(16);
         display: flex;
         flex-direction: row;
         align-items: flex-end;
-        height: 6.4vmin;
+        height: vmin(48);
 
         .couponPriceWrap {
           position: relative;
@@ -264,23 +250,23 @@
           flex-direction: row;
           align-items: baseline;
           font-weight: 700;
-          height: 6.4vmin;
-          line-height: 6.4vmin;
+          height: vmin(48);
+          line-height: vmin(48);
 
           .coupon-symbol {
-            margin-right: 0.53vmin;
-            font-size: 3.2vmin;
+            margin-right: vmin(4);
+            font-size: vmin(24);
           }
 
           .coupon-price {
             display: flex;
-            font-size: 9.4vmin;
+            font-size: vmin(70.5);
           }
 
           .discountFont {
-            font-size: 3.2vmin;
+            font-size: vmin(24);
             font-weight: 500;
-            margin-left: 0.53vmin;
+            margin-left: vmin(4);
           }
         }
 
@@ -288,28 +274,28 @@
 
       .couponInfoBottom {
         font-weight: 400;
-        line-height: 3.2vmin;
+        line-height: vmin(24);
         position: relative;
-        margin-top: 0.8vmin;
+        margin-top: vmin(6);
 
         .priceLimit {
-          margin-bottom: 0.53vmin;
+          margin-bottom: vmin(4);
 
           .couponUseCondition {
-            font-size: 2.67vmin;
+            font-size: vmin(20);
             font-weight: 400;
           }
         }
 
         .couponUseHint {
-          margin-bottom: 0.53vmin;
+          margin-bottom: vmin(4);
         }
       }
 
     }
 
     .couponStatewrapper {
-      width: 8.27vmin;
+      width: vmin(62);
       height: 100%;
       /* -webkit-align-self: center; */
       -ms-flex-item-align: center;
@@ -322,8 +308,8 @@
 
       .couponBtn {
         writing-mode: vertical-lr;
-        letter-spacing: 1.33vmin;
-        font-size: 3.2vmin;
+        letter-spacing: vmin(10);
+        font-size: vmin(24);
         font-weight: 700;
         font-family: "PingFang SC";
       }
@@ -332,12 +318,12 @@
         content: " ";
         display: block;
         width: 100%;
-        height: 15.2vmin;
-        border-left: 0.27vmin dashed rgba(255, 120, 31, 1);
+        height: vmin(114);
+        border-left: vmin(2) dashed rgba(255, 120, 31, 1);
         -webkit-transform: scale(1.3);
         transform: scale(0.7, 1.1);
         position: absolute;
-        left: -1.33vmin;
+        left: -vmin(10);
         top: 3.07vmin;
       }
 
@@ -347,23 +333,12 @@
       position: absolute;
       top: 0vmin;
       right: 0vmin;
-      width: 13.07vmin;
-      height: 15.2vmin;
+      width: vmin(98);
+      height: vmin(114);
     }
   }
 }
 
-.pop-card {
-  width: 64.47vmin;
-  margin-bottom: 0;
-}
-
-@function vmin($rpx) {
-  @return #{$rpx * 100 / $deviceWidth}vmin;
-}
-
-$deviceWidth: 750;
-
 @mixin styleType1_wrapper-v {
   &.vertical-screen {
     width: vmin(264);
@@ -380,11 +355,11 @@ $deviceWidth: 750;
   }
 
   &.full-screen-list {
-    width: 92.47vmin;
-    margin: 3.2vmin 4.27vmin 0 4.27vmin;
+    width: vmin(694);
+    margin: vmin(24) vmin(32) 0 vmin(32);
 
     .coupon_style1 {
-      height: 27vmin;
+      height: vmin(202);
     }
   }
 
@@ -393,14 +368,14 @@ $deviceWidth: 750;
     position: static;
     width: 100%;
 
-    // height: 24.53vmin;
+    // height: vmin(184);
     .couponValue {
       padding: vmin(25) 0;
       min-width: unset;
       height: vmin(172);
       background: rgba(255, 120, 31, 1);
       color: #fff;
-      // padding: 2.13vmin;
+      // padding: vmin(16);
       display: flex;
       flex-direction: column;
       justify-content: space-around;
@@ -505,7 +480,7 @@ $deviceWidth: 750;
       background: rgba(255, 120, 31, 1);
 
       // &.fullscreen-btn {
-      //   width: 18.13vmin;
+      //   width: vmin(136);
       // }
       &.vertical-btn {
         width: vmin(232);
@@ -524,8 +499,8 @@ $deviceWidth: 750;
     //   position: absolute;
     //   top: 0vmin;
     //   right: 0vmin;
-    //   width: 13.07vmin;
-    //   height: 15.2vmin;
+    //   width: vmin(98);
+    //   height: vmin(114);
     // }
   }
 
@@ -534,36 +509,51 @@ $deviceWidth: 750;
   //   display: flex;
   //   background-color: rgba(255,245.82,239.7,1);
   //   box-sizing: border-box;
-  //   border-radius: 0 0 0.53vmin 0.53vmin;
-  //   padding: 2.13vmin;
-  //   padding-top: 5vmin;
+  //   border-radius: 0 0 vmin(4) vmin(4);
+  //   padding: vmin(16);
+  //   padding-top: vmin(37.5);
   //   color: rgba(102,102,102,1);
-  //   font-size: 2.67vmin;
+  //   font-size: vmin(20);
   //   margin-top: -2vmin;
   //   text-align: left;
   //   .disabledHint {
-  //     width: 3.73vmin;
-  //     margin-right: 1.33vmin;
+  //     width: vmin(28);
+  //     margin-right: vmin(10);
   // }
   //   .instructions {
   //     word-break: break-all;
   //     .remark {
   //       color: rgba(51,51,51,1);
-  //       margin-bottom: 1.07vmin;
+  //       margin-bottom: vmin(8);
   //     }
   //   }
   // }
 }
 
+.styleType1_wrapper {
+  @include styleType1_wrapper;
+}
+
+.styleType2_wrapper {
+  @include styleType2_wrapper;
+}
+
 .styleType1_wrapper-v {
   @include styleType1_wrapper-v;
 }
 
-
 // 竖屏pad
 @media screen and (min-width: 768px) and (orientation: portrait) {
   $deviceWidth: 1536 !global;
 
+  .styleType1_wrapper {
+    @include styleType1_wrapper;
+  }
+  
+  .styleType2_wrapper {
+    @include styleType2_wrapper;
+  }
+  
   .styleType1_wrapper-v {
     @include styleType1_wrapper-v;
   }
@@ -573,6 +563,14 @@ $deviceWidth: 750;
 @media screen and (min-height: 768px) and (orientation: landscape) {
   $deviceWidth: 1536 !global;
 
+  .styleType1_wrapper {
+    @include styleType1_wrapper;
+  }
+  
+  .styleType2_wrapper {
+    @include styleType2_wrapper;
+  }
+  
   .styleType1_wrapper-v {
     @include styleType1_wrapper-v;
   }