s-material-react 0.1.1 → 0.1.2

package/css/pages/goodsDetail.scss

@@ -1,8 +1,20 @@
 .GoodsDetailWrap {
+    overflow: scroll;
     background-color: #f6f6f6;
     padding-top: 12px;
     padding-bottom: 12px;
 
+    .skeleton {
+        width: 100%;
+        height: 100vh;
+        box-sizing: border-box;
+        padding: 10px;
+    }
+
+    .topSlider {
+        margin-bottom: 10px;
+    }
+
     .goodsDetail-topInfo {
         background-color: #fff;
         margin: 0 10px 12px;
@@ -16,7 +28,7 @@
             color: #000000;
             line-height: 25px;
             display: block;
-            width: 70%;
+            width: 85%;
         }
 
         .price {
@@ -60,6 +72,11 @@
         }
 
         .group {
+            .noPromotion {
+                line-height: 22px;
+                color: #999;
+            }
+
             .item {
                 font-size: 12px;
                 padding: 2px 10px;
@@ -72,7 +89,8 @@
         }
     }
 
-    .goodsDetail-coupon {
+    .goodsDetail-coupon,
+    .goodsDetail-size {
         background-color: #fff;
         margin: 0 10px 12px;
         padding: 13px;
@@ -97,8 +115,104 @@
         }
     }
 
+    .goodsDetailHandleBar {
+        width: 100%;
+        height: 54px;
+        background-color: #ffffff;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        padding: 7px 10px;
+        display: grid;
+        grid-template-columns: 30px 40px 1fr;
+        gap: 20px;
+
+        .linkGroup {
+            text-align: center;
+
+            .icon {
+                display: block;
+                width: 20px;
+                height: 20px;
+                background-color: yellowgreen;
+                margin: 0 auto;
+            }
+
+            .txt {
+                font-size: 12px;
+            }
+        }
+
+        .btnGroup {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+
+            .btn {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-size: 14px;
+
+                &.addCart {
+                    background-color: #959595;
+                    color: #ffffff;
+                    border-top-left-radius: 20px;
+                    border-bottom-left-radius: 20px;
+                }
+
+                &.buy {
+                    background-color: #000000;
+                    color: #ffffff;
+                    border-top-right-radius: 20px;
+                    border-bottom-right-radius: 20px;
+                }
+            }
+        }
+    }
+
+    .goodsDetailTab {
+        background-color: #ffffff;
+        margin: 0 10px 12px;
+        border-radius: 8px;
+        overflow: hidden;
+
+        .tabs {
+            width: 100%;
+            height: 50px;
+            line-height: 50px;
+            text-align: center;
+            margin-bottom: 10px;
+
+            .tabsItem {
+                width: 150px;
+                display: inline-block;
+                padding: 0 30px;
+                font-size: 16px;
+                position: relative;
+
+                &.active {
+                    .line {
+                        display: block;
+                    }
+                }
+
+                .line {
+                    width: 40px;
+                    height: 2px;
+                    background-color: #000000;
+                    position: absolute;
+                    bottom: 0;
+                    left: 50%;
+                    margin-left: -20px;
+                    display: none;
+                }
+            }
+        }
+    }
+
     .goodsDetail-info {
         width: 100%;
+        background-color: #ffffff;
 
         .ssd-module-wrap {
             width: 100%;
@@ -203,3 +317,149 @@
         border-radius: 30px;
     }
 }
+
+.goodsDetail-size-popup {
+    height: 50vh;
+    display: grid;
+    grid-template-rows: calc(50vh - 88px) 88px;
+
+    .closeWrap {
+        box-sizing: content-box;
+        padding-top: 15px;
+        padding-right: 10px;
+        height: 18px;
+        text-align: right;
+
+        .icon {
+            display: inline-block;
+            width: 18px;
+            height: 18px;
+            background-color: yellowgreen;
+        }
+    }
+
+    .content {
+        overflow: scroll;
+
+        .goodsInfo {
+            width: 100%;
+            border-bottom: 1px solid #e2e2e2;
+            padding: 14px 12px 20px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            gap: 10px;
+
+            .lPart {
+                .goodsImg {
+                    width: 70px;
+                    height: 70px;
+                    border: 1px solid #ccc;
+                }
+            }
+
+            .rPart {
+                .name {
+                    font-size: 13px;
+                    width: 98%;
+                    margin-bottom: 6px;
+                }
+
+                .price {
+                    font-size: 14px;
+                    margin-bottom: 4px;
+                }
+
+                .chosen {
+                    color: #a7a7a7;
+                    font-size: 14px;
+                }
+            }
+        }
+
+        .sizeArr {
+            padding: 20px 0;
+            border-bottom: 1px solid #e2e2e2;
+
+            .title {
+                display: block;
+                font-size: 13px;
+                color: #000000;
+                margin-bottom: 15px;
+                padding: 20px 12px 0;
+            }
+
+            .sizeArrItemWrap {
+                padding: 0 12px;
+
+                .sizeItem {
+                    padding: 7px 27px;
+                    border: 1px solid #a7a7a7;
+                    margin-right: 10px;
+                    display: inline-block;
+                    border-radius: 4px;
+                    color: #a7a7a7;
+
+                    &.active {
+                        color: #1a1a1a;
+                        border-color: #1a1a1a;
+                    }
+                }
+            }
+        }
+
+        .countWrap {
+            padding: 16px 12px;
+            display: flex;
+            justify-content: space-between;
+
+            .label {
+                font-size: 13px;
+            }
+
+            .numStep {
+                height: 26px;
+                line-height: 26px;
+                border: 1px solid #bcbcbc;
+                display: grid;
+                grid-template-columns: 26px auto 26px;
+                box-sizing: content-box;
+
+                .content {
+                    border-left: 1px solid #bcbcbc;
+                    border-right: 1px solid #bcbcbc;
+                    text-align: center;
+                    padding: 0 10px;
+                    text-align: center;
+                }
+
+                .btn {
+                    width: 26px;
+                    height: 26px;
+                    line-height: 26px;
+                    text-align: center;
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+
+    .btnWrap {
+        height: 88px;
+        box-sizing: border-box;
+        padding: 0 12px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .btn {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            background-color: #000000;
+            display: block;
+            border-radius: 20px;
+            text-align: center;
+            color: #ffffff;
+        }
+    }
+}

package/css/pages/index.scss

@@ -17,7 +17,12 @@
 @import './evaluateEntry';
 @import './evaluateList';
 @import './addressList';
+@import './placeOrder';
+@import './placeOrderResult';
+@import './couponList';
+@import './cart';
+@import './mine';
 
-//.design-container .monitor .actived:after {
-//    display: none;
-//}
+.design-container .monitor .actived:after {
+    display: none;
+}

package/css/pages/mine.scss

@@ -0,0 +1,96 @@
+.mine {
+    width: 100%;
+    overflow: scroll;
+    background: linear-gradient(-150deg, #d4d4d4 0%, #d4d4d415 25%, #fff 100%);
+    padding: 10px 12px 0;
+    box-sizing: border-box;
+
+    .topBoard {
+        display: flex;
+        justify-content: space-between;
+
+        .icon {
+            width: 20px;
+            height: 20px;
+            background-color: yellowgreen;
+        }
+    }
+
+    .userSetting {
+        padding: 27px 0;
+        display: flex;
+        justify-content: space-between;
+
+        .lPart {
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+
+            .name {
+                font-size: 20px;
+                color: #333;
+            }
+
+            .link {
+                font-size: 12px;
+                color: #999;
+            }
+        }
+
+        .avatar {
+            width: 60px;
+            height: 60px;
+            border: 1px solid #ccc;
+            box-sizing: border-box;
+            border-radius: 50%;
+            overflow: hidden;
+        }
+    }
+
+    .menuList {
+        padding: 25px 13px 34px;
+        box-sizing: border-box;
+
+        .menuListItem {
+            margin-bottom: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .lPart {
+                display: flex;
+                align-items: center;
+
+                .icon {
+                    width: 16px;
+                    height: 16px;
+                    background-color: yellowgreen;
+                    margin-right: 12px;
+                }
+
+                .label {
+                    font-size: 15px;
+                    color: #232323;
+                }
+            }
+
+            .tag {
+                width: 6px;
+                height: 10px;
+                background-color: yellowgreen;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    .banner {
+        width: 100%;
+        height: 130px;
+        border: 1px solid #333333;
+        border-radius: 10px;
+        overflow: hidden;
+    }
+}

package/css/pages/orderEntry.scss

@@ -1,6 +1,8 @@
 .orderEntry {
     background: #fff;
     box-shadow: 0 0 10px 0 rgba(231, 227, 227, 0.5);
+    border-radius: 8px;
+
     .title {
         height: 46px;
         line-height: 46px;
@@ -32,6 +34,7 @@
                 width: 22px;
                 margin-bottom: 7px;
             }
+
             .subTitle {
                 display: block;
                 font-size: 11px;

package/css/pages/placeOrder.scss

@@ -0,0 +1,104 @@
+.placeOrder {
+    background-color: #f9f9f9;
+    overflow: scroll;
+
+    .chooseAddress {
+        height: 48px;
+        line-height: 48px;
+        padding: 0 12px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 8px;
+
+        .group {
+            display: flex;
+            align-items: center;
+
+            .local {
+                width: 17px;
+                height: 16px;
+                margin-right: 7px;
+                background-color: yellowgreen;
+                display: inline-block;
+            }
+
+            .address {
+                font-size: 14px;
+                color: #000;
+            }
+        }
+
+        .arrow {
+            width: 6px;
+            height: 10px;
+            background-color: yellowgreen;
+        }
+    }
+
+    .blcWrap {
+        margin-bottom: 8px;
+        padding: 17px 12px;
+        background-color: #fff;
+
+        .title {
+            font-size: 16px;
+            font-weight: 500;
+            color: #333333;
+            margin-bottom: 17px;
+        }
+
+        .blcItem {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 17px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            .label {
+                color: #333;
+            }
+
+            .value {
+                color: #a7a7a7;
+
+                .icon {
+                    width: 6px;
+                    height: 10px;
+                    display: inline-block;
+                    background-color: yellowgreen;
+                    margin-left: 5px;
+                }
+            }
+        }
+    }
+
+    .placeOrderFooter {
+        background-color: #fff;
+        height: 54px;
+        line-height: 54px;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 12px;
+        box-sizing: border-box;
+        align-items: center;
+
+        .price {
+            font-size: 14px;
+            color: #333333;
+        }
+
+        .btn {
+            width: 105px;
+            height: 40px;
+            line-height: 40px;
+            color: #ffffff;
+            padding: 0 12px;
+            background-color: #000;
+            text-align: center;
+            border-radius: 20px;
+        }
+    }
+}

package/css/pages/placeOrderResult.scss

@@ -0,0 +1,100 @@
+.placeOrderResult {
+    background-color: #f6f6f6;
+    padding: 20px 12px 0;
+    box-sizing: border-box;
+
+    .placeOrderResultContent {
+        background-color: #ffffff;
+        border-radius: 8px;
+        padding: 35px 17px 30px;
+
+        .icon {
+            width: 34px;
+            height: 34px;
+            display: block;
+            background-color: yellowgreen;
+            margin: 0 auto 15px;
+        }
+
+        .tips {
+            border-bottom: 1px solid #dcdcdc;
+            padding-bottom: 27px;
+
+            .title {
+                font-size: 20px;
+                font-weight: 600;
+                display: block;
+                margin: 0 auto;
+                text-align: center;
+            }
+
+            .tip {
+                font-size: 14px;
+                display: block;
+                width: 220px;
+                margin: 0 auto;
+                text-align: center;
+                padding-top: 8px;
+            }
+        }
+
+        //.title {
+        //  font-size: 20px;
+        //  font-weight: 600;
+        //  margin: 0 auto 23px;
+        //  padding-bottom: 27px;
+        //  display: block;
+        //  text-align: center;
+        //  border-bottom: 1px solid #DCDCDC;
+        //}
+
+        .placeOrderResultWrap {
+            padding-top: 20px;
+            margin-bottom: 44px;
+
+            .placeOrderResultItem {
+                display: grid;
+                grid-template-columns: 70px 1fr;
+                gap: 6px;
+                margin-bottom: 10px;
+
+                .label {
+                    font-size: 14px;
+                    color: #999;
+                }
+
+                .value {
+                    font-size: 14px;
+                    color: #000;
+                }
+            }
+        }
+
+        .btnGroup {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 10px;
+
+            .btn {
+                width: 100%;
+                height: 40px;
+                line-height: 40px;
+                border-radius: 20px;
+                text-align: center;
+                box-sizing: border-box;
+                border: 1px solid #000;
+
+                &.black {
+                    background-color: #000;
+                    color: #fff;
+                    margin-left: 0;
+                }
+
+                &.white {
+                    background-color: #fff;
+                    color: #000;
+                }
+            }
+        }
+    }
+}

package/dist/common/coupon/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Coupon: import("react").MemoExoticComponent<({ index, item }: any) => JSX.Element>;

package/dist/common/coupon/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useComponent, antdMobile } from '@brushes/qj-simulate-component';
+const { Radio } = antdMobile;
+const CouponJsx = ({ index, item }) => {
+    const { View, Text } = useComponent();
+    return (_jsx(View, Object.assign({ className: "couponItem" }, { children: _jsxs(View, Object.assign({ className: 'coupon-content' }, { children: [_jsxs(View, Object.assign({ className: 'price' }, { children: [_jsx(Text, Object.assign({ className: 'symbol' }, { children: "\uFFE5" })), _jsx(Text, Object.assign({ className: 'num' }, { children: item.price }))] })), _jsxs(View, Object.assign({ className: 'info' }, { children: [_jsx(Text, Object.assign({ className: 'title' }, { children: item.title })), _jsxs(Text, Object.assign({ className: 'date' }, { children: ["\u6709\u6548\u671F\u81F3\uFF1A", item.date] }))] })), _jsx(Radio, { value: index, className: 'choose' })] })) })));
+};
+export const Coupon = memo(CouponJsx);