colexiu-website/src/components/zero/index.vue

<template>
  <div class="zero" ref="zero">
    <div data-depth="2.2">
      <p
        class="animate__animated animate__zoomIn"
        style="padding-top: 50px;padding-left: 620px;opacity: .6;font-size: 20px;"
      >直播考试</p>
    </div>
    <div data-depth="4.3">
      <p
        class="animate__animated animate__zoomIn"
        style="padding-top: 50px;margin-left: -620px;opacity: .5;font-size: 20px;"
      >录播考试</p>
    </div>
    <div data-depth="1.5">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: -50px;margin-left: 500px;opacity: .9;font-size: 22px;"
      >考生管理</p>
    </div>
    <div data-depth="1.8">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: -80px;margin-left: 100px;opacity: .8;font-size: 24px;"
      >考试结果查询</p>
    </div>
    <div data-depth="2">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: -50px;margin-left: -300px;opacity: .6;font-size: 20px;"
      >文件视频存储</p>
    </div>
    <div data-depth="3">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: 260px;margin-left: -400px;"
      >功能迭代</p>
    </div>
    <div data-depth="2.5">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: 150px;margin-left: 600px;opacity: .9;font-size: 24px;"
      >运营维护</p>
    </div>
    <div data-depth="2.8">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: 180px;margin-left: -600px;font-size: 22px;"
      >服务器租赁</p>
    </div>
    <div data-depth="1.3">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: 300px;margin-left: 100px;"
      >考试评审</p>
    </div>
    <div data-depth="3.3">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: 350px;margin-left: 500px;opacity: .7;font-size: 24px;"
      >系统研发</p>
    </div>
    <div data-depth="2.3">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: 350px;margin-left: -380px;opacity: .7;font-size: 24px;"
      >视频线路使用</p>
    </div>
    <div data-depth="4.3">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: 270px;margin-left: 450px;"
      >合作单位管理</p>
    </div>
    <div data-depth="1.5">
      <img class="img animate__animated animate__zoomIn" 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: 180px;
    >div{
      width: 100%;
      height: 100%;
      p{
        color: #2DC7AA;
        font-size: 26px;
      }
    }
    .img{
      width: 562px;
    }
  }
</style>