zkqh-lagrange-utils 0.0.7 → 0.0.9

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.
@@ -37,6 +37,7 @@
37
37
  @lc_gradient_warning: linear-gradient(#ffddb0, #f0b76c);
38
38
  @lc_gradient_notice: linear-gradient(#b7cdff, #4b79e3);
39
39
  @lc_gradient_icon: linear-gradient(152deg, #81a1ba, #ffffff 20%, #81a1ba 40%, #ffffff 60%, #81a1ba 80%, #ffffff);
40
+ @lc_gradient_offline: linear-gradient(#e5effc, #c6c4c4);
40
41
  @lc_gradient_background1: linear-gradient(to bottom, #1d496d 0%, #1e3549 100%);
41
42
 
42
43
  @lc_br_2: 2px;
@@ -1,15 +1,10 @@
1
1
  @import "./color.less";
2
2
  // #region mixin
3
- // 文字渐变 必须在背景色之后才可生效
4
- .lc_text-gradient() {
5
- -webkit-background-clip: text;
6
- background-clip: text;
7
- color: transparent;
8
- }
3
+
9
4
 
10
5
  // 边框线 入参为边框宽度和边框颜色
11
- .lc_border(width, color) {
12
- border: width solid color;
6
+ .lc_border(@width, @color) {
7
+ border: @width solid @color;
13
8
  }
14
9
 
15
10
 
@@ -17,9 +12,7 @@
17
12
 
18
13
  // #region 直接使用
19
14
  // 文字渐变 必须在背景色之后才可生效
20
- .lc_text-gradient {
21
- .lc_text-gradient();
22
- }
15
+
23
16
 
24
17
  // #endregion
25
18
 
@@ -1,9 +1,38 @@
1
- @import "./common.less";
2
-
1
+ @import "./color.less";
3
2
  * {
4
3
  font-family: DinRegular, "PingFang SC", Arial, Microsoft YaHei;
5
4
  }
6
5
 
6
+ // #region mixin
7
+ // 文字渐变 必须在背景色之后才可生效
8
+ .lc_text-gradient() {
9
+ -webkit-background-clip: text;
10
+ background-clip: text;
11
+ color: transparent;
12
+ }
13
+
14
+ // 斜体
15
+ .lp_italic() {
16
+ font-style: oblique  13deg;
17
+ transform: skew(-13deg);
18
+ display: inline-block;
19
+ }
20
+
21
+ .lc_tg(@bg) {
22
+ background: @bg;
23
+ .lc_text-gradient();
24
+ }
25
+
26
+ // 图标渐变 入参为背景色和内发光效果
27
+ .lc_ig(@bg,@shadow) {
28
+ background: @bg;
29
+ .lc_text-gradient();
30
+ /* 内发光效果 */
31
+ text-shadow: @shadow;
32
+ }
33
+
34
+ // #endregion
35
+
7
36
  // 字形
8
37
  @font-face {
9
38
  font-family: BiaoTi;
@@ -20,15 +49,11 @@
20
49
 
21
50
  @font-face {
22
51
  font-family: "logo";
23
- src: url("../../font/logo/Ym27YmhoiJ2i.woff");
52
+ src: url("../../font/font-family/Ym27YmhoiJ2i.woff");
24
53
  }
25
54
 
26
- // 斜体
27
- .Jiangcheng {
28
- font-style: oblique  13deg;
29
- transform: skew(-13deg);
30
- display: inline-block;
31
- }
55
+
56
+
32
57
 
33
58
  // 字体大小
34
59
  .lp_fs_small {
@@ -44,35 +69,58 @@
44
69
  font-size: 28px;
45
70
  }
46
71
 
47
- // 标题字体族
48
- .lp_font_biaoti {
49
- font-family: BiaoTi;
72
+ // 斜体(别名,便于记忆与使用)
73
+ .lp_italic {
74
+ .lp_italic();
50
75
  }
51
76
 
77
+ // 文字渐变 必须在背景色之后才可生效
78
+ .lc_text-gradient {
79
+ .lc_text-gradient();
80
+ }
52
81
 
53
-
54
-
55
- // #region mixin
56
- // 文字渐变 入参为背景色
57
- .lc_tg(bg) {
58
- background: bg;
59
- .lc_text-gradient();
82
+ // 文字渐变-基础
83
+ .lc_tg_base {
84
+ .lc_tg(@lc_gradient_base);
60
85
  }
61
86
 
62
- // 图标渐变 入参为背景色和内发光效果
63
- .lc_ig(bg,shadow) {
64
- background: bg;
65
- .lc_text-gradient();
66
- /* 内发光效果 */
67
- text-shadow: shadow;
87
+ .lc_tg_normal {
88
+ .lc_tg(@lc_gradient_processed);
68
89
  }
69
90
 
91
+ .lc_tg_notice{
92
+ .lc_tg(@lc_gradient_notice);
93
+ }
70
94
 
71
- // #endregion
95
+ .lc_tg_warning{
96
+ .lc_tg(@lc_gradient_warning);
97
+ }
72
98
 
99
+ .lc_tg_alarm{
100
+ .lc_tg(@lc_gradient_unread);
101
+ }
73
102
 
103
+ .lc_tg_offline{
104
+ .lc_tg(@lc_gradient_offline);
105
+ }
74
106
 
107
+ // 图标渐变
108
+ .lc_ig_normal {
109
+ .lc_ig(@lc_gradient_processed, @lc_shadow_icon1);
110
+ }
75
111
 
112
+ .lc_ig_notice{
113
+ .lc_ig(@lc_gradient_notice, @lc_shadow_icon1);
114
+ }
76
115
 
116
+ .lc_ig_warning{
117
+ .lc_ig(@lc_gradient_warning, @lc_shadow_icon1);
118
+ }
77
119
 
120
+ .lc_ig_alarm{
121
+ .lc_ig(@lc_gradient_unread, @lc_shadow_icon1);
122
+ }
78
123
 
124
+ .lc_ig_offline{
125
+ .lc_ig(@lc_gradient_offline, @lc_shadow_icon1);
126
+ }
@@ -0,0 +1,380 @@
1
+ // 修复naiveui不兼容问题
2
+
3
+ @size4: 4px;
4
+ @size6: 6px;
5
+ @size8: 8px;
6
+ @size12: 12px;
7
+ @size16: 16px;
8
+ @size20: 20px;
9
+ @size24: 24px;
10
+
11
+ @s4-i:@size4 !important;
12
+ @s6-i:@size6 !important;
13
+ @s8-i:@size8 !important;
14
+ @s12-i:@size12 !important;
15
+ @s16-i:@size16 !important;
16
+ @s20-i:@size20 !important;
17
+ @s24-i:@size24 !important;
18
+
19
+
20
+ // 滚动条
21
+ .n-base-scrollbar {
22
+ border-radius: @s6-i;
23
+ }
24
+
25
+ .n-scrollbar-rail__scrollbar,
26
+ .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical {
27
+ width: @s6-i;
28
+ }
29
+
30
+ // select下拉弹窗
31
+ .n-base-select-menu {
32
+ --n-option-height: 34px !important;
33
+
34
+ .n-base-select-option {
35
+ padding: 0 12px !important;
36
+
37
+ &::before {
38
+ left: 4px !important;
39
+ right: 4px !important;
40
+ }
41
+
42
+ .n-base-select-option__check {
43
+ font-size: 20px !important;
44
+ top: calc(50% - 7px) !important;
45
+ right: 8px !important;
46
+ }
47
+
48
+ &.n-base-select-option--show-checkmark {
49
+ padding-right: calc(var(--n-option-padding-right) + 20px) !important;
50
+ }
51
+ }
52
+
53
+ .n-base-select-menu__loading,
54
+ .n-base-select-menu__empty {
55
+ padding: 12px 32px !important;
56
+ }
57
+ }
58
+
59
+ .n-base-selection-tag-wrapper {
60
+ padding: 0 7px 3px 0 !important;
61
+
62
+ .n-tag {
63
+ .n-tag__content {
64
+ font-size: 14px !important;
65
+ }
66
+ }
67
+ }
68
+
69
+ .n-select-menu {
70
+ margin: 4px 0 !important;
71
+ }
72
+
73
+ .n-base-select-menu-option-wrapper {
74
+ padding: 4px 0 !important;
75
+ }
76
+
77
+ // 暂无数据
78
+ .n-empty {
79
+ height: 100% !important;
80
+ width: 100% !important;
81
+ justify-content: center !important;
82
+ }
83
+
84
+ .n-empty .n-empty__description {
85
+ margin-top: 8px !important;
86
+ }
87
+
88
+ // 数据表格
89
+ .n-data-table {
90
+ &.n-data-table--bordered {
91
+ .n-data-table-wrapper {
92
+ border: 1px solid var(--n-merged-border-color) !important;
93
+ }
94
+ }
95
+
96
+ .n-data-table-th {
97
+ border-bottom: 1px solid var(--n-merged-border-color);
98
+ }
99
+
100
+ .n-data-table-td {
101
+ border-bottom: 1px solid var(--n-merged-border-color);
102
+ }
103
+ }
104
+
105
+ // 图片预览工具栏
106
+ .n-image-preview-toolbar {
107
+ height: 48px !important;
108
+ bottom: 48px !important;
109
+ padding: 0 12px !important;
110
+
111
+ .n-base-icon {
112
+ padding: 0 8px !important;
113
+ font-size: 28px !important;
114
+ }
115
+ }
116
+
117
+ // dropdown下拉弹窗
118
+ .n-dropdown-menu {
119
+ .n-dropdown-option {
120
+ .n-dropdown-option-body::before {
121
+ left: 4px !important;
122
+ right: 4px !important;
123
+ }
124
+
125
+ .n-dropdown-option-body {
126
+ .n-dropdown-option-body__suffix {
127
+ padding: 0 8px !important;
128
+ }
129
+ }
130
+ }
131
+ }
132
+
133
+ // checkout
134
+ .n-checkbox .n-checkbox-box .n-checkbox-icon {
135
+ left: 1px !important;
136
+ right: 1px !important;
137
+ top: 1px !important;
138
+ bottom: 1px !important;
139
+ }
140
+
141
+ // data-pick
142
+ .n-date-panel {
143
+ margin: 4px 0 !important;
144
+
145
+ .n-date-panel-month {
146
+ .n-date-panel-month__fast-prev,
147
+ .n-date-panel-month__prev,
148
+ .n-date-panel-month__month-year,
149
+ .n-date-panel-month__next,
150
+ .n-date-panel-month__fast-next {
151
+ position: relative;
152
+
153
+ > svg {
154
+ position: absolute;
155
+ top: 0;
156
+ }
157
+ }
158
+
159
+ .n-date-panel-month__month-year {
160
+ .n-date-panel-month__text {
161
+ padding: 6px 8px !important;
162
+ }
163
+ }
164
+ }
165
+
166
+ .n-date-panel-weekdays {
167
+ margin-bottom: 4px !important;
168
+ border-bottom: 1px solid var(--n-calendar-days-divider-color) !important;
169
+ }
170
+
171
+ .n-date-panel__vertical-divider {
172
+ width: 1px !important;
173
+ }
174
+
175
+ .n-date-panel-actions {
176
+ border-top: 1px solid var(--n-panel-action-divider-color) !important;
177
+ }
178
+
179
+ .n-date-panel-month-calendar {
180
+ display: none !important;
181
+ }
182
+
183
+ .n-date-panel-header {
184
+ border-bottom: 1px solid var(--n-panel-header-divider-color) !important;
185
+ .n-input,
186
+ .n-time-picker {
187
+ display: flex !important;
188
+ align-items: center !important;
189
+ }
190
+
191
+ & > *:not(:last-child) {
192
+ margin-right: 10px !important;
193
+ }
194
+ }
195
+
196
+ .n-date-panel-dates {
197
+ .n-date-panel-date {
198
+ &.n-date-panel-date--current {
199
+ .n-date-panel-date__sup {
200
+ top: 2px !important;
201
+ right: 2px !important;
202
+ height: 4px !important;
203
+ width: 4px !important;
204
+ border-radius: 2px !important;
205
+ }
206
+ }
207
+ }
208
+ }
209
+ }
210
+
211
+ .n-time-picker-panel {
212
+ display: block !important;
213
+ }
214
+
215
+ .n-time-picker-cols {
216
+ border-bottom: 1px solid var(--n-panel-divider-color) !important;
217
+ }
218
+
219
+ .n-time-picker-col:first-child {
220
+ min-width: calc(var(--n-item-width) + 4px) !important;
221
+ }
222
+
223
+ .n-time-picker-col {
224
+ .n-time-picker-col__item {
225
+ padding-top: 4px !important;
226
+ }
227
+
228
+ .n-time-picker-col__item::before {
229
+ right: 4px !important;
230
+ top: 4px !important;
231
+ }
232
+
233
+ &:first-child .n-time-picker-col__item::before {
234
+ left: 4px !important;
235
+ }
236
+ }
237
+
238
+ // 轮播图
239
+ .n-carousel {
240
+ .n-carousel__arrow {
241
+ height: 28px !important;
242
+ width: 28px !important;
243
+ border-radius: 8px !important;
244
+ font-size: 18px !important;
245
+ }
246
+
247
+ &.n-carousel--bottom {
248
+ .n-carousel__arrow-group {
249
+ bottom: 12px !important;
250
+ right: 12px !important;
251
+
252
+ & > *:first-child {
253
+ margin-right: 12px;
254
+ }
255
+ }
256
+ }
257
+ }
258
+
259
+ // dialog弹窗
260
+ .n-dialog {
261
+ &.n-modal {
262
+ width: 446px !important;
263
+ max-width: calc(100vw - 32px) !important;
264
+ }
265
+ }
266
+
267
+ // 菜单menu
268
+ .n-menu {
269
+ .n-menu-item-content {
270
+ padding-right: 18px !important;
271
+ padding-left: 10px !important;
272
+ .n-menu-item-content__icon {
273
+ width: 24px !important;
274
+ height: 24px !important;
275
+ font-size: 20px !important;
276
+ margin-right: 8px !important;
277
+ }
278
+ .n-menu-item-content__arrow {
279
+ font-size: 16px !important;
280
+ }
281
+ }
282
+ .n-submenu {
283
+ margin-top: @s6-i;
284
+ }
285
+ }
286
+
287
+ .n-breadcrumb {
288
+ margin-left: 10px !important;
289
+ .n-breadcrumb-item {
290
+ .n-breadcrumb-item__link {
291
+ padding: 4px !important;
292
+ }
293
+ }
294
+ }
295
+
296
+ .n-base-selection {
297
+ --n-padding-multiple-top: 3px !important;
298
+ --n-padding-single-right: 26px !important;
299
+ --n-padding-multiple-right: 26px !important;
300
+ --n-padding-single-left: 12px !important;
301
+ --n-padding-multiple-left: 12px !important;
302
+ --n-clear-size: 16px !important;
303
+ --n-arrow-size: 16px !important;
304
+ .n-base-suffix {
305
+ right: 10px !important;
306
+ }
307
+ }
308
+
309
+ .n-button--small-type {
310
+ font-size: 12px !important;
311
+ margin-right: 10px !important;
312
+ }
313
+
314
+ .n-tree {
315
+ --n-node-content-height: 24px !important;
316
+ .n-tree-node-switcher {
317
+ width: 24px !important;
318
+ height: 24px !important;
319
+ .n-tree-node-switcher__icon {
320
+ height: 14px !important;
321
+ width: 14px !important;
322
+ font-size: 14px !important;
323
+ }
324
+ }
325
+ .n-tree-node-checkbox {
326
+ width: 24px !important;
327
+ }
328
+ .n-tree-node-content {
329
+ padding: 0 6px 0 4px !important;
330
+ }
331
+ .n-tree-node-indent {
332
+ > div {
333
+ width: 24px !important;
334
+ }
335
+ }
336
+ }
337
+
338
+ .n-alert {
339
+ .n-alert-body {
340
+ .n-alert-body__title {
341
+ font-size: 16px !important;
342
+ line-height: 19px !important;
343
+ }
344
+ .n-alert-body__title + .n-alert-body__content {
345
+ margin-top: 9px !important;
346
+ }
347
+ }
348
+ }
349
+ .n-alert--show-icon {
350
+ margin-bottom: 20px !important;
351
+ }
352
+
353
+ .n-modal {
354
+ .n-card.n-card--bordered {
355
+ border: 1px solid var(--n-border-color) !important;
356
+ }
357
+ }
358
+
359
+ .n-tabs {
360
+ .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--top .n-tabs-nav-scroll-content {
361
+ border-bottom: 1px solid var(--n-tab-border-color) !important;
362
+ }
363
+ .n-tabs-bar {
364
+ height: 2px !important;
365
+ border-radius: 1px !important;
366
+ }
367
+ .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--top .n-tabs-bar {
368
+ bottom: -1px !important;
369
+ }
370
+ }
371
+
372
+ .n-cascader-menu {
373
+ --n-option-height: 34px !important;
374
+ }
375
+
376
+ .n-pagination {
377
+ align-items: center;
378
+ }
379
+
380
+
@@ -0,0 +1,18 @@
1
+ /* naive全局穿透样式,即样式在 id = app 之外的元素 例如 popover等*/
2
+ .n-select .n-base-selection, .n-input {
3
+ --n-height: 1.75rem !important;
4
+ border: 0.0625rem solid #253f5f !important;
5
+ --n-border-radius: 0 !important;
6
+ --n-placeholder-color: #96b8ff7e !important;
7
+ --n-color: #0c1822 !important;
8
+ --n-color-active: #030d14 !important;
9
+ --n-color-focus: #030d14 !important;
10
+ --n-border: 0 !important;
11
+ --n-border-active: 0 !important;
12
+ --n-border-hover: 0 !important;
13
+ --n-border-focus: 0 !important;
14
+ --n-box-shadow-active: none !important;
15
+ --n-box-shadow-focus: none !important;
16
+ --n-box-shadow-hover: none !important;
17
+ position: relative;
18
+ }
@@ -0,0 +1,22 @@
1
+ /* 控制台场景:Naive UI 选择器边框与焦点(亮色) */
2
+ .n-base-selection {
3
+ --n-height: 2.125rem !important;
4
+ --n-border: 0.0625rem solid rgb(224, 224, 230) !important;
5
+ --n-border-active: 0.0625rem solid #0760a3 !important;
6
+ --n-border-focus: 0.0625rem solid #0760a3 !important;
7
+ --n-border-hover: 0.0625rem solid #0760a3 !important;
8
+ --n-box-shadow-active: 0 0 0 0.125rem rgba(7, 96, 163, 0.2) !important;
9
+ --n-box-shadow-focus: 0 0 0 0.125rem rgba(7, 96, 163, 0.2) !important;
10
+ --n-box-shadow-focus-warning: 0 0 0 0.125rem rgba(240, 160, 32, 0.2) !important;
11
+ --n-box-shadow-active-warning: 0 0 0 0.125rem rgba(240, 160, 32, 0.2) !important;
12
+ --n-border-warning: 0.0625rem solid #f0a020 !important;
13
+ --n-border-focus-warning: 0.0625rem solid #fcb040 !important;
14
+ --n-border-hover-warning: 0.0625rem solid #fcb040 !important;
15
+ --n-border-active-warning: 0.0625rem solid #f0a020 !important;
16
+ --n-box-shadow-focus-error: 0 0 0 0.125rem rgba(208, 48, 80, 0.2) !important;
17
+ --n-box-shadow-active-error: 0 0 0 0.125rem rgba(208, 48, 80, 0.2) !important;
18
+ --n-border-error: 0.0625rem solid #d03050 !important;
19
+ --n-border-focus-error: 0.0625rem solid #de576d !important;
20
+ --n-border-hover-error: 0.0625rem solid #de576d !important;
21
+ --n-border-active-error: 0.0625rem solid #d03050 !important;
22
+ }