fix

package-lock.json

@@ -6158,8 +6158,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fobject-assign%2Fdownload%2Fobject-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -6447,6 +6446,15 @@
       "integrity": "sha1-bJWZ00DVTf05RjgCUqNXBaa5kr8=",
       "dev": true
     },
+    "parallax-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/parallax-js/-/parallax-js-3.1.0.tgz",
+      "integrity": "sha512-UONoPKSQykeNvFcemDPxYYDU/T89LSffoaZAwOMhDp0ABhmFPwthgn2GrfB7An9Qo+8nPZIuQeZsh2pWn1qN3A==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "raf": "^3.3.0"
+      }
+    },
     "parallel-transform": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/parallel-transform/download/parallel-transform-1.2.0.tgz",
@@ -6572,6 +6580,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
+    },
     "picomatch": {
       "version": "2.2.2",
       "resolved": "https://registry.npm.taobao.org/picomatch/download/picomatch-2.2.2.tgz",
@@ -9091,6 +9104,14 @@
       "integrity": "sha1-M0WUG0FTy50ILY7uTNogFqmu9/Y=",
       "dev": true
     },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/randombytes/download/randombytes-2.1.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "animate.css": "^4.1.1",
     "axios": "^0.20.0",
     "element-ui": "^2.13.2",
+    "parallax-js": "^3.1.0",
     "qs": "^6.9.4",
     "swiper": "^6.2.0",
     "vue": "^2.5.2",

src/components/efficient/index.vue

@@ -1,5 +1,17 @@
 <template>
-  <div>12321</div>
+  <div class="efficient">
+    <div class="content">
+      <div>
+        <img class="img3 animate__animated animate__fadeInTopRight" src="./images/3.png"/>
+      </div>
+      <div>
+        <img class="img1 animate__animated animate__fadeInTopLeft" src="./images/1.png"/>
+      </div>
+      <div>
+        <img class="img2 animate__animated animate__fadeInBottomRight" src="./images/2.png"/>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 export default {
@@ -7,5 +19,33 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-
+  .efficient{
+    .content{
+      margin: auto;
+      position: relative;
+      .img1{
+        width: 466px;
+        top: 50px;
+        left: 290px;
+      }
+      .img2{
+        width: 636px;
+        top: 150px;
+        left: 350px;
+      }
+      .img3{
+        width: 93px;
+        top: 80px;
+        left: 700px;
+      }
+      >div{
+        padding: 30px;
+        >img{
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+      }
+    }
+  }
 </style>

src/components/map.vue

@@ -48,6 +48,7 @@ export default {
   .viewmap{
     width: 628px;
     margin: auto;
+    margin-top: 100px;
     position: relative;
     img{
       max-width: 100%;

src/components/safe/index.vue

@@ -6,7 +6,6 @@
         :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`)"
       />

src/components/zero/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="zero" ref="zero">
+    <div data-depth="2.2">
+      <p style="padding-top: 50px;padding-left: 600px;opacity: .6;font-size: 20px;">直播考试</p>
+    </div>
+    <div data-depth="4.3">
+      <p style="padding-top: 100px;margin-left: -700px;opacity: .5;font-size: 20px;">录播考试</p>
+    </div>
+    <div data-depth="1.5">
+      <p style="margin-top: 10px;margin-left: -700px;opacity: .9;font-size: 22px;">考生管理</p>
+    </div>
+    <div data-depth="1.8">
+      <p style="margin-top: -80px;margin-left: 100px;opacity: .8;font-size: 24px;">考试结果查询</p>
+    </div>
+    <div data-depth="2">
+      <p style="margin-top: -50px;margin-left: -300px;opacity: .6;font-size: 20px;">文件视频存储</p>
+    </div>
+    <div data-depth="3">
+      <p style="margin-top: 260px;margin-left: -400px;">功能迭代</p>
+    </div>
+    <div data-depth="2.5">
+      <p style="margin-top: 150px;margin-left: 550px;opacity: .9;font-size: 24px;">运营维护</p>
+    </div>
+    <div data-depth="2.8">
+      <p style="margin-top: 180px;margin-left: -600px;">服务器租赁</p>
+    </div>
+    <div data-depth="1.3">
+      <p style="margin-top: 350px;margin-left: 100px;">考试评审</p>
+    </div>
+    <div data-depth="3.3">
+      <p style="margin-top: 350px;margin-left: 500px;opacity: .7;font-size: 24px;">系统研发</p>
+    </div>
+    <div data-depth="2.3">
+      <p style="margin-top: 350px;margin-left: -380px;opacity: .7;font-size: 24px;">视频线路使用</p>
+    </div>
+    <div data-depth="4.3">
+      <p style="margin-top: 270px;margin-left: 400px;">合作单位管理</p>
+    </div>
+    <div data-depth="1.5">
+      <img class="img" src="./images/bg.png"/>
+    </div>
+  </div>
+</template>
+<script>
+import Parallax from 'parallax-js'
+export default {
+  name: 'zero',
+  mounted() {
+    const parallaxInstance = new Parallax(this.$refs.zero, {
+      // relativeInput: true,
+      hoverOnly: true,
+    })
+    // parallaxInstance.friction(0.2, 0.2)
+  }
+}
+</script>
+<style lang="less" scoped>
+  .zero{
+    width: 700px;
+    margin: auto;
+    min-height: 300px;
+    margin-top: 120px;
+    >div{
+      width: 100%;
+      height: 100%;
+      p{
+        color: #2DC7AA;
+        font-size: 26px;
+      }
+    }
+    .img{
+      width: 562px;
+    }
+  }
+</style>

src/views/index/blocks/infos.vue

@@ -6,7 +6,7 @@
         <span @click="setActive(1)" :class="{active: active === 1}">生源拓展</span>
         <span @click="setActive(2)" :class="{active: active === 2}">高效管理</span>
         <span @click="setActive(3)" :class="{active: active === 3}">节省成本</span>
-        <span @click="setActive(4)" :class="{active: active === 4}">零收入投入</span>
+        <span @click="setActive(4)" :class="{active: active === 4}">零收入使用</span>
       </header>
       <div class="content">
         <transition name="fade">
@@ -27,7 +27,10 @@
         </transition>
         <transition name="fade">
           <template v-if="active === 2">
-            <p class="desc">考级全流程节点跟进，<strong>极大提升管理效率</strong></p>
+            <div>
+              <p class="desc">考级全流程节点跟进，<strong>极大提升管理效率</strong></p>
+              <efficient/>
+            </div>
           </template>
         </transition>
         <transition name="fade">
@@ -40,7 +43,10 @@
         </transition>
         <transition name="fade">
           <template v-if="active === 4">
-            <p class="desc"><strong>零投入</strong>，平台研发完善可立即使用</p>
+            <div>
+              <p class="desc"><strong>零投入</strong>，平台研发完善可立即使用</p>
+              <zero/>
+            </div>
           </template>
         </transition>
       </div>
@@ -51,6 +57,8 @@
 import viewmap from '@/components/map'
 import lifecycle from '@/components/lifecycle'
 import safe from '@/components/safe'
+import efficient from '@/components/efficient'
+import zero from '@/components/zero'
 
 export default {
   name: 'infos',
@@ -58,10 +66,12 @@ export default {
     viewmap,
     lifecycle,
     safe,
+    efficient,
+    zero,
   },
   data() {
     return {
-      active: 3
+      active: 4
     }
   },
   methods: {