<template lang="html">
  <div class="startVue">

    <div class="center">
      <img class="logo" src="static/img/logo.png" alt="">
      <img class="2019" src="static/img/2019.png" alt="">
      <span class="start" @click="start()">start</span>
      <div class="lightPoint">
        <div class="pointGroup" v-for="(n, i) in 4" :key="i">
          <i class="point" v-for="(m, j) in 5" :key="j" :style="{ 'animation-delay': `${j * 0.2}s` }"></i>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    globalData: {}
  },
  methods: {
    start () {
      this.$set(this.globalData, 'step', 2)
    }
  }
}
</script>

<style lang="scss" scoped>
.startVue{
  .center{
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    .logo{
      margin-bottom: 20px;
    }
    .start{
      display: inline-block;
      width: 154px;
      height: 52px;
      line-height: calc(52px - 2px * 2);
      text-align: center;
      border-radius: 52px;
      color: #3DCEFD;
      border: 2px solid currentColor;
      font-size: 36px;
      cursor: pointer;
      margin-top: 60px;
    }
    .lightPoint{
      margin-bottom: 5px;
      .pointGroup{
        display: flex;
        flex-direction: column;
        align-items: center;
        .point{
          display: block;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #3DCEFD;
          margin-top: 13px;
          animation-name: opacityChange;
          animation-duration: 1s;
          animation-timing-function: linear;
          animation-delay: 0s;
          animation-iteration-count: infinite;
          // animation-direction: alternate;
        }
      }
    }
  }
}
@keyframes opacityChange {
  from {
    opacity: 1;
  }
  to {
    opacity: .2;
  }
}
</style>
