s-material-react 2.2.54 → 2.2.55

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