easy3wui 1.4.247 → 1.4.248

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/assets/flow.css CHANGED
@@ -10,9 +10,130 @@
10
10
  width: 100%;
11
11
  background: #fff;
12
12
  }
13
- .floatcenter {
14
- position: relative;
15
- 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
+ }
38
+ .flowtop .floatcenter .renderTopTemp2 {
39
+ width: calc(100% / 2);
40
+ }
41
+ .flowtop .floatcenter .renderTopTemp2:last-child {
42
+ width: calc((100% / 2 - 22px) / 2 * 3 + 22px);
43
+ }
44
+ .flowtop .floatcenter .renderTopTemp3:first-child {
45
+ width: calc((100% / 3 - 22px) / 2 * 3 + 22px);
46
+ }
47
+ .flowtop .floatcenter .renderTopTemp3 {
48
+ width: calc(100% / 3);
49
+ }
50
+ .flowtop .floatcenter .renderTopTemp3:last-child {
51
+ width: calc((100% / 3 - 22px) / 2 * 3 + 22px);
52
+ }
53
+ .flowtop .floatcenter .renderTopTemp4:first-child {
54
+ width: calc((100% / 4 - 22px) / 2 * 3 + 22px);
55
+ }
56
+ .flowtop .floatcenter .renderTopTemp4 {
57
+ width: calc(100% / 4);
58
+ }
59
+ .flowtop .floatcenter .renderTopTemp4:last-child {
60
+ width: calc((100% / 4 - 22px) / 2 * 3 + 22px);
61
+ }
62
+ .flowtop .floatcenter .renderTopTemp5:first-child {
63
+ width: calc((100% / 5 - 22px) / 2 * 3 + 22px);
64
+ }
65
+ .flowtop .floatcenter .renderTopTemp5 {
66
+ width: calc(100% / 5);
67
+ }
68
+ .flowtop .floatcenter .renderTopTemp5:last-child {
69
+ width: calc((100% / 5 - 22px) / 2 * 3 + 22px);
70
+ }
71
+ .flowtop .floatcenter .renderTopTemp6:first-child {
72
+ width: calc((100% / 6 - 22px) / 2 * 3 + 22px);
73
+ }
74
+ .flowtop .floatcenter .renderTopTemp6 {
75
+ width: calc(100% / 6);
76
+ }
77
+ .flowtop .floatcenter .renderTopTemp6:last-child {
78
+ width: calc((100% / 6 - 22px) / 2 * 3 + 22px);
79
+ }
80
+ .flowtop .floatcenter .renderTopTemp7:first-child {
81
+ width: calc((100% / 7 - 22px) / 2 * 3 + 22px);
82
+ }
83
+ .flowtop .floatcenter .renderTopTemp7 {
84
+ width: calc(100% / 7);
85
+ }
86
+ .flowtop .floatcenter .renderTopTemp7:last-child {
87
+ width: calc((100% / 7 - 22px) / 2 * 3 + 22px);
88
+ }
89
+ .flowtop .floatcenter .renderTopTemp8:first-child {
90
+ width: calc((100% / 8 - 22px) / 2 * 3 + 22px);
91
+ }
92
+ .flowtop .floatcenter .renderTopTemp8 {
93
+ width: calc(100% / 8);
94
+ }
95
+ .flowtop .floatcenter .renderTopTemp8:last-child {
96
+ width: calc((100% / 8 - 22px) / 2 * 3 + 22px);
97
+ }
98
+ .flowtop .floatcenter .renderTopTemp9:first-child {
99
+ width: calc((100% / 9 - 22px) / 2 * 3 + 22px);
100
+ }
101
+ .flowtop .floatcenter .renderTopTemp9 {
102
+ width: calc(100% / 9);
103
+ }
104
+ .flowtop .floatcenter .renderTopTemp9:last-child {
105
+ width: calc((100% / 9 - 22px) / 2 * 3 + 22px);
106
+ }
107
+ .flowmid {
108
+ width: 100%;
109
+ }
110
+ .flowmid .floatcenter {
111
+ width: 90%;
112
+ margin: 0 auto;
113
+ }
114
+ .flowmid .floatcenter div.flowtext2 {
115
+ width: calc(100% / 2);
116
+ }
117
+ .flowmid .floatcenter div.flowtext3 {
118
+ width: calc(100% / 3);
119
+ }
120
+ .flowmid .floatcenter div.flowtext4 {
121
+ width: calc(100% / 4);
122
+ }
123
+ .flowmid .floatcenter div.flowtext5 {
124
+ width: calc(100% / 5);
125
+ }
126
+ .flowmid .floatcenter div.flowtext6 {
127
+ width: calc(100% / 6);
128
+ }
129
+ .flowmid .floatcenter div.flowtext7 {
130
+ width: calc(100% / 7);
131
+ }
132
+ .flowmid .floatcenter div.flowtext8 {
133
+ width: calc(100% / 8);
134
+ }
135
+ .flowmid .floatcenter div.flowtext9 {
136
+ width: calc(100% / 9);
16
137
  }
17
138
  .floatcenter2_1 {
18
139
  position: absolute;
@@ -352,138 +473,6 @@
352
473
  right: 0;
353
474
  }
354
475
  /*renderTop有几个大节点时(3-9)*/
355
- .flowmain .flowline2 {
356
- float: left;
357
- margin-top: 15px;
358
- width: 30.8%;
359
- height: 4px;
360
- /*浮动区块居中,必须配合.float-center使用*/
361
- position: relative;
362
- left: -50%;
363
- }
364
- .flowmain .flowline3 {
365
- float: left;
366
- margin-top: 15px;
367
- width: 30.6%;
368
- height: 4px;
369
- /*浮动区块居中,必须配合.float-center使用*/
370
- position: relative;
371
- left: -50%;
372
- }
373
- .flowmain .flowline4 {
374
- float: left;
375
- margin-top: 15px;
376
- width: 19.8%;
377
- height: 4px;
378
- /*浮动区块居中,必须配合.float-center使用*/
379
- position: relative;
380
- left: -50%;
381
- }
382
- .flowmain .flowline5 {
383
- float: left;
384
- margin-top: 15px;
385
- width: 14.4%;
386
- height: 4px;
387
- /*浮动区块居中,必须配合.float-center使用*/
388
- position: relative;
389
- left: -50%;
390
- }
391
- .flowmain .flowline6 {
392
- float: left;
393
- margin-top: 15px;
394
- width: 11.2%;
395
- height: 4px;
396
- /*浮动区块居中,必须配合.float-center使用*/
397
- position: relative;
398
- left: -50%;
399
- }
400
- .flowmain .flowline7 {
401
- float: left;
402
- margin-top: 15px;
403
- width: 9.03%;
404
- height: 4px;
405
- /*浮动区块居中,必须配合.float-center使用*/
406
- position: relative;
407
- left: -50%;
408
- }
409
- .flowmain .flowline8 {
410
- float: left;
411
- margin-top: 15px;
412
- width: 7.4%;
413
- height: 4px;
414
- /*浮动区块居中,必须配合.float-center使用*/
415
- position: relative;
416
- left: -50%;
417
- }
418
- .flowmain .flowline9 {
419
- float: left;
420
- margin-top: 15px;
421
- width: 6.348%;
422
- height: 4px;
423
- /*浮动区块居中,必须配合.float-center使用*/
424
- position: relative;
425
- left: -50%;
426
- }
427
- .flowmid {
428
- height: 34px;
429
- }
430
- /*renderMid下的有几个flowtext(3-9)*/
431
- .flowmid .flowtext2 {
432
- width: 32.4%;
433
- float: left;
434
- /*浮动区块居中,必须配合.float-center使用*/
435
- position: relative;
436
- left: -65.5%;
437
- }
438
- .flowmid .flowtext3 {
439
- width: 32.4%;
440
- float: left;
441
- /*浮动区块居中,必须配合.float-center使用*/
442
- position: relative;
443
- left: -65.5%;
444
- }
445
- .flowmid .flowtext4 {
446
- width: 21.6%;
447
- float: left;
448
- /*浮动区块居中,必须配合.float-center使用*/
449
- position: relative;
450
- left: -60%;
451
- }
452
- .flowmid .flowtext5 {
453
- width: 16.2%;
454
- float: left;
455
- /*浮动区块居中,必须配合.float-center使用*/
456
- position: relative;
457
- left: -57.5%;
458
- }
459
- .flowmid .flowtext6 {
460
- width: 13.1%;
461
- float: left;
462
- /*浮动区块居中,必须配合.float-center使用*/
463
- position: relative;
464
- left: -56%;
465
- }
466
- .flowmid .flowtext7 {
467
- width: 10.8%;
468
- float: left;
469
- /*浮动区块居中,必须配合.float-center使用*/
470
- position: relative;
471
- left: -54.8%;
472
- }
473
- .flowmid .flowtext8 {
474
- width: 9.13%;
475
- float: left;
476
- /*浮动区块居中,必须配合.float-center使用*/
477
- position: relative;
478
- left: -54%;
479
- }
480
- .flowmid .flowtext9 {
481
- width: 8%;
482
- float: left;
483
- /*浮动区块居中,必须配合.float-center使用*/
484
- position: relative;
485
- left: -53%;
486
- }
487
476
  .flowmid .floawt1 {
488
477
  text-align: center;
489
478
  height: 24px;
package/assets/index.css CHANGED
@@ -455,9 +455,130 @@ s {
455
455
  width: 100%;
456
456
  background: #fff;
457
457
  }
458
- .floatcenter {
459
- position: relative;
460
- left: 67%;
458
+ .flowtop {
459
+ width: 100%;
460
+ }
461
+ .flowtop .floatcenter {
462
+ width: 90%;
463
+ margin: 0 auto;
464
+ /*
465
+ 公式: 线宽 (100% / n -22px) / 2
466
+ 思路:
467
+ 虚拟: 将每个节点 + 左侧线宽 + 右侧线宽看成一个块,所有块组合成整体top 虚拟的每个节点块长度都相等 除了首尾节点 其它节点的宽为: 100% / n
468
+ 实际:
469
+ 第一个节点: 左侧填充一个线宽 + 节点 + 右侧两个线 (100% / n -22px) / 2 * 3 + 22px 节点 + 3个线宽
470
+ 最后一个节点: 节点 + 右侧填充一个线宽 (100% / n -22px) / 2 + 22px 节点 + 1个线宽
471
+ 其它节点: 节点 + 右侧两个线 (100% / n -22px) / 2 * 2 + 22px 节点 + 2个线宽
472
+ 最终确保: 节点 + 填充 + 线 = top宽
473
+ 每个节点都有属于不与其它节点公用的两个线宽的长度
474
+ 构图: -o--o--o-
475
+ 流程节点:
476
+ 节点: 22px
477
+ 线宽: (100% / n -22px) / 2
478
+ */
479
+ }
480
+ .flowtop .floatcenter .renderTopTemp2:first-child {
481
+ width: calc((100% / 2 - 22px) / 2 * 3 + 22px);
482
+ }
483
+ .flowtop .floatcenter .renderTopTemp2 {
484
+ width: calc(100% / 2);
485
+ }
486
+ .flowtop .floatcenter .renderTopTemp2:last-child {
487
+ width: calc((100% / 2 - 22px) / 2 * 3 + 22px);
488
+ }
489
+ .flowtop .floatcenter .renderTopTemp3:first-child {
490
+ width: calc((100% / 3 - 22px) / 2 * 3 + 22px);
491
+ }
492
+ .flowtop .floatcenter .renderTopTemp3 {
493
+ width: calc(100% / 3);
494
+ }
495
+ .flowtop .floatcenter .renderTopTemp3:last-child {
496
+ width: calc((100% / 3 - 22px) / 2 * 3 + 22px);
497
+ }
498
+ .flowtop .floatcenter .renderTopTemp4:first-child {
499
+ width: calc((100% / 4 - 22px) / 2 * 3 + 22px);
500
+ }
501
+ .flowtop .floatcenter .renderTopTemp4 {
502
+ width: calc(100% / 4);
503
+ }
504
+ .flowtop .floatcenter .renderTopTemp4:last-child {
505
+ width: calc((100% / 4 - 22px) / 2 * 3 + 22px);
506
+ }
507
+ .flowtop .floatcenter .renderTopTemp5:first-child {
508
+ width: calc((100% / 5 - 22px) / 2 * 3 + 22px);
509
+ }
510
+ .flowtop .floatcenter .renderTopTemp5 {
511
+ width: calc(100% / 5);
512
+ }
513
+ .flowtop .floatcenter .renderTopTemp5:last-child {
514
+ width: calc((100% / 5 - 22px) / 2 * 3 + 22px);
515
+ }
516
+ .flowtop .floatcenter .renderTopTemp6:first-child {
517
+ width: calc((100% / 6 - 22px) / 2 * 3 + 22px);
518
+ }
519
+ .flowtop .floatcenter .renderTopTemp6 {
520
+ width: calc(100% / 6);
521
+ }
522
+ .flowtop .floatcenter .renderTopTemp6:last-child {
523
+ width: calc((100% / 6 - 22px) / 2 * 3 + 22px);
524
+ }
525
+ .flowtop .floatcenter .renderTopTemp7:first-child {
526
+ width: calc((100% / 7 - 22px) / 2 * 3 + 22px);
527
+ }
528
+ .flowtop .floatcenter .renderTopTemp7 {
529
+ width: calc(100% / 7);
530
+ }
531
+ .flowtop .floatcenter .renderTopTemp7:last-child {
532
+ width: calc((100% / 7 - 22px) / 2 * 3 + 22px);
533
+ }
534
+ .flowtop .floatcenter .renderTopTemp8:first-child {
535
+ width: calc((100% / 8 - 22px) / 2 * 3 + 22px);
536
+ }
537
+ .flowtop .floatcenter .renderTopTemp8 {
538
+ width: calc(100% / 8);
539
+ }
540
+ .flowtop .floatcenter .renderTopTemp8:last-child {
541
+ width: calc((100% / 8 - 22px) / 2 * 3 + 22px);
542
+ }
543
+ .flowtop .floatcenter .renderTopTemp9:first-child {
544
+ width: calc((100% / 9 - 22px) / 2 * 3 + 22px);
545
+ }
546
+ .flowtop .floatcenter .renderTopTemp9 {
547
+ width: calc(100% / 9);
548
+ }
549
+ .flowtop .floatcenter .renderTopTemp9:last-child {
550
+ width: calc((100% / 9 - 22px) / 2 * 3 + 22px);
551
+ }
552
+ .flowmid {
553
+ width: 100%;
554
+ }
555
+ .flowmid .floatcenter {
556
+ width: 90%;
557
+ margin: 0 auto;
558
+ }
559
+ .flowmid .floatcenter div.flowtext2 {
560
+ width: calc(100% / 2);
561
+ }
562
+ .flowmid .floatcenter div.flowtext3 {
563
+ width: calc(100% / 3);
564
+ }
565
+ .flowmid .floatcenter div.flowtext4 {
566
+ width: calc(100% / 4);
567
+ }
568
+ .flowmid .floatcenter div.flowtext5 {
569
+ width: calc(100% / 5);
570
+ }
571
+ .flowmid .floatcenter div.flowtext6 {
572
+ width: calc(100% / 6);
573
+ }
574
+ .flowmid .floatcenter div.flowtext7 {
575
+ width: calc(100% / 7);
576
+ }
577
+ .flowmid .floatcenter div.flowtext8 {
578
+ width: calc(100% / 8);
579
+ }
580
+ .flowmid .floatcenter div.flowtext9 {
581
+ width: calc(100% / 9);
461
582
  }
462
583
  .floatcenter2_1 {
463
584
  position: absolute;
@@ -797,138 +918,6 @@ s {
797
918
  right: 0;
798
919
  }
799
920
  /*renderTop有几个大节点时(3-9)*/
800
- .flowmain .flowline2 {
801
- float: left;
802
- margin-top: 15px;
803
- width: 30.8%;
804
- height: 4px;
805
- /*浮动区块居中,必须配合.float-center使用*/
806
- position: relative;
807
- left: -50%;
808
- }
809
- .flowmain .flowline3 {
810
- float: left;
811
- margin-top: 15px;
812
- width: 30.6%;
813
- height: 4px;
814
- /*浮动区块居中,必须配合.float-center使用*/
815
- position: relative;
816
- left: -50%;
817
- }
818
- .flowmain .flowline4 {
819
- float: left;
820
- margin-top: 15px;
821
- width: 19.8%;
822
- height: 4px;
823
- /*浮动区块居中,必须配合.float-center使用*/
824
- position: relative;
825
- left: -50%;
826
- }
827
- .flowmain .flowline5 {
828
- float: left;
829
- margin-top: 15px;
830
- width: 14.4%;
831
- height: 4px;
832
- /*浮动区块居中,必须配合.float-center使用*/
833
- position: relative;
834
- left: -50%;
835
- }
836
- .flowmain .flowline6 {
837
- float: left;
838
- margin-top: 15px;
839
- width: 11.2%;
840
- height: 4px;
841
- /*浮动区块居中,必须配合.float-center使用*/
842
- position: relative;
843
- left: -50%;
844
- }
845
- .flowmain .flowline7 {
846
- float: left;
847
- margin-top: 15px;
848
- width: 9.03%;
849
- height: 4px;
850
- /*浮动区块居中,必须配合.float-center使用*/
851
- position: relative;
852
- left: -50%;
853
- }
854
- .flowmain .flowline8 {
855
- float: left;
856
- margin-top: 15px;
857
- width: 7.4%;
858
- height: 4px;
859
- /*浮动区块居中,必须配合.float-center使用*/
860
- position: relative;
861
- left: -50%;
862
- }
863
- .flowmain .flowline9 {
864
- float: left;
865
- margin-top: 15px;
866
- width: 6.348%;
867
- height: 4px;
868
- /*浮动区块居中,必须配合.float-center使用*/
869
- position: relative;
870
- left: -50%;
871
- }
872
- .flowmid {
873
- height: 34px;
874
- }
875
- /*renderMid下的有几个flowtext(3-9)*/
876
- .flowmid .flowtext2 {
877
- width: 32.4%;
878
- float: left;
879
- /*浮动区块居中,必须配合.float-center使用*/
880
- position: relative;
881
- left: -65.5%;
882
- }
883
- .flowmid .flowtext3 {
884
- width: 32.4%;
885
- float: left;
886
- /*浮动区块居中,必须配合.float-center使用*/
887
- position: relative;
888
- left: -65.5%;
889
- }
890
- .flowmid .flowtext4 {
891
- width: 21.6%;
892
- float: left;
893
- /*浮动区块居中,必须配合.float-center使用*/
894
- position: relative;
895
- left: -60%;
896
- }
897
- .flowmid .flowtext5 {
898
- width: 16.2%;
899
- float: left;
900
- /*浮动区块居中,必须配合.float-center使用*/
901
- position: relative;
902
- left: -57.5%;
903
- }
904
- .flowmid .flowtext6 {
905
- width: 13.1%;
906
- float: left;
907
- /*浮动区块居中,必须配合.float-center使用*/
908
- position: relative;
909
- left: -56%;
910
- }
911
- .flowmid .flowtext7 {
912
- width: 10.8%;
913
- float: left;
914
- /*浮动区块居中,必须配合.float-center使用*/
915
- position: relative;
916
- left: -54.8%;
917
- }
918
- .flowmid .flowtext8 {
919
- width: 9.13%;
920
- float: left;
921
- /*浮动区块居中,必须配合.float-center使用*/
922
- position: relative;
923
- left: -54%;
924
- }
925
- .flowmid .flowtext9 {
926
- width: 8%;
927
- float: left;
928
- /*浮动区块居中,必须配合.float-center使用*/
929
- position: relative;
930
- left: -53%;
931
- }
932
921
  .flowmid .floawt1 {
933
922
  text-align: center;
934
923
  height: 24px;
@@ -148,7 +148,7 @@ var Easy3wFlow = function (_Component) {
148
148
  }
149
149
  return _react2['default'].createElement(
150
150
  'div',
151
- null,
151
+ { className: (0, _classnames2['default'])('renderTopTemp' + flowData.length) },
152
152
  _react2['default'].createElement(
153
153
  'div',
154
154
  { className:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "easy3wui",
3
- "version": "1.4.247",
3
+ "version": "1.4.248",
4
4
  "description": "easy3wui components for react",
5
5
  "keywords": [
6
6
  "react",