s-material-react 0.0.4

package/css/basic/textLine.scss

@@ -0,0 +1,13 @@
+@mixin titleLine($num: 1) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @if ($num == 1) {
+        white-space: nowrap;
+    } @else {
+        white-space: pre-wrap;
+        display: -webkit-box;
+        -webkit-line-clamp: $num;
+        -webkit-box-orient: vertical;
+    }
+}

package/css/common/card.scss

@@ -0,0 +1,52 @@
+@import '../basic/textLine.scss';
+.card-item {
+    display: grid;
+    grid-template-columns: 80px 1fr;
+    gap: 7px;
+    margin-bottom: 12px;
+
+    &-img {
+        width: 80px;
+        height: 80px;
+        border-radius: 8px;
+    }
+
+    &-info {
+        &-container {
+            display: grid;
+            grid-template-columns: 1fr 60px;
+            grid-auto-flow: dense;
+            line-height: 18px;
+
+            &-title {
+                @include titleLine(2);
+                font-size: 13px;
+            }
+
+            &-price {
+                font-size: 14px;
+                color: #333333;
+                font-weight: 600;
+                text-align: right;
+            }
+        }
+
+        &-sub {
+            display: flex;
+            justify-content: space-between;
+            color: #999999;
+            font-size: 13px;
+            margin-bottom: 3px;
+        }
+
+        &-tips {
+            display: inline-block;
+            height: 20px;
+            line-height: 20px;
+            background-color: rgba(255, 22, 67, 0.1);
+            border-radius: 3px;
+            color: #ff1643;
+            padding: 2px 4px;
+        }
+    }
+}

package/css/common/icon.scss

@@ -0,0 +1,42 @@
+@font-face {
+    font-family: 'iconfont'; /* Project id 3540782 */
+    src: url('//at.alicdn.com/t/c/font_3540782_lef74xv0ryn.woff2?t=1668067769509') format('woff2'),
+        url('//at.alicdn.com/t/c/font_3540782_lef74xv0ryn.woff?t=1668067769509') format('woff'),
+        url('//at.alicdn.com/t/c/font_3540782_lef74xv0ryn.ttf?t=1668067769509') format('truetype');
+}
+
+.iconfont {
+    display: inline-block;
+    font: {
+        family: iconfont;
+        variant: normal;
+    }
+    font-size: 16px;
+    line-height: 1;
+    font-style: normal;
+    vertical-align: middle;
+    text-transform: none;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-my:before {
+    content: '\e66f';
+}
+
+.icon-fenleiclassify:before {
+    content: '\e7c0';
+}
+
+.icon-fenxiang:before {
+    content: '\e600';
+}
+
+.icon-cart:before {
+    content: '\e747';
+}
+
+.icon-paixu:before {
+    content: '\e610';
+}

package/css/common/index.scss

@@ -0,0 +1,2 @@
+@import './card.scss';
+@import './icon.scss';

package/css/index.scss

@@ -0,0 +1,3 @@
+@import './common/index.scss';
+@import './pages/index.scss';
+@import '@brushes/qj-simulate-component/css';

package/css/pages/classifyNav.scss

@@ -0,0 +1,19 @@
+.classifyNav {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+
+    .classifyNavItem {
+        .img {
+            width: 40px;
+            height: 40px;
+            display: block;
+            margin: 10px auto 0;
+        }
+        .label {
+            display: block;
+            text-align: center;
+            margin-top: 6px;
+        }
+    }
+}

package/css/pages/cube.scss

@@ -0,0 +1,76 @@
+/*一行两个*/
+
+.cube-type2 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+}
+
+/*一上二下*/
+
+.cube-type3 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 10px;
+
+    & .block:nth-child(1) {
+        grid-area: 1 / 1 / 2 / 3;
+    }
+    & .block:nth-child(2) {
+        grid-area: 2 / 1 / 3 / 2;
+    }
+    & .block:nth-child(3) {
+        grid-area: 2 / 2 / 3 / 3;
+    }
+}
+
+/*一左二右*/
+
+.cube-type4 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 10px;
+
+    & .block:nth-child(1) {
+        grid-area: 1 / 1 / 3 / 2;
+    }
+    & .block:nth-child(2) {
+        grid-area: 1 / 2 / 2 / 3;
+    }
+    & .block:nth-child(3) {
+        grid-area: 2 / 2 / 3 / 3;
+    }
+}
+
+/*田字形*/
+
+.cube-type5 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 10px;
+
+    & .block:nth-child(1) {
+        grid-area: 1 / 1 / 2 / 2;
+    }
+    & .block:nth-child(2) {
+        grid-area: 1 / 2 / 2 / 3;
+    }
+    & .block:nth-child(3) {
+        grid-area: 2 / 1 / 3 / 2;
+    }
+    & .block:nth-child(4) {
+        grid-area: 2 / 2 / 3 / 3;
+    }
+}
+
+.block {
+    height: 200px;
+    width: 100%;
+    overflow: hidden;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}

package/css/pages/goods.scss

@@ -0,0 +1,90 @@
+@import '../basic/textLine';
+
+.goods {
+    background: #fff;
+
+    .goods-img {
+        width: 100%;
+        overflow: hidden;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+    }
+
+    .space {
+        margin-top: 10px;
+        padding: 8px;
+        position: relative;
+
+        .anticon {
+            position: absolute;
+            right: 10px;
+            bottom: 10px;
+        }
+    }
+
+    .titleType {
+        font-size: 16px;
+        margin-bottom: 4px;
+        @include titleLine(2);
+    }
+
+    .subTitle {
+        font-size: 12px;
+        color: #888;
+    }
+
+    .price {
+        font-size: 20px;
+        color: #f00;
+
+        .subPrice {
+            font-size: 14px;
+        }
+    }
+
+    .markedPrice {
+        padding-left: 8px;
+        font-size: 12px;
+        color: #888;
+        text-decoration: line-through;
+    }
+}
+
+.goods-one {
+    .goods-img {
+        height: 310px;
+    }
+}
+
+.goods-two {
+    .subTitle {
+        margin-bottom: 5px;
+    }
+
+    .goods-img {
+        height: 200px;
+    }
+}
+
+.goods-three {
+    .goods {
+        position: relative;
+        display: grid;
+        grid-template-columns: 1fr 200px;
+    }
+
+    .goods-img {
+        height: 150px;
+    }
+
+    .space {
+        margin-top: 0;
+        padding: 18px;
+    }
+
+    .price {
+        position: absolute;
+        bottom: 10px;
+    }
+}

package/css/pages/goodsClassify.scss

@@ -0,0 +1,108 @@
+.goods-classify {
+    padding: 0 10px;
+    &-search {
+        width: 100%;
+        margin-bottom: 17px;
+        height: 34px;
+        background-color: #f4f4f4;
+        border-radius: 20px;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .icon {
+            width: 14px;
+            height: 14px;
+            margin-right: 5px;
+        }
+    }
+}
+
+.goodsClassifyContainer {
+    height: 100vh;
+    background-color: #ffffff;
+    display: grid;
+    grid-template-columns: 90px 1fr;
+    width: 100%;
+    overflow: hidden;
+
+    .side {
+    }
+
+    .main {
+        .content {
+            height: 100%;
+            display: none;
+            color: #cccccc;
+
+            &.active {
+                display: block;
+            }
+
+            .classifyFloor {
+                .titleWrap {
+                    height: 20px;
+                    width: 60%;
+                    //background: greenyellow;
+                    margin: 20px auto;
+                    text-align: center;
+                    position: relative;
+
+                    .title {
+                        color: #333;
+                        font-size: 14px;
+                        background-color: #fff;
+                        height: 20px;
+                        display: inline-block;
+                        padding: 0 10px;
+                        position: relative;
+                        z-index: 1;
+                    }
+
+                    .line {
+                        position: absolute;
+                        width: 100%;
+                        height: 1px;
+                        background-color: #000;
+                        left: 0;
+                        top: 10px;
+                    }
+                }
+
+                .container {
+                    display: grid;
+                    grid-template-columns: repeat(3, 1fr);
+                    gap: 10px;
+                    padding: 0 10px;
+                    box-sizing: border-box;
+
+                    .classifyFloorGoodsItem {
+                        .logo {
+                            width: 70px;
+                            height: 70px;
+                            display: block;
+                            margin-bottom: 12px;
+                        }
+                        .title {
+                            font-size: 12px;
+                            text-align: center;
+                            display: block;
+                            color: #272727;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+.adm-side-bar {
+    --adm-color-box: #f5f5f5;
+    --item-border-radius: 8px;
+}
+.adm-side-bar-item {
+    font-size: 12px;
+}
+.adm-side-bar-item-active {
+    --adm-color-primary: #1677ff;
+    --adm-color-background: #fff;
+}

package/css/pages/goodsList.scss

@@ -0,0 +1,83 @@
+@import '../basic/textLine.scss';
+
+.goodsList {
+    .topInfo {
+        .search {
+            width: 86%;
+            height: 34px;
+            line-height: 34px;
+            background-color: #f4f4f4;
+            border-radius: 20px;
+            margin: 0 auto;
+            text-indent: 10px;
+            .logo {
+                width: 14px;
+                height: 14px;
+                display: inline-block;
+                margin-left: 14px;
+                margin-right: 8px;
+                margin-top: -2px;
+            }
+
+            .title {
+                font-size: 14px;
+                color: #999999;
+            }
+        }
+
+        .sortWrap {
+            height: 43px;
+            line-height: 43px;
+            display: grid;
+            cursor: pointer;
+            grid-template-columns: repeat(4, 1fr);
+
+            .sortItem {
+                text-align: center;
+                &.active {
+                    color: #ff0934;
+                }
+            }
+        }
+    }
+
+    .listWrap {
+        background-color: #f6f6f6;
+        //padding: 10px;
+        .list {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 10px;
+            padding: 10px;
+            .listItem {
+                border-radius: 8px;
+                overflow: hidden;
+                background-color: #fff;
+                padding-bottom: 12px;
+
+                .img {
+                    display: block;
+                    width: 100%;
+                    height: 170px;
+                    background-size: cover;
+                    margin-bottom: 5px;
+                }
+
+                .name {
+                    font-size: 12px;
+                    display: block;
+                    padding: 0 10px;
+                    margin-bottom: 5px;
+                    @include titleLine(1);
+                }
+
+                .price {
+                    display: block;
+                    color: #ff0934;
+                    font-size: 12px;
+                    padding: 0 10px;
+                }
+            }
+        }
+    }
+}

package/css/pages/index.scss

@@ -0,0 +1,17 @@
+@import '../basic/textLine';
+@import './goods.scss';
+@import './title.scss';
+@import './service.scss';
+@import './cube.scss';
+@import './slider.scss';
+@import './goodsGroup.scss';
+@import './orderEntry';
+@import './orderList';
+@import './orderDetail';
+@import './classifyNav';
+@import './goodsClassify';
+@import './goodsList';
+
+.design-container .monitor .actived:after {
+    display: none;
+}

package/css/pages/notice.scss

@@ -0,0 +1,25 @@
+.scroll-wrap {
+    background: #ff3766;
+    padding: 10px 70px 10px 0;
+    height: 50px;
+    line-height: 50px;
+}
+.ovh {
+    overflow: hidden;
+}
+.font28 {
+    font-size: 28px;
+}
+.relative {
+    position: relative;
+}
+.scroll {
+    color: #fff;
+    width: 100%;
+    height: 40px;
+}
+.marquee_text {
+    white-space: nowrap;
+    position: absolute;
+    top: 0;
+}

package/css/pages/order-goodsItem.scss

@@ -0,0 +1,17 @@
+.btnGroup {
+    text-align: right;
+
+    .btn {
+        &.white {
+            --background-color: #fff;
+            --border-color: #000;
+        }
+
+        &.black {
+            --background-color: #000;
+            --border-color: #000;
+            --text-color: #fff;
+            margin-left: 10px;
+        }
+    }
+}

package/css/pages/orderDetail.scss

@@ -0,0 +1,144 @@
+@import './order-goodsItem.scss';
+
+.orderDetail {
+    .orderDetailTopTitle {
+        width: 100%;
+        height: 182px;
+        background: linear-gradient(360deg, #585858 0%, #2d2d2d 100%);
+        box-shadow: 0 2px 20px 0 rgba(227, 227, 227, 0.5);
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .orderDetailTopTitleContent {
+            .title {
+                font-size: 18px;
+                color: #fff;
+            }
+
+            .subTitleWrap {
+                .subTitleIcon {
+                    width: 19px;
+                    height: 19px;
+                    display: inline-block;
+                }
+
+                .subTitle {
+                    font-size: 18px;
+                    color: #fff;
+                }
+            }
+        }
+    }
+
+    .orderDetailContent {
+        background-color: #f6f6f6;
+        padding-bottom: 100px;
+
+        .addressInfo {
+            background: #fff;
+            border-radius: 8px;
+            margin: 0 12px 12px;
+            padding: 17px 14px;
+            display: grid;
+            grid-template-columns: 14px 1fr 6px;
+            gap: 7px;
+            position: relative;
+            //top: -26px;
+
+            .lPart {
+                .icon {
+                    width: 14px;
+                    height: 14px;
+                }
+            }
+
+            .cPart {
+                font-size: 14px;
+            }
+
+            .rPart {
+                .icon {
+                    width: 6px;
+                    height: 10px;
+                    margin-top: 18px;
+                }
+            }
+        }
+
+        .orderDetailGoodsWrap {
+            background: #fff;
+            border-radius: 8px;
+            margin: 0 12px 12px;
+            padding: 17px 14px 0;
+
+            .orderDetailGoodsItem {
+                margin-bottom: 12px;
+
+                .mainInfo {
+                    grid-template-columns: 126px 1fr;
+                }
+            }
+
+            .priceInfo {
+                margin-top: 20px;
+                border-top: 1px solid #dcdcdc;
+                padding: 18px 0 13px;
+
+                .priceInfoFloor {
+                    display: flex;
+                    justify-content: space-between;
+                    color: #999;
+                    margin-bottom: 6px;
+                }
+
+                .top {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #000;
+                }
+            }
+        }
+
+        .express {
+            background: #fff;
+            border-radius: 8px;
+            margin: 0 12px 12px;
+            padding: 13px 14px;
+            display: flex;
+            justify-content: space-between;
+
+            .label {
+                font-size: 14px;
+                color: #000;
+            }
+
+            .name {
+                color: #999;
+            }
+        }
+
+        .orderInfo {
+            background: #fff;
+            border-radius: 8px;
+            margin: 0 12px 12px;
+            padding: 13px 14px;
+
+            .orderInfoItem {
+                font-size: 14px;
+                margin-bottom: 6px;
+                display: grid;
+                grid-template-columns: 70px auto;
+            }
+        }
+
+        .btnGroupFooter {
+            background: #fff;
+            padding: 10px 12px;
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 10px;
+        }
+    }
+}