s-material-react 2.2.41 → 2.2.43

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
@@ -58,11 +58,21 @@
58
58
  padding: 2px 4px;
59
59
  }
60
60
 
61
- .card-item-info-countDown {
62
- background-color: rgba(#ff1643, 0.1);
63
- color: #ff1643;
64
- display: inline-block;
65
- padding: 0 2px;
66
- }
67
61
  }
68
62
  }
63
+
64
+ .card-item-info-countDown {
65
+ background-color: #F2F4F5;
66
+ height: 35px;
67
+ line-height: 35px;
68
+ border-radius: 8px;
69
+ padding-left: 15px;
70
+ display: flex;
71
+ flex-direction: row;
72
+ align-items: center;
73
+
74
+ .count-down-text {
75
+ margin-left: 6px;
76
+ color: #FF2D1E;
77
+ }
78
+ }
@@ -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,43 @@
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
+
147
+ .blod {
148
+ color: #000;
149
+ }
150
+
151
+
152
+ .font-14 {
153
+ font-size: 14px;
154
+ }
155
+
156
+ .letter-spacing-1 {
157
+ letter-spacing: 1em;
158
+ }
159
+
105
160
  .goodsDetail-coupon,
106
161
  .goodsDetail-size {
107
162
  background-color: #fff;
108
- margin: 10px;
109
- padding: 13px;
110
- // display: grid;
111
- // grid-template-columns: 62px 1fr;
112
163
  font-size: 14px;
113
- box-shadow: 0 0 2px #b6b6b7;
164
+ padding: $padding;
165
+ color: #999;
166
+
167
+ .goods-supplynum {
168
+ border-bottom: 1px solid #F0F0F0;
169
+ padding-bottom: 15px;
170
+ margin-bottom: 15px;
171
+ }
172
+
114
173
 
115
174
  .info {
116
175
  display: flex;
117
176
  justify-content: space-between;
177
+ align-items: center;
118
178
 
119
179
  .label {
120
180
  color: #999;
@@ -122,9 +182,11 @@
122
182
 
123
183
  .icon {
124
184
  cursor: pointer;
125
- width: 14px;
126
- height: 3px;
127
- margin-top: 10px;
185
+ width: 18px;
186
+ height: 18px;
187
+ transform: rotate(180deg);
188
+ margin: unset;
189
+ opacity: 0.5;
128
190
  }
129
191
  }
130
192
  }
@@ -186,15 +248,15 @@
186
248
  &.addCart {
187
249
  background-color: #959595;
188
250
  color: #ffffff;
189
- border-top-left-radius: 20px;
190
- border-bottom-left-radius: 20px;
251
+ border-top-left-radius: 8px!important;
252
+ border-bottom-left-radius: 8px!important;
191
253
  }
192
254
 
193
255
  &.buy {
194
256
  background-color: #34c0bc !important;
195
257
  color: #ffffff;
196
- border-top-right-radius: 20px;
197
- border-bottom-right-radius: 20px;
258
+ border-top-right-radius: 8px!important;
259
+ border-bottom-right-radius: 8px!important;
198
260
  }
199
261
  }
200
262
 
@@ -205,8 +267,8 @@
205
267
 
206
268
  .goodsDetailTab {
207
269
  background-color: #ffffff;
208
- margin: 0 10px 12px;
209
- border-radius: 8px;
270
+ margin-top: 12px;
271
+ border-radius: 16px;
210
272
  overflow: hidden;
211
273
 
212
274
  .tabs {
@@ -230,13 +292,13 @@
230
292
  }
231
293
 
232
294
  .line {
233
- width: 40px;
295
+ width: 60px;
234
296
  height: 2px;
235
- background-color: #000000;
297
+ background-color: #34C0BC;
236
298
  position: absolute;
237
299
  bottom: 0;
238
300
  left: 50%;
239
- margin-left: -20px;
301
+ transform: translateX(-50%);
240
302
  display: none;
241
303
  }
242
304
  }
@@ -244,6 +306,7 @@
244
306
  }
245
307
 
246
308
  .goodsDetail-info {
309
+ padding: 0 10px;
247
310
  .mystyle {
248
311
  width: 100% !important;
249
312
  height: auto;
@@ -473,17 +536,19 @@
473
536
  padding: 0 12px;
474
537
 
475
538
  .sizeItem {
476
- padding: 7px 27px;
477
- border: 1px solid #a7a7a7;
539
+ padding: 10px 27px;
478
540
  margin-right: 10px;
479
541
  display: inline-block;
480
- border-radius: 4px;
481
- color: #a7a7a7;
542
+ border-radius: 8px;
543
+ color: #333333;
482
544
  margin-bottom: 10px;
545
+ background: #F5F8FB;
546
+ border: 1px solid #F5F8FB;
483
547
 
484
548
  &.active {
485
- background: #34c0bc;
486
- color: #fff;
549
+ background: #EAFAF9;
550
+ color: #34C0BC;
551
+ border: 1px solid #34C0BC;
487
552
  }
488
553
 
489
554
  &.offShelf {
@@ -531,3 +596,48 @@
531
596
  }
532
597
  }
533
598
  }
599
+
600
+ .goodDetail-container .goodsDetail-size-popup {
601
+ border-radius: 16px 16px 0 0;
602
+ .goodsDetail-size-popup .content .goodsInfo {
603
+ grid-template-columns: 100px 1fr;
604
+ .lPart .goodsImg {
605
+ border-radius: 8px;
606
+ border: unset;
607
+ height: 100px;
608
+ width: 100px;
609
+ }
610
+
611
+ .price {
612
+ color: #FF2D1E;
613
+ font-size: 18px;
614
+ }
615
+ }
616
+
617
+ .countWrap {
618
+ padding: 0;
619
+ margin-top: 30px;
620
+ .adm-stepper-minus .h5-svg {
621
+ &::after {
622
+ content: '-';
623
+ display: block;
624
+ width: 100%;
625
+ height: 100%;
626
+ color: #6A6C6D;
627
+ position: relative;
628
+ top: -4px;
629
+ }
630
+ }
631
+ .adm-stepper-plus .h5-svg {
632
+ &::after {
633
+ content: '+';
634
+ display: block;
635
+ width: 100%;
636
+ height: 100%;
637
+ color: #6A6C6D;
638
+ position: relative;
639
+ top: -4px;
640
+ }
641
+ }
642
+ }
643
+ }
@@ -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,7 +93,6 @@
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
 
@@ -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
+ }