From 7cb23f435b2c3f8700d8bcb1ce2a4afc1b18728d Mon Sep 17 00:00:00 2001
From: wangwei <wangwei124@hisense.com>
Date: Fri, 6 Jan 2023 14:31:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E6=89=8B=E6=8C=87=E5=8D=97-=E7=BC=BA?=
 =?UTF-8?q?=E5=B0=91=E5=8A=A8=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/assets/menu/line-flow.png           | Bin 0 -> 2719 bytes
 .../components/TheOverallProcess.vue          |  79 ++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 front/src/assets/menu/line-flow.png

diff --git a/front/src/assets/menu/line-flow.png b/front/src/assets/menu/line-flow.png
new file mode 100644
index 0000000000000000000000000000000000000000..76079145222e6d0fb011ae9b7e82e5d0e07496f3
GIT binary patch
literal 2719
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
K>=U60dH(^%a9fuE

literal 0
HcmV?d00001

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 @@
       <span class="xv-qui-zhong-xin">需求中心</span>
       <span class="neng-li-shen-qing-liu-cheng">能力申请流程</span>
       <span class="neng-li-xv-qiu-liu-cheng">能力需求流程</span>
+      <i class="data-property-library-flow absolute flow-1"></i>
+      <i class="data-property-library-flow absolute flow-2"></i>
+      <i class="data-property-library-flow absolute flow-3"></i>
+      <i class="data-property-library-flow absolute flow-4"></i>
+      <i class="data-property-library-flow absolute flow-5"></i>
+      <i class="data-property-library-flow absolute flow-6"></i>
+      <i class="data-property-library-flow absolute flow-7"></i>
+      <i class="data-property-library-flow absolute flow-8"></i>
+      <i class="data-property-library-flow absolute flow-9"></i>
     </div>
   </div>
 </template>
@@ -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%;
+          }
+      }
     }
   }
 </style>