@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.
Files changed (63) hide show
  1. package/CHANGELOG.md +13 -6
  2. package/dist/cjs/packages/configprovider/types.d.ts +1 -1
  3. package/dist/cjs/packages/empty/empty.d.ts +4 -11
  4. package/dist/cjs/packages/empty/empty.js +21 -18
  5. package/dist/cjs/packages/empty/index.d.ts +1 -1
  6. package/dist/cjs/packages/empty/style/empty.scss +97 -31
  7. package/dist/cjs/packages/empty/style/style.css +77 -32
  8. package/dist/cjs/packages/empty/style/style.harmony.css +77 -32
  9. package/dist/cjs/packages/empty/style-jmapp/empty.scss +97 -31
  10. package/dist/cjs/packages/empty/style-jmapp/style.css +77 -32
  11. package/dist/cjs/packages/empty/style-jrkf/empty.scss +97 -31
  12. package/dist/cjs/packages/empty/style-jrkf/style.css +77 -32
  13. package/dist/cjs/packages/rate/index.d.ts +1 -1
  14. package/dist/cjs/packages/rate/rate.js +54 -8
  15. package/dist/cjs/packages/rate/style/rate.scss +244 -76
  16. package/dist/cjs/packages/rate/style/style.css +198 -68
  17. package/dist/cjs/packages/rate/style/style.harmony.css +198 -68
  18. package/dist/cjs/packages/rate/style-jmapp/rate.scss +244 -76
  19. package/dist/cjs/packages/rate/style-jmapp/style.css +198 -68
  20. package/dist/cjs/packages/rate/style-jrkf/rate.scss +244 -76
  21. package/dist/cjs/packages/rate/style-jrkf/style.css +198 -68
  22. package/dist/cjs/packages/steps/style/style.css +1 -1
  23. package/dist/cjs/packages/steps/style/style.harmony.css +1 -1
  24. package/dist/cjs/types/spec/empty/base.d.ts +12 -8
  25. package/dist/cjs/types/spec/empty/base.js +28 -1
  26. package/dist/cjs/types/spec/rate/base.d.ts +3 -0
  27. package/dist/es/packages/configprovider/types.d.ts +1 -1
  28. package/dist/es/packages/empty/empty.d.ts +4 -11
  29. package/dist/es/packages/empty/empty.js +21 -18
  30. package/dist/es/packages/empty/index.d.ts +1 -1
  31. package/dist/es/packages/empty/style/empty.scss +97 -31
  32. package/dist/es/packages/empty/style/style.css +77 -32
  33. package/dist/es/packages/empty/style/style.harmony.css +77 -32
  34. package/dist/es/packages/empty/style-jmapp/empty.scss +97 -31
  35. package/dist/es/packages/empty/style-jmapp/style.css +77 -32
  36. package/dist/es/packages/empty/style-jrkf/empty.scss +97 -31
  37. package/dist/es/packages/empty/style-jrkf/style.css +77 -32
  38. package/dist/es/packages/rate/index.d.ts +1 -1
  39. package/dist/es/packages/rate/rate.js +54 -8
  40. package/dist/es/packages/rate/style/rate.scss +244 -76
  41. package/dist/es/packages/rate/style/style.css +198 -68
  42. package/dist/es/packages/rate/style/style.harmony.css +198 -68
  43. package/dist/es/packages/rate/style-jmapp/rate.scss +244 -76
  44. package/dist/es/packages/rate/style-jmapp/style.css +198 -68
  45. package/dist/es/packages/rate/style-jrkf/rate.scss +244 -76
  46. package/dist/es/packages/rate/style-jrkf/style.css +198 -68
  47. package/dist/es/packages/steps/style/style.css +1 -1
  48. package/dist/es/packages/steps/style/style.harmony.css +1 -1
  49. package/dist/es/types/spec/empty/base.d.ts +15 -11
  50. package/dist/es/types/spec/empty/base.js +13 -1
  51. package/dist/es/types/spec/rate/base.d.ts +10 -1
  52. package/dist/nutui.react.umd.js +97 -34
  53. package/dist/style-jmapp.css +1 -1
  54. package/dist/style-jmapp.scss +32 -32
  55. package/dist/style-jrkf.css +1 -1
  56. package/dist/style-jrkf.scss +31 -31
  57. package/dist/style.css +1 -1
  58. package/dist/style.scss +49 -49
  59. package/dist/styles/variables-daojia.scss +25 -12
  60. package/dist/styles/variables-jmapp.scss +42 -17
  61. package/dist/styles/variables-jrkf.scss +24 -20
  62. package/dist/styles/variables.scss +32 -24
  63. 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(32px * var(--nut-scale-f, 1)) calc(40px * var(--nut-scale-f, 1)));
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-base {
650
- width: var(--nutui-empty-image-size, calc(160px * var(--nut-scale-f, 1)));
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
- margin-top: var(--nutui-empty-title-margin-top, 0px);
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
- color: var(--nutui-color-text, #505259);
677
- font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
678
- line-height: var(--nutui-empty-description-line-height, 1);
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-small {
663
+ .nut-empty-actions {
686
664
  display: flex;
687
665
  flex-direction: row;
688
- margin-top: calc(16px * var(--nut-scale-f, 1));
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
- margin-top: $empty-title-margin-top;
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
- color: $color-text;
44
- font-size: $font-size-s;
45
- line-height: $empty-description-line-height;
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
- &-actions-small {
29
+
30
+ &-actions {
53
31
  display: flex;
54
32
  flex-direction: row;
55
- margin-top: scale-px(16px);
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, 32px 40px);
13
- background-color: var(--nutui-empty-background-color, #fff);
12
+ padding: var(--nutui-empty-padding, 20px);
14
13
  }
15
- .nut-empty-base {
16
- width: var(--nutui-empty-image-size, 160px);
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
- margin-top: var(--nutui-empty-title-margin-top, 0px);
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
- color: var(--nutui-color-text);
43
- font-size: var(--nutui-font-text-small);
44
- line-height: var(--nutui-empty-description-line-height, 1.2);
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-small {
29
+ .nut-empty-actions {
52
30
  display: flex;
53
31
  flex-direction: row;
54
- margin-top: scale-px(16px);
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
- margin-top: $empty-title-margin-top;
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
- color: $color-text;
44
- font-size: $font-size-s;
45
- line-height: $empty-description-line-height;
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
- &-actions-small {
29
+
30
+ &-actions {
53
31
  display: flex;
54
32
  flex-direction: row;
55
- margin-top: scale-px(16px);
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, 32px 40px);
13
- background-color: var(--nutui-empty-background-color, #fff);
12
+ padding: var(--nutui-empty-padding, 20px);
14
13
  }
15
- .nut-empty-base {
16
- width: var(--nutui-empty-image-size, 160px);
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
- margin-top: var(--nutui-empty-title-margin-top, 0px);
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
- color: var(--nutui-color-text);
43
- font-size: var(--nutui-font-text-small);
44
- line-height: var(--nutui-empty-description-line-height, 1.2);
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-small {
29
+ .nut-empty-actions {
52
30
  display: flex;
53
31
  flex-direction: row;
54
- margin-top: scale-px(16px);
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
  }
@@ -1,3 +1,3 @@
1
1
  import { Rate } from "./rate";
2
- export type { RateSize, TaroRateProps as RateProps } from "../../types";
2
+ export type { RateSize, RateDirection, TaroRateProps as RateProps, } from "../../types";
3
3
  export default Rate;