<template>
  <div class="zero" ref="zero">
    <div data-depth="0.2">
      <p
        class="animate__animated animate__zoomIn"
        style="padding-top: 0px;padding-left: 560px;opacity: .8;font-size: 22px;"
      >视频线路使用</p>
    </div>
    <div data-depth="0.2">
      <p
        class="animate__animated animate__zoomIn"
        style="padding-top: 50px;margin-left: -640px;opacity: .8;font-size: 20px;"
      >录播考试</p>
    </div>
    <div data-depth="0.5">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: -70px;margin-left: 280px;opacity: .6;font-size: 22px;"
      >考试结果查询</p>
    </div>
    <div data-depth="0.8">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: -130px;margin-left: 100px;opacity: .9;font-size: 24px;"
      >考生管理</p>
    </div>
    <div data-depth="0.4">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: -30px;margin-left: -400px;opacity: .6;font-size: 20px;"
      >文件视频存储</p>
    </div>
    <div data-depth="0.6">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: 240px;margin-left: -420px;"
      >功能迭代</p>
    </div>
    <div data-depth="0.5">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: 150px;margin-left: 600px;opacity: .9;font-size: 24px;"
      >运营维护</p>
    </div>
    <div data-depth="0.8">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: 180px;margin-left: -600px;font-size: 22px;"
      >服务器租赁</p>
    </div>
    <div data-depth="0.3">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: 330px;margin-left: 80px;font-size: 22px;"
      >考试评审</p>
    </div>
    <div data-depth="0.5">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: 310px;margin-left: -200px;opacity: .7;font-size: 24px;"
      >系统研发</p>
    </div>
    <div data-depth="0.3">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: -100px;margin-left: -200px;opacity: .9;font-size: 24px;"
      >直播考试</p>
    </div>
    <div data-depth="0.7">
      <p
        class="animate__animated animate__zoomIn"
        style="margin-top: 240px;margin-left: 450px;"
      >合作单位管理</p>
    </div>
    <div data-depth="1">
      <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>
