@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
package/dist/es/packages/rate/style/style.css CHANGED
@@ -18,6 +18,31 @@ page {
18
18
  .nut-rate.readonly .nut-rate-item-icon {
19
19
  cursor: default;
20
20
  }
21
+ .nut-rate-horizontal {
22
+ flex-direction: row;
23
+ align-items: center;
24
+ }
25
+ .nut-rate-vertical {
26
+ flex-direction: column;
27
+ align-items: center;
28
+ }
29
+ .nut-rate-list {
30
+ display: flex;
31
+ align-items: center;
32
+ }
33
+ .nut-rate-label {
34
+ color: var(--nutui-rate-label-color, var(--nutui-color-text-disabled, #b4b8bf));
35
+ white-space: nowrap;
36
+ }
37
+ .nut-rate-labels {
38
+ display: flex;
39
+ width: 100%;
40
+ }
41
+ .nut-rate-labels-item {
42
+ flex: 1;
43
+ text-align: center;
44
+ color: var(--nutui-rate-label-color, var(--nutui-color-text-disabled, #b4b8bf));
45
+ }
21
46
  .nut-rate-item {
22
47
  display: flex;
23
48
  align-items: center;
@@ -35,30 +60,6 @@ page {
35
60
  .nut-rate-item-half .nut-icon {
36
61
  flex-shrink: 0;
37
62
  }
38
- .nut-rate-item-normal {
39
- margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
40
- }
41
- .nut-rate-item-normal .nut-icon {
42
- height: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
43
- width: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
44
- }
45
- .nut-rate-item-large {
46
- margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
47
- }
48
- .nut-rate-item-large .nut-icon {
49
- height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
50
- width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
51
- }
52
- .nut-rate-item-small {
53
- margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
54
- }
55
- .nut-rate-item-small .nut-icon {
56
- height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
57
- width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
58
- }
59
- .nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
60
- margin-left: 0;
61
- }
62
63
  .nut-rate-item-icon {
63
64
  display: flex;
64
65
  align-items: center;
@@ -82,6 +83,9 @@ page {
82
83
  left: auto;
83
84
  transform: none;
84
85
  }
86
+ .nut-rate-item-icon-animate {
87
+ animation: nut-rate-bounce 0.3s ease-in-out;
88
+ }
85
89
  .nut-rate-score {
86
90
  /* #ifdef dynamic*/
87
91
  display: flex;
@@ -93,48 +97,190 @@ page {
93
97
  color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333));
94
98
  font-family: "JDZH-Regular";
95
99
  }
96
- .nut-rate-score-normal {
97
- padding-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
98
- font-size: var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
100
+ .nut-rate-score-disabled {
101
+ color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
102
+ }
103
+ .nut-rate-horizontal .nut-rate-item {
104
+ margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
105
+ }
106
+ .nut-rate-horizontal .nut-rate-item:first-child {
107
+ margin-left: 0;
108
+ }
109
+ .nut-rate-horizontal .nut-rate-item-small {
110
+ margin-left: calc(2px * var(--nut-scale-f, 1));
111
+ }
112
+ .nut-rate-horizontal .nut-rate-item-small:first-child {
113
+ margin-left: 0;
114
+ }
115
+ .nut-rate-horizontal .nut-rate-item-small .nut-icon {
116
+ height: calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)));
117
+ width: calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)));
118
+ }
119
+ .nut-rate-horizontal .nut-rate-item-normal .nut-icon {
120
+ height: calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)));
121
+ width: calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)));
122
+ }
123
+ .nut-rate-horizontal .nut-rate-item-large .nut-icon {
124
+ height: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
125
+ width: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
126
+ }
127
+ .nut-rate-horizontal .nut-rate-label-small {
128
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
129
+ margin-right: calc(4px * var(--nut-scale-f, 1));
130
+ }
131
+ .nut-rate-horizontal .nut-rate-label-normal {
132
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
133
+ margin-right: calc(12px * var(--nut-scale-f, 1));
134
+ }
135
+ .nut-rate-horizontal .nut-rate-label-large {
136
+ font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
137
+ margin-right: calc(12px * var(--nut-scale-f, 1));
138
+ }
139
+ .nut-rate-horizontal .nut-rate-score-small {
140
+ padding-left: calc(4px * var(--nut-scale-f, 1));
141
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
99
142
  line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
100
143
  }
101
- .nut-rate-score-large {
102
- font-size: var(--nutui-rate-font-size-large, calc(var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))))) + 6px * var(--nut-scale-font, var(--nut-scale-f, 1))));
103
- line-height: var(--nutui-line-height-xl, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
104
- padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
144
+ .nut-rate-horizontal .nut-rate-score-normal {
145
+ padding-left: calc(12px * var(--nut-scale-f, 1));
146
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
147
+ line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
105
148
  }
106
- .nut-rate-score-small {
107
- font-size: var(--nutui-rate-font-size-small, calc(var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))))) - 2px * var(--nut-scale-font, var(--nut-scale-f, 1))));
108
- line-height: var(--nutui-line-height-xxs, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
109
- padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
149
+ .nut-rate-horizontal .nut-rate-score-large {
150
+ padding-left: calc(12px * var(--nut-scale-f, 1));
151
+ font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
152
+ line-height: var(--nutui-line-height-base, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
110
153
  }
111
- .nut-rate-score-disabled {
112
- color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
154
+ .nut-rate-vertical .nut-rate-list {
155
+ justify-content: center;
156
+ width: 100%;
157
+ }
158
+ .nut-rate-vertical .nut-rate-item {
159
+ margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
160
+ }
161
+ .nut-rate-vertical .nut-rate-item:first-child {
162
+ margin-left: 0;
163
+ }
164
+ .nut-rate-vertical .nut-rate-item-small .nut-icon,
165
+ .nut-rate-vertical .nut-rate-item-normal .nut-icon {
166
+ height: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
167
+ width: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
168
+ }
169
+ .nut-rate-vertical .nut-rate-item-large {
170
+ flex: 1;
171
+ justify-content: center;
172
+ }
173
+ .nut-rate-vertical .nut-rate-item-large .nut-icon {
174
+ height: calc(28px * var(--nut-scale-font, var(--nut-scale-f, 1)));
175
+ width: calc(28px * var(--nut-scale-font, var(--nut-scale-f, 1)));
176
+ }
177
+ .nut-rate-vertical .nut-rate-label-small,
178
+ .nut-rate-vertical .nut-rate-label-normal {
179
+ font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
180
+ margin-top: calc(6px * var(--nut-scale-f, 1));
181
+ }
182
+ .nut-rate-vertical .nut-rate-label-large {
183
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
184
+ margin-top: calc(8px * var(--nut-scale-f, 1));
185
+ }
186
+ .nut-rate-vertical .nut-rate-labels {
187
+ width: 100%;
188
+ }
189
+ .nut-rate-vertical .nut-rate-labels-small,
190
+ .nut-rate-vertical .nut-rate-labels-normal {
191
+ margin-top: calc(6px * var(--nut-scale-f, 1));
192
+ }
193
+ .nut-rate-vertical .nut-rate-labels-small .nut-rate-labels-item,
194
+ .nut-rate-vertical .nut-rate-labels-normal .nut-rate-labels-item {
195
+ font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
196
+ }
197
+ .nut-rate-vertical .nut-rate-labels-large {
198
+ margin-top: calc(8px * var(--nut-scale-f, 1));
199
+ }
200
+ .nut-rate-vertical .nut-rate-labels-large .nut-rate-labels-item {
201
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
202
+ }
203
+ .nut-rate-vertical .nut-rate-score-small,
204
+ .nut-rate-vertical .nut-rate-score-normal {
205
+ font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
206
+ line-height: var(--nutui-line-height-xs, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
207
+ margin-top: calc(6px * var(--nut-scale-f, 1));
208
+ }
209
+ .nut-rate-vertical .nut-rate-score-large {
210
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
211
+ line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
212
+ margin-top: calc(8px * var(--nut-scale-f, 1));
113
213
  }
114
214
 
115
- [dir=rtl] .nut-rate-item,
116
- .nut-rtl .nut-rate-item {
215
+ @keyframes nut-rate-bounce {
216
+ 0% {
217
+ transform: scale(1);
218
+ }
219
+ 50% {
220
+ transform: scale(1.25);
221
+ }
222
+ 100% {
223
+ transform: scale(1);
224
+ }
225
+ }
226
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item,
227
+ .nut-rtl .nut-rate-horizontal .nut-rate-item {
117
228
  margin-left: 0;
229
+ margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
118
230
  }
119
- [dir=rtl] .nut-rate-item:first-child,
120
- .nut-rtl .nut-rate-item:first-child {
231
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item:first-child,
232
+ .nut-rtl .nut-rate-horizontal .nut-rate-item:first-child {
121
233
  margin-right: 0;
122
234
  }
123
- [dir=rtl] .nut-rate-item-normal,
124
- .nut-rtl .nut-rate-item-normal {
125
- margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
235
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item-small,
236
+ .nut-rtl .nut-rate-horizontal .nut-rate-item-small {
237
+ margin-left: 0;
238
+ margin-right: calc(2px * var(--nut-scale-f, 1));
239
+ }
240
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item-small:first-child,
241
+ .nut-rtl .nut-rate-horizontal .nut-rate-item-small:first-child {
242
+ margin-right: 0;
243
+ }
244
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label,
245
+ .nut-rtl .nut-rate-horizontal .nut-rate-label {
246
+ margin-right: 0;
247
+ }
248
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label-small,
249
+ .nut-rtl .nut-rate-horizontal .nut-rate-label-small {
250
+ margin-left: calc(4px * var(--nut-scale-f, 1));
251
+ }
252
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label-normal,
253
+ .nut-rtl .nut-rate-horizontal .nut-rate-label-normal {
254
+ margin-left: calc(12px * var(--nut-scale-f, 1));
255
+ }
256
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label-large,
257
+ .nut-rtl .nut-rate-horizontal .nut-rate-label-large {
258
+ margin-left: calc(12px * var(--nut-scale-f, 1));
259
+ }
260
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score,
261
+ .nut-rtl .nut-rate-horizontal .nut-rate-score {
262
+ padding-left: 0;
126
263
  }
127
- [dir=rtl] .nut-rate-item-large,
128
- .nut-rtl .nut-rate-item-large {
129
- margin-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
264
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score-small,
265
+ .nut-rtl .nut-rate-horizontal .nut-rate-score-small {
266
+ padding-right: calc(4px * var(--nut-scale-f, 1));
130
267
  }
131
- [dir=rtl] .nut-rate-item-small,
132
- .nut-rtl .nut-rate-item-small {
133
- margin-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
268
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score-normal,
269
+ .nut-rtl .nut-rate-horizontal .nut-rate-score-normal {
270
+ padding-right: calc(12px * var(--nut-scale-f, 1));
134
271
  }
135
- [dir=rtl] .nut-rate-item:last-child,
136
- .nut-rtl .nut-rate-item:last-child {
272
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score-large,
273
+ .nut-rtl .nut-rate-horizontal .nut-rate-score-large {
274
+ padding-right: calc(12px * var(--nut-scale-f, 1));
275
+ }
276
+ [dir=rtl] .nut-rate-vertical .nut-rate-item,
277
+ .nut-rtl .nut-rate-vertical .nut-rate-item {
137
278
  margin-left: 0;
279
+ margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
280
+ }
281
+ [dir=rtl] .nut-rate-vertical .nut-rate-item:first-child,
282
+ .nut-rtl .nut-rate-vertical .nut-rate-item:first-child {
283
+ margin-right: 0;
138
284
  }
139
285
  [dir=rtl] .nut-rate-item-half,
140
286
  .nut-rtl .nut-rate-item-half {
@@ -150,20 +296,4 @@ page {
150
296
  .nut-rtl .nut-rate-item-icon.nut-rate-item-icon::before {
151
297
  left: auto;
152
298
  right: auto;
153
- }
154
- [dir=rtl] .nut-rate-score,
155
- .nut-rtl .nut-rate-score {
156
- padding-left: 0;
157
- }
158
- [dir=rtl] .nut-rate-score-large,
159
- .nut-rtl .nut-rate-score-large {
160
- padding-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
161
- }
162
- [dir=rtl] .nut-rate-score-normal,
163
- .nut-rtl .nut-rate-score-normal {
164
- padding-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
165
- }
166
- [dir=rtl] .nut-rate-score-small,
167
- .nut-rtl .nut-rate-score-small {
168
- padding-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
169
299
  }
package/dist/es/packages/rate/style/style.harmony.css CHANGED
@@ -18,6 +18,31 @@ page {
18
18
  .nut-rate.readonly .nut-rate-item-icon {
19
19
  cursor: default;
20
20
  }
21
+ .nut-rate-horizontal {
22
+ flex-direction: row;
23
+ align-items: center;
24
+ }
25
+ .nut-rate-vertical {
26
+ flex-direction: column;
27
+ align-items: center;
28
+ }
29
+ .nut-rate-list {
30
+ display: flex;
31
+ align-items: center;
32
+ }
33
+ .nut-rate-label {
34
+ color: var(--nutui-rate-label-color, var(--nutui-color-text-disabled, #b4b8bf));
35
+ white-space: nowrap;
36
+ }
37
+ .nut-rate-labels {
38
+ display: flex;
39
+ width: 100%;
40
+ }
41
+ .nut-rate-labels-item {
42
+ flex: 1;
43
+ text-align: center;
44
+ color: var(--nutui-rate-label-color, var(--nutui-color-text-disabled, #b4b8bf));
45
+ }
21
46
  .nut-rate-item {
22
47
  display: flex;
23
48
  align-items: center;
@@ -35,30 +60,6 @@ page {
35
60
  .nut-rate-item-half .nut-icon {
36
61
  flex-shrink: 0;
37
62
  }
38
- .nut-rate-item-normal {
39
- margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
40
- }
41
- .nut-rate-item-normal .nut-icon {
42
- height: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
43
- width: var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
44
- }
45
- .nut-rate-item-large {
46
- margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
47
- }
48
- .nut-rate-item-large .nut-icon {
49
- height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
50
- width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) + 8px * var(--nut-scale-f, 1));
51
- }
52
- .nut-rate-item-small {
53
- margin-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
54
- }
55
- .nut-rate-item-small .nut-icon {
56
- height: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
57
- width: calc(var(--nutui-rate-icon-size, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))) - 4px * var(--nut-scale-f, 1));
58
- }
59
- .nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
60
- margin-left: 0;
61
- }
62
63
  .nut-rate-item-icon {
63
64
  display: flex;
64
65
  align-items: center;
@@ -82,6 +83,9 @@ page {
82
83
  left: auto;
83
84
  transform: none;
84
85
  }
86
+ .nut-rate-item-icon-animate {
87
+ animation: nut-rate-bounce 0.3s ease-in-out;
88
+ }
85
89
  .nut-rate-score {
86
90
  /* #ifdef dynamic*/
87
91
  display: flex;
@@ -93,48 +97,190 @@ page {
93
97
  color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333));
94
98
  font-family: "JDZH-Regular";
95
99
  }
96
- .nut-rate-score-normal {
97
- padding-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
98
- font-size: var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
100
+ .nut-rate-score-disabled {
101
+ color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
102
+ }
103
+ .nut-rate-horizontal .nut-rate-item {
104
+ margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
105
+ }
106
+ .nut-rate-horizontal .nut-rate-item:first-child {
107
+ margin-left: 0;
108
+ }
109
+ .nut-rate-horizontal .nut-rate-item-small {
110
+ margin-left: calc(2px * var(--nut-scale-f, 1));
111
+ }
112
+ .nut-rate-horizontal .nut-rate-item-small:first-child {
113
+ margin-left: 0;
114
+ }
115
+ .nut-rate-horizontal .nut-rate-item-small .nut-icon {
116
+ height: calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)));
117
+ width: calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)));
118
+ }
119
+ .nut-rate-horizontal .nut-rate-item-normal .nut-icon {
120
+ height: calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)));
121
+ width: calc(16px * var(--nut-scale-font, var(--nut-scale-f, 1)));
122
+ }
123
+ .nut-rate-horizontal .nut-rate-item-large .nut-icon {
124
+ height: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
125
+ width: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
126
+ }
127
+ .nut-rate-horizontal .nut-rate-label-small {
128
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
129
+ margin-right: calc(4px * var(--nut-scale-f, 1));
130
+ }
131
+ .nut-rate-horizontal .nut-rate-label-normal {
132
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
133
+ margin-right: calc(12px * var(--nut-scale-f, 1));
134
+ }
135
+ .nut-rate-horizontal .nut-rate-label-large {
136
+ font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
137
+ margin-right: calc(12px * var(--nut-scale-f, 1));
138
+ }
139
+ .nut-rate-horizontal .nut-rate-score-small {
140
+ padding-left: calc(4px * var(--nut-scale-f, 1));
141
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
99
142
  line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
100
143
  }
101
- .nut-rate-score-large {
102
- font-size: var(--nutui-rate-font-size-large, calc(var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))))) + 6px * var(--nut-scale-font, var(--nut-scale-f, 1))));
103
- line-height: var(--nutui-line-height-xl, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
104
- padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
144
+ .nut-rate-horizontal .nut-rate-score-normal {
145
+ padding-left: calc(12px * var(--nut-scale-f, 1));
146
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
147
+ line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
105
148
  }
106
- .nut-rate-score-small {
107
- font-size: var(--nutui-rate-font-size-small, calc(var(--nutui-rate-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))))) - 2px * var(--nut-scale-font, var(--nut-scale-f, 1))));
108
- line-height: var(--nutui-line-height-xxs, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
109
- padding-left: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) / 2);
149
+ .nut-rate-horizontal .nut-rate-score-large {
150
+ padding-left: calc(12px * var(--nut-scale-f, 1));
151
+ font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
152
+ line-height: var(--nutui-line-height-base, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
110
153
  }
111
- .nut-rate-score-disabled {
112
- color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0));
154
+ .nut-rate-vertical .nut-rate-list {
155
+ justify-content: center;
156
+ width: 100%;
157
+ }
158
+ .nut-rate-vertical .nut-rate-item {
159
+ margin-left: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
160
+ }
161
+ .nut-rate-vertical .nut-rate-item:first-child {
162
+ margin-left: 0;
163
+ }
164
+ .nut-rate-vertical .nut-rate-item-small .nut-icon,
165
+ .nut-rate-vertical .nut-rate-item-normal .nut-icon {
166
+ height: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
167
+ width: calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1)));
168
+ }
169
+ .nut-rate-vertical .nut-rate-item-large {
170
+ flex: 1;
171
+ justify-content: center;
172
+ }
173
+ .nut-rate-vertical .nut-rate-item-large .nut-icon {
174
+ height: calc(28px * var(--nut-scale-font, var(--nut-scale-f, 1)));
175
+ width: calc(28px * var(--nut-scale-font, var(--nut-scale-f, 1)));
176
+ }
177
+ .nut-rate-vertical .nut-rate-label-small,
178
+ .nut-rate-vertical .nut-rate-label-normal {
179
+ font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
180
+ margin-top: calc(6px * var(--nut-scale-f, 1));
181
+ }
182
+ .nut-rate-vertical .nut-rate-label-large {
183
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
184
+ margin-top: calc(8px * var(--nut-scale-f, 1));
185
+ }
186
+ .nut-rate-vertical .nut-rate-labels {
187
+ width: 100%;
188
+ }
189
+ .nut-rate-vertical .nut-rate-labels-small,
190
+ .nut-rate-vertical .nut-rate-labels-normal {
191
+ margin-top: calc(6px * var(--nut-scale-f, 1));
192
+ }
193
+ .nut-rate-vertical .nut-rate-labels-small .nut-rate-labels-item,
194
+ .nut-rate-vertical .nut-rate-labels-normal .nut-rate-labels-item {
195
+ font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
196
+ }
197
+ .nut-rate-vertical .nut-rate-labels-large {
198
+ margin-top: calc(8px * var(--nut-scale-f, 1));
199
+ }
200
+ .nut-rate-vertical .nut-rate-labels-large .nut-rate-labels-item {
201
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
202
+ }
203
+ .nut-rate-vertical .nut-rate-score-small,
204
+ .nut-rate-vertical .nut-rate-score-normal {
205
+ font-size: var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1))));
206
+ line-height: var(--nutui-line-height-xs, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
207
+ margin-top: calc(6px * var(--nut-scale-f, 1));
208
+ }
209
+ .nut-rate-vertical .nut-rate-score-large {
210
+ font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
211
+ line-height: var(--nutui-line-height-s, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
212
+ margin-top: calc(8px * var(--nut-scale-f, 1));
113
213
  }
114
214
 
115
- [dir=rtl] .nut-rate-item,
116
- .nut-rtl .nut-rate-item {
215
+ @keyframes nut-rate-bounce {
216
+ 0% {
217
+ transform: scale(1);
218
+ }
219
+ 50% {
220
+ transform: scale(1.25);
221
+ }
222
+ 100% {
223
+ transform: scale(1);
224
+ }
225
+ }
226
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item,
227
+ .nut-rtl .nut-rate-horizontal .nut-rate-item {
117
228
  margin-left: 0;
229
+ margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
118
230
  }
119
- [dir=rtl] .nut-rate-item:first-child,
120
- .nut-rtl .nut-rate-item:first-child {
231
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item:first-child,
232
+ .nut-rtl .nut-rate-horizontal .nut-rate-item:first-child {
121
233
  margin-right: 0;
122
234
  }
123
- [dir=rtl] .nut-rate-item-normal,
124
- .nut-rtl .nut-rate-item-normal {
125
- margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
235
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item-small,
236
+ .nut-rtl .nut-rate-horizontal .nut-rate-item-small {
237
+ margin-left: 0;
238
+ margin-right: calc(2px * var(--nut-scale-f, 1));
239
+ }
240
+ [dir=rtl] .nut-rate-horizontal .nut-rate-item-small:first-child,
241
+ .nut-rtl .nut-rate-horizontal .nut-rate-item-small:first-child {
242
+ margin-right: 0;
243
+ }
244
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label,
245
+ .nut-rtl .nut-rate-horizontal .nut-rate-label {
246
+ margin-right: 0;
247
+ }
248
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label-small,
249
+ .nut-rtl .nut-rate-horizontal .nut-rate-label-small {
250
+ margin-left: calc(4px * var(--nut-scale-f, 1));
251
+ }
252
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label-normal,
253
+ .nut-rtl .nut-rate-horizontal .nut-rate-label-normal {
254
+ margin-left: calc(12px * var(--nut-scale-f, 1));
255
+ }
256
+ [dir=rtl] .nut-rate-horizontal .nut-rate-label-large,
257
+ .nut-rtl .nut-rate-horizontal .nut-rate-label-large {
258
+ margin-left: calc(12px * var(--nut-scale-f, 1));
259
+ }
260
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score,
261
+ .nut-rtl .nut-rate-horizontal .nut-rate-score {
262
+ padding-left: 0;
126
263
  }
127
- [dir=rtl] .nut-rate-item-large,
128
- .nut-rtl .nut-rate-item-large {
129
- margin-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
264
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score-small,
265
+ .nut-rtl .nut-rate-horizontal .nut-rate-score-small {
266
+ padding-right: calc(4px * var(--nut-scale-f, 1));
130
267
  }
131
- [dir=rtl] .nut-rate-item-small,
132
- .nut-rtl .nut-rate-item-small {
133
- margin-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
268
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score-normal,
269
+ .nut-rtl .nut-rate-horizontal .nut-rate-score-normal {
270
+ padding-right: calc(12px * var(--nut-scale-f, 1));
134
271
  }
135
- [dir=rtl] .nut-rate-item:last-child,
136
- .nut-rtl .nut-rate-item:last-child {
272
+ [dir=rtl] .nut-rate-horizontal .nut-rate-score-large,
273
+ .nut-rtl .nut-rate-horizontal .nut-rate-score-large {
274
+ padding-right: calc(12px * var(--nut-scale-f, 1));
275
+ }
276
+ [dir=rtl] .nut-rate-vertical .nut-rate-item,
277
+ .nut-rtl .nut-rate-vertical .nut-rate-item {
137
278
  margin-left: 0;
279
+ margin-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
280
+ }
281
+ [dir=rtl] .nut-rate-vertical .nut-rate-item:first-child,
282
+ .nut-rtl .nut-rate-vertical .nut-rate-item:first-child {
283
+ margin-right: 0;
138
284
  }
139
285
  [dir=rtl] .nut-rate-item-half,
140
286
  .nut-rtl .nut-rate-item-half {
@@ -150,20 +296,4 @@ page {
150
296
  .nut-rtl .nut-rate-item-icon.nut-rate-item-icon::before {
151
297
  left: auto;
152
298
  right: auto;
153
- }
154
- [dir=rtl] .nut-rate-score,
155
- .nut-rtl .nut-rate-score {
156
- padding-left: 0;
157
- }
158
- [dir=rtl] .nut-rate-score-large,
159
- .nut-rtl .nut-rate-score-large {
160
- padding-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) * 2);
161
- }
162
- [dir=rtl] .nut-rate-score-normal,
163
- .nut-rtl .nut-rate-score-normal {
164
- padding-right: var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1)));
165
- }
166
- [dir=rtl] .nut-rate-score-small,
167
- .nut-rtl .nut-rate-score-small {
168
- padding-right: calc(var(--nutui-rate-item-margin, calc(4px * var(--nut-scale-f, 1))) - 2px * var(--nut-scale-f, 1));
169
299
  }