s-material-react 0.1.0 → 0.1.2

package/css/common/addressItem.scss

@@ -0,0 +1,47 @@
+.addressItem {
+    width: 100%;
+    background-color: #fff;
+    margin-bottom: 10px;
+    border-radius: 5px;
+
+    .upInfo {
+        padding: 15px;
+        box-sizing: border-box;
+        border-bottom: 1px solid #e2e2e2;
+
+        .userInfo {
+            color: #000;
+            font-size: 14px;
+            margin-bottom: 8px;
+        }
+
+        .addressInfo {
+            display: grid;
+            grid-template-columns: 1fr 14px;
+            gap: 10px;
+
+            .address {
+                font-size: 12px;
+                color: #a7a7a7;
+            }
+
+            .icon {
+                width: 14px;
+                height: 14px;
+                background-color: yellowgreen;
+            }
+        }
+    }
+
+    .downInfo {
+        display: flex;
+        box-sizing: border-box;
+        justify-content: space-between;
+        padding: 12px 14px;
+
+        .del {
+            font-size: 12px;
+            color: #a7a7a7;
+        }
+    }
+}

package/css/common/coupon.scss

@@ -0,0 +1,73 @@
+.couponItem {
+    width: 100%;
+    display: inline-block;
+    padding: 10px;
+    position: relative;
+    background: radial-gradient(transparent 0px, transparent 4px, #1a1922 4px, #1a1922) -10px -10px;
+    background-size: 20px 20px;
+    margin-bottom: 14px;
+
+    &:after {
+        content: '';
+        position: absolute;
+        left: 5px;
+        top: 5px;
+        right: 5px;
+        bottom: 5px;
+        //box-shadow: 0 0 20px 1px rgba(0, 0, 0, 1);
+        z-index: -1;
+    }
+
+    .coupon-content {
+        height: 120px;
+        width: 100%;
+        background: #1a1922;
+        display: grid;
+        grid-template-columns: 108px 1fr;
+        position: relative;
+
+        .choose {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: #fff;
+            border-radius: 100%;
+            overflow: hidden;
+        }
+
+        .price {
+            border-right: 1px dashed #fff;
+            text-align: center;
+            line-height: 120px;
+
+            .symbol {
+                font-size: 23px;
+                color: #fff;
+            }
+
+            .num {
+                font-size: 33px;
+                color: #fff;
+                text-align: left;
+            }
+        }
+
+        .info {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+
+            .title {
+                margin-bottom: 12px;
+                font-size: 16px;
+                color: #fff;
+                line-height: 22px;
+            }
+
+            .date {
+                color: rgba(255, 255, 255, 0.45);
+            }
+        }
+    }
+}

package/css/common/evaluateItem.scss

@@ -0,0 +1,58 @@
+.evaluateItem {
+    color: #333333;
+    background-color: #ffffff;
+    padding: 15px 13px 20px;
+    border-bottom: 1px solid #e2e2e2;
+
+    &:last-child {
+        border-bottom: 0 none;
+    }
+
+    .userInfo {
+        display: grid;
+        grid-template-columns: 48px auto;
+        margin-bottom: 12px;
+
+        .avatar {
+            width: 38px;
+            height: 38px;
+            display: inline-block;
+            margin-right: 10px;
+            border-radius: 100%;
+        }
+
+        .userNameWrap {
+            text-align: left;
+            display: flex;
+            justify-content: center;
+            //align-items: center;
+            flex-direction: column;
+
+            .userName {
+                //line-height: 38px;
+            }
+        }
+    }
+
+    .size {
+        font-size: 12px;
+        margin-bottom: 4px;
+    }
+
+    .content {
+        font-size: 14px;
+        margin-bottom: 12px;
+    }
+
+    .img-group {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 7px;
+
+        .img {
+            display: block;
+            border-radius: 4px;
+            width: 100%;
+        }
+    }
+}

package/css/common/index.scss

@@ -1,2 +1,6 @@
 @import './card.scss';
 @import './icon.scss';
+@import './evaluateItem.scss';
+@import './addressItem.scss';
+@import './coupon.scss';
+@import './stepNum.scss';

package/css/common/stepNum.scss

@@ -0,0 +1,20 @@
+.stepNum {
+    border: 1px solid #bcbcbc;
+    display: grid;
+    grid-template-columns: 18px auto 18px;
+    box-sizing: border-box;
+
+    .content {
+        border-left: 1px solid #bcbcbc;
+        border-right: 1px solid #bcbcbc;
+        padding: 0 7px;
+    }
+
+    .btn {
+        width: 18px;
+        height: 18px;
+        line-height: 18px;
+        text-align: center;
+        color: #bcbcbc;
+    }
+}

package/css/pages/addressList.scss

@@ -0,0 +1,29 @@
+.addressList {
+    position: relative;
+    overflow: scroll;
+    padding: 15px 12px 20px;
+    box-sizing: border-box;
+    background-color: #f6f6f6;
+
+    .addBtnWrap {
+        width: 100%;
+        padding: 10px;
+        box-sizing: border-box;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background-color: #fff;
+
+        .addBtn {
+            width: 100%;
+            background-color: #000;
+            height: 34px;
+            line-height: 34px;
+            color: #fff;
+            font-size: 14px;
+            border-radius: 20px;
+            text-align: center;
+            cursor: pointer;
+        }
+    }
+}

package/css/pages/cart.scss

@@ -0,0 +1,130 @@
+.cart {
+    background-color: #f6f6f6;
+    overflow: scroll;
+
+    .edit {
+        text-align: right;
+        border-bottom: 1px solid #e2e2e2;
+        padding: 6px 0;
+        background-color: #ffffff;
+
+        .btn {
+            font-size: 12px;
+        }
+    }
+
+    .itemGroup {
+        .cartItem {
+            width: 100%;
+            padding: 22px 12px;
+            box-sizing: border-box;
+            display: grid;
+            grid-template-columns: 16px 82px 1fr;
+            gap: 10px;
+            border-bottom: 1px solid #e2e2e2;
+            background-color: #ffffff;
+
+            .img {
+                width: 82px;
+                height: 82px;
+                border-radius: 10px;
+            }
+
+            .info {
+                .goodsName {
+                    font-size: 12px;
+                    line-height: 17px;
+                    display: block;
+                    margin-bottom: 3px;
+                }
+
+                .size {
+                    font-size: 12px;
+                    color: #bababa;
+                    margin-bottom: 3px;
+                }
+
+                .handleWrap {
+                    display: flex;
+                    justify-content: space-between;
+
+                    .price {
+                        font-size: 12px;
+                        color: #000;
+                    }
+
+                    .stepper {
+                        height: 18px;
+                        --input-width: 30px;
+                        --button-width: 18px;
+                    }
+                }
+            }
+        }
+    }
+
+    .dashboard {
+        width: 100%;
+        padding: 7px 10px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        background: rgba(255, 255, 255, 0.7);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+
+        .choose {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .check {
+            .priceGroup {
+                display: inline-block;
+                vertical-align: top;
+                margin-right: 8px;
+                color: #a7a7a7;
+
+                .discount {
+                    font-size: 12px;
+                }
+
+                .all {
+                    font-size: 14px;
+                }
+
+                .data {
+                    color: #000000;
+                }
+            }
+
+            .btn {
+                height: 40px;
+                line-height: 40px;
+                padding: 0 26px;
+                border-radius: 20px;
+                background: #000000;
+                font-size: 14px;
+                color: #fff;
+                display: inline-block;
+                vertical-align: top;
+            }
+        }
+
+        .del {
+            .btn {
+                height: 40px;
+                line-height: 40px;
+                padding: 0 26px;
+                border-radius: 20px;
+                background: #ff1643;
+                font-size: 14px;
+                color: #fff;
+                display: inline-block;
+                vertical-align: top;
+            }
+        }
+    }
+}

package/css/pages/couponList.scss

@@ -0,0 +1,204 @@
+.couponList {
+    background-color: #f6f6f6;
+    overflow: scroll;
+
+    .couponTab {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        padding-bottom: 7px;
+        padding-top: 30px;
+        background-color: #ffffff;
+
+        .couponTabItem {
+            color: #999;
+            font-size: 16px;
+            text-align: center;
+            position: relative;
+
+            &.active {
+                color: #000;
+
+                .icon {
+                    display: block;
+                }
+            }
+
+            .icon {
+                width: 23px;
+                height: 2px;
+                background-color: #000;
+                position: absolute;
+                bottom: -7px;
+                left: 50%;
+                margin-left: -12px;
+                border-radius: 20px;
+                display: none;
+            }
+        }
+    }
+
+    .couponListContent {
+        background-color: #f6f6f6;
+        padding: 20px 14px;
+
+        .couponListItem {
+            width: 100%;
+            display: inline-block;
+            padding: 10px;
+            position: relative;
+            background: radial-gradient(transparent 0px, transparent 4px, #1a1922 4px, #1a1922) -10px -10px;
+            background-size: 20px 20px;
+            margin-bottom: 14px;
+            overflow: hidden;
+
+            &:after {
+                content: '';
+                position: absolute;
+                left: 5px;
+                top: 5px;
+                right: 5px;
+                bottom: 5px;
+                //box-shadow: 0 0 20px 1px rgba(0, 0, 0, 1);
+                z-index: -1;
+            }
+
+            &.unused {
+                .coupon-content {
+                    .info {
+                        .btn {
+                            background-color: #ffffff;
+                            color: #393939;
+                        }
+                    }
+                }
+            }
+
+            &.used {
+                .coupon-content {
+                    .info {
+                        .btn {
+                            background-color: rgba(255, 255, 255, 0.29);
+                            color: #393939;
+                        }
+                    }
+                }
+            }
+
+            &.overdue {
+                background: radial-gradient(transparent 0px, transparent 4px, #d9dae1 4px, #d9dae1) -10px -10px;
+                background-size: 20px 20px;
+                .coupon-content {
+                    background: #d9dae1;
+                    .price {
+                        .symbol {
+                            color: #000;
+                        }
+                        .num {
+                            color: #000;
+                        }
+                    }
+                    .info {
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        flex-direction: column;
+
+                        .title {
+                            color: #000000;
+                        }
+
+                        .date {
+                            margin-bottom: 0;
+                            color: rgba(80, 80, 80, 0.45);
+                        }
+
+                        .btn {
+                            display: none;
+                        }
+                    }
+                }
+            }
+
+            .coupon-content {
+                height: 120px;
+                width: 100%;
+                background: #1a1922;
+                display: grid;
+                grid-template-columns: 108px 1fr;
+                position: relative;
+
+                .choose {
+                    position: absolute;
+                    top: 10px;
+                    right: 10px;
+                    background: #fff;
+                    border-radius: 100%;
+                    overflow: hidden;
+                }
+
+                .price {
+                    border-right: 1px dashed #fff;
+                    text-align: center;
+                    line-height: 120px;
+
+                    .symbol {
+                        font-size: 23px;
+                        color: #fff;
+                    }
+
+                    .num {
+                        font-size: 33px;
+                        color: #fff;
+                        text-align: left;
+                    }
+                }
+
+                .info {
+                    padding: 18px;
+                    box-sizing: border-box;
+
+                    .title {
+                        margin-bottom: 4px;
+                        font-size: 16px;
+                        color: #fff;
+                        line-height: 22px;
+                        display: block;
+                        position: relative;
+                        z-index: 2;
+                    }
+
+                    .date {
+                        display: block;
+                        color: rgba(255, 255, 255, 0.45);
+                        font-size: 12px;
+                        margin-bottom: 15px;
+                        position: relative;
+                        z-index: 2;
+                    }
+
+                    .btn {
+                        width: 100px;
+                        height: 27px;
+                        line-height: 27px;
+                        text-align: center;
+                        border-radius: 20px;
+                    }
+                }
+
+                .round {
+                    width: 100px;
+                    height: 100px;
+                    line-height: 75px;
+                    text-align: center;
+                    border-radius: 50%;
+                    border: 10px solid #e4e5e9;
+                    position: absolute;
+                    right: -21px;
+                    bottom: -44px;
+                    z-index: 1;
+                    color: rgba(80, 80, 80, 0.45);
+                }
+            }
+        }
+    }
+}

package/css/pages/evaluateEntry.scss

@@ -0,0 +1,57 @@
+.evaluateEntry {
+    .topInfo {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
+
+        .title {
+            font-size: 14px;
+        }
+
+        .txt {
+            font-size: 12px;
+            color: #999;
+        }
+    }
+
+    .evaluateList-item {
+        color: #333333;
+        padding-bottom: 20px;
+
+        .userInfo {
+            display: grid;
+            grid-template-columns: 48px auto;
+            margin-bottom: 12px;
+
+            .avatar {
+                width: 38px;
+                height: 38px;
+                display: inline-block;
+                margin-right: 10px;
+                border-radius: 100%;
+            }
+
+            .userName {
+                line-height: 38px;
+            }
+        }
+
+        .size {
+            font-size: 12px;
+            margin-bottom: 4px;
+        }
+
+        .content {
+            font-size: 14px;
+        }
+
+        .img-group {
+            display: grid;
+            grid-template-columns: repeat(4, auto);
+            .img {
+                display: block;
+                border-radius: 4px;
+            }
+        }
+    }
+}