s-material-react 2.2.53 → 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.
Files changed (4) hide show
  1. package/css/common/card.scss +77 -77
  2. package/css/pages/placeOrderGroup.scss +369 -364
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
package/css/pages/placeOrderGroup.scss CHANGED
@@ -1,364 +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
- }
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
- }
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
+ }