s-material-react 2.2.48 → 2.2.50

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.
Files changed (10) hide show
  1. package/css/common/card.scss +77 -77
  2. package/css/pages/cube.scss +131 -131
  3. package/css/pages/goodsDetail.scss +644 -644
  4. package/css/pages/order-goodsItem.scss +25 -25
  5. package/css/pages/orderList.scss +126 -126
  6. package/css/pages/paymentMode.scss +101 -101
  7. package/css/pages/placeOrderGroup.scss +364 -363
  8. package/dist/index.js +1 -1
  9. package/dist/static/icon/index.d.ts +15 -14
  10. package/package.json +2 -2
package/css/pages/placeOrderGroup.scss CHANGED
@@ -1,363 +1,364 @@
1
- $radius: 8px;
2
-
3
- .placeOrder-chooseAddress {
4
- .group {
5
- display: flex;
6
- justify-content: space-between;
7
- align-items: center;
8
- margin-bottom: 8px;
9
- line-height: 58px;
10
-
11
- .local {
12
- width: 17px;
13
- height: 16px;
14
- margin-right: 7px;
15
- //background-color: yellowgreen;
16
- display: inline-block;
17
- }
18
-
19
- .address {
20
- font-size: 14px;
21
- color: #000;
22
- }
23
- }
24
-
25
- .address-info {
26
- width: 100%;
27
-
28
- .left {
29
- display: flex;
30
- align-items: center;
31
- gap: 8px;
32
- }
33
-
34
- .left-title {
35
- display: flex;
36
- font-size: 12px;
37
- flex-basis: auto;
38
- color: #333333;
39
- margin-top: 10px;
40
- }
41
-
42
- .left-padding {
43
- padding-left: 5px;
44
- }
45
-
46
- .left-title-default {
47
- background: #34c0bc;
48
- font-size: 10px;
49
- color: #fff;
50
- padding: 2px 4px;
51
- margin-left: 5px;
52
- border-radius: 5px;
53
- }
54
-
55
- .left-detail {
56
- font-size: 16px;
57
- margin-right: auto;
58
- }
59
- }
60
-
61
- .arrow {
62
- width: 6px;
63
- height: 10px;
64
- //background-color: yellowgreen;
65
- }
66
- }
67
-
68
- .orderListItem {
69
- .shop-info-wrap {
70
- display: flex;
71
- align-items: center;
72
- gap: 8px;
73
- margin-bottom: 12px;
74
- }
75
-
76
- .good-name {
77
- font-size: 14px;
78
- color: #333;
79
- }
80
-
81
- .shop-info-price {
82
- // color: #ff2d1e;
83
- font-size: 16px;
84
- }
85
-
86
- .shop-name {
87
- font-size: 16px;
88
- color: #333;
89
- overflow: hidden;
90
- text-overflow: ellipsis;
91
- white-space: nowrap;
92
- }
93
-
94
- .card-item {
95
- grid-template-columns: 100px 1fr;
96
- margin-bottom: 0;
97
- }
98
-
99
- .card-item-img {
100
- height: 100px;
101
- width: 100px;
102
- }
103
- }
104
-
105
- .place-order-goods {
106
- padding: 15px 15px 0;
107
- margin: 12px 12px 0;
108
- border-radius: $radius $radius 0 0;
109
- background: #fff;
110
-
111
- .shop-info-wrap {
112
- display: flex;
113
- align-items: center;
114
- gap: 8px;
115
- margin-bottom: 12px;
116
- }
117
-
118
- .good-name {
119
- font-size: 14px;
120
- color: #333;
121
- }
122
-
123
- .shop-info-price {
124
- // color: #ff2d1e;
125
- font-size: 16px;
126
- }
127
-
128
- .shop-name {
129
- font-size: 16px;
130
- color: #333;
131
- overflow: hidden;
132
- text-overflow: ellipsis;
133
- white-space: nowrap;
134
- }
135
-
136
- .card-item {
137
- grid-template-columns: 100px 1fr;
138
- margin-bottom: 10px;
139
- &:last-of-type {
140
- margin-bottom: unset;
141
- }
142
- }
143
-
144
- .card-item-img {
145
- height: 100px;
146
- width: 100px;
147
- }
148
- }
149
-
150
- .placeOrder-blcWrap {
151
- margin: 0 12px;
152
- padding: 15px 15px 0;
153
- background-color: #fff;
154
-
155
- &.price {
156
- border-radius: $radius;
157
- padding: 15px;
158
- }
159
-
160
- .content {
161
- width: 240px;
162
- height: 100px;
163
- margin-top: 2px;
164
- border: solid 1px #f1f1f1;
165
- padding: 6px;
166
- border-radius: 4px;
167
- }
168
- .title {
169
- font-size: 16px;
170
- font-weight: 500;
171
- color: #333333;
172
- margin-bottom: 17px;
173
- }
174
-
175
- .placeOrder-blcItem {
176
- display: flex;
177
- justify-content: space-between;
178
- margin-bottom: 17px;
179
-
180
- &:last-child {
181
- margin-bottom: 0;
182
- }
183
-
184
- &.express {
185
- font-size: 14px;
186
- }
187
-
188
- .label {
189
- color: #333;
190
- }
191
-
192
- .value {
193
- color: #333;
194
-
195
- .icon {
196
- width: 6px;
197
- height: 10px;
198
- display: inline-block;
199
- //background-color: yellowgreen;
200
- margin-left: 5px;
201
- }
202
- }
203
- }
204
- }
205
-
206
- .placeOrderFooter {
207
- background-color: #fff;
208
- height: 54px;
209
- line-height: 54px;
210
- display: flex;
211
- justify-content: space-between;
212
- padding: 0 12px;
213
- box-sizing: border-box;
214
- align-items: center;
215
- position: sticky;
216
- bottom: 0;
217
- box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.05);
218
-
219
- .price {
220
- font-size: 14px;
221
- color: #34c0bc;
222
- }
223
-
224
- .price-value {
225
- font-size: 18px;
226
- color: #ff2d1e;
227
- }
228
-
229
- .btn {
230
- width: 105px;
231
- height: 40px;
232
- line-height: 40px;
233
- color: #ffffff;
234
- padding: 0 12px;
235
- background-color: #34c0bc;
236
- text-align: center;
237
- border-radius: 20px;
238
- }
239
- }
240
-
241
- .coupon-select {
242
- background-color: #ffffff;
243
- margin: 0 12px;
244
- padding: 15px;
245
- display: flex;
246
- align-items: center;
247
- border-radius: 0 0 $radius $radius;
248
- //display: grid;
249
- //grid-template-columns: 52px 1fr;
250
- font-size: 14px;
251
- .img-fields {
252
- width: 100px;
253
- height: 100px;
254
- overflow: hidden;
255
- border: 1px dashed #ccc;
256
- box-sizing: border-box;
257
- display: flex;
258
- align-items: center;
259
- justify-content: center;
260
- border-radius: 6px;
261
- color: #394259;
262
-
263
- .img {
264
- width: 100px;
265
- display: block;
266
- }
267
- }
268
- }
269
-
270
- .pay-mode {
271
- margin-top: 12px;
272
- margin-bottom: 12px;
273
- border-radius: $radius;
274
- .info {
275
- margin-left: auto;
276
- margin-right: 10px;
277
- display: flex;
278
- align-items: center;
279
- }
280
-
281
- .pay-method-icon {
282
- width: 28px;
283
- height: 28px;
284
- margin-right: 5px;
285
- }
286
- }
287
-
288
- .info {
289
- display: flex;
290
- justify-content: space-between;
291
-
292
- .label {
293
- color: #999;
294
- }
295
-
296
- .icon {
297
- cursor: pointer;
298
- width: 14px;
299
- height: 3px;
300
- margin-top: 8px;
301
- }
302
- }
303
-
304
- .placeOrderAddressTabs {
305
- margin: 0 12px;
306
- border-radius: 8px;
307
- overflow: hidden;
308
-
309
- .delivery-header {
310
- display: flex;
311
- align-items: center;
312
- padding: 12px;
313
-
314
- .delivery-label {
315
- font-size: 14px;
316
- color: #333333;
317
- margin-right: 12px;
318
- white-space: nowrap;
319
- }
320
-
321
- .tabs {
322
- flex: 1;
323
- display: flex;
324
- height: 42px;
325
- line-height: 50px;
326
-
327
- .tabsItem {
328
- flex: 1;
329
- display: inline-block;
330
- font-size: 16px;
331
- position: relative;
332
- color: #333333;
333
- text-align: center;
334
-
335
- &.active {
336
- color: #34c0bc;
337
- font-weight: 500;
338
-
339
- .line {
340
- display: block;
341
- }
342
- }
343
-
344
- .line {
345
- width: 40px;
346
- height: 3px;
347
- background-color: #34c0bc;
348
- position: absolute;
349
- bottom: 0;
350
- left: 50%;
351
- margin-left: -20px;
352
- display: none;
353
- }
354
- }
355
- }
356
- }
357
-
358
- .content {
359
- border-radius: 12px;
360
- background: #fff;
361
- padding: 15px 22px;
362
- }
363
- }
1
+ $radius: 8px;
2
+
3
+ .placeOrder-chooseAddress {
4
+ .group {
5
+ display: flex;
6
+ justify-content: space-between;
7
+ align-items: center;
8
+ margin-bottom: 8px;
9
+ line-height: 58px;
10
+
11
+ .local {
12
+ width: 17px;
13
+ height: 16px;
14
+ margin-right: 7px;
15
+ //background-color: yellowgreen;
16
+ display: inline-block;
17
+ }
18
+
19
+ .address {
20
+ font-size: 14px;
21
+ color: #000;
22
+ }
23
+ }
24
+
25
+ .address-info {
26
+ width: 100%;
27
+
28
+ .left {
29
+ display: flex;
30
+ align-items: center;
31
+ gap: 8px;
32
+ }
33
+
34
+ .left-title {
35
+ display: flex;
36
+ font-size: 12px;
37
+ flex-basis: auto;
38
+ color: #333333;
39
+ margin-top: 10px;
40
+ }
41
+
42
+ .left-padding {
43
+ padding-left: 5px;
44
+ }
45
+
46
+ .left-title-default {
47
+ background: #34c0bc;
48
+ font-size: 10px;
49
+ color: #fff;
50
+ padding: 2px 4px;
51
+ margin-left: 5px;
52
+ border-radius: 5px;
53
+ }
54
+
55
+ .left-detail {
56
+ font-size: 16px;
57
+ margin-right: auto;
58
+ }
59
+ }
60
+
61
+ .arrow {
62
+ width: 6px;
63
+ height: 10px;
64
+ //background-color: yellowgreen;
65
+ }
66
+ }
67
+
68
+ .orderListItem {
69
+ .shop-info-wrap {
70
+ display: flex;
71
+ align-items: center;
72
+ gap: 8px;
73
+ margin-bottom: 12px;
74
+ }
75
+
76
+ .good-name {
77
+ font-size: 14px;
78
+ color: #333;
79
+ }
80
+
81
+ .shop-info-price {
82
+ // color: #ff2d1e;
83
+ font-size: 16px;
84
+ }
85
+
86
+ .shop-name {
87
+ font-size: 16px;
88
+ color: #333;
89
+ overflow: hidden;
90
+ text-overflow: ellipsis;
91
+ white-space: nowrap;
92
+ }
93
+
94
+ .card-item {
95
+ grid-template-columns: 100px 1fr;
96
+ margin-bottom: 0;
97
+ }
98
+
99
+ .card-item-img {
100
+ height: 100px;
101
+ width: 100px;
102
+ }
103
+ }
104
+
105
+ .place-order-goods {
106
+ padding: 15px 15px 0;
107
+ margin: 12px 12px 0;
108
+ border-radius: $radius $radius 0 0;
109
+ background: #fff;
110
+
111
+ .shop-info-wrap {
112
+ display: flex;
113
+ align-items: center;
114
+ gap: 8px;
115
+ margin-bottom: 12px;
116
+ }
117
+
118
+ .good-name {
119
+ font-size: 14px;
120
+ color: #333;
121
+ }
122
+
123
+ .shop-info-price {
124
+ // color: #ff2d1e;
125
+ font-size: 16px;
126
+ }
127
+
128
+ .shop-name {
129
+ font-size: 16px;
130
+ color: #333;
131
+ overflow: hidden;
132
+ text-overflow: ellipsis;
133
+ white-space: nowrap;
134
+ }
135
+
136
+ .card-item {
137
+ grid-template-columns: 100px 1fr;
138
+ margin-bottom: 10px;
139
+ &:last-of-type {
140
+ margin-bottom: unset;
141
+ }
142
+ }
143
+
144
+ .card-item-img {
145
+ height: 100px;
146
+ width: 100px;
147
+ }
148
+ }
149
+
150
+ .placeOrder-blcWrap {
151
+ margin: 0 12px;
152
+ padding: 15px 15px 0;
153
+ background-color: #fff;
154
+
155
+ &.price {
156
+ border-radius: $radius;
157
+ padding: 15px;
158
+ }
159
+
160
+ .content {
161
+ width: 240px;
162
+ height: 100px;
163
+ margin-top: 2px;
164
+ border: solid 1px #f1f1f1;
165
+ padding: 6px;
166
+ border-radius: 4px;
167
+ }
168
+ .title {
169
+ font-size: 16px;
170
+ font-weight: 500;
171
+ color: #333333;
172
+ margin-bottom: 17px;
173
+ }
174
+
175
+ .placeOrder-blcItem {
176
+ display: flex;
177
+ justify-content: space-between;
178
+ margin-bottom: 17px;
179
+
180
+ &:last-child {
181
+ margin-bottom: 0;
182
+ }
183
+
184
+ &.express {
185
+ font-size: 14px;
186
+ }
187
+
188
+ .label {
189
+ color: #333;
190
+ }
191
+
192
+ .value {
193
+ color: #333;
194
+
195
+ .icon {
196
+ width: 6px;
197
+ height: 10px;
198
+ display: inline-block;
199
+ //background-color: yellowgreen;
200
+ margin-left: 5px;
201
+ }
202
+ }
203
+ }
204
+ }
205
+
206
+ .placeOrderFooter {
207
+ background-color: #fff;
208
+ height: 54px;
209
+ line-height: 54px;
210
+ display: flex;
211
+ justify-content: space-between;
212
+ padding: 0 12px;
213
+ box-sizing: border-box;
214
+ align-items: center;
215
+ position: sticky;
216
+ bottom: 0;
217
+ box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.05);
218
+
219
+ .price {
220
+ font-size: 14px;
221
+ color: #34c0bc;
222
+ }
223
+
224
+ .price-value {
225
+ font-size: 18px;
226
+ color: #ff2d1e;
227
+ }
228
+
229
+ .btn {
230
+ width: 105px;
231
+ height: 40px;
232
+ line-height: 40px;
233
+ color: #ffffff;
234
+ padding: 0 12px;
235
+ background-color: #34c0bc;
236
+ text-align: center;
237
+ border-radius: 20px;
238
+ }
239
+ }
240
+
241
+ .coupon-select {
242
+ background-color: #ffffff;
243
+ margin: 0 12px;
244
+ padding: 15px;
245
+ display: flex;
246
+ align-items: center;
247
+ justify-content: space-between;
248
+ border-radius: 0 0 $radius $radius;
249
+ //display: grid;
250
+ //grid-template-columns: 52px 1fr;
251
+ font-size: 14px;
252
+ .img-fields {
253
+ width: 100px;
254
+ height: 100px;
255
+ overflow: hidden;
256
+ border: 1px dashed #ccc;
257
+ box-sizing: border-box;
258
+ display: flex;
259
+ align-items: center;
260
+ justify-content: center;
261
+ border-radius: 6px;
262
+ color: #394259;
263
+
264
+ .img {
265
+ width: 100px;
266
+ display: block;
267
+ }
268
+ }
269
+ }
270
+
271
+ .pay-mode {
272
+ margin-top: 12px;
273
+ margin-bottom: 12px;
274
+ border-radius: $radius;
275
+ .info {
276
+ margin-left: auto;
277
+ margin-right: 10px;
278
+ display: flex;
279
+ align-items: center;
280
+ }
281
+
282
+ .pay-method-icon {
283
+ width: 28px;
284
+ height: 28px;
285
+ margin-right: 5px;
286
+ }
287
+ }
288
+
289
+ .info {
290
+ display: flex;
291
+ justify-content: space-between;
292
+
293
+ .label {
294
+ color: #999;
295
+ }
296
+
297
+ .icon {
298
+ cursor: pointer;
299
+ width: 14px;
300
+ height: 3px;
301
+ margin-top: 8px;
302
+ }
303
+ }
304
+
305
+ .placeOrderAddressTabs {
306
+ margin: 0 12px;
307
+ border-radius: 8px;
308
+ overflow: hidden;
309
+
310
+ .delivery-header {
311
+ display: flex;
312
+ align-items: center;
313
+ padding: 12px;
314
+
315
+ .delivery-label {
316
+ font-size: 14px;
317
+ color: #333333;
318
+ margin-right: 12px;
319
+ white-space: nowrap;
320
+ }
321
+
322
+ .tabs {
323
+ flex: 1;
324
+ display: flex;
325
+ height: 42px;
326
+ line-height: 50px;
327
+
328
+ .tabsItem {
329
+ flex: 1;
330
+ display: inline-block;
331
+ font-size: 16px;
332
+ position: relative;
333
+ color: #333333;
334
+ text-align: center;
335
+
336
+ &.active {
337
+ color: #34c0bc;
338
+ font-weight: 500;
339
+
340
+ .line {
341
+ display: block;
342
+ }
343
+ }
344
+
345
+ .line {
346
+ width: 40px;
347
+ height: 3px;
348
+ background-color: #34c0bc;
349
+ position: absolute;
350
+ bottom: 0;
351
+ left: 50%;
352
+ margin-left: -20px;
353
+ display: none;
354
+ }
355
+ }
356
+ }
357
+ }
358
+
359
+ .content {
360
+ border-radius: 12px;
361
+ background: #fff;
362
+ padding: 15px 22px;
363
+ }
364
+ }