uview-plus 3.3.25 → 3.3.26
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 +2 -0
- package/index.js +1 -3
- package/libs/config/config.js +10 -1
- package/libs/css/color.scss +156 -0
- package/libs/css/common.scss +20 -10
- package/libs/css/components.scss +12 -3
- package/libs/css/flex.scss +114 -52
- package/libs/css/vue.scss +11 -10
- package/package.json +1 -1
package/changelog.md
CHANGED
package/index.js
CHANGED
|
@@ -90,10 +90,8 @@ for (const key in importFn) {
|
|
|
90
90
|
let component = importFn[key].default;
|
|
91
91
|
if (component.name && component.name.indexOf('u--') !== 0) {
|
|
92
92
|
const name = component.name.replace(/u-([a-zA-Z0-9-_]+)/g, 'up-$1');
|
|
93
|
-
component.name = name;
|
|
94
|
-
console.log('component', component.name)
|
|
95
93
|
component.install = function (Vue) {
|
|
96
|
-
Vue.component(
|
|
94
|
+
Vue.component(name, component);
|
|
97
95
|
};
|
|
98
96
|
|
|
99
97
|
// 导入组件
|
package/libs/config/config.js
CHANGED
|
@@ -26,7 +26,16 @@ export default {
|
|
|
26
26
|
'u-main-color': '#303133',
|
|
27
27
|
'u-content-color': '#606266',
|
|
28
28
|
'u-tips-color': '#909399',
|
|
29
|
-
'u-light-color': '#c0c4cc'
|
|
29
|
+
'u-light-color': '#c0c4cc',
|
|
30
|
+
'up-primary': '#2979ff',
|
|
31
|
+
'up-warning': '#ff9900',
|
|
32
|
+
'up-success': '#19be6b',
|
|
33
|
+
'up-error': '#fa3534',
|
|
34
|
+
'up-info': '#909399',
|
|
35
|
+
'up-main-color': '#303133',
|
|
36
|
+
'up-content-color': '#606266',
|
|
37
|
+
'up-tips-color': '#909399',
|
|
38
|
+
'up-light-color': '#c0c4cc'
|
|
30
39
|
},
|
|
31
40
|
// 默认单位，可以通过配置为rpx，那么在用于传入组件大小参数为数值时，就默认为rpx
|
|
32
41
|
unit: 'px'
|
package/libs/css/color.scss
CHANGED
|
@@ -153,3 +153,159 @@
|
|
|
153
153
|
.u-light-color {
|
|
154
154
|
color: $u-light-color;
|
|
155
155
|
}
|
|
156
|
+
|
|
157
|
+
.up-primary-light {
|
|
158
|
+
color: $u-primary-light;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.up-warning-light {
|
|
162
|
+
color: $u-warning-light;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.up-success-light {
|
|
166
|
+
color: $u-success-light;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.up-error-light {
|
|
170
|
+
color: $u-error-light;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.up-info-light {
|
|
174
|
+
color: $u-info-light;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.up-primary-light-bg {
|
|
178
|
+
background-color: $u-primary-light;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.up-warning-light-bg {
|
|
182
|
+
background-color: $u-warning-light;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.up-success-light-bg {
|
|
186
|
+
background-color: $u-success-light;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.up-error-light-bg {
|
|
190
|
+
background-color: $u-error-light;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.up-info-light-bg {
|
|
194
|
+
background-color: $u-info-light;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.up-primary-dark {
|
|
198
|
+
color: $u-primary-dark;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.up-warning-dark {
|
|
202
|
+
color: $u-warning-dark;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.up-success-dark {
|
|
206
|
+
color: $u-success-dark;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.up-error-dark {
|
|
210
|
+
color: $u-error-dark;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.up-info-dark {
|
|
214
|
+
color: $u-info-dark;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.up-primary-dark-bg {
|
|
218
|
+
background-color: $u-primary-dark;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.up-warning-dark-bg {
|
|
222
|
+
background-color: $u-warning-dark;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.up-success-dark-bg {
|
|
226
|
+
background-color: $u-success-dark;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.up-error-dark-bg {
|
|
230
|
+
background-color: $u-error-dark;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.up-info-dark-bg {
|
|
234
|
+
background-color: $u-info-dark;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.up-primary-disabled {
|
|
238
|
+
color: $u-primary-disabled;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.up-warning-disabled {
|
|
242
|
+
color: $u-warning-disabled;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.up-success-disabled {
|
|
246
|
+
color: $u-success-disabled;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.up-error-disabled {
|
|
250
|
+
color: $u-error-disabled;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.up-info-disabled {
|
|
254
|
+
color: $u-info-disabled;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.up-primary {
|
|
258
|
+
color: $u-primary;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.up-warning {
|
|
262
|
+
color: $u-warning;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.up-success {
|
|
266
|
+
color: $u-success;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.up-error {
|
|
270
|
+
color: $u-error;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.up-info {
|
|
274
|
+
color: $u-info;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.up-primary-bg {
|
|
278
|
+
background-color: $u-primary;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.up-warning-bg {
|
|
282
|
+
background-color: $u-warning;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.up-success-bg {
|
|
286
|
+
background-color: $u-success;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.up-error-bg {
|
|
290
|
+
background-color: $u-error;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.up-info-bg {
|
|
294
|
+
background-color: $u-info;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.up-main-color {
|
|
298
|
+
color: $u-main-color;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.up-content-color {
|
|
302
|
+
color: $u-content-color;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.up-tips-color {
|
|
306
|
+
color: $u-tips-color;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.up-light-color {
|
|
310
|
+
color: $u-light-color;
|
|
311
|
+
}
|
package/libs/css/common.scss
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
// 超出行数，自动显示行尾省略号，最多5行
|
|
2
2
|
// 来自uview-plus的温馨提示：当您在控制台看到此报错，说明需要在App.vue的style标签加上【lang="scss"】
|
|
3
3
|
@for $i from 1 through 5 {
|
|
4
|
-
.u-line-#{$i}
|
|
4
|
+
.u-line-#{$i},
|
|
5
|
+
.up-line-#{$i} {
|
|
5
6
|
/* #ifdef APP-NVUE */
|
|
6
7
|
// nvue下，可以直接使用lines属性，这是weex特有样式
|
|
7
8
|
lines: $i;
|
|
@@ -33,37 +34,43 @@
|
|
|
33
34
|
// App.vue的样式会被uni-app的view元素的自带border属性覆盖，导致无效
|
|
34
35
|
// 综上，这是uni-app的缺陷导致我们为了多端兼容，而必须要加上!important
|
|
35
36
|
// 移动端兼容性较好，直接使用0.5px去实现细边框，不使用伪元素形式实现
|
|
36
|
-
.u-border
|
|
37
|
+
.u-border,
|
|
38
|
+
.up-border {
|
|
37
39
|
border-width: 0.5px!important;
|
|
38
40
|
border-color: $u-border-color!important;
|
|
39
41
|
border-style: solid;
|
|
40
42
|
}
|
|
41
43
|
|
|
42
|
-
.u-border-top
|
|
44
|
+
.u-border-top,
|
|
45
|
+
.up-border-top {
|
|
43
46
|
border-top-width: 0.5px!important;
|
|
44
47
|
border-color: $u-border-color!important;
|
|
45
48
|
border-top-style: solid;
|
|
46
49
|
}
|
|
47
50
|
|
|
48
|
-
.u-border-left
|
|
51
|
+
.u-border-left,
|
|
52
|
+
.up-border-left {
|
|
49
53
|
border-left-width: 0.5px!important;
|
|
50
54
|
border-color: $u-border-color!important;
|
|
51
55
|
border-left-style: solid;
|
|
52
56
|
}
|
|
53
57
|
|
|
54
|
-
.u-border-right
|
|
58
|
+
.u-border-right,
|
|
59
|
+
.up-border-right {
|
|
55
60
|
border-right-width: 0.5px!important;
|
|
56
61
|
border-color: $u-border-color!important;
|
|
57
62
|
border-right-style: solid;
|
|
58
63
|
}
|
|
59
64
|
|
|
60
|
-
.u-border-bottom
|
|
65
|
+
.u-border-bottom,
|
|
66
|
+
.up-border-bottom {
|
|
61
67
|
border-bottom-width: 0.5px!important;
|
|
62
68
|
border-color: $u-border-color!important;
|
|
63
69
|
border-bottom-style: solid;
|
|
64
70
|
}
|
|
65
71
|
|
|
66
|
-
.u-border-top-bottom
|
|
72
|
+
.u-border-top-bottom,
|
|
73
|
+
.up-border-top-bottom {
|
|
67
74
|
border-top-width: 0.5px!important;
|
|
68
75
|
border-bottom-width: 0.5px!important;
|
|
69
76
|
border-color: $u-border-color!important;
|
|
@@ -72,7 +79,8 @@
|
|
|
72
79
|
}
|
|
73
80
|
|
|
74
81
|
// 去除button的所有默认样式，让其表现跟普通的view、text元素一样
|
|
75
|
-
.u-reset-button
|
|
82
|
+
.u-reset-button,
|
|
83
|
+
.up-reset-button {
|
|
76
84
|
padding: 0;
|
|
77
85
|
background-color: transparent;
|
|
78
86
|
/* #ifndef APP-PLUS */
|
|
@@ -86,12 +94,14 @@
|
|
|
86
94
|
}
|
|
87
95
|
|
|
88
96
|
/* #ifndef APP-NVUE */
|
|
89
|
-
.u-reset-button::after
|
|
97
|
+
.u-reset-button::after,
|
|
98
|
+
.up-reset-button::after {
|
|
90
99
|
border: none;
|
|
91
100
|
}
|
|
92
101
|
/* #endif */
|
|
93
102
|
|
|
94
|
-
.u-hover-class
|
|
103
|
+
.u-hover-class,
|
|
104
|
+
.up-hover-class {
|
|
95
105
|
opacity: 0.7;
|
|
96
106
|
}
|
|
97
107
|
|
package/libs/css/components.scss
CHANGED
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
/* #ifndef APP-NVUE */
|
|
4
4
|
// 由于uview-plus是基于nvue环境进行开发的，此环境中普通元素默认为flex-direction: column;
|
|
5
|
-
// 所以在非nvue中，需要对元素进行重置为flex-direction: column; 否则可能会表现异常
|
|
6
|
-
// 2024-04-09由于微信小程序会提示 Some selectors are not allowed in component wxss所以注释以下几行
|
|
5
|
+
// 所以在非nvue中，需要对元素进行重置为flex-direction: column; 否则可能会表现异常
|
|
6
|
+
// 2024-04-09由于微信小程序会提示 Some selectors are not allowed in component wxss所以注释以下几行
|
|
7
|
+
// view,
|
|
7
8
|
// scroll-view,
|
|
8
9
|
// swiper-item,
|
|
9
10
|
.u-empty,
|
|
@@ -13,7 +14,15 @@
|
|
|
13
14
|
.u-tabs__wrapper__scroll-view-wrapper,
|
|
14
15
|
.u-tabs__wrapper__scroll-view,
|
|
15
16
|
.u-tabs__wrapper__nav,
|
|
16
|
-
.u-tabs__wrapper__nav__line
|
|
17
|
+
.u-tabs__wrapper__nav__line,
|
|
18
|
+
.up-empty,
|
|
19
|
+
.up-empty__wrap,
|
|
20
|
+
.up-tabs,
|
|
21
|
+
.up-tabs__wrapper,
|
|
22
|
+
.up-tabs__wrapper__scroll-view-wrapper,
|
|
23
|
+
.up-tabs__wrapper__scroll-view,
|
|
24
|
+
.up-tabs__wrapper__nav,
|
|
25
|
+
.up-tabs__wrapper__nav__line {
|
|
17
26
|
display: flex;
|
|
18
27
|
flex-direction: column;
|
|
19
28
|
flex-shrink: 0;
|
package/libs/css/flex.scss
CHANGED
|
@@ -30,42 +30,55 @@
|
|
|
30
30
|
// flex布局
|
|
31
31
|
.u-flex,
|
|
32
32
|
.u-flex-row,
|
|
33
|
-
.u-flex-x
|
|
33
|
+
.u-flex-x,
|
|
34
|
+
.up-flex,
|
|
35
|
+
.up-flex-row,
|
|
36
|
+
.up-flex-x {
|
|
34
37
|
@include flex;
|
|
35
38
|
}
|
|
36
39
|
|
|
37
40
|
.u-flex-y,
|
|
38
|
-
.u-flex-column
|
|
41
|
+
.u-flex-column,
|
|
42
|
+
.up-flex-y,
|
|
43
|
+
.up-flex-column {
|
|
39
44
|
@include flex(column);
|
|
40
45
|
}
|
|
41
46
|
|
|
42
|
-
.u-flex-x-center
|
|
47
|
+
.u-flex-x-center,
|
|
48
|
+
.up-flex-x-center {
|
|
43
49
|
@include flex;
|
|
44
50
|
justify-content: center;
|
|
45
51
|
}
|
|
46
52
|
|
|
47
|
-
.u-flex-xy-center
|
|
53
|
+
.u-flex-xy-center,
|
|
54
|
+
.up-flex-xy-center {
|
|
48
55
|
@include flex;
|
|
49
56
|
justify-content: center;
|
|
50
57
|
align-items: center;
|
|
51
58
|
}
|
|
52
59
|
|
|
53
|
-
.u-flex-y-center
|
|
60
|
+
.u-flex-y-center,
|
|
61
|
+
.up-flex-y-center {
|
|
54
62
|
@include flex;
|
|
55
63
|
align-items: center;
|
|
56
64
|
}
|
|
57
65
|
|
|
58
|
-
.u-flex-x-left
|
|
66
|
+
.u-flex-x-left,
|
|
67
|
+
.up-flex-x-left {
|
|
59
68
|
@include flex;
|
|
60
69
|
}
|
|
61
70
|
|
|
62
71
|
.u-flex-x-reverse,
|
|
63
|
-
.u-flex-row-reverse
|
|
72
|
+
.u-flex-row-reverse,
|
|
73
|
+
.up-flex-x-reverse,
|
|
74
|
+
.up-flex-row-reverse {
|
|
64
75
|
flex-direction: row-reverse;
|
|
65
76
|
}
|
|
66
77
|
|
|
67
78
|
.u-flex-y-reverse,
|
|
68
|
-
.u-flex-column-reverse
|
|
79
|
+
.u-flex-column-reverse,
|
|
80
|
+
.up-flex-y-reverse,
|
|
81
|
+
.up-flex-column-reverse {
|
|
69
82
|
flex-direction: column-reverse;
|
|
70
83
|
}
|
|
71
84
|
|
|
@@ -74,113 +87,143 @@
|
|
|
74
87
|
// nvue下只能写成class="u-flex-x u-flex-x-reverse的形式"
|
|
75
88
|
.u-flex.u-flex-reverse,
|
|
76
89
|
.u-flex-row.u-flex-reverse,
|
|
77
|
-
.u-flex-x.u-flex-reverse
|
|
90
|
+
.u-flex-x.u-flex-reverse,
|
|
91
|
+
.up-flex.up-flex-reverse,
|
|
92
|
+
.up-flex-row.up-flex-reverse,
|
|
93
|
+
.up-flex-x.up-flex-reverse {
|
|
78
94
|
flex-direction: row-reverse;
|
|
79
95
|
}
|
|
80
96
|
|
|
81
97
|
.u-flex-column.u-flex-reverse,
|
|
82
|
-
.u-flex-y.u-flex-reverse
|
|
98
|
+
.u-flex-y.u-flex-reverse,
|
|
99
|
+
.up-flex-column.up-flex-reverse,
|
|
100
|
+
.up-flex-y.up-flex-reverse {
|
|
83
101
|
flex-direction: column-reverse;
|
|
84
102
|
}
|
|
85
103
|
|
|
86
104
|
// 自动伸缩
|
|
87
|
-
.u-flex-fill
|
|
105
|
+
.u-flex-fill,
|
|
106
|
+
.u-flex-fillp {
|
|
88
107
|
flex: 1 1 auto;
|
|
89
108
|
}
|
|
90
109
|
|
|
91
110
|
// 边界自动伸缩
|
|
92
111
|
.u-margin-top-auto,
|
|
93
|
-
.u-m-t-auto
|
|
112
|
+
.u-m-t-auto,
|
|
113
|
+
.up-margin-top-auto,
|
|
114
|
+
.up-m-t-auto {
|
|
94
115
|
margin-top: auto !important;
|
|
95
116
|
}
|
|
96
117
|
|
|
97
118
|
.u-margin-right-auto,
|
|
98
|
-
.u-m-r-auto
|
|
119
|
+
.u-m-r-auto,
|
|
120
|
+
.up-margin-right-auto,
|
|
121
|
+
.up-m-r-auto {
|
|
99
122
|
margin-right: auto !important;
|
|
100
123
|
}
|
|
101
124
|
|
|
102
125
|
.u-margin-bottom-auto,
|
|
103
|
-
.u-m-b-auto
|
|
126
|
+
.u-m-b-auto,
|
|
127
|
+
.up-margin-bottom-auto,
|
|
128
|
+
.up-m-b-auto {
|
|
104
129
|
margin-bottom: auto !important;
|
|
105
130
|
}
|
|
106
131
|
|
|
107
132
|
.u-margin-left-auto,
|
|
108
|
-
.u-m-l-auto
|
|
133
|
+
.u-m-l-auto,
|
|
134
|
+
.up-margin-left-auto,
|
|
135
|
+
.up-m-l-auto {
|
|
109
136
|
margin-left: auto !important;
|
|
110
137
|
}
|
|
111
138
|
|
|
112
139
|
.u-margin-center-auto,
|
|
113
|
-
.u-m-c-auto
|
|
140
|
+
.u-m-c-auto,
|
|
141
|
+
.up-margin-center-auto,
|
|
142
|
+
.up-m-c-auto {
|
|
114
143
|
margin-left: auto !important;
|
|
115
144
|
margin-right: auto !important;
|
|
116
145
|
}
|
|
117
146
|
|
|
118
147
|
.u-margin-middle-auto,
|
|
119
|
-
.u-m-m-auto
|
|
148
|
+
.u-m-m-auto,
|
|
149
|
+
.up-margin-middle-auto,
|
|
150
|
+
.up-m-m-auto {
|
|
120
151
|
margin-top: auto !important;
|
|
121
152
|
margin-bottom: auto !important;
|
|
122
153
|
}
|
|
123
154
|
/* #endif */
|
|
124
155
|
|
|
125
156
|
// 换行
|
|
126
|
-
.u-flex-wrap
|
|
157
|
+
.u-flex-wrap,
|
|
158
|
+
.up-flex-wrap {
|
|
127
159
|
flex-wrap: wrap;
|
|
128
160
|
}
|
|
129
161
|
|
|
130
162
|
// 反向换行
|
|
131
|
-
.u-flex-wrap-reverse
|
|
163
|
+
.u-flex-wrap-reverse,
|
|
164
|
+
.up-flex-wrap-reverse {
|
|
132
165
|
flex-wrap: wrap-reverse;
|
|
133
166
|
}
|
|
134
167
|
|
|
135
168
|
// 主轴起点对齐
|
|
136
|
-
.u-flex-start
|
|
169
|
+
.u-flex-start,
|
|
170
|
+
.up-flex-start {
|
|
137
171
|
justify-content: flex-start;
|
|
138
172
|
}
|
|
139
173
|
|
|
140
174
|
// 主轴中间对齐
|
|
141
|
-
.u-flex-center
|
|
175
|
+
.u-flex-center,
|
|
176
|
+
.up-flex-center {
|
|
142
177
|
justify-content: center;
|
|
143
178
|
}
|
|
144
179
|
|
|
145
180
|
// 主轴终点对齐
|
|
146
|
-
.u-flex-end
|
|
181
|
+
.u-flex-end,
|
|
182
|
+
.up-flex-end {
|
|
147
183
|
justify-content: flex-end;
|
|
148
184
|
}
|
|
149
185
|
|
|
150
186
|
// 主轴等比间距
|
|
151
|
-
.u-flex-between
|
|
187
|
+
.u-flex-between,
|
|
188
|
+
.up-flex-between {
|
|
152
189
|
justify-content: space-between;
|
|
153
190
|
}
|
|
154
191
|
|
|
155
192
|
// 主轴均分间距
|
|
156
|
-
.u-flex-around
|
|
193
|
+
.u-flex-around,
|
|
194
|
+
.up-flex-around {
|
|
157
195
|
justify-content: space-around;
|
|
158
196
|
}
|
|
159
197
|
|
|
160
198
|
// 交叉轴起点对齐
|
|
161
|
-
.u-flex-items-start
|
|
199
|
+
.u-flex-items-start,
|
|
200
|
+
.up-flex-items-start {
|
|
162
201
|
align-items: flex-start;
|
|
163
202
|
}
|
|
164
203
|
|
|
165
204
|
// 交叉轴中间对齐
|
|
166
|
-
.u-flex-items-center
|
|
205
|
+
.u-flex-items-center,
|
|
206
|
+
.up-flex-items-center {
|
|
167
207
|
align-items: center;
|
|
168
208
|
}
|
|
169
209
|
|
|
170
210
|
// 交叉轴终点对齐
|
|
171
|
-
.u-flex-items-end
|
|
211
|
+
.u-flex-items-end,
|
|
212
|
+
.up-flex-items-end {
|
|
172
213
|
align-items: flex-end;
|
|
173
214
|
}
|
|
174
215
|
|
|
175
216
|
// 交叉轴第一行文字基线对齐
|
|
176
|
-
.u-flex-items-baseline
|
|
217
|
+
.u-flex-items-baseline,
|
|
218
|
+
.up-flex-items-baseline {
|
|
177
219
|
/* #ifndef APP-NVUE */
|
|
178
220
|
align-items: baseline;
|
|
179
221
|
/* #endif */
|
|
180
222
|
}
|
|
181
223
|
|
|
182
224
|
// 交叉轴方向拉伸对齐
|
|
183
|
-
.u-flex-items-stretch
|
|
225
|
+
.u-flex-items-stretch,
|
|
226
|
+
.up-flex-items-stretch {
|
|
184
227
|
align-items: stretch;
|
|
185
228
|
}
|
|
186
229
|
|
|
@@ -189,27 +232,32 @@
|
|
|
189
232
|
|
|
190
233
|
// 子元素交叉轴起点对齐
|
|
191
234
|
/* #ifndef APP-NVUE */
|
|
192
|
-
.u-flex-self-start
|
|
235
|
+
.u-flex-self-start,
|
|
236
|
+
.up-flex-self-start {
|
|
193
237
|
align-self: flex-start;
|
|
194
238
|
}
|
|
195
239
|
|
|
196
240
|
// 子元素交叉轴居中对齐
|
|
197
|
-
.u-flex-self-center
|
|
241
|
+
.u-flex-self-center,
|
|
242
|
+
.up-flex-self-center {
|
|
198
243
|
align-self: center;
|
|
199
244
|
}
|
|
200
245
|
|
|
201
246
|
// 子元素交叉轴终点对齐
|
|
202
|
-
.u-flex-self-end
|
|
247
|
+
.u-flex-self-end,
|
|
248
|
+
.up-flex-self-end {
|
|
203
249
|
align-self: flex-end;
|
|
204
250
|
}
|
|
205
251
|
|
|
206
252
|
// 子元素交叉轴第一行文字基线对齐
|
|
207
|
-
.u-flex-self-baseline
|
|
253
|
+
.u-flex-self-baseline,
|
|
254
|
+
.up-flex-self-baseline {
|
|
208
255
|
align-self: baseline;
|
|
209
256
|
}
|
|
210
257
|
|
|
211
258
|
// 子元素交叉轴方向拉伸对齐
|
|
212
|
-
.u-flex-self-stretch
|
|
259
|
+
.u-flex-self-stretch,
|
|
260
|
+
.up-flex-self-stretch {
|
|
213
261
|
align-self: stretch;
|
|
214
262
|
}
|
|
215
263
|
/* #endif */
|
|
@@ -217,32 +265,38 @@
|
|
|
217
265
|
|
|
218
266
|
// 起点对齐
|
|
219
267
|
/* #ifndef APP-NVUE */
|
|
220
|
-
.u-flex-content-start
|
|
268
|
+
.u-flex-content-start,
|
|
269
|
+
.up-flex-content-start {
|
|
221
270
|
align-content: flex-start;
|
|
222
271
|
}
|
|
223
272
|
|
|
224
273
|
// 居中对齐
|
|
225
|
-
.u-flex-content-center
|
|
274
|
+
.u-flex-content-center,
|
|
275
|
+
.up-flex-content-center {
|
|
226
276
|
align-content: center;
|
|
227
277
|
}
|
|
228
278
|
|
|
229
279
|
// 终点对齐
|
|
230
|
-
.u-flex-content-end
|
|
280
|
+
.u-flex-content-end,
|
|
281
|
+
.up-flex-content-end {
|
|
231
282
|
align-content: flex-end;
|
|
232
283
|
}
|
|
233
284
|
|
|
234
285
|
// 两端对齐
|
|
235
|
-
.u-flex-content-between
|
|
286
|
+
.u-flex-content-between,
|
|
287
|
+
.up-flex-content-between {
|
|
236
288
|
align-content: space-between;
|
|
237
289
|
}
|
|
238
290
|
|
|
239
291
|
// 均分间距
|
|
240
|
-
.u-flex-content-around
|
|
292
|
+
.u-flex-content-around,
|
|
293
|
+
.up-flex-content-around {
|
|
241
294
|
align-content: space-around;
|
|
242
295
|
}
|
|
243
296
|
|
|
244
297
|
// 全部居中对齐
|
|
245
|
-
.u-flex-middle
|
|
298
|
+
.u-flex-middle,
|
|
299
|
+
.up-flex-middle {
|
|
246
300
|
justify-content: center;
|
|
247
301
|
align-items: center;
|
|
248
302
|
align-self: center;
|
|
@@ -250,12 +304,14 @@
|
|
|
250
304
|
}
|
|
251
305
|
|
|
252
306
|
// 是否可以放大
|
|
253
|
-
.u-flex-grow
|
|
307
|
+
.u-flex-grow,
|
|
308
|
+
.up-flex-grow {
|
|
254
309
|
flex-grow: 1;
|
|
255
310
|
}
|
|
256
311
|
|
|
257
312
|
// 是否可以缩小
|
|
258
|
-
.u-flex-shrink
|
|
313
|
+
.u-flex-shrink,
|
|
314
|
+
.up-flex-shrink {
|
|
259
315
|
flex-shrink: 1;
|
|
260
316
|
}
|
|
261
317
|
|
|
@@ -265,36 +321,42 @@
|
|
|
265
321
|
@for $i from 0 through 80 {
|
|
266
322
|
// 只要双数和能被5除尽的数
|
|
267
323
|
@if $i % 2 == 0 or $i % 5 == 0 {
|
|
268
|
-
// 得出：
|
|
269
|
-
.u-margin-#{$i}, .u-m-#{$i}
|
|
324
|
+
// 得出：up-margin-30或者u-m-30
|
|
325
|
+
.u-margin-#{$i}, .u-m-#{$i},
|
|
326
|
+
.up-margin-#{$i}, .up-m-#{$i} {
|
|
270
327
|
margin: $i + rpx!important;
|
|
271
328
|
}
|
|
272
329
|
|
|
273
|
-
// 得出：
|
|
274
|
-
.u-padding-#{$i}, .u-p-#{$i}
|
|
330
|
+
// 得出：up-padding-30或者u-p-30
|
|
331
|
+
.u-padding-#{$i}, .u-p-#{$i},
|
|
332
|
+
.up-padding-#{$i}, .up-p-#{$i} {
|
|
275
333
|
padding: $i + rpx!important;
|
|
276
334
|
}
|
|
277
335
|
|
|
278
336
|
@each $short, $long in l left, t top, r right, b bottom {
|
|
279
|
-
// 缩写版，结果如：
|
|
337
|
+
// 缩写版，结果如： up-m-l-30
|
|
280
338
|
// 定义外边距
|
|
281
|
-
.u-m-#{$short}-#{$i}
|
|
339
|
+
.u-m-#{$short}-#{$i},
|
|
340
|
+
.up-m-#{$short}-#{$i} {
|
|
282
341
|
margin-#{$long}: $i + rpx!important;
|
|
283
342
|
}
|
|
284
343
|
|
|
285
344
|
// 定义内边距
|
|
286
|
-
.u-p-#{$short}-#{$i}
|
|
345
|
+
.u-p-#{$short}-#{$i},
|
|
346
|
+
.up-p-#{$short}-#{$i} {
|
|
287
347
|
padding-#{$long}: $i + rpx!important;
|
|
288
348
|
}
|
|
289
349
|
|
|
290
|
-
// 完整版，结果如：
|
|
350
|
+
// 完整版，结果如：up-margin-left-30
|
|
291
351
|
// 定义外边距
|
|
292
|
-
.u-margin-#{$long}-#{$i}
|
|
352
|
+
.u-margin-#{$long}-#{$i},
|
|
353
|
+
.up-margin-#{$long}-#{$i} {
|
|
293
354
|
margin-#{$long}: $i + rpx!important;
|
|
294
355
|
}
|
|
295
356
|
|
|
296
357
|
// 定义内边距
|
|
297
|
-
.u-padding-#{$long}-#{$i}
|
|
358
|
+
.u-padding-#{$long}-#{$i},
|
|
359
|
+
.up-padding-#{$long}-#{$i} {
|
|
298
360
|
padding-#{$long}: $i + rpx!important;
|
|
299
361
|
}
|
|
300
362
|
}
|
package/libs/css/vue.scss
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
// 历遍生成4个方向的底部安全区
|
|
2
2
|
@each $d in top, right, bottom, left {
|
|
3
|
-
.u-safe-area-inset-#{$d}
|
|
3
|
+
.u-safe-area-inset-#{$d},
|
|
4
|
+
.up-safe-area-inset-#{$d} {
|
|
4
5
|
padding-#{$d}: 0;
|
|
5
6
|
padding-#{$d}: constant(safe-area-inset-#{$d});
|
|
6
7
|
padding-#{$d}: env(safe-area-inset-#{$d});
|
|
7
8
|
}
|
|
8
9
|
}
|
|
9
10
|
|
|
10
|
-
//提升H5端uni.toast()的层级，避免被
|
|
11
|
-
/* #ifdef H5 */
|
|
12
|
-
uni-toast {
|
|
13
|
-
z-index: 10090;
|
|
14
|
-
}
|
|
15
|
-
uni-toast .uni-toast {
|
|
16
|
-
z-index: 10090;
|
|
17
|
-
}
|
|
11
|
+
//提升H5端uni.toast()的层级，避免被uview-plus的modal等遮盖
|
|
12
|
+
/* #ifdef H5 */
|
|
13
|
+
uni-toast {
|
|
14
|
+
z-index: 10090;
|
|
15
|
+
}
|
|
16
|
+
uni-toast .uni-toast {
|
|
17
|
+
z-index: 10090;
|
|
18
|
+
}
|
|
18
19
|
/* #endif */
|
|
19
20
|
|
|
20
21
|
// 隐藏scroll-view的滚动条
|
|
@@ -24,4 +25,4 @@ uni-toast .uni-toast {
|
|
|
24
25
|
height: 0 !important;
|
|
25
26
|
-webkit-appearance: none;
|
|
26
27
|
background: transparent;
|
|
27
|
-
}
|
|
28
|
+
}
|