xiaoe_mp_npm 0.5.42-test2 → 0.5.42-test21

package/src/coupon/components/CouponSelect/index.scss

@@ -0,0 +1,331 @@
+@import "../../../common/css/theme.wxss";
+
+$deviceWidth: 750;
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+
+@mixin popUp {
+    height: 80%;
+    border-radius: vmin(26) vmin(26) 0 0;
+}
+
+@mixin coupon-select-box {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    max-width: 100vmin;
+    background-color: #F5F6F9;
+    border-radius: vmin(26) vmin(26) 0 0;
+    user-select: none;
+    &.vertical-screen {
+        height: 100%;
+    }
+    &.full-screen {
+        height: vmin(562);
+        overflow: scroll;
+        margin: vmin(97.5) 0;
+
+        .header-content {
+            position: absolute;
+            width: 90vmin;
+        }
+    }
+    .coupon-header {
+        display: flex;
+        flex-direction: column;
+        .header-content {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            height: vmin(90);
+            padding: 0 vmin(36);
+            top: 0;
+            left: 0;
+            font-size: vmin(32);
+            font-weight: 500;
+            background-color: #ffffff;
+            border-radius: vmin(26) vmin(26) 0 0;
+        }
+        .promo-code-wrap {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 0 vmin(36);
+            height: vmin(115);
+            background-color: #fff;
+            .promo-code-input {
+                width: vmin(470);
+                height: vmin(84);
+                padding: 0 vmin(22);
+                border: vmin(1) solid #DCDCDC;
+                border-right: none;
+                border-radius: vmin(8) 0 0 vmin(8);
+                color: #333;
+                font-size: vmin(30);
+                user-select: text;
+                box-shadow: none;
+            }
+            .promo-code-input::-webkit-input-placeholder {
+                color: #c8c8c8;
+            }
+            .promo-code-input:disabled {
+                color: #999;
+                background-color: #eee;
+            }
+            .promo-code-btn {
+                width: vmin(180);
+                height: vmin(84);
+                line-height: vmin(84);
+                margin: 0;
+                border: none;
+                border-radius: 0 vmin(8) vmin(8) 0;
+                text-align: center;
+                color: #fff;
+                font-size: vmin(27);
+                cursor: pointer;
+            }
+        }
+        .coupon-code-tip {
+            display: flex;
+            align-items: center;
+            padding: 0 vmin(36);
+            background-color: #fff;
+            height: vmin(40);
+            .tips-img {
+                margin-right: 0.88vmin;
+                width: vmin(30);
+                height: vmin(28);
+            }
+            text {
+                font-size: vmin(26);
+                color: #999;
+            }
+        }
+        .coupon-tab_warp{
+            display: flex;
+            justify-items: center;
+            align-items: center;
+            font-size: vmin(35);
+            padding: 0 vmin(36);
+            font-weight: 700;
+            text-align: center;
+            background-color:#fff;
+            text{
+                display: block;
+            }
+            .tabItem{
+                position: relative;
+                width:50%;
+                height:vmin(106);
+                line-height: vmin(106);
+                text-align: center;
+                cursor: pointer;
+            }
+            .greyColor{
+                color: #999999;
+                font-size: vmin(30);
+                font-weight: normal;
+            }
+            .activeBorder{
+                position:absolute;
+                bottom:0;
+                left:50%;
+                transform: translateX(-50%);
+                width:vmin(44);
+                height:vmin(4);
+                background:#09BB07;
+                border-radius: vmin(4);
+            }
+        }
+        .coupon-tips {
+            display: flex;
+            background: #fff;
+            align-items: center;
+            justify-items: center;
+            padding: vmin(10) vmin(36);
+            justify-content: space-between;
+            .coupon-tips-font {
+                line-height: vmin(55);
+                font-size: vmin(26);
+                font-weight: 500;
+                color: #000;
+                .coupon-money-num {
+                    color: #FF4747;
+                }
+            }
+            .coupon-best-combination {
+                min-width: vmin(211);
+                height: vmin(53);
+                text-align: center;
+                line-height: vmin(55);
+                background: #FF821F;
+                border: 0;
+                margin: 0;
+                border-radius: vmin(44);
+                font-size: vmin(26);
+                font-weight: 500;
+                color: #fff;
+            }
+        }
+    }
+    &.vertical-screen {
+        .coupon-list {
+            overflow: scroll;
+            -webkit-overflow-scrolling: touch;
+        }
+    }
+    .coupon-list {
+        box-sizing: border-box;
+        flex: 1; /* 撑满剩余容器高度 */
+        // overflow: scroll;
+        // -webkit-overflow-scrolling: touch;
+        text-align: center;
+        padding: vmin(26) vmin(35) 0;
+
+        .coupon-item {
+            position: relative;
+            display: flex;
+            margin-bottom: vmin(26);
+            border-radius: vmin(8);
+            background: #fff;
+        }
+
+        .not-use-coupon {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+            height: vmin(114);
+            margin-bottom: vmin(26);
+            border-radius: vmin(8);
+            background: #fff;
+            .not-use-text {
+                width: vmin(558);
+                padding-left: vmin(35);
+                font-size: vmin(30);
+                color: #333;
+                text-align: left;
+            }
+            .choose-box {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: vmin(132);
+                height: 100%;
+                .choose-inner {
+                    width: vmin(40);
+                    height: vmin(40);
+                    border-radius: 50%;
+                    border: vmin(4) solid #ccc;
+                }
+                .coupon-not-used {
+                    border: none;
+                }
+            }
+        }
+
+    }
+    
+    .coupon-bottom {
+        height: vmin(100);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #fff;
+        .coupon-confirm-button {
+            height: vmin(80);
+            border-radius: vmin(48);
+            line-height: vmin(80);
+            text-align: center;
+            font-size: vmin(30);
+            font-weight: 500;
+            color: #fff;
+        }
+    }
+    &.vertical-screen {
+        .coupon-bottom {
+            padding: 0 vmin(36);
+            .coupon-confirm-button {
+                background: #FF821F;
+                width: vmin(754);
+            }
+        }
+        .promo-code-btn {
+            background-color: #FF821F !important;
+        }
+    }
+    &.full-screen {
+        .coupon-bottom {
+            width: 100%;
+            position: absolute;
+            bottom: 0;
+            .coupon-confirm-button {
+                background: linear-gradient(270deg, rgba(254,101,0,1) 0%, rgba(255,65,2,1) 100%);
+                width: vmin(712);
+            }
+        }
+        .promo-code-btn {
+            background: linear-gradient(270deg, rgba(254,101,0,1) 0%, rgba(255,65,2,1) 100%);
+        }
+    }
+    .coupon_emptypage{
+        text-align: center;
+        margin: vmin(15) 0 vmin(75) 0;
+        font-size: vmin(26);
+        color:#ADADB4;
+        .coupon_emptyImg{
+            margin-bottom: vmin(16);
+            width: vmin(188);
+            height: vmin(188);
+            background-size: 100% 100%;
+        }
+
+    }
+}
+
+.popUp {
+    @include popUp;
+}
+
+.coupon-select-box {
+    @include coupon-select-box;
+}
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+    $deviceWidth: 1536 !global;
+
+    .popUp {
+        @include popUp;
+    }
+
+    .coupon-select-box {
+        @include coupon-select-box;
+    }
+}
+// PC 放大适配
+@media screen and (min-height: 630px) and (orientation: landscape) {
+    $deviceWidth: 1260 !global;
+  
+    .popUp {
+        @include popUp;
+    }
+
+    .coupon-select-box {
+        @include coupon-select-box;
+    }
+}
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+    $deviceWidth: 1536 !global;
+
+    .popUp {
+        @include popUp;
+    }
+    
+    .coupon-select-box {
+        @include coupon-select-box;
+    }
+}