s-material-react 1.3.31 → 1.3.33

package/css/common/card.scss

@@ -18,7 +18,7 @@
       grid-template-columns: 1fr 60px;
       grid-auto-flow: dense;
       line-height: 18px;
-
+      justify-content: space-between;
       &-title {
         @include titleLine(2);
         font-size: 13px;
@@ -33,11 +33,15 @@
     }
 
     &-sub {
-      display: flex;
+      display: grid;
+      grid-template-columns: 1fr 60px;
       justify-content: space-between;
       color: #999999;
       font-size: 13px;
       margin-bottom: 3px;
+      .count {
+        text-align: right;
+      }
     }
 
     &-tips {

package/css/pages/articleDetail.scss

@@ -0,0 +1,19 @@
+.articleDetail {
+  padding: 0 15px;
+
+  .title {
+    font-size: 20px;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+
+  .author {
+    font-size: 14px;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+
+  .content {
+    font-size: 12px;
+  }
+}

package/css/pages/cart.scss

@@ -61,8 +61,8 @@
       border-radius: 10px;
     }
 
-    .info {
-      .goodsName {
+    .cartItem-info {
+      .cartItem-goodsName {
         font-size: 14px;
         min-height: 28px;
         line-height: 17px;
@@ -72,14 +72,14 @@
         text-align: left;
       }
 
-      .size {
+      .cartItem-size {
         font-size: 12px;
         color: #bababa;
         margin-bottom: 6px;
         text-align: left;
       }
 
-      .handleWrap {
+      .cartItem-handleWrap {
         display: flex;
         justify-content: space-between;
 
@@ -96,16 +96,22 @@
       }
     }
   }
+
   //}
 
   .dashboard {
+    height: 50px;
+    line-height: 50px;
     width: 100%;
-    padding: 7px 10px;
+    padding: 0 10px;
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     background: rgba(255, 255, 255, 1);
     border-top: 1px solid #eeeeee;
+    overflow: hidden;
+    position: sticky;
+    bottom: 0;
 
     .choose {
       display: flex;
@@ -129,18 +135,27 @@
     }
 
     .check {
+      display: flex;
+      align-items: center;
+
       .priceGroup {
-        display: inline-block;
         vertical-align: top;
         margin-right: 8px;
         color: #a7a7a7;
+        display: grid;
+        grid-template-rows: 50% 50%;
+        height: 100%;
 
         .discount {
           font-size: 12px;
+          display: flex;
+          align-items: center;
         }
 
         .all {
           font-size: 14px;
+          display: flex;
+          align-items: center;
         }
 
         .data {

package/css/pages/collectionList.scss

@@ -26,6 +26,9 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    background-color: #ffffff;
+    position: sticky;
+    bottom: 0;
 
     .checkAll {
       margin-left: 20px;

package/css/pages/couponList.scss

@@ -52,14 +52,14 @@
 
     .couponListItem {
       width: 100%;
+      box-sizing: border-box;
       display: inline-block;
       padding: 10px;
       position: relative;
-      //background: radial-gradient(transparent 0px, transparent 4px, #1a1922 4px, #1a1922) -10px -10px;
+      background: radial-gradient(transparent 0px, transparent 4px, #1a1922 4px, #1a1922) -10px -10px;
       background-size: 20px 20px;
       margin-bottom: 14px;
       overflow: hidden;
-      box-sizing: border-box;
 
       &:after {
         content: '';
@@ -76,8 +76,8 @@
         .coupon-content {
           .info {
             .btn {
-              //background-color: #ffffff;
-              //color: #393939;
+              background-color: #ffffff;
+              color: #393939;
             }
           }
         }
@@ -87,27 +87,27 @@
         .coupon-content {
           .info {
             .btn {
-              //background-color: rgba(255, 255, 255, 0.29);
-              //color: #393939;
+              background-color: rgba(255, 255, 255, 0.29);
+              color: #393939;
             }
           }
         }
       }
 
       &.overdue {
-        //background: radial-gradient(transparent 0px, transparent 4px, #d9dae1 4px, #d9dae1) -10px -10px;
+        background: radial-gradient(transparent 0px, transparent 4px, #d9dae1 4px, #d9dae1) -10px -10px;
         background-size: 20px 20px;
 
         .coupon-content {
-          //background: #d9dae1;
+          background: #d9dae1;
 
           .price {
             .symbol {
-              //color: #000;
+              color: #000;
             }
 
             .num {
-              //color: #000;
+              color: #000;
             }
           }
 
@@ -118,12 +118,12 @@
             flex-direction: column;
 
             .title {
-              //color: #000000;
+              color: #000000;
             }
 
             .date {
               margin-bottom: 0;
-              //color: rgba(80, 80, 80, 0.45);
+              color: rgba(80, 80, 80, 0.45);
             }
 
             .btn {
@@ -136,7 +136,7 @@
       .coupon-content {
         height: 120px;
         width: 100%;
-        //background: #1a1922;
+        background: #1a1922;
         display: grid;
         grid-template-columns: 108px 1fr;
         position: relative;
@@ -162,19 +162,19 @@
 
           .num {
             font-size: 18px;
-            //color: #fff;
+            color: #fff;
             text-align: left;
           }
         }
 
-        .info {
+        .couponListItem-info {
           padding: 18px;
           box-sizing: border-box;
 
           .title {
             margin-bottom: 4px;
             font-size: 16px;
-            //color: #fff;
+            color: #fff;
             line-height: 22px;
             display: block;
             position: relative;
@@ -183,7 +183,7 @@
 
           .date {
             display: block;
-            //color: rgba(255, 255, 255, 0.45);
+            color: rgba(255, 255, 255, 0.45);
             font-size: 12px;
             margin-bottom: 15px;
             position: relative;

package/css/pages/cube.scss

@@ -5,8 +5,24 @@
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
+  & .outer-shadow {
+    box-shadow: 4px 4px 4px #969292;
+  }
+}
+/* 大图 */
+.outer-shadow {
+  box-shadow: 4px 4px 4px #969292;
 }
+/*一行三个*/
 
+.cube-type10 {
+  height: 200px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  & .outer-shadow {
+    box-shadow: 4px 4px 4px #969292;
+  }
+}
 /*一上二下*/
 
 .cube-type3 {
@@ -15,13 +31,18 @@
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
   gap: 10px;
+  & .outer-shadow {
+    box-shadow: 4px 4px 4px #969292;
+  }
 
   & .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;
   }
@@ -35,6 +56,10 @@
   gap: 10px;
   grid-template-rows: repeat(2, 1fr);
   grid-template-columns: repeat(2, 1fr);
+  & .outer-shadow {
+    box-shadow: 4px 4px 4px #969292;
+  }
+
   & .block:nth-child(1) {
     grid-row: 1 / 3;
   }
@@ -48,21 +73,47 @@
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
   gap: 10px;
-
+  & .outer-shadow {
+    box-shadow: 4px 4px 4px #969292;
+  }
   & .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;
   }
 }
 
+/*一左三右*/
+
+.cube-type6 {
+  height: 400px;
+  display: grid;
+  gap: 10px;
+  grid-template: repeat(2, 1fr) / repeat(3, 1fr);
+  & .outer-shadow {
+    box-shadow: 4px 4px 4px #969292;
+  }
+
+  & .block:nth-child(1) {
+    grid-row: 1 / 4;
+  }
+
+  & .block:nth-child(2) {
+    grid-row: 1 / 2;
+    grid-column: 2/4;
+  }
+}
+
 .block {
   height: 100%;
   width: 100%;

package/css/pages/footprint.scss

@@ -1,4 +1,4 @@
-.collectList {
+.footprint {
   .noDate {
     .img {
       display: block;
@@ -26,6 +26,9 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    background-color: #ffffff;
+    position: sticky;
+    bottom: 0;
 
     .checkAll {
       margin-left: 20px;

package/css/pages/goodsClassify.scss

@@ -105,8 +105,7 @@
               width: 70px;
               height: 70px;
               display: block;
-              margin-bottom: 12px;
-              margin: 0 auto;
+              margin: 0 auto 8px;
             }
 
             .title {