diff --git a/front/src/assets/menu/line-flow.png b/front/src/assets/menu/line-flow.png new file mode 100644 index 00000000..76079145 Binary files /dev/null and b/front/src/assets/menu/line-flow.png differ diff --git a/front/src/views/instructionManual/components/TheOverallProcess.vue b/front/src/views/instructionManual/components/TheOverallProcess.vue index a09fb3e8..a207e4b7 100644 --- a/front/src/views/instructionManual/components/TheOverallProcess.vue +++ b/front/src/views/instructionManual/components/TheOverallProcess.vue @@ -21,6 +21,15 @@ 需求中心 能力申请流程 能力需求流程 + + + + + + + + + @@ -47,6 +56,7 @@ } } .TheOverallProcess-content { + width:1920px; height: 855px; background: url('~@/assets/menu/TheOverallProcess-bg.png'); position: relative; @@ -166,6 +176,75 @@ left: 125px; top: 102px; } + .data-property-library-flow { + width: 50px; + height: 38px; + background-image: url("~@/assets/menu/line-flow.png"); + } + .absolute { + position: absolute; + } + .flow-1 { + offset-path: path("m982,198c0,0 0,68 0,68"); + animation: move 2s linear infinite; + -webkit-animation: move 2s linear infinite; + } + .flow-2 { + offset-path: path("m928,281c0,0 0,-71 0,-71"); + animation: move 2s linear infinite; + -webkit-animation: move 2s linear infinite; + } + .flow-3 { + offset-path: path("m539,359c0,0 318,-1 318,-1"); + animation: move 2s linear infinite; + -webkit-animation: move 2s linear infinite; + animation-delay: 1s; + -webkit-animation-delay: 1s; + } + .flow-4 { + offset-path: path("m856,412c0,0 -308,0 -308,0"); + animation: move 3s linear infinite; + -webkit-animation: move 3s linear infinite; + animation-delay: 2s; + -webkit-animation-delay: 2s; + } + .flow-5 { + offset-path: path("m454,480c0,0 0,160 0,160c0,0 401,0 401,0"); + animation: move 4s linear infinite; + -webkit-animation: move 4s linear infinite; + } + .flow-6 { + offset-path: path("m402,478c0,0 0,295 0,295c0,0 1067,0 1067,0c0,0 -1,-273 -1,-273"); + animation: move 6s linear infinite; + -webkit-animation: move 6s linear infinite; + } + .flow-7 { + offset-path: path("m1392,383c0,0 -332,0 -332,0"); + animation: move 2s linear infinite; + -webkit-animation: move 2s linear infinite; + } + .flow-8 { + offset-path: path("m1457,295c0,0 0,-181 0,-181c0,0 -397,0 -397,0"); + animation: move 3s linear infinite; + -webkit-animation: move 3s linear infinite; + animation-delay: 1s; + -webkit-animation-delay: 1s; + } + .flow-9 { + offset-path: path("m955,483c0,0 0,74 0,74"); + animation: move 2s linear infinite; + -webkit-animation: move 2s linear infinite; + animation-delay: 1s; + -webkit-animation-delay: 1s; + } + @keyframes move { + 0% { + offset-distance: 0%; + } + 100% { + offset-distance: 100%; + } + } } }