工业互联网平台脚手架前端代码
houzhongjian
2024-09-18 23db5e5c6bfcbd7030a4003cd4ea18fbb920024f
提交 | 用户 | 时间
23db5e 1
H 2 .clearfix {
3     zoom: 1
4 }
5
6 .clearfix:after,
7 .clearfix:before {
8     content: "";
9     display: table
10 }
11
12 .clearfix:after {
13     clear: both
14 }
15
16 @font-face {
17     font-family: anticon;
18     font-display: fallback;
19     src: url("https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.eot");
20     src: url("https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.woff") format("woff"), url("https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.ttf") format("truetype"), url("https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.svg#iconfont") format("svg")
21 }
22
23 .anticon {
24     display: inline-block;
25     font-style: normal;
26     vertical-align: baseline;
27     text-align: center;
28     text-transform: none;
29     line-height: 1;
30     text-rendering: optimizeLegibility;
31     -webkit-font-smoothing: antialiased;
32     -moz-osx-font-smoothing: grayscale
33 }
34
35 .anticon:before {
36     display: block;
37     font-family: anticon!important
38 }
39 .anticon-close:before {
40   content: "\E633"
41 }
42 .anticon-right:before {
43     content: "\E61F"
44 }
45 .anticon-exclamation-circle{
46     color: rgb(242, 86, 67)
47 }
48 .anticon-exclamation-circle:before {
49     content: "\E62C"
50 }
51
52 .anticon-left:before {
53     content: "\E620"
54 }
55
56 .anticon-close-circle:before {
57     content: "\E62E"
58 }
59   
60 .ant-btn {
61     line-height: 1.5;
62     display: inline-block;
63     font-weight: 400;
64     text-align: center;
65     touch-action: manipulation;
66     cursor: pointer;
67     background-image: none;
68     border: 1px solid transparent;
69     white-space: nowrap;
70     padding: 0 15px;
71     font-size: 14px;
72     border-radius: 4px;
73     height: 32px;
74     user-select: none;
75     transition: all .3s cubic-bezier(.645, .045, .355, 1);
76     position: relative;
77     color: rgba(0, 0, 0, .65);
78     background-color: #fff;
79     border-color: #d9d9d9
80 }
81
82 .ant-btn>.anticon {
83     line-height: 1
84 }
85
86 .ant-btn,
87 .ant-btn:active,
88 .ant-btn:focus {
89     outline: 0
90 }
91
92 .ant-btn>a:only-child {
93     color: currentColor
94 }
95
96 .ant-btn>a:only-child:after {
97     content: "";
98     position: absolute;
99     top: 0;
100     left: 0;
101     bottom: 0;
102     right: 0;
103     background: transparent
104 }
105
106 .ant-btn:focus,
107 .ant-btn:hover {
108     color: #40a9ff;
109     background-color: #fff;
110     border-color: #40a9ff
111 }
112
113 .ant-btn:focus>a:only-child,
114 .ant-btn:hover>a:only-child {
115     color: currentColor
116 }
117
118 .ant-btn:focus>a:only-child:after,
119 .ant-btn:hover>a:only-child:after {
120     content: "";
121     position: absolute;
122     top: 0;
123     left: 0;
124     bottom: 0;
125     right: 0;
126     background: transparent
127 }
128
129 .ant-btn.active,
130 .ant-btn:active {
131     color: #096dd9;
132     background-color: #fff;
133     border-color: #096dd9
134 }
135
136 .ant-btn.active>a:only-child,
137 .ant-btn:active>a:only-child {
138     color: currentColor
139 }
140
141 .ant-btn.active>a:only-child:after,
142 .ant-btn:active>a:only-child:after {
143     content: "";
144     position: absolute;
145     top: 0;
146     left: 0;
147     bottom: 0;
148     right: 0;
149     background: transparent
150 }
151
152 .ant-btn.active,
153 .ant-btn:active,
154 .ant-btn:focus,
155 .ant-btn:hover {
156     background: #fff;
157     text-decoration: none
158 }
159
160 .ant-btn>i,
161 .ant-btn>span {
162     pointer-events: none
163 }
164
165 .ant-btn:before {
166     position: absolute;
167     top: -1px;
168     left: -1px;
169     bottom: -1px;
170     right: -1px;
171     background: #fff;
172     opacity: .35;
173     content: "";
174     border-radius: inherit;
175     z-index: 1;
176     transition: opacity .2s;
177     pointer-events: none;
178     display: none
179 }
180
181 .ant-btn .anticon {
182     transition: margin-left .3s cubic-bezier(.645, .045, .355, 1)
183 }
184
185 .ant-btn:active>span,
186 .ant-btn:focus>span {
187     position: relative
188 }
189
190 .ant-btn>.anticon+span,
191 .ant-btn>span+.anticon {
192     margin-left: 8px
193 }
194
195 .ant-input {
196     font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
197     font-variant: tabular-nums;
198     box-sizing: border-box;
199     margin: 0;
200     padding: 0;
201     list-style: none;
202     position: relative;
203     display: inline-block;
204     padding: 4px 11px;
205     width: 100%;
206     height: 32px;
207     font-size: 14px;
208     line-height: 1.5;
209     color: rgba(0, 0, 0, .65);
210     background-color: #fff;
211     background-image: none;
212     border: 1px solid #d9d9d9;
213     border-radius: 4px;
214     transition: all .3s
215 }
216
217 .ant-input::-moz-placeholder {
218     color: #bfbfbf;
219     opacity: 1
220 }
221
222 .ant-input:-ms-input-placeholder {
223     color: #bfbfbf
224 }
225
226 .ant-input::-webkit-input-placeholder {
227     color: #bfbfbf
228 }
229
230 .ant-input:focus,
231 .ant-input:hover {
232     border-color: #40a9ff;
233     border-right-width: 1px!important
234 }
235
236 .ant-input:focus {
237     outline: 0;
238     box-shadow: 0 0 0 2px rgba(24, 144, 255, .2)
239 }
240
241 textarea.ant-input {
242     max-width: 100%;
243     height: auto;
244     vertical-align: bottom;
245     transition: all .3s, height 0s;
246     min-height: 32px
247 }
248
249 a,
250 abbr,
251 acronym,
252 address,
253 applet,
254 article,
255 aside,
256 audio,
257 b,
258 big,
259 blockquote,
260 body,
261 canvas,
262 caption,
263 center,
264 cite,
265 code,
266 dd,
267 del,
268 details,
269 dfn,
270 div,
271 dl,
272 dt,
273 em,
274 fieldset,
275 figcaption,
276 figure,
277 footer,
278 form,
279 h1,
280 h2,
281 h3,
282 h4,
283 h5,
284 h6,
285 header,
286 hgroup,
287 html,
288 i,
289 iframe,
290 img,
291 ins,
292 kbd,
293 label,
294 legend,
295 li,
296 mark,
297 menu,
298 nav,
299 object,
300 ol,
301 p,
302 pre,
303 q,
304 s,
305 samp,
306 section,
307 small,
308 span,
309 strike,
310 strong,
311 sub,
312 summary,
313 sup,
314 table,
315 tbody,
316 td,
317 tfoot,
318 th,
319 thead,
320 time,
321 tr,
322 tt,
323 u,
324 ul,
325 var,
326 video {
327     margin: 0;
328     padding: 0;
329     border: 0;
330     outline: 0;
331     font-size: 100%;
332     font: inherit;
333     vertical-align: baseline
334 }
335
336 *,
337 :after,
338 :before {
339     -webkit-box-sizing: border-box;
340     -moz-box-sizing: border-box;
341     box-sizing: border-box
342 }
343
344 html {
345     font-family: sans-serif;
346     -ms-text-size-adjust: 100%;
347     -webkit-text-size-adjust: 100%
348 }
349
350 body,
351 html {
352     font-size: 14px
353 }
354
355 body {
356     font-family: Microsoft Yahei, Lucida Grande, Lucida Sans Unicode, Helvetica, Arial, Verdana, sans-serif;
357     line-height: 1.6;
358     background-color: #fff;
359     position: static!important;
360     -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
361 }
362
363 ol,
364 ul {
365     list-style-type: none
366 }
367
368 b,
369 strong {
370     font-weight: 700
371 }
372
373 img {
374     border: 0
375 }
376
377 button,
378 input,
379 select,
380 textarea {
381     font-family: inherit;
382     font-size: 100%;
383     margin: 0
384 }
385
386 textarea {
387     overflow: auto;
388     vertical-align: top;
389     -webkit-appearance: none
390 }
391
392 button,
393 input {
394     line-height: normal
395 }
396
397 button,
398 select {
399     text-transform: none
400 }
401
402 button,
403 html input[type=button],
404 input[type=reset],
405 input[type=submit] {
406     -webkit-appearance: button;
407     cursor: pointer
408 }
409
410 input[type=search] {
411     -webkit-appearance: textfield;
412     -moz-box-sizing: content-box;
413     -webkit-box-sizing: content-box;
414     box-sizing: content-box
415 }
416
417 input[type=search]::-webkit-search-cancel-button,
418 input[type=search]::-webkit-search-decoration {
419     -webkit-appearance: none
420 }
421
422 button::-moz-focus-inner,
423 input::-moz-focus-inner {
424     border: 0;
425     padding: 0
426 }
427
428 table {
429     width: 100%;
430     border-spacing: 0;
431     border-collapse: collapse
432 }
433
434 table,
435 td,
436 th {
437     border: 0
438 }
439
440 td,
441 th {
442     padding: 0;
443     vertical-align: top
444 }
445
446 th {
447     font-weight: 700;
448     text-align: left
449 }
450
451 thead th {
452     white-space: nowrap
453 }
454
455 a {
456     text-decoration: none;
457     cursor: pointer;
458     color: #3296fa
459 }
460
461 a:active,
462 a:hover {
463     outline: 0;
464     color: #3296fa
465 }
466
467 small {
468     font-size: 80%
469 }
470
471 body,
472 html {
473     font-size: 12px!important;
474     color: #191f25!important;
475     background: #f6f6f6!important
476 }
477
478 .wrap {
479     display: -webkit-box;
480     display: -ms-flexbox;
481     display: flex;
482     -webkit-box-orient: vertical;
483     -webkit-box-direction: normal;
484     -ms-flex-direction: column;
485     flex-direction: column;
486     height: 100%
487 }
488
489 @font-face {
490     font-family: IconFont;
491     src: url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.eot");
492     src: url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.woff") format("woff"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.ttf") format("truetype"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.svg#IconFont") format("svg")
493 }
494
495 .iconfont {
496     font-family: IconFont!important;
497     font-size: 16px;
498     font-style: normal;
499     -webkit-font-smoothing: antialiased;
500     -webkit-text-stroke-width: .2px;
501     -moz-osx-font-smoothing: grayscale
502 }
503
504 .fd-nav {
505     position: fixed;
506     top: 0;
507     left: 0;
508     right: 0;
509     z-index: 997;
510     width: 100%;
511     height: 60px;
512     font-size: 14px;
513     color: #fff;
514     background: #3296fa;
515     display: flex;
516     align-items: center
517 }
518
519 .fd-nav>* {
520     flex: 1;
521     width: 100%
522 }
523
524 .fd-nav .fd-nav-left {
525     display: -webkit-box;
526     display: flex;
527     align-items: center
528 }
529
530 .fd-nav .fd-nav-center {
531     flex: none;
532     width: 600px;
533     text-align: center
534 }
535
536 .fd-nav .fd-nav-right {
537     display: flex;
538     align-items: center;
539     justify-content: flex-end;
540     text-align: right
541 }
542
543 .fd-nav .fd-nav-back {
544     display: inline-block;
545     width: 60px;
546     height: 60px;
547     font-size: 22px;
548     border-right: 1px solid #1583f2;
549     text-align: center;
550     cursor: pointer
551 }
552
553 .fd-nav .fd-nav-back:hover {
554     background: #5af
555 }
556
557 .fd-nav .fd-nav-back:active {
558     background: #1583f2
559 }
560
561 .fd-nav .fd-nav-back .anticon {
562     line-height: 60px
563 }
564
565 .fd-nav .fd-nav-title {
566     width: 0;
567     flex: 1;
568     overflow: hidden;
569     white-space: nowrap;
570     text-overflow: ellipsis;
571     padding: 0 15px
572 }
573
574 .fd-nav a {
575     color: #fff;
576     margin-left: 12px
577 }
578
579 .fd-nav .button-publish {
580     min-width: 80px;
581     margin-left: 4px;
582     margin-right: 15px;
583     color: #3296fa;
584     border-color: #fff
585 }
586
587 .fd-nav .button-publish.ant-btn:focus,
588 .fd-nav .button-publish.ant-btn:hover {
589     color: #3296fa;
590     border-color: #fff;
591     box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .3)
592 }
593
594 .fd-nav .button-publish.ant-btn:active {
595     color: #3296fa;
596     background: #d6eaff;
597     box-shadow: none
598 }
599
600 .fd-nav .button-preview {
601     min-width: 80px;
602     margin-left: 16px;
603     margin-right: 4px;
604     color: #fff;
605     border-color: #fff;
606     background: transparent
607 }
608
609 .fd-nav .button-preview.ant-btn:focus,
610 .fd-nav .button-preview.ant-btn:hover {
611     color: #fff;
612     border-color: #fff;
613     background: #59acfc
614 }
615
616 .fd-nav .button-preview.ant-btn:active {
617     color: #fff;
618     border-color: #fff;
619     background: #2186ef
620 }
621
622 .fd-nav-content {
623     position: fixed;
624     top: 60px;
625     left: 0;
626     right: 0;
627     bottom: 0;
628     z-index: 1;
629     overflow-x: hidden;
630     overflow-y: auto;
631     padding-bottom: 30px
632 }
633
634 .error-modal-desc {
635     font-size: 13px;
636     color: rgba(25, 31, 37, .56);
637     line-height: 22px;
638     margin-bottom: 14px
639 }
640
641 .error-modal-list {
642     height: 200px;
643     overflow-y: auto;
644     margin-right: -25px;
645     padding-right: 25px
646 }
647
648 .error-modal-item {
649     padding: 10px 20px;
650     line-height: 21px;
651     background: #f6f6f6;
652     display: flex;
653     justify-content: space-between;
654     align-items: center;
655     margin-bottom: 8px;
656     border-radius: 4px
657 }
658
659 .error-modal-item-label {
660     flex: none;
661     font-size: 15px;
662     color: rgba(25, 31, 37, .56);
663     padding-right: 10px
664 }
665
666 .error-modal-item-content {
667     text-align: right;
668     flex: 1;
669     font-size: 13px;
670     color: #191f25
671 }
672
673 #body.blur {
674     -webkit-filter: blur(3px);
675     filter: blur(3px)
676 }
677
678 .zoom {
679     display: flex;
680     position: fixed;
681     -webkit-box-align: center;
682     -ms-flex-align: center;
683     align-items: center;
684     -webkit-box-pack: justify;
685     -ms-flex-pack: justify;
686     justify-content: space-between;
687     height: 40px;
688     width: 125px;
689     right: 40px;
690     margin-top: 30px;
691     z-index: 10
692 }
693
694 .zoom .zoom-in,
695 .zoom .zoom-out {
696     width: 30px;
697     height: 30px;
698     background: #fff;
699     color: #c1c1cd;
700     cursor: pointer;
701     background-size: 100%;
702     background-repeat: no-repeat
703 }
704
705 .zoom .zoom-out {
706     background-image: url(https://gw.alicdn.com/tfs/TB1s0qhBHGYBuNjy0FoXXciBFXa-90-90.png)
707 }
708
709 .zoom .zoom-out.disabled {
710     opacity: .5
711 }
712
713 .zoom .zoom-in {
714     background-image: url(https://gw.alicdn.com/tfs/TB1UIgJBTtYBeNjy1XdXXXXyVXa-90-90.png)
715 }
716
717 .zoom .zoom-in.disabled {
718     opacity: .5
719 }
720
721 .auto-judge:hover .editable-title,
722 .node-wrap-box:hover .editable-title {
723     border-bottom: 1px dashed #fff
724 }
725
726 .auto-judge:hover .editable-title.editing,
727 .node-wrap-box:hover .editable-title.editing {
728     text-decoration: none;
729     border: 1px solid #d9d9d9
730 }
731
732 .auto-judge:hover .editable-title {
733     border-color: #15bc83
734 }
735
736 .editable-title {
737     line-height: 15px;
738     overflow: hidden;
739     white-space: nowrap;
740     text-overflow: ellipsis;
741     border-bottom: 1px dashed transparent
742 }
743
744 .editable-title:before {
745     content: "";
746     position: absolute;
747     top: 0;
748     left: 0;
749     bottom: 0;
750     right: 40px
751 }
752
753 .editable-title:hover {
754     border-bottom: 1px dashed #fff
755 }
756
757 .editable-title-input {
758     flex: none;
759     height: 18px;
760     padding-left: 4px;
761     text-indent: 0;
762     font-size: 12px;
763     line-height: 18px;
764     z-index: 1
765 }
766
767 .editable-title-input:hover {
768     text-decoration: none
769 }
770
771 .ant-btn {
772     position: relative
773 }
774
775 .node-wrap-box {
776     display: -webkit-inline-box;
777     display: -ms-inline-flexbox;
778     display: inline-flex;
779     -webkit-box-orient: vertical;
780     -webkit-box-direction: normal;
781     -ms-flex-direction: column;
782     flex-direction: column;
783     position: relative;
784     width: 220px;
785     min-height: 72px;
786     -ms-flex-negative: 0;
787     flex-shrink: 0;
788     background: #fff;
789     border-radius: 4px;
790     cursor: pointer
791 }
792
793 .node-wrap-box:after {
794     pointer-events: none;
795     content: "";
796     position: absolute;
797     top: 0;
798     bottom: 0;
799     left: 0;
800     right: 0;
801     z-index: 2;
802     border-radius: 4px;
803     border: 1px solid transparent;
804     transition: all .1s cubic-bezier(.645, .045, .355, 1);
805     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1)
806 }
807
808 .node-wrap-box.active:after,
809 .node-wrap-box:active:after,
810 .node-wrap-box:hover:after {
811     border: 1px solid #3296fa;
812     box-shadow: 0 0 6px 0 rgba(50, 150, 250, .3)
813 }
814
815 .node-wrap-box.active .close,
816 .node-wrap-box:active .close,
817 .node-wrap-box:hover .close {
818     display: block
819 }
820
821 .node-wrap-box.error:after {
822     border: 1px solid #f25643;
823     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1)
824 }
825
826 .node-wrap-box .title {
827     position: relative;
828     display: flex;
829     align-items: center;
830     padding-left: 16px;
831     padding-right: 30px;
832     width: 100%;
833     height: 24px;
834     line-height: 24px;
835     font-size: 12px;
836     color: #fff;
837     text-align: left;
838     background: #576a95;
839     border-radius: 4px 4px 0 0
840 }
841
842 .node-wrap-box .title .iconfont {
843     font-size: 12px;
844     margin-right: 5px
845 }
846
847 .node-wrap-box .placeholder {
848     color: #bfbfbf
849 }
850
851 .node-wrap-box .close {
852     display: none;
853     position: absolute;
854     right: 10px;
855     top: 50%;
856     transform: translateY(-50%);
857     width: 20px;
858     height: 20px;
859     font-size: 14px;
860     color: #fff;
861     border-radius: 50%;
862     text-align: center;
863     line-height: 20px
864 }
865
866 .node-wrap-box .content {
867     position: relative;
868     font-size: 14px;
869     padding: 16px;
870     padding-right: 30px
871 }
872
873 .node-wrap-box .content .text {
874     overflow: hidden;
875     text-overflow: ellipsis;
876     display: -webkit-box;
877     -webkit-line-clamp: 3;
878     -webkit-box-orient: vertical
879 }
880
881 .node-wrap-box .content .arrow {
882     position: absolute;
883     right: 10px;
884     top: 50%;
885     transform: translateY(-50%);
886     width: 20px;
887     height: 14px;
888     font-size: 14px;
889     color: #979797
890 }
891
892 .start-node.node-wrap-box .content .text {
893     display: block;
894     white-space: nowrap
895 }
896
897 .node-wrap-box:before {
898     content: "";
899     position: absolute;
900     top: -12px;
901     left: 50%;
902     -webkit-transform: translateX(-50%);
903     transform: translateX(-50%);
904     width: 0;
905     height: 4px;
906     border-style: solid;
907     border-width: 8px 6px 4px;
908     border-color: #cacaca transparent transparent;
909     background: #f5f5f7
910 }
911
912 .node-wrap-box.start-node:before {
913     content: none
914 }
915
916 .top-left-cover-line {
917     left: -1px
918 }
919
920 .top-left-cover-line,
921 .top-right-cover-line {
922     position: absolute;
923     height: 8px;
924     width: 50%;
925     background-color: #f5f5f7;
926     top: -4px
927 }
928
929 .top-right-cover-line {
930     right: -1px
931 }
932
933 .bottom-left-cover-line {
934     left: -1px
935 }
936
937 .bottom-left-cover-line,
938 .bottom-right-cover-line {
939     position: absolute;
940     height: 8px;
941     width: 50%;
942     background-color: #f5f5f7;
943     bottom: -4px
944 }
945
946 .bottom-right-cover-line {
947     right: -1px
948 }
949
950 .dingflow-design {
951     width: 100%;
952     background-color: #f5f5f7;
953     overflow: auto;
954     position: absolute;
955     bottom: 0;
956     left: 0;
957     right: 0;
958     top: 0
959 }
960
961 .dingflow-design .box-scale {
962     transform: scale(1);
963     display: inline-block;
964     position: relative;
965     width: 100%;
966     padding: 54.5px 0;
967     -webkit-box-align: start;
968     -ms-flex-align: start;
969     align-items: flex-start;
970     -webkit-box-pack: center;
971     -ms-flex-pack: center;
972     justify-content: center;
973     -ms-flex-wrap: wrap;
974     flex-wrap: wrap;
975     min-width: -webkit-min-content;
976     min-width: -moz-min-content;
977     min-width: min-content;
978     background-color: #f5f5f7;
979     transform-origin: 50% 0px 0px;
980 }
981
982 .dingflow-design .node-wrap {
983     flex-direction: column;
984     -webkit-box-pack: start;
985     -ms-flex-pack: start;
986     justify-content: flex-start;
987     -webkit-box-align: center;
988     -ms-flex-align: center;
989     align-items: center;
990     -ms-flex-wrap: wrap;
991     flex-wrap: wrap;
992     -webkit-box-flex: 1;
993     -ms-flex-positive: 1;
994     padding: 0 50px;
995     position: relative
996 }
997
998 .dingflow-design .branch-wrap,
999 .dingflow-design .node-wrap {
1000     display: inline-flex;
1001     width: 100%
1002 }
1003
1004 .dingflow-design .branch-box-wrap {
1005     display: flex;
1006     -webkit-box-orient: vertical;
1007     -webkit-box-direction: normal;
1008     -ms-flex-direction: column;
1009     flex-direction: column;
1010     -ms-flex-wrap: wrap;
1011     flex-wrap: wrap;
1012     -webkit-box-align: center;
1013     -ms-flex-align: center;
1014     align-items: center;
1015     min-height: 270px;
1016     width: 100%;
1017     -ms-flex-negative: 0;
1018     flex-shrink: 0
1019 }
1020
1021 .dingflow-design .branch-box {
1022     display: flex;
1023     overflow: visible;
1024     min-height: 180px;
1025     height: auto;
1026     border-bottom: 2px solid #ccc;
1027     border-top: 2px solid #ccc;
1028     position: relative;
1029     margin-top: 15px
1030 }
1031
1032 .dingflow-design .branch-box .col-box {
1033     background: #f5f5f7
1034 }
1035
1036 .dingflow-design .branch-box .col-box:before {
1037     content: "";
1038     position: absolute;
1039     top: 0;
1040     left: 0;
1041     right: 0;
1042     bottom: 0;
1043     z-index: 0;
1044     margin: auto;
1045     width: 2px;
1046     height: 100%;
1047     background-color: #cacaca
1048 }
1049
1050 .dingflow-design .add-branch {
1051     border: none;
1052     outline: none;
1053     user-select: none;
1054     justify-content: center;
1055     font-size: 12px;
1056     padding: 0 10px;
1057     height: 30px;
1058     line-height: 30px;
1059     border-radius: 15px;
1060     color: #3296fa;
1061     background: #fff;
1062     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
1063     position: absolute;
1064     top: -16px;
1065     left: 50%;
1066     transform: translateX(-50%);
1067     transform-origin: center center;
1068     cursor: pointer;
1069     z-index: 1;
1070     display: inline-flex;
1071     align-items: center;
1072     -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
1073     transition: all .3s cubic-bezier(.645, .045, .355, 1)
1074 }
1075
1076 .dingflow-design .add-branch:hover {
1077     transform: translateX(-50%) scale(1.1);
1078     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .1)
1079 }
1080
1081 .dingflow-design .add-branch:active {
1082     transform: translateX(-50%);
1083     box-shadow: none
1084 }
1085
1086 .dingflow-design .col-box {
1087     display: inline-flex;
1088     -webkit-box-orient: vertical;
1089     -webkit-box-direction: normal;
1090     flex-direction: column;
1091     -webkit-box-align: center;
1092     align-items: center;
1093     position: relative
1094 }
1095
1096 .dingflow-design .condition-node {
1097     min-height: 220px
1098 }
1099
1100 .dingflow-design .condition-node,
1101 .dingflow-design .condition-node-box {
1102     display: inline-flex;
1103     -webkit-box-orient: vertical;
1104     -webkit-box-direction: normal;
1105     flex-direction: column;
1106     -webkit-box-flex: 1
1107 }
1108
1109 .dingflow-design .condition-node-box {
1110     padding-top: 30px;
1111     padding-right: 50px;
1112     padding-left: 50px;
1113     -webkit-box-pack: center;
1114     justify-content: center;
1115     -webkit-box-align: center;
1116     align-items: center;
1117     flex-grow: 1;
1118     position: relative
1119 }
1120
1121 .dingflow-design .condition-node-box:before {
1122     content: "";
1123     position: absolute;
1124     top: 0;
1125     left: 0;
1126     right: 0;
1127     bottom: 0;
1128     margin: auto;
1129     width: 2px;
1130     height: 100%;
1131     background-color: #cacaca
1132 }
1133
1134 .dingflow-design .auto-judge {
1135     position: relative;
1136     width: 220px;
1137     min-height: 72px;
1138     background: #fff;
1139     border-radius: 4px;
1140     padding: 14px 19px;
1141     cursor: pointer
1142 }
1143
1144 .dingflow-design .auto-judge:after {
1145     pointer-events: none;
1146     content: "";
1147     position: absolute;
1148     top: 0;
1149     bottom: 0;
1150     left: 0;
1151     right: 0;
1152     z-index: 2;
1153     border-radius: 4px;
1154     border: 1px solid transparent;
1155     transition: all .1s cubic-bezier(.645, .045, .355, 1);
1156     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1)
1157 }
1158
1159 .dingflow-design .auto-judge.active:after,
1160 .dingflow-design .auto-judge:active:after,
1161 .dingflow-design .auto-judge:hover:after {
1162     border: 1px solid #3296fa;
1163     box-shadow: 0 0 6px 0 rgba(50, 150, 250, .3)
1164 }
1165
1166 .dingflow-design .auto-judge.active .close,
1167 .dingflow-design .auto-judge:active .close,
1168 .dingflow-design .auto-judge:hover .close {
1169     display: block
1170 }
1171
1172 .dingflow-design .auto-judge.error:after {
1173     border: 1px solid #f25643;
1174     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1)
1175 }
1176
1177 .dingflow-design .auto-judge .title-wrapper {
1178     position: relative;
1179     font-size: 12px;
1180     color: #15bc83;
1181     text-align: left;
1182     line-height: 16px
1183 }
1184
1185 .dingflow-design .auto-judge .title-wrapper .editable-title {
1186     display: inline-block;
1187     max-width: 120px;
1188     overflow: hidden;
1189     white-space: nowrap;
1190     text-overflow: ellipsis
1191 }
1192
1193 .dingflow-design .auto-judge .title-wrapper .priority-title {
1194     display: inline-block;
1195     float: right;
1196     margin-right: 10px;
1197     color: rgba(25, 31, 37, .56)
1198 }
1199
1200 .dingflow-design .auto-judge .placeholder {
1201     color: #bfbfbf
1202 }
1203
1204 .dingflow-design .auto-judge .close {
1205     display: none;
1206     position: absolute;
1207     right: -10px;
1208     top: -10px;
1209     width: 20px;
1210     height: 20px;
1211     font-size: 14px;
1212     color: rgba(0, 0, 0, .25);
1213     border-radius: 50%;
1214     text-align: center;
1215     line-height: 20px;
1216     z-index: 2
1217 }
1218
1219 .dingflow-design .auto-judge .content {
1220     font-size: 14px;
1221     color: #191f25;
1222     text-align: left;
1223     margin-top: 6px;
1224     overflow: hidden;
1225     text-overflow: ellipsis;
1226     display: -webkit-box;
1227     -webkit-line-clamp: 3;
1228     -webkit-box-orient: vertical
1229 }
1230
1231 .dingflow-design .auto-judge .sort-left,
1232 .dingflow-design .auto-judge .sort-right {
1233     position: absolute;
1234     top: 0;
1235     bottom: 0;
1236     display: none;
1237     z-index: 1
1238 }
1239
1240 .dingflow-design .auto-judge .sort-left {
1241     left: 0;
1242     border-right: 1px solid #f6f6f6
1243 }
1244
1245 .dingflow-design .auto-judge .sort-right {
1246     right: 0;
1247     border-left: 1px solid #f6f6f6
1248 }
1249
1250 .dingflow-design .auto-judge:hover .sort-left,
1251 .dingflow-design .auto-judge:hover .sort-right {
1252     display: flex;
1253     align-items: center
1254 }
1255
1256 .dingflow-design .auto-judge .sort-left:hover,
1257 .dingflow-design .auto-judge .sort-right:hover {
1258     background: #efefef
1259 }
1260
1261 .dingflow-design .end-node {
1262     border-radius: 50%;
1263     font-size: 14px;
1264     color: rgba(25, 31, 37, .4);
1265     text-align: left
1266 }
1267
1268 .dingflow-design .end-node .end-node-circle {
1269     width: 10px;
1270     height: 10px;
1271     margin: auto;
1272     border-radius: 50%;
1273     background: #dbdcdc
1274 }
1275
1276 .dingflow-design .end-node .end-node-text {
1277     margin-top: 5px;
1278     text-align: center
1279 }
1280
1281 .approval-setting {
1282     border-radius: 2px;
1283     margin: 20px 0;
1284     position: relative;
1285     background: #fff
1286 }
1287
1288 .ant-btn {
1289     position: relative
1290 }
1291
1292