s-material-react 2.2.48 → 2.2.49

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
@@ -1,77 +1,77 @@
1
- @import '../basic/textLine.scss';
2
-
3
- .card-item {
4
- display: grid;
5
- grid-template-columns: 80px 1fr;
6
- gap: 7px;
7
- margin-bottom: 12px;
8
-
9
- .card-item-img {
10
- width: 80px;
11
- height: 80px;
12
- border-radius: 8px;
13
- }
14
-
15
- &-info {
16
- &-container {
17
- display: grid;
18
- grid-template-columns: 1fr 80px;
19
- grid-auto-flow: dense;
20
- line-height: 18px;
21
- justify-content: space-between;
22
- height: 36px;
23
-
24
- &-title {
25
- @include titleLine(2);
26
- font-size: 12px;
27
- }
28
-
29
- &-price {
30
- font-size: 14px;
31
- color: #333333;
32
- font-weight: 600;
33
- text-align: right;
34
- }
35
- }
36
-
37
- &-sub {
38
- display: grid;
39
- grid-template-columns: 1fr 60px;
40
- justify-content: space-between;
41
- color: #999999;
42
- font-size: 12px;
43
- margin-bottom: 3px;
44
- margin-top: 5px;
45
-
46
- .count {
47
- text-align: right;
48
- }
49
- }
50
-
51
- &-tips {
52
- display: inline-block;
53
- height: 20px;
54
- line-height: 20px;
55
- background-color: rgba(255, 22, 67, 0.1);
56
- border-radius: 3px;
57
- color: #ff1643;
58
- padding: 2px 4px;
59
- }
60
- }
61
- }
62
-
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;
76
- }
77
- }
1
+ @import '../basic/textLine.scss';
2
+
3
+ .card-item {
4
+ display: grid;
5
+ grid-template-columns: 80px 1fr;
6
+ gap: 7px;
7
+ margin-bottom: 12px;
8
+
9
+ .card-item-img {
10
+ width: 80px;
11
+ height: 80px;
12
+ border-radius: 8px;
13
+ }
14
+
15
+ &-info {
16
+ &-container {
17
+ display: grid;
18
+ grid-template-columns: 1fr 80px;
19
+ grid-auto-flow: dense;
20
+ line-height: 18px;
21
+ justify-content: space-between;
22
+ height: 36px;
23
+
24
+ &-title {
25
+ @include titleLine(2);
26
+ font-size: 12px;
27
+ }
28
+
29
+ &-price {
30
+ font-size: 14px;
31
+ color: #333333;
32
+ font-weight: 600;
33
+ text-align: right;
34
+ }
35
+ }
36
+
37
+ &-sub {
38
+ display: grid;
39
+ grid-template-columns: 1fr 60px;
40
+ justify-content: space-between;
41
+ color: #999999;
42
+ font-size: 12px;
43
+ margin-bottom: 3px;
44
+ margin-top: 5px;
45
+
46
+ .count {
47
+ text-align: right;
48
+ }
49
+ }
50
+
51
+ &-tips {
52
+ display: inline-block;
53
+ height: 20px;
54
+ line-height: 20px;
55
+ background-color: rgba(255, 22, 67, 0.1);
56
+ border-radius: 3px;
57
+ color: #ff1643;
58
+ padding: 2px 4px;
59
+ }
60
+ }
61
+ }
62
+
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;
76
+ }
77
+ }
@@ -1,131 +1,131 @@
1
- /*一行两个*/
2
-
3
- .cube-type2 {
4
- height: 200px;
5
- display: grid;
6
- grid-template-columns: repeat(2, 1fr);
7
- & .outer-shadow {
8
- box-shadow: 4px 4px 4px #969292;
9
- }
10
- }
11
- /* 大图 */
12
- .outer-shadow {
13
- box-shadow: 4px 4px 4px #969292;
14
- }
15
- /*一行三个*/
16
-
17
- .cube-type10 {
18
- height: 200px;
19
- display: grid;
20
- grid-template-columns: repeat(3, 1fr);
21
- & .outer-shadow {
22
- box-shadow: 4px 4px 4px #969292;
23
- }
24
- }
25
- /*一上二下*/
26
-
27
- .cube-type3 {
28
- height: 400px;
29
- display: grid;
30
- grid-template-columns: repeat(2, 1fr);
31
- grid-template-rows: repeat(2, 1fr);
32
- gap: 10px;
33
- & .outer-shadow {
34
- box-shadow: 4px 4px 4px #969292;
35
- }
36
-
37
- & .block:nth-child(1) {
38
- grid-area: 1 / 1 / 2 / 3;
39
- }
40
-
41
- & .block:nth-child(2) {
42
- grid-area: 2 / 1 / 3 / 2;
43
- }
44
-
45
- & .block:nth-child(3) {
46
- grid-area: 2 / 2 / 3 / 3;
47
- }
48
- }
49
-
50
- /*一左二右*/
51
-
52
- .cube-type4 {
53
- height: 400px;
54
- display: grid;
55
- gap: 10px;
56
- grid-template-rows: repeat(2, 1fr);
57
- grid-template-columns: repeat(2, 1fr);
58
- & .outer-shadow {
59
- box-shadow: 4px 4px 4px #969292;
60
- }
61
-
62
- & .block:nth-child(1) {
63
- grid-row: 1 / 3;
64
- }
65
- }
66
-
67
- /*田字形*/
68
-
69
- .cube-type5 {
70
- height: 400px;
71
- display: grid;
72
- grid-template-columns: repeat(2, 1fr);
73
- grid-template-rows: repeat(2, 1fr);
74
- gap: 10px;
75
- & .outer-shadow {
76
- box-shadow: 4px 4px 4px #969292;
77
- }
78
- & .block:nth-child(1) {
79
- grid-area: 1 / 1 / 2 / 2;
80
- }
81
-
82
- & .block:nth-child(2) {
83
- grid-area: 1 / 2 / 2 / 3;
84
- }
85
-
86
- & .block:nth-child(3) {
87
- grid-area: 2 / 1 / 3 / 2;
88
- }
89
-
90
- & .block:nth-child(4) {
91
- grid-area: 2 / 2 / 3 / 3;
92
- }
93
- }
94
-
95
- /*一左三右*/
96
-
97
- .cube-type6 {
98
- height: 400px;
99
- display: grid;
100
- gap: 10px;
101
- grid-template: repeat(2, 1fr) / repeat(3, 1fr);
102
- & .outer-shadow {
103
- box-shadow: 4px 4px 4px #969292;
104
- }
105
-
106
- & .block:nth-child(1) {
107
- grid-row: 1 / 3;
108
- }
109
-
110
- & .block:nth-child(2) {
111
- grid-row: 1 / 2;
112
- grid-column: 2/4;
113
- }
114
- & .block:nth-child(3) {
115
- grid-row: 2 / 3;
116
- grid-column: 2/3;
117
- }
118
- & .block:nth-child(4) {
119
- grid-row: 2 / 3;
120
- grid-column: 3/4;
121
- }
122
- }
123
-
124
- .block {
125
- height: 100%;
126
- width: 100%;
127
- overflow: hidden;
128
- background-size: cover;
129
- background-repeat: no-repeat;
130
- background-position: center center;
131
- }
1
+ /*一行两个*/
2
+
3
+ .cube-type2 {
4
+ height: 200px;
5
+ display: grid;
6
+ grid-template-columns: repeat(2, 1fr);
7
+ & .outer-shadow {
8
+ box-shadow: 4px 4px 4px #969292;
9
+ }
10
+ }
11
+ /* 大图 */
12
+ .outer-shadow {
13
+ box-shadow: 4px 4px 4px #969292;
14
+ }
15
+ /*一行三个*/
16
+
17
+ .cube-type10 {
18
+ height: 200px;
19
+ display: grid;
20
+ grid-template-columns: repeat(3, 1fr);
21
+ & .outer-shadow {
22
+ box-shadow: 4px 4px 4px #969292;
23
+ }
24
+ }
25
+ /*一上二下*/
26
+
27
+ .cube-type3 {
28
+ height: 400px;
29
+ display: grid;
30
+ grid-template-columns: repeat(2, 1fr);
31
+ grid-template-rows: repeat(2, 1fr);
32
+ gap: 10px;
33
+ & .outer-shadow {
34
+ box-shadow: 4px 4px 4px #969292;
35
+ }
36
+
37
+ & .block:nth-child(1) {
38
+ grid-area: 1 / 1 / 2 / 3;
39
+ }
40
+
41
+ & .block:nth-child(2) {
42
+ grid-area: 2 / 1 / 3 / 2;
43
+ }
44
+
45
+ & .block:nth-child(3) {
46
+ grid-area: 2 / 2 / 3 / 3;
47
+ }
48
+ }
49
+
50
+ /*一左二右*/
51
+
52
+ .cube-type4 {
53
+ height: 400px;
54
+ display: grid;
55
+ gap: 10px;
56
+ grid-template-rows: repeat(2, 1fr);
57
+ grid-template-columns: repeat(2, 1fr);
58
+ & .outer-shadow {
59
+ box-shadow: 4px 4px 4px #969292;
60
+ }
61
+
62
+ & .block:nth-child(1) {
63
+ grid-row: 1 / 3;
64
+ }
65
+ }
66
+
67
+ /*田字形*/
68
+
69
+ .cube-type5 {
70
+ height: 400px;
71
+ display: grid;
72
+ grid-template-columns: repeat(2, 1fr);
73
+ grid-template-rows: repeat(2, 1fr);
74
+ gap: 10px;
75
+ & .outer-shadow {
76
+ box-shadow: 4px 4px 4px #969292;
77
+ }
78
+ & .block:nth-child(1) {
79
+ grid-area: 1 / 1 / 2 / 2;
80
+ }
81
+
82
+ & .block:nth-child(2) {
83
+ grid-area: 1 / 2 / 2 / 3;
84
+ }
85
+
86
+ & .block:nth-child(3) {
87
+ grid-area: 2 / 1 / 3 / 2;
88
+ }
89
+
90
+ & .block:nth-child(4) {
91
+ grid-area: 2 / 2 / 3 / 3;
92
+ }
93
+ }
94
+
95
+ /*一左三右*/
96
+
97
+ .cube-type6 {
98
+ height: 400px;
99
+ display: grid;
100
+ gap: 10px;
101
+ grid-template: repeat(2, 1fr) / repeat(3, 1fr);
102
+ & .outer-shadow {
103
+ box-shadow: 4px 4px 4px #969292;
104
+ }
105
+
106
+ & .block:nth-child(1) {
107
+ grid-row: 1 / 3;
108
+ }
109
+
110
+ & .block:nth-child(2) {
111
+ grid-row: 1 / 2;
112
+ grid-column: 2/4;
113
+ }
114
+ & .block:nth-child(3) {
115
+ grid-row: 2 / 3;
116
+ grid-column: 2/3;
117
+ }
118
+ & .block:nth-child(4) {
119
+ grid-row: 2 / 3;
120
+ grid-column: 3/4;
121
+ }
122
+ }
123
+
124
+ .block {
125
+ height: 100%;
126
+ width: 100%;
127
+ overflow: hidden;
128
+ background-size: cover;
129
+ background-repeat: no-repeat;
130
+ background-position: center center;
131
+ }