easy3wui 1.6.0 → 1.6.1

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/README.md CHANGED
@@ -1,2 +1,8 @@
1
1
  # easy3wUI
2
- easy3w UI 组件
2
+ easy3w UI 组件
3
+
4
+ # 编译
5
+ npm run compile
6
+
7
+ # 发布
8
+ npm publish
package/assets/btn.css CHANGED
@@ -1,14 +1,20 @@
1
+ /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
2
+ /* stylelint-disable no-duplicate-selectors */
3
+ /* stylelint-disable */
4
+ /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
1
5
  .e3wFootBtn {
2
6
  margin: 0px 8px;
3
7
  }
8
+ .e3wFormBtn {
9
+ margin-right: 8px;
10
+ }
4
11
  .positionDiv {
5
12
  position: absolute;
6
- right: 32px;
7
- top: 16px;
13
+ right: 12px;
14
+ top: 10px;
8
15
  }
9
16
  .e3wPositionA {
10
17
  font-size: 15px;
11
- color: #5468b2;
12
18
  font-weight: 900;
13
19
  margin-left: 15px;
14
20
  }
package/assets/card.css CHANGED
@@ -25,6 +25,14 @@
25
25
  .e3wCardForm .formes {
26
26
  float: left;
27
27
  }
28
+ .e3wCardForm :global .ant-card-head {
29
+ padding: 0 !important;
30
+ margin: 0 12px;
31
+ border: none;
32
+ }
33
+ .e3wCardForm :global .ant-card-body {
34
+ padding: 0 !important;
35
+ }
28
36
  s {
29
37
  display: inline-block;
30
38
  width: 3px;
package/assets/flow.css CHANGED
@@ -3,15 +3,218 @@
3
3
  /* stylelint-disable no-duplicate-selectors */
4
4
  /* stylelint-disable */
5
5
  /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
6
+ /* #5867ad */
6
7
  /*流程图部分*/
7
8
  .flowmain {
8
9
  margin: auto;
9
10
  width: 100%;
10
11
  background: #fff;
11
12
  }
12
- .floatcenter {
13
- position: relative;
14
- left: 67%;
13
+ .flowtop {
14
+ width: 100%;
15
+ }
16
+ .flowtop .floatcenter {
17
+ width: 90%;
18
+ margin: 0 auto;
19
+ /*
20
+ 公式: 线宽 (100% / n -22px) / 2
21
+ 思路:
22
+ 虚拟: 将每个节点 + 左侧线宽 + 右侧线宽看成一个块,所有块组合成整体top 虚拟的每个节点块长度都相等 除了首尾节点 其它节点的宽为: 100% / n
23
+ 实际:
24
+ 第一个节点: 左侧填充一个线宽 + 节点 + 右侧两个线 (100% / n -22px) / 2 * 3 + 22px 节点 + 3个线宽
25
+ 最后一个节点: 节点 + 右侧填充一个线宽 (100% / n -22px) / 2 + 22px 节点 + 1个线宽
26
+ 其它节点: 节点 + 右侧两个线 (100% / n -22px) / 2 * 2 + 22px 节点 + 2个线宽
27
+ 最终确保: 节点 + 填充 + 线 = top宽
28
+ 每个节点都有属于不与其它节点公用的两个线宽的长度
29
+ 构图: -o--o--o-
30
+ 流程节点:
31
+ 节点: 22px
32
+ 线宽: (100% / n -22px) / 2
33
+ */
34
+ }
35
+ .flowtop .floatcenter .renderTopTemp2:first-child {
36
+ width: calc((100% / 2 - 22px) / 2 * 3 + 22px);
37
+ padding-left: calc((100% / 2 - 22px) / 2);
38
+ }
39
+ .flowtop .floatcenter .renderTopTemp2 {
40
+ width: calc(100% / 2);
41
+ float: left;
42
+ }
43
+ .flowtop .floatcenter .renderTopTemp2 .flowline2 {
44
+ float: left;
45
+ margin-top: 15px;
46
+ height: 4px;
47
+ width: calc(100% - 22px);
48
+ }
49
+ .flowtop .floatcenter .renderTopTemp2:last-child {
50
+ width: calc((100% / 2 - 22px) / 2 + 22px);
51
+ padding-right: calc((100% / 2 - 22px) / 2);
52
+ }
53
+ .flowtop .floatcenter .renderTopTemp3:first-child {
54
+ width: calc((100% / 3 - 22px) / 2 * 3 + 22px);
55
+ padding-left: calc((100% / 3 - 22px) / 2);
56
+ }
57
+ .flowtop .floatcenter .renderTopTemp3 {
58
+ width: calc(100% / 3);
59
+ float: left;
60
+ }
61
+ .flowtop .floatcenter .renderTopTemp3 .flowline3 {
62
+ float: left;
63
+ margin-top: 15px;
64
+ height: 4px;
65
+ width: calc(100% - 22px);
66
+ }
67
+ .flowtop .floatcenter .renderTopTemp3:last-child {
68
+ width: calc((100% / 3 - 22px) / 2 + 22px);
69
+ padding-right: calc((100% / 3 - 22px) / 2);
70
+ }
71
+ .flowtop .floatcenter .renderTopTemp4:first-child {
72
+ width: calc((100% / 4 - 22px) / 2 * 3 + 22px);
73
+ padding-left: calc((100% / 4 - 22px) / 2);
74
+ }
75
+ .flowtop .floatcenter .renderTopTemp4 {
76
+ width: calc(100% / 4);
77
+ float: left;
78
+ }
79
+ .flowtop .floatcenter .renderTopTemp4 .flowline4 {
80
+ float: left;
81
+ margin-top: 15px;
82
+ height: 4px;
83
+ width: calc(100% - 22px);
84
+ }
85
+ .flowtop .floatcenter .renderTopTemp4:last-child {
86
+ width: calc((100% / 4 - 22px) / 2 + 22px);
87
+ padding-right: calc((100% / 4 - 22px) / 2);
88
+ }
89
+ .flowtop .floatcenter .renderTopTemp5:first-child {
90
+ width: calc((100% / 5 - 22px) / 2 * 3 + 22px);
91
+ padding-left: calc((100% / 5 - 22px) / 2);
92
+ }
93
+ .flowtop .floatcenter .renderTopTemp5 {
94
+ width: calc(100% / 5);
95
+ float: left;
96
+ }
97
+ .flowtop .floatcenter .renderTopTemp5 .flowline5 {
98
+ float: left;
99
+ margin-top: 15px;
100
+ height: 4px;
101
+ width: calc(100% - 22px);
102
+ }
103
+ .flowtop .floatcenter .renderTopTemp5:last-child {
104
+ width: calc((100% / 5 - 22px) / 2 + 22px);
105
+ padding-right: calc((100% / 5 - 22px) / 2);
106
+ }
107
+ .flowtop .floatcenter .renderTopTemp6:first-child {
108
+ width: calc((100% / 6 - 22px) / 2 * 3 + 22px);
109
+ padding-left: calc((100% / 6 - 22px) / 2);
110
+ }
111
+ .flowtop .floatcenter .renderTopTemp6 {
112
+ width: calc(100% / 6);
113
+ float: left;
114
+ }
115
+ .flowtop .floatcenter .renderTopTemp6 .flowline6 {
116
+ float: left;
117
+ margin-top: 15px;
118
+ height: 4px;
119
+ width: calc(100% - 22px);
120
+ }
121
+ .flowtop .floatcenter .renderTopTemp6:last-child {
122
+ width: calc((100% / 6 - 22px) / 2 + 22px);
123
+ padding-right: calc((100% / 6 - 22px) / 2);
124
+ }
125
+ .flowtop .floatcenter .renderTopTemp7:first-child {
126
+ width: calc((100% / 7 - 22px) / 2 * 3 + 22px);
127
+ padding-left: calc((100% / 7 - 22px) / 2);
128
+ }
129
+ .flowtop .floatcenter .renderTopTemp7 {
130
+ width: calc(100% / 7);
131
+ float: left;
132
+ }
133
+ .flowtop .floatcenter .renderTopTemp7 .flowline7 {
134
+ float: left;
135
+ margin-top: 15px;
136
+ height: 4px;
137
+ width: calc(100% - 22px);
138
+ }
139
+ .flowtop .floatcenter .renderTopTemp7:last-child {
140
+ width: calc((100% / 7 - 22px) / 2 + 22px);
141
+ padding-right: calc((100% / 7 - 22px) / 2);
142
+ }
143
+ .flowtop .floatcenter .renderTopTemp8:first-child {
144
+ width: calc((100% / 8 - 22px) / 2 * 3 + 22px);
145
+ padding-left: calc((100% / 8 - 22px) / 2);
146
+ }
147
+ .flowtop .floatcenter .renderTopTemp8 {
148
+ width: calc(100% / 8);
149
+ float: left;
150
+ }
151
+ .flowtop .floatcenter .renderTopTemp8 .flowline8 {
152
+ float: left;
153
+ margin-top: 15px;
154
+ height: 4px;
155
+ width: calc(100% - 22px);
156
+ }
157
+ .flowtop .floatcenter .renderTopTemp8:last-child {
158
+ width: calc((100% / 8 - 22px) / 2 + 22px);
159
+ padding-right: calc((100% / 8 - 22px) / 2);
160
+ }
161
+ .flowtop .floatcenter .renderTopTemp9:first-child {
162
+ width: calc((100% / 9 - 22px) / 2 * 3 + 22px);
163
+ padding-left: calc((100% / 9 - 22px) / 2);
164
+ }
165
+ .flowtop .floatcenter .renderTopTemp9 {
166
+ width: calc(100% / 9);
167
+ float: left;
168
+ }
169
+ .flowtop .floatcenter .renderTopTemp9 .flowline9 {
170
+ float: left;
171
+ margin-top: 15px;
172
+ height: 4px;
173
+ width: calc(100% - 22px);
174
+ }
175
+ .flowtop .floatcenter .renderTopTemp9:last-child {
176
+ width: calc((100% / 9 - 22px) / 2 + 22px);
177
+ padding-right: calc((100% / 9 - 22px) / 2);
178
+ }
179
+ .flowmid {
180
+ width: 100%;
181
+ height: 34px;
182
+ }
183
+ .flowmid .floatcenter {
184
+ width: 90%;
185
+ margin: 0 auto;
186
+ }
187
+ .flowmid .floatcenter div.flowtext2 {
188
+ width: calc(100% / 2);
189
+ float: left;
190
+ }
191
+ .flowmid .floatcenter div.flowtext3 {
192
+ width: calc(100% / 3);
193
+ float: left;
194
+ }
195
+ .flowmid .floatcenter div.flowtext4 {
196
+ width: calc(100% / 4);
197
+ float: left;
198
+ }
199
+ .flowmid .floatcenter div.flowtext5 {
200
+ width: calc(100% / 5);
201
+ float: left;
202
+ }
203
+ .flowmid .floatcenter div.flowtext6 {
204
+ width: calc(100% / 6);
205
+ float: left;
206
+ }
207
+ .flowmid .floatcenter div.flowtext7 {
208
+ width: calc(100% / 7);
209
+ float: left;
210
+ }
211
+ .flowmid .floatcenter div.flowtext8 {
212
+ width: calc(100% / 8);
213
+ float: left;
214
+ }
215
+ .flowmid .floatcenter div.flowtext9 {
216
+ width: calc(100% / 9);
217
+ float: left;
15
218
  }
16
219
  .floatcenter2_1 {
17
220
  position: absolute;
@@ -303,147 +506,63 @@
303
506
  color: #fff;
304
507
  /*浮动区块居中,必须配合.float-center使用*/
305
508
  position: relative;
306
- left: -50%;
307
- }
308
- /*renderTop有几个大节点时(3-9)*/
309
- .flowmain .flowline2 {
310
- float: left;
311
- margin-top: 15px;
312
- width: 30.8%;
313
- height: 4px;
314
- /*浮动区块居中,必须配合.float-center使用*/
315
- position: relative;
316
- left: -50%;
317
- }
318
- .flowmain .flowline3 {
319
- float: left;
320
- margin-top: 15px;
321
- width: 30.6%;
322
- height: 4px;
323
- /*浮动区块居中,必须配合.float-center使用*/
324
- position: relative;
325
- left: -50%;
326
- }
327
- .flowmain .flowline4 {
328
- float: left;
329
- margin-top: 15px;
330
- width: 19.8%;
331
- height: 4px;
332
- /*浮动区块居中,必须配合.float-center使用*/
333
- position: relative;
334
- left: -50%;
335
- }
336
- .flowmain .flowline5 {
337
- float: left;
338
- margin-top: 15px;
339
- width: 14.4%;
340
- height: 4px;
341
- /*浮动区块居中,必须配合.float-center使用*/
342
- position: relative;
343
- left: -50%;
344
- }
345
- .flowmain .flowline6 {
346
- float: left;
347
- margin-top: 15px;
348
- width: 11.2%;
349
- height: 4px;
350
- /*浮动区块居中,必须配合.float-center使用*/
351
- position: relative;
352
- left: -50%;
353
- }
354
- .flowmain .flowline7 {
355
- float: left;
356
- margin-top: 15px;
357
- width: 9.03%;
358
- height: 4px;
359
- /*浮动区块居中,必须配合.float-center使用*/
360
- position: relative;
361
- left: -50%;
362
- }
363
- .flowmain .flowline8 {
364
- float: left;
365
- margin-top: 15px;
366
- width: 7.4%;
367
- height: 4px;
368
- /*浮动区块居中,必须配合.float-center使用*/
369
- position: relative;
370
- left: -50%;
371
- }
372
- .flowmain .flowline9 {
373
- float: left;
374
- margin-top: 15px;
375
- width: 6.348%;
376
- height: 4px;
377
- /*浮动区块居中,必须配合.float-center使用*/
378
- position: relative;
379
- left: -50%;
380
- }
381
- .flowmid {
382
- height: 34px;
383
- }
384
- /*renderMid下的有几个flowtext(3-9)*/
385
- .flowmid .flowtext2 {
386
- width: 32.4%;
387
- float: left;
388
- /*浮动区块居中,必须配合.float-center使用*/
389
- position: relative;
390
- left: -65.5%;
391
- }
392
- .flowmid .flowtext3 {
393
- width: 32.4%;
394
- float: left;
395
- /*浮动区块居中,必须配合.float-center使用*/
396
- position: relative;
397
- left: -65.5%;
398
509
  }
399
- .flowmid .flowtext4 {
400
- width: 21.6%;
401
- float: left;
402
- /*浮动区块居中,必须配合.float-center使用*/
403
- position: relative;
404
- left: -60%;
405
- }
406
- .flowmid .flowtext5 {
407
- width: 16.2%;
408
- float: left;
409
- /*浮动区块居中,必须配合.float-center使用*/
410
- position: relative;
411
- left: -57.5%;
412
- }
413
- .flowmid .flowtext6 {
414
- width: 13.1%;
510
+ /* 主节点活动节点样式*/
511
+ .flowmain .flowcircle-active-haierblue {
415
512
  float: left;
513
+ margin-top: 5px;
514
+ width: 22px;
515
+ height: 22px;
516
+ line-height: 22px;
517
+ text-align: center;
518
+ border-radius: 50%;
519
+ color: #fff;
416
520
  /*浮动区块居中,必须配合.float-center使用*/
417
521
  position: relative;
418
- left: -56%;
419
522
  }
420
- .flowmid .flowtext7 {
421
- width: 10.8%;
422
- float: left;
423
- /*浮动区块居中,必须配合.float-center使用*/
424
- position: relative;
425
- left: -54.8%;
523
+ .flowmain .flowcircle-active-haierblue::before {
524
+ border-bottom: 2px solid #5867ad;
525
+ content: '';
526
+ height: 2px;
527
+ width: 100%;
528
+ position: absolute;
529
+ bottom: -4px;
530
+ right: 0;
426
531
  }
427
- .flowmid .flowtext8 {
428
- width: 9.13%;
532
+ .flowmain .flowcircle-active-haierorange {
429
533
  float: left;
534
+ margin-top: 5px;
535
+ width: 22px;
536
+ height: 22px;
537
+ line-height: 22px;
538
+ text-align: center;
539
+ border-radius: 50%;
540
+ color: #fff;
430
541
  /*浮动区块居中,必须配合.float-center使用*/
431
542
  position: relative;
432
- left: -54%;
433
543
  }
434
- .flowmid .flowtext9 {
435
- width: 8%;
436
- float: left;
437
- /*浮动区块居中,必须配合.float-center使用*/
438
- position: relative;
439
- left: -53%;
544
+ .flowmain .flowcircle-active-haierorange::before {
545
+ border-bottom: 2px solid #ad7c59;
546
+ content: '';
547
+ height: 2px;
548
+ width: 100%;
549
+ position: absolute;
550
+ bottom: -4px;
551
+ right: 0;
440
552
  }
553
+ /*renderTop有几个大节点时(3-9)*/
441
554
  .flowmid .floawt1 {
442
555
  text-align: center;
443
556
  height: 24px;
444
557
  line-height: 32px;
445
558
  font-size: 14px;
446
559
  }
560
+ .flowmid .floawt1detail {
561
+ text-align: center;
562
+ height: 24px;
563
+ line-height: 18px;
564
+ font-size: 14px;
565
+ }
447
566
  .flowmid .floawt2 {
448
567
  text-align: center;
449
568
  height: 20px;
@@ -469,7 +588,7 @@
469
588
  .flowbottom .flowdoc {
470
589
  display: inline-block;
471
590
  margin: 0 2px;
472
- height: 35px;
591
+ height: 30px;
473
592
  text-align: center;
474
593
  /*浮动区块居中,必须配合.float-center使用*/
475
594
  position: relative;
@@ -697,12 +816,14 @@
697
816
  }
698
817
  .flowmain .borderblue {
699
818
  border: 1px solid #5867ad;
819
+ border-radius: 4px;
700
820
  }
701
821
  .flowmain .borderorange {
702
822
  border: 1px solid #ad7c59;
703
823
  }
704
824
  .flowmain .borderblueDashed {
705
825
  border: 1px dashed #5867ad;
826
+ border-radius: 4px;
706
827
  }
707
828
  .flowmain .borderorangeDashed {
708
829
  border: 1px dashed #ad7c59;
@@ -715,20 +836,22 @@
715
836
  }
716
837
  .flowmain .flowbottomtextblue {
717
838
  text-align: center;
718
- line-height: 35px;
839
+ line-height: 30px;
719
840
  color: #5867ad;
720
841
  }
721
842
  .flowmain .flowdoc img {
722
843
  display: inline-block;
723
844
  position: absolute;
724
- right: 0;
725
- bottom: 0;
845
+ right: -1px;
846
+ bottom: -1px;
726
847
  z-index: 1;
727
848
  width: 21px;
849
+ border-bottom-right-radius: 4px;
728
850
  }
729
851
  .flowmain .flowbottomtextorange {
730
852
  text-align: center;
731
- line-height: 35px;
853
+ line-height: 30px;
854
+ border-radius: 4px;
732
855
  }
733
856
  .flowmain .flowbottomtextorange a {
734
857
  color: #ad7c59;
@@ -736,8 +859,9 @@
736
859
  }
737
860
  .flowmain .flowbottomtextgrey {
738
861
  text-align: center;
739
- line-height: 35px;
862
+ line-height: 30px;
740
863
  color: #999999;
864
+ border-radius: 4px;
741
865
  }
742
866
  .flowmain .flowbottomtextgrey a {
743
867
  text-align: center;
@@ -858,3 +982,33 @@
858
982
  margin-left: -75px;
859
983
  }
860
984
  /*一个节点*/
985
+ /* 流程图状态颜色 */
986
+ .common {
987
+ height: 12px;
988
+ width: 12px;
989
+ }
990
+ .planDate-style {
991
+ color: #000000;
992
+ font-weight: normal;
993
+ margin-left: 12px;
994
+ }
995
+ .planDate-style .wait-style sup {
996
+ height: 12px;
997
+ width: 12px;
998
+ background-color: #bfbfbf;
999
+ }
1000
+ .planDate-style .delay-style sup {
1001
+ height: 12px;
1002
+ width: 12px;
1003
+ background-color: #fa8c16;
1004
+ }
1005
+ .planDate-style .normal-style sup {
1006
+ height: 12px;
1007
+ width: 12px;
1008
+ background-color: #52c41a;
1009
+ }
1010
+ .planDate-style .normal-style :global .ant-scroll-number,
1011
+ .planDate-style .delay-style :global .ant-scroll-number,
1012
+ .planDate-style .wait-style :global .ant-scroll-number {
1013
+ transform: translate(2px, -2px);
1014
+ }
@@ -1,16 +1,97 @@
1
1
  .ant-upload-list-item {
2
- width: -webkit-max-content;
3
- width: -moz-max-content;
4
- width: max-content;
2
+ width: auto;
5
3
  }
6
4
  .ant-upload-list-item .ant-upload-list-item-info {
7
- width: -webkit-max-content;
8
- width: -moz-max-content;
9
- width: max-content;
5
+ width: auto;
10
6
  }
11
7
  .ant-upload-list-item .anticon-cross {
12
8
  right: -2px;
13
9
  }
10
+ .e3wFormPageNoBorder {
11
+ margin: 12px;
12
+ }
13
+ .e3wFormPageNoBorder > div > .ant-row {
14
+ padding: 3px;
15
+ }
16
+ .e3wFormPageNoBorder > div > .ant-row .ant-btn {
17
+ height: 24px;
18
+ color: #5468b2;
19
+ }
20
+ .e3wFormPageNoBorder .hasAfterBtns :global .ant-calendar-picker {
21
+ min-width: 100% !important;
22
+ }
23
+ .e3wFormPage {
24
+ border-top: 1px solid #e8e8e8;
25
+ border-left: 1px solid #e8e8e8;
26
+ border-right: 1px solid #e8e8e8;
27
+ margin: 12px;
28
+ }
29
+ .e3wFormPage > div > .ant-row {
30
+ padding: 3px;
31
+ border-bottom: 1px solid #e8e8e8;
32
+ }
33
+ .e3wFormPage > div > .ant-row .ant-btn {
34
+ height: 24px;
35
+ color: #5468b2;
36
+ }
37
+ .e3wFormPage .hasAfterBtns :global .ant-calendar-picker {
38
+ min-width: 100% !important;
39
+ }
14
40
  .e3wFormItem .ant-form-item {
15
41
  margin-bottom: 8px;
16
42
  }
43
+ .formContent:not(:first-child) {
44
+ padding-left: 3px;
45
+ }
46
+ .formContent :global .ant-input-group-wrapper {
47
+ vertical-align: middle;
48
+ }
49
+ .formContent :global .ant-form-item-label {
50
+ line-height: 24px;
51
+ }
52
+ .formContent :global .ant-form-item-control {
53
+ line-height: 24px;
54
+ }
55
+ .formContent :global .ant-form-item-required::before {
56
+ margin-left: -10px;
57
+ }
58
+ .formContent :global .ant-form-item-label {
59
+ padding-left: 12px;
60
+ }
61
+ .formContentAlone:not(:first-child) {
62
+ padding-left: 3px;
63
+ }
64
+ .formContentAlone:not(:first-child) {
65
+ padding-left: 3px;
66
+ }
67
+ .formContentAlone :global .ant-input-group-wrapper {
68
+ vertical-align: middle;
69
+ }
70
+ .formContentAlone :global .ant-form-item-label {
71
+ line-height: 24px;
72
+ }
73
+ .formContentAlone :global .ant-form-item-control {
74
+ line-height: 24px;
75
+ }
76
+ .formContentAlone :global .ant-form-item-required::before {
77
+ margin-left: -10px;
78
+ }
79
+ .formContentAlone :global .ant-form-item-label {
80
+ padding-left: 12px;
81
+ }
82
+ .formContentAlone :global .ant-input-number {
83
+ border-radius: 4px 0 0 4px;
84
+ }
85
+ .formContentAlone :global .ant-form-item-required::before {
86
+ margin-left: -10px;
87
+ }
88
+ .formContentAlone :global .ant-form-item-label {
89
+ padding-left: 12px;
90
+ }
91
+ .countContent:after {
92
+ content: attr(data-count);
93
+ color: rgba(0, 0, 0, 0.45);
94
+ pointer-events: none;
95
+ float: right;
96
+ white-space: nowrap;
97
+ }