fix

src/components/lifecycle/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="container width1200">
+    <div class="content">
+      <img src="../../assets/images/arrow.png"/>
+      <div class="items">
+        <img
+          class="animate__animated"
+          :class="{animate__fadeInDown: inited ? item[2] : true}"
+          :src="require(`./images/${index + 1}.png`)"
+          v-for="(item, index) in items" :key="index"
+          @mouseenter="mouseenter(index)"
+          :style="{top: item[0] + 'px', left: item[1] + 'px', 'animation-delay': (!inited ? (index * 0.3) + 's' : '0s')}"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const items = [
+  [80, -120, false],
+  [-50, 130, false],
+  [-50, 400, false],
+  [80, 620, false],
+  [240, 400, false],
+  [240, 130, false],
+]
+export default {
+  name: 'lifecycle',
+  data() {
+    return {
+      items,
+      inited: false,
+    }
+  },
+  mounted() {
+    let timer = null
+    timer = setTimeout(() => {
+      this.inited = true
+      clearTimeout(timer)
+    }, 2500)
+  },
+  methods: {
+    mouseenter(index) {
+      let timer = null
+      const _items = [...this.items]
+      _items[index][2] = true
+      this.items = _items
+      setTimeout(() => {
+        this.mouseleave(index)
+        clearTimeout(timer)
+      }, 600)
+    },
+    mouseleave(index) {
+      const _items = [...this.items]
+      _items[index][2] = false
+      this.items = _items
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  .container{
+    .content{
+      position: relative;
+      width: 637px;
+      margin: 100px auto;
+      >img{
+        max-width: 100%;
+      }
+      .items{
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        >img{
+          width: 120px;
+          position: absolute;
+        }
+      }
+    }
+  }
+</style>

src/components/map.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="viewmap">
     <img src="../assets/images/map.png"/>
+    <svg class="lines" width="628" height="445">
+      <line v-for="(item, index) in links" :key="index" :x2="item[0]" :y2="item[1]" x1="445" y1="200" stroke="rgba(0, 153, 255, 0.7)"/>
+    </svg>
     <div class="icon">
       <div class="dot"></div>
       <div class="pluse"></div>
@@ -9,20 +12,63 @@
   </div>
 </template>
 <script>
+const links = [
+  [150, 180],
+  [300, 200],
+  [150, 300],
+  [240, 245],
+  [500, 180],
+  [550, 150],
+  [560, 100],
+  [400, 350],
+  [400, 240],
+  [400, 280],
+  [400, 320],
+  [400, 400],
+  [360, 400],
+  [340, 360],
+  [280, 380],
+  [300, 330],
+  [450, 250],
+  [450, 310],
+  [430, 360],
+  [460, 370],
+]
 export default {
-  name: 'viewmap'
+  name: 'viewmap',
+  data() {
+    return {
+      links,
+      start: [190, 440]
+    }
+  }
 }
 </script>
 <style lang="less" scoped>
   .viewmap{
     width: 628px;
+    margin: auto;
+    position: relative;
     img{
       max-width: 100%;
     }
+    .lines{
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .line{
+      position: absolute;
+    }
     .icon{
       position: absolute;
+      z-index: 999;
       width: 26px;
       height: 26px;
+      top: 188px;
+      left: 430px;
       .dot{
         position: absolute;
         width: 8px;
@@ -99,4 +145,15 @@ export default {
         }
     }
   }
+  line {
+    stroke-dasharray: 1000;
+    stroke-dashoffset: 1000;
+    animation: dash 4s;
+  }
+
+  @keyframes dash {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
 </style>

src/components/safe/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="container">
+    <div class="content">
+      <img
+        class="animate__animated"
+        :class="{animate__fadeInDown: inited ? item[2] : true}"
+        v-for="(item, index) in items"
+        :key="index"
+        @mouseenter="mouseenter(index)"
+        :style="{width: item[3] + 'px', top: item[0] + 'px', left: item[1] + 'px', 'animation-delay': (!inited ? (index * 0.3) + 's' : '0s')}"
+        :src="require(`./images/${index + 1}.png`)"
+      />
+    </div>
+  </div>
+</template>
+<script>
+const items = [
+  [50, 50, false, 421],
+  [120, 220, false, 466],
+  [180, -100, false, 581],
+  [260, -15, false, 520],
+  [340, 190, false, 519],
+]
+export default {
+  name: 'safe',
+  data() {
+    return {
+      items,
+      inited: false,
+    }
+  },
+  mounted() {
+    let timer = null
+    timer = setTimeout(() => {
+      this.inited = true
+      clearTimeout(timer)
+    }, 2500)
+  },
+  methods: {
+    mouseenter(index) {
+      let timer = null
+      const _items = [...this.items]
+      _items[index][2] = true
+      this.items = _items
+      setTimeout(() => {
+        this.mouseleave(index)
+        clearTimeout(timer)
+      }, 600)
+    },
+    mouseleave(index) {
+      const _items = [...this.items]
+      _items[index][2] = false
+      this.items = _items
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  .container{
+    min-height: 500px;
+    .content{
+      width: 581px;
+      margin: 50px auto;
+      position: relative;
+      >img{
+        display: block;
+        position: absolute;
+      }
+    }
+  }
+</style>

src/views/index/blocks/infos.vue

@@ -10,7 +10,10 @@
     <div class="content">
       <transition name="fade">
         <template v-if="active === 0">
-          <p class="desc">信息化赋能打造全流程线上考级模式<br/>随时随地保证用户数据安全，打破时间空间限制将考级生命周期完整呈现</p>
+          <div>
+            <p class="desc">信息化赋能打造全流程线上考级模式<br/>随时随地保证用户数据安全，打破时间空间限制将考级生命周期完整呈现</p>
+            <lifecycle/>
+          </div>
         </template>
       </transition>
       <transition name="fade">
@@ -28,7 +31,10 @@
       </transition>
       <transition name="fade">
         <template v-if="active === 3">
-          <p class="desc">线上化招考流程极大节省考级成本</p>
+          <div>
+            <p class="desc">线上化招考流程极大节省考级成本</p>
+            <safe/>
+          </div>
         </template>
       </transition>
       <transition name="fade">
@@ -41,14 +47,19 @@
 </template>
 <script>
 import viewmap from '@/components/map'
+import lifecycle from '@/components/lifecycle'
+import safe from '@/components/safe'
+
 export default {
   name: 'infos',
   components: {
-    viewmap
+    viewmap,
+    lifecycle,
+    safe,
   },
   data() {
     return {
-      active: 1
+      active: 3
     }
   },
   methods: {