s-material-react 2.2.42 → 2.2.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
- ### 物料配置
2
-
3
- #### 目录接口
4
- > src
5
- >> common
1
+ ### 物料配置
2
+
3
+ #### 目录接口
4
+ > src
5
+ >> common
@@ -15,7 +15,7 @@
15
15
  &-info {
16
16
  &-container {
17
17
  display: grid;
18
- grid-template-columns: 1fr 60px;
18
+ grid-template-columns: 1fr 80px;
19
19
  grid-auto-flow: dense;
20
20
  line-height: 18px;
21
21
  justify-content: space-between;
@@ -57,12 +57,21 @@
57
57
  color: #ff1643;
58
58
  padding: 2px 4px;
59
59
  }
60
+ }
61
+ }
60
62
 
61
- .card-item-info-countDown {
62
- background-color: rgba(#ff1643, 0.1);
63
- color: #ff1643;
64
- display: inline-block;
65
- padding: 0 2px;
66
- }
63
+ .card-item-info-countDown {
64
+ background-color: #f2f4f5;
65
+ height: 35px;
66
+ line-height: 35px;
67
+ border-radius: 8px;
68
+ padding-left: 15px;
69
+ display: flex;
70
+ flex-direction: row;
71
+ align-items: center;
72
+
73
+ .count-down-text {
74
+ margin-left: 6px;
75
+ color: #ff2d1e;
67
76
  }
68
77
  }
@@ -1,20 +1,61 @@
1
+ $padding: 16px;
2
+
1
3
  .goodsDetail-topInfo {
2
- background-color: #fff;
3
- margin: 10px;
4
- padding: 13px;
5
4
  display: flex;
6
- // border-bottom: 1px solid #ededed;
7
- box-shadow: 0 0 2px #b6b6b7;
8
-
5
+ border-radius: 8px 8px 0 0;
6
+ background: linear-gradient(180deg, #ff9b2a 0%, #fba038 100%);
9
7
  .lPart {
10
8
  flex: 1;
11
9
 
10
+ .price-container {
11
+ padding: 20px 20px 15px 20px;
12
+ color: #fff;
13
+ background-image: url('https://brushes.oss-cn-shanghai.aliyuncs.com/jinmen/icon/icon1.png');
14
+ background-repeat: no-repeat;
15
+ background-position: right center;
16
+ background-size: contain;
17
+
18
+ .price-content {
19
+ display: flex;
20
+ align-items: center;
21
+ margin-top: 5px;
22
+ font-size: 12px;
23
+ gap: 20px;
24
+ }
25
+
26
+ .price-value {
27
+ font-size: 20px;
28
+ font-weight: 600;
29
+ line-height: 28px;
30
+ }
31
+
32
+ .sale-price {
33
+ color: #ff2d1e;
34
+ background: #fff;
35
+ background: linear-gradient(180deg, #ffefe3 0%, #ffffff 100%);
36
+ border-radius: 8px;
37
+ font-size: 14px;
38
+ font-weight: 600;
39
+ line-height: 28px;
40
+ padding: 0 15px;
41
+
42
+ .price-value {
43
+ font-size: 16px;
44
+ font-weight: 600;
45
+ line-height: 28px;
46
+ }
47
+ }
48
+ }
49
+
12
50
  .name {
13
51
  font-size: 18px;
14
52
  color: #000000;
15
53
  line-height: 25px;
16
54
  display: block;
17
55
  padding-right: 10px;
56
+ border-radius: $padding $padding 0 0;
57
+ padding: 20px $padding 0 $padding;
58
+ background: #fff;
18
59
  }
19
60
 
20
61
  .price {
@@ -69,12 +110,13 @@
69
110
  }
70
111
 
71
112
  .goodsDetail-promotion {
113
+ margin-top: 12px;
72
114
  background-color: #fff;
73
- margin: 10px;
74
- padding: 13px;
115
+ padding: $padding;
75
116
  display: grid;
76
- grid-template-columns: 52px 1fr;
77
- box-shadow: 0 0 2px #b6b6b7;
117
+ grid-template-columns: 60px 1fr;
118
+ border-bottom: 1px solid #f0f0f0;
119
+ padding-bottom: 15px;
78
120
 
79
121
  .label {
80
122
  font-size: 14px;
@@ -82,13 +124,13 @@
82
124
 
83
125
  .group {
84
126
  display: flex;
127
+ gap: 10px;
85
128
  flex-wrap: wrap;
86
- margin: -10px -10px 0 0;
87
129
 
88
130
  .noPromotion {
89
131
  line-height: 1;
90
- padding-top: 14px;
91
132
  color: #999;
133
+ padding-top: 6px;
92
134
  }
93
135
 
94
136
  .item {
@@ -96,25 +138,40 @@
96
138
  padding: 2px 10px;
97
139
  background-color: #f3f3f3;
98
140
  display: inline-block;
99
- margin: 10px 10px 0 0;
100
141
  border-radius: 20px;
101
142
  }
102
143
  }
103
144
  }
104
145
 
146
+ .blod {
147
+ color: #000;
148
+ }
149
+
150
+ .font-14 {
151
+ font-size: 14px;
152
+ }
153
+
154
+ .letter-spacing-1 {
155
+ letter-spacing: 1em;
156
+ }
157
+
105
158
  .goodsDetail-coupon,
106
159
  .goodsDetail-size {
107
160
  background-color: #fff;
108
- margin: 10px;
109
- padding: 13px;
110
- // display: grid;
111
- // grid-template-columns: 62px 1fr;
112
161
  font-size: 14px;
113
- box-shadow: 0 0 2px #b6b6b7;
162
+ padding: $padding;
163
+ color: #999;
164
+
165
+ .goods-supplynum {
166
+ border-bottom: 1px solid #f0f0f0;
167
+ padding-bottom: 15px;
168
+ margin-bottom: 15px;
169
+ }
114
170
 
115
171
  .info {
116
172
  display: flex;
117
173
  justify-content: space-between;
174
+ align-items: center;
118
175
 
119
176
  .label {
120
177
  color: #999;
@@ -122,9 +179,11 @@
122
179
 
123
180
  .icon {
124
181
  cursor: pointer;
125
- width: 14px;
126
- height: 3px;
127
- margin-top: 10px;
182
+ width: 18px;
183
+ height: 18px;
184
+ transform: rotate(180deg);
185
+ margin: unset;
186
+ opacity: 0.5;
128
187
  }
129
188
  }
130
189
  }
@@ -186,15 +245,15 @@
186
245
  &.addCart {
187
246
  background-color: #959595;
188
247
  color: #ffffff;
189
- border-top-left-radius: 20px;
190
- border-bottom-left-radius: 20px;
248
+ border-top-left-radius: 8px !important;
249
+ border-bottom-left-radius: 8px !important;
191
250
  }
192
251
 
193
252
  &.buy {
194
253
  background-color: #34c0bc !important;
195
254
  color: #ffffff;
196
- border-top-right-radius: 20px;
197
- border-bottom-right-radius: 20px;
255
+ border-top-right-radius: 8px !important;
256
+ border-bottom-right-radius: 8px !important;
198
257
  }
199
258
  }
200
259
 
@@ -205,8 +264,8 @@
205
264
 
206
265
  .goodsDetailTab {
207
266
  background-color: #ffffff;
208
- margin: 0 10px 12px;
209
- border-radius: 8px;
267
+ margin-top: 12px;
268
+ border-radius: 16px;
210
269
  overflow: hidden;
211
270
 
212
271
  .tabs {
@@ -230,13 +289,13 @@
230
289
  }
231
290
 
232
291
  .line {
233
- width: 40px;
292
+ width: 60px;
234
293
  height: 2px;
235
- background-color: #000000;
294
+ background-color: #34c0bc;
236
295
  position: absolute;
237
296
  bottom: 0;
238
297
  left: 50%;
239
- margin-left: -20px;
298
+ transform: translateX(-50%);
240
299
  display: none;
241
300
  }
242
301
  }
@@ -244,6 +303,7 @@
244
303
  }
245
304
 
246
305
  .goodsDetail-info {
306
+ padding: 0 10px;
247
307
  .mystyle {
248
308
  width: 100% !important;
249
309
  height: auto;
@@ -473,17 +533,19 @@
473
533
  padding: 0 12px;
474
534
 
475
535
  .sizeItem {
476
- padding: 7px 27px;
477
- border: 1px solid #a7a7a7;
536
+ padding: 10px 27px;
478
537
  margin-right: 10px;
479
538
  display: inline-block;
480
- border-radius: 4px;
481
- color: #a7a7a7;
539
+ border-radius: 8px;
540
+ color: #333333;
482
541
  margin-bottom: 10px;
542
+ background: #f5f8fb;
543
+ border: 1px solid #f5f8fb;
483
544
 
484
545
  &.active {
485
- background: #34c0bc;
486
- color: #fff;
546
+ background: #eafaf9;
547
+ color: #34c0bc;
548
+ border: 1px solid #34c0bc;
487
549
  }
488
550
 
489
551
  &.offShelf {
@@ -531,3 +593,48 @@
531
593
  }
532
594
  }
533
595
  }
596
+
597
+ .goodDetail-container .goodsDetail-size-popup {
598
+ border-radius: 16px 16px 0 0;
599
+ .goodsDetail-size-popup .content .goodsInfo {
600
+ grid-template-columns: 100px 1fr;
601
+ .lPart .goodsImg {
602
+ border-radius: 8px;
603
+ border: unset;
604
+ height: 100px;
605
+ width: 100px;
606
+ }
607
+
608
+ .price {
609
+ color: #ff2d1e;
610
+ font-size: 18px;
611
+ }
612
+ }
613
+
614
+ .countWrap {
615
+ padding: 0;
616
+ margin-top: 30px;
617
+ .adm-stepper-minus .h5-svg {
618
+ &::after {
619
+ content: '-';
620
+ display: block;
621
+ width: 100%;
622
+ height: 100%;
623
+ color: #6a6c6d;
624
+ position: relative;
625
+ top: -4px;
626
+ }
627
+ }
628
+ .adm-stepper-plus .h5-svg {
629
+ &::after {
630
+ content: '+';
631
+ display: block;
632
+ width: 100%;
633
+ height: 100%;
634
+ color: #6a6c6d;
635
+ position: relative;
636
+ top: -4px;
637
+ }
638
+ }
639
+ }
640
+ }
@@ -2,18 +2,23 @@
2
2
  text-align: right;
3
3
 
4
4
  .btn {
5
- border-radius: 30px;
5
+ border-radius: 8px;
6
+ padding: 0 15px;
7
+ height: 34px;
8
+ line-height: 34px;
9
+ text-align: center;
10
+ font-size: 13px;
6
11
 
7
12
  &.white {
8
- // --background-color: #34c0bc;
9
- // --border-color: #34c0bc;
13
+ --background-color: #f1f5f8;
14
+ --border-color: #f1f5f8;
10
15
  margin-left: 10px;
11
16
  }
12
17
 
13
18
  &.black {
14
- --background-color: #34c0bc;
15
- --border-color: #34c0bc;
16
- --text-color: #fff;
19
+ --background-color: #eafaf9;
20
+ --border-color: #eafaf9;
21
+ --text-color: #34c0bc;
17
22
  margin-left: 10px;
18
23
  }
19
24
  }
@@ -3,16 +3,19 @@
3
3
  .order-container {
4
4
  height: 100%;
5
5
  overflow: hidden;
6
- background: #f5f5f5;
7
6
 
8
7
  .qj-tabs {
9
- background: #fff;
10
8
  .default-item {
11
9
  font-size: 12px;
12
10
  }
11
+ .default-item {
12
+ border-width: 0;
13
+ color: #333333;
14
+ }
13
15
  .actived-item {
14
- color: #000000;
15
- border-color: #000000;
16
+ color: #34c0bc;
17
+ border-color: #34c0bc !important;
18
+ border-width: 2px;
16
19
  }
17
20
  }
18
21
 
@@ -55,6 +58,7 @@
55
58
  margin-right: 12px;
56
59
  background: #fff;
57
60
  padding: 15px 15px 10px 15px;
61
+ border-radius: 10px;
58
62
 
59
63
  .topInfo {
60
64
  display: flex;
@@ -89,14 +93,14 @@
89
93
 
90
94
  .goodsItemWrap {
91
95
  padding-bottom: 6px;
92
- border-bottom: 1px solid #f0f0f0;
93
96
  margin-bottom: 10px;
94
97
  }
95
98
 
96
99
  .allInfo {
97
100
  display: flex;
98
101
  justify-content: space-between;
99
- margin-bottom: 14px;
102
+ margin-bottom: 10px;
103
+ margin-top: 10px;
100
104
 
101
105
  .totalNum {
102
106
  font-size: 12px;
@@ -1,14 +1,23 @@
1
1
  .paymentModeWrap {
2
- background-color: #fff;
3
-
4
2
  .paymentMode {
5
- padding-bottom: 65px;
3
+ padding-bottom: 100px;
6
4
  box-sizing: border-box;
7
5
  //height: inherit;
8
6
  //overflow: scroll;
9
7
  .topInfo {
10
- padding: 24px 12px 22px;
11
- border-bottom: 10px solid #fafafa;
8
+ margin-top: 30px;
9
+ margin-bottom: 50px;
10
+ .info {
11
+ display: flex;
12
+ flex-direction: column;
13
+ align-items: center;
14
+ .price {
15
+ font-size: 18px;
16
+ color: #333;
17
+ font-weight: bold;
18
+ margin-bottom: 15px;
19
+ }
20
+ }
12
21
 
13
22
  .title {
14
23
  font-size: 18px;
@@ -29,10 +38,23 @@
29
38
  .paymentGroup {
30
39
  .paymentItem {
31
40
  padding: 16px;
41
+ display: flex;
42
+ align-items: center;
32
43
  border-bottom: 1px solid #f5f5f5;
33
- display: grid;
34
- grid-template-columns: 20px 1fr;
35
- gap: 8px;
44
+
45
+ &:last-of-type {
46
+ border-bottom: none;
47
+ }
48
+
49
+ .paymentItemContent {
50
+ flex: 1;
51
+ margin-left: 5px;
52
+ }
53
+
54
+ .base {
55
+ font-size: 14px;
56
+ color: #333;
57
+ }
36
58
 
37
59
  .base,
38
60
  .info {
@@ -56,20 +78,24 @@
56
78
  box-sizing: border-box;
57
79
  position: sticky;
58
80
  bottom: 0px;
59
- background-color: #fff;
60
81
  //margin-top: -54px;
61
82
 
62
83
  .payment {
63
- border: 1px solid;
84
+ background: #34c0bc;
85
+ color: #fff;
86
+ border-radius: 8px;
64
87
  width: 100%;
65
- //background-color: #000;
66
88
  height: 34px;
67
89
  line-height: 34px;
68
- //color: #fff;
69
90
  font-size: 14px;
70
- //border-radius: 20px;
71
91
  text-align: center;
72
92
  cursor: pointer;
73
93
  }
74
94
  }
75
95
  }
96
+
97
+ .paymentGroupTitle {
98
+ font-size: 12px;
99
+ color: #333;
100
+ margin-left: 25px;
101
+ }