workflow.css 24 KB

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