@nutui/nutui-react-taro 4.0.0-beta.3 → 4.0.0-beta.4
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/CHANGELOG.md +13 -6
- package/dist/cjs/packages/configprovider/types.d.ts +1 -1
- package/dist/cjs/packages/empty/empty.d.ts +4 -11
- package/dist/cjs/packages/empty/empty.js +21 -18
- package/dist/cjs/packages/empty/index.d.ts +1 -1
- package/dist/cjs/packages/empty/style/empty.scss +97 -31
- package/dist/cjs/packages/empty/style/style.css +77 -32
- package/dist/cjs/packages/empty/style/style.harmony.css +77 -32
- package/dist/cjs/packages/empty/style-jmapp/empty.scss +97 -31
- package/dist/cjs/packages/empty/style-jmapp/style.css +77 -32
- package/dist/cjs/packages/empty/style-jrkf/empty.scss +97 -31
- package/dist/cjs/packages/empty/style-jrkf/style.css +77 -32
- package/dist/cjs/packages/rate/index.d.ts +1 -1
- package/dist/cjs/packages/rate/rate.js +54 -8
- package/dist/cjs/packages/rate/style/rate.scss +244 -76
- package/dist/cjs/packages/rate/style/style.css +198 -68
- package/dist/cjs/packages/rate/style/style.harmony.css +198 -68
- package/dist/cjs/packages/rate/style-jmapp/rate.scss +244 -76
- package/dist/cjs/packages/rate/style-jmapp/style.css +198 -68
- package/dist/cjs/packages/rate/style-jrkf/rate.scss +244 -76
- package/dist/cjs/packages/rate/style-jrkf/style.css +198 -68
- package/dist/cjs/packages/steps/style/style.css +1 -1
- package/dist/cjs/packages/steps/style/style.harmony.css +1 -1
- package/dist/cjs/types/spec/empty/base.d.ts +12 -8
- package/dist/cjs/types/spec/empty/base.js +28 -1
- package/dist/cjs/types/spec/rate/base.d.ts +3 -0
- package/dist/es/packages/configprovider/types.d.ts +1 -1
- package/dist/es/packages/empty/empty.d.ts +4 -11
- package/dist/es/packages/empty/empty.js +21 -18
- package/dist/es/packages/empty/index.d.ts +1 -1
- package/dist/es/packages/empty/style/empty.scss +97 -31
- package/dist/es/packages/empty/style/style.css +77 -32
- package/dist/es/packages/empty/style/style.harmony.css +77 -32
- package/dist/es/packages/empty/style-jmapp/empty.scss +97 -31
- package/dist/es/packages/empty/style-jmapp/style.css +77 -32
- package/dist/es/packages/empty/style-jrkf/empty.scss +97 -31
- package/dist/es/packages/empty/style-jrkf/style.css +77 -32
- package/dist/es/packages/rate/index.d.ts +1 -1
- package/dist/es/packages/rate/rate.js +54 -8
- package/dist/es/packages/rate/style/rate.scss +244 -76
- package/dist/es/packages/rate/style/style.css +198 -68
- package/dist/es/packages/rate/style/style.harmony.css +198 -68
- package/dist/es/packages/rate/style-jmapp/rate.scss +244 -76
- package/dist/es/packages/rate/style-jmapp/style.css +198 -68
- package/dist/es/packages/rate/style-jrkf/rate.scss +244 -76
- package/dist/es/packages/rate/style-jrkf/style.css +198 -68
- package/dist/es/packages/steps/style/style.css +1 -1
- package/dist/es/packages/steps/style/style.harmony.css +1 -1
- package/dist/es/types/spec/empty/base.d.ts +15 -11
- package/dist/es/types/spec/empty/base.js +13 -1
- package/dist/es/types/spec/rate/base.d.ts +10 -1
- package/dist/nutui.react.umd.js +97 -34
- package/dist/style-jmapp.css +1 -1
- package/dist/style-jmapp.scss +32 -32
- package/dist/style-jrkf.css +1 -1
- package/dist/style-jrkf.scss +31 -31
- package/dist/style.css +1 -1
- package/dist/style.scss +49 -49
- package/dist/styles/variables-daojia.scss +25 -12
- package/dist/styles/variables-jmapp.scss +42 -17
- package/dist/styles/variables-jrkf.scss +24 -20
- package/dist/styles/variables.scss +32 -24
- package/package.json +1 -1
|
@@ -643,51 +643,96 @@ page {
|
|
|
643
643
|
align-items: center;
|
|
644
644
|
flex-direction: column;
|
|
645
645
|
justify-content: center;
|
|
646
|
-
padding: var(--nutui-empty-padding, calc(
|
|
647
|
-
background-color: var(--nutui-empty-background-color, var(--nutui-color-background-overlay, #ffffff));
|
|
646
|
+
padding: var(--nutui-empty-padding, calc(20px * var(--nut-scale-f, 1)));
|
|
648
647
|
}
|
|
649
|
-
.nut-empty-
|
|
650
|
-
|
|
651
|
-
height: var(--nutui-empty-image-size, calc(160px * var(--nut-scale-f, 1)));
|
|
652
|
-
}
|
|
653
|
-
.nut-empty-base img,
|
|
654
|
-
.nut-empty-base image {
|
|
655
|
-
width: 100%;
|
|
656
|
-
height: 100%;
|
|
657
|
-
}
|
|
658
|
-
.nut-empty-small {
|
|
659
|
-
width: var(--nutui-empty-image-small-size, calc(120px * var(--nut-scale-f, 1)));
|
|
660
|
-
height: var(--nutui-empty-image-small-size, calc(120px * var(--nut-scale-f, 1)));
|
|
661
|
-
}
|
|
662
|
-
.nut-empty-small img,
|
|
663
|
-
.nut-empty-small image {
|
|
648
|
+
.nut-empty-image img,
|
|
649
|
+
.nut-empty-image image {
|
|
664
650
|
width: 100%;
|
|
665
651
|
height: 100%;
|
|
666
652
|
}
|
|
667
653
|
.nut-empty-title {
|
|
668
|
-
|
|
654
|
+
text-align: center;
|
|
655
|
+
color: var(--nutui-empty-title-color, var(--nutui-color-title, #1a1a1a));
|
|
669
656
|
font-weight: var(--nutui-font-weight-bold, 600);
|
|
670
|
-
margin-bottom: var(--nutui-empty-title-margin-bottom, calc(12px * var(--nut-scale-f, 1)));
|
|
671
|
-
color: var(--nutui-color-title, #1a1a1a);
|
|
672
|
-
font-size: var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1))));
|
|
673
|
-
line-height: var(--nutui-empty-title-line-height, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
|
|
674
657
|
}
|
|
675
658
|
.nut-empty-description {
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
}
|
|
680
|
-
.nut-empty-actions-base {
|
|
681
|
-
display: flex;
|
|
682
|
-
flex-direction: row;
|
|
683
|
-
margin-top: calc(24px * var(--nut-scale-f, 1));
|
|
659
|
+
text-align: center;
|
|
660
|
+
color: var(--nutui-empty-description-color, var(--nutui-color-text-help, #888b94));
|
|
661
|
+
font-weight: var(--nutui-font-weight, 400);
|
|
684
662
|
}
|
|
685
|
-
.nut-empty-actions
|
|
663
|
+
.nut-empty-actions {
|
|
686
664
|
display: flex;
|
|
687
665
|
flex-direction: row;
|
|
688
|
-
|
|
666
|
+
justify-content: center;
|
|
689
667
|
}
|
|
690
668
|
.nut-empty-action {
|
|
691
669
|
margin-right: calc(6px * var(--nut-scale-f, 1));
|
|
692
670
|
margin-left: calc(6px * var(--nut-scale-f, 1));
|
|
671
|
+
}
|
|
672
|
+
.nut-empty-partial-body {
|
|
673
|
+
display: flex;
|
|
674
|
+
flex-direction: row;
|
|
675
|
+
align-items: center;
|
|
676
|
+
max-width: 100%;
|
|
677
|
+
}
|
|
678
|
+
.nut-empty-content {
|
|
679
|
+
flex: 1;
|
|
680
|
+
min-width: 0;
|
|
681
|
+
}
|
|
682
|
+
.nut-empty--full {
|
|
683
|
+
padding-top: var(--nutui-empty-full-padding-top, calc(160px * var(--nut-scale-f, 1)));
|
|
684
|
+
}
|
|
685
|
+
.nut-empty--full .nut-empty-image {
|
|
686
|
+
width: var(--nutui-empty-full-image-size, calc(160px * var(--nut-scale-f, 1)));
|
|
687
|
+
height: var(--nutui-empty-full-image-size, calc(160px * var(--nut-scale-f, 1)));
|
|
688
|
+
}
|
|
689
|
+
.nut-empty--full .nut-empty-title {
|
|
690
|
+
font-size: var(--nutui-empty-full-title-font-size, var(--nutui-font-size-md, calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
|
|
691
|
+
line-height: var(--nutui-empty-full-title-line-height, var(--nutui-line-height-xxl, var(--nutui-font-size-xxl, calc(24px * var(--nut-scale-font, var(--nut-scale-f, 1))))));
|
|
692
|
+
}
|
|
693
|
+
.nut-empty--full .nut-empty-description {
|
|
694
|
+
font-size: var(--nutui-empty-full-description-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
|
|
695
|
+
line-height: var(--nutui-empty-full-description-line-height, calc(22px * var(--nut-scale-font, var(--nut-scale-f, 1))));
|
|
696
|
+
}
|
|
697
|
+
.nut-empty--full .nut-empty-actions {
|
|
698
|
+
margin-top: var(--nutui-empty-full-actions-margin-top, calc(8px * var(--nut-scale-f, 1)));
|
|
699
|
+
}
|
|
700
|
+
.nut-empty--half .nut-empty-image {
|
|
701
|
+
width: var(--nutui-empty-half-image-size, calc(80px * var(--nut-scale-f, 1)));
|
|
702
|
+
height: var(--nutui-empty-half-image-size, calc(80px * var(--nut-scale-f, 1)));
|
|
703
|
+
}
|
|
704
|
+
.nut-empty--half .nut-empty-title {
|
|
705
|
+
font-size: var(--nutui-empty-half-title-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
|
|
706
|
+
line-height: var(--nutui-empty-half-title-line-height, calc(22px * var(--nut-scale-font, var(--nut-scale-f, 1))));
|
|
707
|
+
}
|
|
708
|
+
.nut-empty--half .nut-empty-description {
|
|
709
|
+
font-size: var(--nutui-empty-half-description-font-size, var(--nutui-font-size-m, calc(13px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
|
|
710
|
+
line-height: var(--nutui-empty-half-description-line-height, var(--nutui-line-height-2xl, var(--nutui-font-size-2xl, calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1))))));
|
|
711
|
+
}
|
|
712
|
+
.nut-empty--half .nut-empty-actions {
|
|
713
|
+
margin-top: var(--nutui-empty-half-actions-margin-top, calc(8px * var(--nut-scale-f, 1)));
|
|
714
|
+
}
|
|
715
|
+
.nut-empty--partial {
|
|
716
|
+
padding: var(--nutui-empty-partial-padding, calc(0px * var(--nut-scale-f, 1)) calc(16px * var(--nut-scale-f, 1)));
|
|
717
|
+
}
|
|
718
|
+
.nut-empty--partial .nut-empty-partial-body {
|
|
719
|
+
gap: var(--nutui-empty-partial-content-gap, calc(8px * var(--nut-scale-f, 1)));
|
|
720
|
+
}
|
|
721
|
+
.nut-empty--partial .nut-empty-image {
|
|
722
|
+
width: var(--nutui-empty-partial-image-size, calc(32px * var(--nut-scale-f, 1)));
|
|
723
|
+
height: var(--nutui-empty-partial-image-size, calc(32px * var(--nut-scale-f, 1)));
|
|
724
|
+
}
|
|
725
|
+
.nut-empty--partial .nut-empty-title {
|
|
726
|
+
text-align: left;
|
|
727
|
+
font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, calc(13px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
|
|
728
|
+
line-height: var(--nutui-empty-partial-description-line-height, calc(32px * var(--nut-scale-font, var(--nut-scale-f, 1))));
|
|
729
|
+
color: var(--nutui-empty-title-color, var(--nutui-color-title, #1a1a1a));
|
|
730
|
+
font-weight: var(--nutui-font-weight, 400);
|
|
731
|
+
}
|
|
732
|
+
.nut-empty--partial .nut-empty-description {
|
|
733
|
+
text-align: left;
|
|
734
|
+
font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, calc(13px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
|
|
735
|
+
line-height: var(--nutui-empty-partial-description-line-height, calc(32px * var(--nut-scale-font, var(--nut-scale-f, 1))));
|
|
736
|
+
color: var(--nutui-empty-description-color, var(--nutui-color-text-help, #888b94));
|
|
737
|
+
font-weight: var(--nutui-font-weight, 400);
|
|
693
738
|
}
|
|
@@ -6,23 +6,8 @@
|
|
|
6
6
|
flex-direction: column;
|
|
7
7
|
justify-content: center;
|
|
8
8
|
padding: $empty-padding;
|
|
9
|
-
background-color: $empty-background-color;
|
|
10
|
-
|
|
11
|
-
&-base {
|
|
12
|
-
width: $empty-image-size;
|
|
13
|
-
height: $empty-image-size;
|
|
14
|
-
|
|
15
|
-
img,
|
|
16
|
-
image {
|
|
17
|
-
width: 100%;
|
|
18
|
-
height: 100%;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
&-small {
|
|
23
|
-
width: $empty-image-small-size;
|
|
24
|
-
height: $empty-image-small-size;
|
|
25
9
|
|
|
10
|
+
&-image {
|
|
26
11
|
img,
|
|
27
12
|
image {
|
|
28
13
|
width: 100%;
|
|
@@ -31,32 +16,113 @@
|
|
|
31
16
|
}
|
|
32
17
|
|
|
33
18
|
&-title {
|
|
34
|
-
|
|
19
|
+
text-align: center;
|
|
20
|
+
color: $empty-title-color;
|
|
35
21
|
font-weight: $font-weight-bold;
|
|
36
|
-
margin-bottom: $empty-title-margin-bottom;
|
|
37
|
-
color: $color-title;
|
|
38
|
-
font-size: $font-size-l;
|
|
39
|
-
line-height: $empty-title-line-height;
|
|
40
22
|
}
|
|
41
23
|
|
|
42
24
|
&-description {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
&-actions-base {
|
|
48
|
-
display: flex;
|
|
49
|
-
flex-direction: row;
|
|
50
|
-
margin-top: scale-px(24px);
|
|
25
|
+
text-align: center;
|
|
26
|
+
color: $empty-description-color;
|
|
27
|
+
font-weight: $font-weight;
|
|
51
28
|
}
|
|
52
|
-
|
|
29
|
+
|
|
30
|
+
&-actions {
|
|
53
31
|
display: flex;
|
|
54
32
|
flex-direction: row;
|
|
55
|
-
|
|
33
|
+
justify-content: center;
|
|
56
34
|
}
|
|
57
35
|
|
|
58
36
|
&-action {
|
|
59
37
|
margin-right: scale-px(6px);
|
|
60
38
|
margin-left: scale-px(6px);
|
|
61
39
|
}
|
|
40
|
+
|
|
41
|
+
&-partial-body {
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: row;
|
|
44
|
+
align-items: center;
|
|
45
|
+
max-width: 100%;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&-content {
|
|
49
|
+
flex: 1;
|
|
50
|
+
min-width: 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// 全屏型:整页无数据
|
|
54
|
+
&--full {
|
|
55
|
+
padding-top: $empty-full-padding-top;
|
|
56
|
+
|
|
57
|
+
.nut-empty-image {
|
|
58
|
+
width: $empty-full-image-size;
|
|
59
|
+
height: $empty-full-image-size;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.nut-empty-title {
|
|
63
|
+
font-size: $empty-full-title-font-size;
|
|
64
|
+
line-height: $empty-full-title-line-height;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.nut-empty-description {
|
|
68
|
+
font-size: $empty-full-description-font-size;
|
|
69
|
+
line-height: $empty-full-description-line-height;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.nut-empty-actions {
|
|
73
|
+
margin-top: $empty-full-actions-margin-top;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// 半屏型:模块、弹层等区域
|
|
78
|
+
&--half {
|
|
79
|
+
.nut-empty-image {
|
|
80
|
+
width: $empty-half-image-size;
|
|
81
|
+
height: $empty-half-image-size;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.nut-empty-title {
|
|
85
|
+
font-size: $empty-half-title-font-size;
|
|
86
|
+
line-height: $empty-half-title-line-height;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.nut-empty-description {
|
|
90
|
+
font-size: $empty-half-description-font-size;
|
|
91
|
+
line-height: $empty-half-description-line-height;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.nut-empty-actions {
|
|
95
|
+
margin-top: $empty-half-actions-margin-top;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// 局部型:横向图文
|
|
100
|
+
&--partial {
|
|
101
|
+
padding: $empty-partial-padding;
|
|
102
|
+
|
|
103
|
+
.nut-empty-partial-body {
|
|
104
|
+
gap: $empty-partial-content-gap;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.nut-empty-image {
|
|
108
|
+
width: $empty-partial-image-size;
|
|
109
|
+
height: $empty-partial-image-size;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.nut-empty-title {
|
|
113
|
+
text-align: left;
|
|
114
|
+
font-size: $empty-partial-description-font-size;
|
|
115
|
+
line-height: $empty-partial-description-line-height;
|
|
116
|
+
color: $empty-title-color;
|
|
117
|
+
font-weight: $font-weight;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.nut-empty-description {
|
|
121
|
+
text-align: left;
|
|
122
|
+
font-size: $empty-partial-description-font-size;
|
|
123
|
+
line-height: $empty-partial-description-line-height;
|
|
124
|
+
color: $empty-description-color;
|
|
125
|
+
font-weight: $font-weight;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
62
128
|
}
|
|
@@ -9,51 +9,96 @@
|
|
|
9
9
|
align-items: center;
|
|
10
10
|
flex-direction: column;
|
|
11
11
|
justify-content: center;
|
|
12
|
-
padding: var(--nutui-empty-padding,
|
|
13
|
-
background-color: var(--nutui-empty-background-color, #fff);
|
|
12
|
+
padding: var(--nutui-empty-padding, 20px);
|
|
14
13
|
}
|
|
15
|
-
.nut-empty-
|
|
16
|
-
|
|
17
|
-
height: var(--nutui-empty-image-size, 160px);
|
|
18
|
-
}
|
|
19
|
-
.nut-empty-base img,
|
|
20
|
-
.nut-empty-base image {
|
|
21
|
-
width: 100%;
|
|
22
|
-
height: 100%;
|
|
23
|
-
}
|
|
24
|
-
.nut-empty-small {
|
|
25
|
-
width: var(--nutui-empty-image-small-size, 120px);
|
|
26
|
-
height: var(--nutui-empty-image-small-size, 120px);
|
|
27
|
-
}
|
|
28
|
-
.nut-empty-small img,
|
|
29
|
-
.nut-empty-small image {
|
|
14
|
+
.nut-empty-image img,
|
|
15
|
+
.nut-empty-image image {
|
|
30
16
|
width: 100%;
|
|
31
17
|
height: 100%;
|
|
32
18
|
}
|
|
33
19
|
.nut-empty-title {
|
|
34
|
-
|
|
20
|
+
text-align: center;
|
|
21
|
+
color: var(--nutui-empty-title-color, var(--nutui-color-title));
|
|
35
22
|
font-weight: var(--nutui-font-weight-bold);
|
|
36
|
-
margin-bottom: var(--nutui-empty-title-margin-bottom, 8px);
|
|
37
|
-
color: var(--nutui-color-title);
|
|
38
|
-
font-size: var(--nutui-font-text-large);
|
|
39
|
-
line-height: var(--nutui-empty-title-line-height, var(--nutui-font-text));
|
|
40
23
|
}
|
|
41
24
|
.nut-empty-description {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
.nut-empty-actions-base {
|
|
47
|
-
display: flex;
|
|
48
|
-
flex-direction: row;
|
|
49
|
-
margin-top: scale-px(24px);
|
|
25
|
+
text-align: center;
|
|
26
|
+
color: var(--nutui-empty-description-color, var(--nutui-color-text-help));
|
|
27
|
+
font-weight: var(--nutui-font-weight);
|
|
50
28
|
}
|
|
51
|
-
.nut-empty-actions
|
|
29
|
+
.nut-empty-actions {
|
|
52
30
|
display: flex;
|
|
53
31
|
flex-direction: row;
|
|
54
|
-
|
|
32
|
+
justify-content: center;
|
|
55
33
|
}
|
|
56
34
|
.nut-empty-action {
|
|
57
35
|
margin-right: scale-px(6px);
|
|
58
36
|
margin-left: scale-px(6px);
|
|
37
|
+
}
|
|
38
|
+
.nut-empty-partial-body {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: row;
|
|
41
|
+
align-items: center;
|
|
42
|
+
max-width: 100%;
|
|
43
|
+
}
|
|
44
|
+
.nut-empty-content {
|
|
45
|
+
flex: 1;
|
|
46
|
+
min-width: 0;
|
|
47
|
+
}
|
|
48
|
+
.nut-empty--full {
|
|
49
|
+
padding-top: var(--nutui-empty-full-padding-top, 160px);
|
|
50
|
+
}
|
|
51
|
+
.nut-empty--full .nut-empty-image {
|
|
52
|
+
width: var(--nutui-empty-full-image-size, 160px);
|
|
53
|
+
height: var(--nutui-empty-full-image-size, 160px);
|
|
54
|
+
}
|
|
55
|
+
.nut-empty--full .nut-empty-title {
|
|
56
|
+
font-size: var(--nutui-empty-full-title-font-size, var(--nutui-font-size-md, 16px));
|
|
57
|
+
line-height: var(--nutui-empty-full-title-line-height, var(--nutui-line-height-xxl, var(--nutui-font-size-8)));
|
|
58
|
+
}
|
|
59
|
+
.nut-empty--full .nut-empty-description {
|
|
60
|
+
font-size: var(--nutui-empty-full-description-font-size, var(--nutui-font-text));
|
|
61
|
+
line-height: var(--nutui-empty-full-description-line-height, 22px);
|
|
62
|
+
}
|
|
63
|
+
.nut-empty--full .nut-empty-actions {
|
|
64
|
+
margin-top: var(--nutui-empty-full-actions-margin-top, 8px);
|
|
65
|
+
}
|
|
66
|
+
.nut-empty--half .nut-empty-image {
|
|
67
|
+
width: var(--nutui-empty-half-image-size, 80px);
|
|
68
|
+
height: var(--nutui-empty-half-image-size, 80px);
|
|
69
|
+
}
|
|
70
|
+
.nut-empty--half .nut-empty-title {
|
|
71
|
+
font-size: var(--nutui-empty-half-title-font-size, var(--nutui-font-text-small));
|
|
72
|
+
line-height: var(--nutui-empty-half-title-line-height, 22px);
|
|
73
|
+
}
|
|
74
|
+
.nut-empty--half .nut-empty-description {
|
|
75
|
+
font-size: var(--nutui-empty-half-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
|
|
76
|
+
line-height: var(--nutui-empty-half-description-line-height, var(--nutui-line-height-2xl, var(--nutui-font-size-2xl, 20px)));
|
|
77
|
+
}
|
|
78
|
+
.nut-empty--half .nut-empty-actions {
|
|
79
|
+
margin-top: var(--nutui-empty-half-actions-margin-top, 8px);
|
|
80
|
+
}
|
|
81
|
+
.nut-empty--partial {
|
|
82
|
+
padding: var(--nutui-empty-partial-padding, 0px 16px);
|
|
83
|
+
}
|
|
84
|
+
.nut-empty--partial .nut-empty-partial-body {
|
|
85
|
+
gap: var(--nutui-empty-partial-content-gap, 8px);
|
|
86
|
+
}
|
|
87
|
+
.nut-empty--partial .nut-empty-image {
|
|
88
|
+
width: var(--nutui-empty-partial-image-size, 32px);
|
|
89
|
+
height: var(--nutui-empty-partial-image-size, 32px);
|
|
90
|
+
}
|
|
91
|
+
.nut-empty--partial .nut-empty-title {
|
|
92
|
+
text-align: left;
|
|
93
|
+
font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
|
|
94
|
+
line-height: var(--nutui-empty-partial-description-line-height, 32px);
|
|
95
|
+
color: var(--nutui-empty-title-color, var(--nutui-color-title));
|
|
96
|
+
font-weight: var(--nutui-font-weight);
|
|
97
|
+
}
|
|
98
|
+
.nut-empty--partial .nut-empty-description {
|
|
99
|
+
text-align: left;
|
|
100
|
+
font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
|
|
101
|
+
line-height: var(--nutui-empty-partial-description-line-height, 32px);
|
|
102
|
+
color: var(--nutui-empty-description-color, var(--nutui-color-text-help));
|
|
103
|
+
font-weight: var(--nutui-font-weight);
|
|
59
104
|
}
|
|
@@ -6,23 +6,8 @@
|
|
|
6
6
|
flex-direction: column;
|
|
7
7
|
justify-content: center;
|
|
8
8
|
padding: $empty-padding;
|
|
9
|
-
background-color: $empty-background-color;
|
|
10
|
-
|
|
11
|
-
&-base {
|
|
12
|
-
width: $empty-image-size;
|
|
13
|
-
height: $empty-image-size;
|
|
14
|
-
|
|
15
|
-
img,
|
|
16
|
-
image {
|
|
17
|
-
width: 100%;
|
|
18
|
-
height: 100%;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
&-small {
|
|
23
|
-
width: $empty-image-small-size;
|
|
24
|
-
height: $empty-image-small-size;
|
|
25
9
|
|
|
10
|
+
&-image {
|
|
26
11
|
img,
|
|
27
12
|
image {
|
|
28
13
|
width: 100%;
|
|
@@ -31,32 +16,113 @@
|
|
|
31
16
|
}
|
|
32
17
|
|
|
33
18
|
&-title {
|
|
34
|
-
|
|
19
|
+
text-align: center;
|
|
20
|
+
color: $empty-title-color;
|
|
35
21
|
font-weight: $font-weight-bold;
|
|
36
|
-
margin-bottom: $empty-title-margin-bottom;
|
|
37
|
-
color: $color-title;
|
|
38
|
-
font-size: $font-size-l;
|
|
39
|
-
line-height: $empty-title-line-height;
|
|
40
22
|
}
|
|
41
23
|
|
|
42
24
|
&-description {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
&-actions-base {
|
|
48
|
-
display: flex;
|
|
49
|
-
flex-direction: row;
|
|
50
|
-
margin-top: scale-px(24px);
|
|
25
|
+
text-align: center;
|
|
26
|
+
color: $empty-description-color;
|
|
27
|
+
font-weight: $font-weight;
|
|
51
28
|
}
|
|
52
|
-
|
|
29
|
+
|
|
30
|
+
&-actions {
|
|
53
31
|
display: flex;
|
|
54
32
|
flex-direction: row;
|
|
55
|
-
|
|
33
|
+
justify-content: center;
|
|
56
34
|
}
|
|
57
35
|
|
|
58
36
|
&-action {
|
|
59
37
|
margin-right: scale-px(6px);
|
|
60
38
|
margin-left: scale-px(6px);
|
|
61
39
|
}
|
|
40
|
+
|
|
41
|
+
&-partial-body {
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: row;
|
|
44
|
+
align-items: center;
|
|
45
|
+
max-width: 100%;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&-content {
|
|
49
|
+
flex: 1;
|
|
50
|
+
min-width: 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// 全屏型:整页无数据
|
|
54
|
+
&--full {
|
|
55
|
+
padding-top: $empty-full-padding-top;
|
|
56
|
+
|
|
57
|
+
.nut-empty-image {
|
|
58
|
+
width: $empty-full-image-size;
|
|
59
|
+
height: $empty-full-image-size;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.nut-empty-title {
|
|
63
|
+
font-size: $empty-full-title-font-size;
|
|
64
|
+
line-height: $empty-full-title-line-height;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.nut-empty-description {
|
|
68
|
+
font-size: $empty-full-description-font-size;
|
|
69
|
+
line-height: $empty-full-description-line-height;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.nut-empty-actions {
|
|
73
|
+
margin-top: $empty-full-actions-margin-top;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// 半屏型:模块、弹层等区域
|
|
78
|
+
&--half {
|
|
79
|
+
.nut-empty-image {
|
|
80
|
+
width: $empty-half-image-size;
|
|
81
|
+
height: $empty-half-image-size;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.nut-empty-title {
|
|
85
|
+
font-size: $empty-half-title-font-size;
|
|
86
|
+
line-height: $empty-half-title-line-height;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.nut-empty-description {
|
|
90
|
+
font-size: $empty-half-description-font-size;
|
|
91
|
+
line-height: $empty-half-description-line-height;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.nut-empty-actions {
|
|
95
|
+
margin-top: $empty-half-actions-margin-top;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// 局部型:横向图文
|
|
100
|
+
&--partial {
|
|
101
|
+
padding: $empty-partial-padding;
|
|
102
|
+
|
|
103
|
+
.nut-empty-partial-body {
|
|
104
|
+
gap: $empty-partial-content-gap;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.nut-empty-image {
|
|
108
|
+
width: $empty-partial-image-size;
|
|
109
|
+
height: $empty-partial-image-size;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.nut-empty-title {
|
|
113
|
+
text-align: left;
|
|
114
|
+
font-size: $empty-partial-description-font-size;
|
|
115
|
+
line-height: $empty-partial-description-line-height;
|
|
116
|
+
color: $empty-title-color;
|
|
117
|
+
font-weight: $font-weight;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.nut-empty-description {
|
|
121
|
+
text-align: left;
|
|
122
|
+
font-size: $empty-partial-description-font-size;
|
|
123
|
+
line-height: $empty-partial-description-line-height;
|
|
124
|
+
color: $empty-description-color;
|
|
125
|
+
font-weight: $font-weight;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
62
128
|
}
|
|
@@ -9,51 +9,96 @@
|
|
|
9
9
|
align-items: center;
|
|
10
10
|
flex-direction: column;
|
|
11
11
|
justify-content: center;
|
|
12
|
-
padding: var(--nutui-empty-padding,
|
|
13
|
-
background-color: var(--nutui-empty-background-color, #fff);
|
|
12
|
+
padding: var(--nutui-empty-padding, 20px);
|
|
14
13
|
}
|
|
15
|
-
.nut-empty-
|
|
16
|
-
|
|
17
|
-
height: var(--nutui-empty-image-size, 160px);
|
|
18
|
-
}
|
|
19
|
-
.nut-empty-base img,
|
|
20
|
-
.nut-empty-base image {
|
|
21
|
-
width: 100%;
|
|
22
|
-
height: 100%;
|
|
23
|
-
}
|
|
24
|
-
.nut-empty-small {
|
|
25
|
-
width: var(--nutui-empty-image-small-size, 120px);
|
|
26
|
-
height: var(--nutui-empty-image-small-size, 120px);
|
|
27
|
-
}
|
|
28
|
-
.nut-empty-small img,
|
|
29
|
-
.nut-empty-small image {
|
|
14
|
+
.nut-empty-image img,
|
|
15
|
+
.nut-empty-image image {
|
|
30
16
|
width: 100%;
|
|
31
17
|
height: 100%;
|
|
32
18
|
}
|
|
33
19
|
.nut-empty-title {
|
|
34
|
-
|
|
20
|
+
text-align: center;
|
|
21
|
+
color: var(--nutui-empty-title-color, var(--nutui-color-title));
|
|
35
22
|
font-weight: var(--nutui-font-weight-bold);
|
|
36
|
-
margin-bottom: var(--nutui-empty-title-margin-bottom, 8px);
|
|
37
|
-
color: var(--nutui-color-title);
|
|
38
|
-
font-size: var(--nutui-font-text-large);
|
|
39
|
-
line-height: var(--nutui-empty-title-line-height, var(--nutui-font-text));
|
|
40
23
|
}
|
|
41
24
|
.nut-empty-description {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
.nut-empty-actions-base {
|
|
47
|
-
display: flex;
|
|
48
|
-
flex-direction: row;
|
|
49
|
-
margin-top: scale-px(24px);
|
|
25
|
+
text-align: center;
|
|
26
|
+
color: var(--nutui-empty-description-color, var(--nutui-color-text-help));
|
|
27
|
+
font-weight: var(--nutui-font-weight);
|
|
50
28
|
}
|
|
51
|
-
.nut-empty-actions
|
|
29
|
+
.nut-empty-actions {
|
|
52
30
|
display: flex;
|
|
53
31
|
flex-direction: row;
|
|
54
|
-
|
|
32
|
+
justify-content: center;
|
|
55
33
|
}
|
|
56
34
|
.nut-empty-action {
|
|
57
35
|
margin-right: scale-px(6px);
|
|
58
36
|
margin-left: scale-px(6px);
|
|
37
|
+
}
|
|
38
|
+
.nut-empty-partial-body {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: row;
|
|
41
|
+
align-items: center;
|
|
42
|
+
max-width: 100%;
|
|
43
|
+
}
|
|
44
|
+
.nut-empty-content {
|
|
45
|
+
flex: 1;
|
|
46
|
+
min-width: 0;
|
|
47
|
+
}
|
|
48
|
+
.nut-empty--full {
|
|
49
|
+
padding-top: var(--nutui-empty-full-padding-top, 160px);
|
|
50
|
+
}
|
|
51
|
+
.nut-empty--full .nut-empty-image {
|
|
52
|
+
width: var(--nutui-empty-full-image-size, 160px);
|
|
53
|
+
height: var(--nutui-empty-full-image-size, 160px);
|
|
54
|
+
}
|
|
55
|
+
.nut-empty--full .nut-empty-title {
|
|
56
|
+
font-size: var(--nutui-empty-full-title-font-size, var(--nutui-font-size-md, 16px));
|
|
57
|
+
line-height: var(--nutui-empty-full-title-line-height, var(--nutui-line-height-xxl, var(--nutui-font-size-8)));
|
|
58
|
+
}
|
|
59
|
+
.nut-empty--full .nut-empty-description {
|
|
60
|
+
font-size: var(--nutui-empty-full-description-font-size, var(--nutui-font-text));
|
|
61
|
+
line-height: var(--nutui-empty-full-description-line-height, 22px);
|
|
62
|
+
}
|
|
63
|
+
.nut-empty--full .nut-empty-actions {
|
|
64
|
+
margin-top: var(--nutui-empty-full-actions-margin-top, 8px);
|
|
65
|
+
}
|
|
66
|
+
.nut-empty--half .nut-empty-image {
|
|
67
|
+
width: var(--nutui-empty-half-image-size, 80px);
|
|
68
|
+
height: var(--nutui-empty-half-image-size, 80px);
|
|
69
|
+
}
|
|
70
|
+
.nut-empty--half .nut-empty-title {
|
|
71
|
+
font-size: var(--nutui-empty-half-title-font-size, var(--nutui-font-text-small));
|
|
72
|
+
line-height: var(--nutui-empty-half-title-line-height, 22px);
|
|
73
|
+
}
|
|
74
|
+
.nut-empty--half .nut-empty-description {
|
|
75
|
+
font-size: var(--nutui-empty-half-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
|
|
76
|
+
line-height: var(--nutui-empty-half-description-line-height, var(--nutui-line-height-2xl, var(--nutui-font-size-2xl, 20px)));
|
|
77
|
+
}
|
|
78
|
+
.nut-empty--half .nut-empty-actions {
|
|
79
|
+
margin-top: var(--nutui-empty-half-actions-margin-top, 8px);
|
|
80
|
+
}
|
|
81
|
+
.nut-empty--partial {
|
|
82
|
+
padding: var(--nutui-empty-partial-padding, 0px 16px);
|
|
83
|
+
}
|
|
84
|
+
.nut-empty--partial .nut-empty-partial-body {
|
|
85
|
+
gap: var(--nutui-empty-partial-content-gap, 8px);
|
|
86
|
+
}
|
|
87
|
+
.nut-empty--partial .nut-empty-image {
|
|
88
|
+
width: var(--nutui-empty-partial-image-size, 32px);
|
|
89
|
+
height: var(--nutui-empty-partial-image-size, 32px);
|
|
90
|
+
}
|
|
91
|
+
.nut-empty--partial .nut-empty-title {
|
|
92
|
+
text-align: left;
|
|
93
|
+
font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
|
|
94
|
+
line-height: var(--nutui-empty-partial-description-line-height, 32px);
|
|
95
|
+
color: var(--nutui-empty-title-color, var(--nutui-color-title));
|
|
96
|
+
font-weight: var(--nutui-font-weight);
|
|
97
|
+
}
|
|
98
|
+
.nut-empty--partial .nut-empty-description {
|
|
99
|
+
text-align: left;
|
|
100
|
+
font-size: var(--nutui-empty-partial-description-font-size, var(--nutui-font-size-m, var(--nutui-font-text-small)));
|
|
101
|
+
line-height: var(--nutui-empty-partial-description-line-height, 32px);
|
|
102
|
+
color: var(--nutui-empty-description-color, var(--nutui-color-text-help));
|
|
103
|
+
font-weight: var(--nutui-font-weight);
|
|
59
104
|
}
|